Use SplitPanel for template page. Add vertical/horizontal option. Cleanup, use flexbox.

.github/actions/build/action.yml

@@ -1,23 +0,0 @@
-name: Build frontend target
-description: Run a gulp build target
-
-inputs:
-  target:
-    description: gulp target to run
-    required: true
-  github-token:
-    description: GitHub token for fetching nightly translations; omit to build English-only
-    default: ""
-  is-test:
-    description: Set IS_TEST for the build (skips source maps and compression)
-    default: "false"
-
-runs:
-  using: composite
-  steps:
-    - name: Build ${{ inputs.target }}
-      shell: bash
-      run: ./node_modules/.bin/gulp ${{ inputs.target }}
-      env:
-        GITHUB_TOKEN: ${{ inputs.github-token }}
-        IS_TEST: ${{ inputs.is-test }}

.github/actions/netlify-deploy/action.yml

@@ -1,40 +0,0 @@
-name: Deploy to Netlify
-description: Deploy a directory to Netlify (production when alias is empty, otherwise to the alias)
-
-inputs:
-  dir:
-    description: Directory to deploy
-    required: true
-  alias:
-    description: Deploy alias; leave empty to deploy to production
-    default: ""
-  auth-token:
-    description: NETLIFY_AUTH_TOKEN
-    required: true
-  site-id:
-    description: NETLIFY_SITE_ID
-    required: true
-
-outputs:
-  netlify_url:
-    description: The deployed URL
-    value: ${{ steps.deploy.outputs.netlify_url }}
-
-runs:
-  using: composite
-  steps:
-    - name: Deploy to Netlify
-      id: deploy
-      shell: bash
-      env:
-        DIR: ${{ inputs.dir }}
-        ALIAS: ${{ inputs.alias }}
-        NETLIFY_AUTH_TOKEN: ${{ inputs.auth-token }}
-        NETLIFY_SITE_ID: ${{ inputs.site-id }}
-      run: |
-        if [ -n "$ALIAS" ]; then
-          npx -y netlify-cli deploy --dir="$DIR" --alias "$ALIAS" --json > deploy_output.json
-        else
-          npx -y netlify-cli deploy --dir="$DIR" --prod --json > deploy_output.json
-        fi
-        echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"

.github/actions/setup/action.yml

@@ -1,23 +0,0 @@
-name: Setup Node and install
-description: Set up Node from .nvmrc and install yarn dependencies
-
-inputs:
-  immutable:
-    description: Pass --immutable to yarn install
-    default: "true"
-  cache:
-    description: Enable the yarn cache in setup-node
-    default: "true"
-
-runs:
-  using: composite
-  steps:
-    - name: Setup Node
-      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-      with:
-        node-version-file: ".nvmrc"
-        cache: ${{ inputs.cache == 'true' && 'yarn' || '' }}
-
-    - name: Install dependencies
-      shell: bash
-      run: yarn install ${{ inputs.immutable == 'true' && '--immutable' || '' }}

.github/dependabot.yml

@@ -1,14 +1,7 @@
 version: 2
 updates:
   - package-ecosystem: "github-actions"
-    # Dependabot only scans .github/workflows by default; composite actions
-    # under .github/actions must be listed explicitly to stay updated.
-    # https://github.com/dependabot/dependabot-core/issues/6704
-    directories:
-      - "/"
-      - "/.github/actions/setup"
-      - "/.github/actions/build"
-      - "/.github/actions/netlify-deploy"
+    directory: "/"
     schedule:
       interval: weekly
       time: "06:00"

.github/labeler.yml

@@ -42,6 +42,5 @@ Dependencies:
 GitHub Actions:
   - changed-files:
       - any-glob-to-any-file:
-          - .github/actions/**
           - .github/workflows/**
           - .github/*.yml

.github/scripts/check-task-authorization.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // Restricts Task issues to organization members: closes and labels the issue with
 // an explanatory comment when the author is not an org member. Invoked from the
-// `check-authorization` job in .github/workflows/restrict-task-creation.yaml via
+// `check-authorization` job in .github/workflows/restrict-task-creation.yml via
 // actions/github-script:
 //
 //   const { default: checkTaskAuthorization } =

.github/workflows/actionlint.yaml

@@ -6,14 +6,12 @@ on:
       - dev
       - master
     paths:
-      - ".github/actions/**"
       - ".github/workflows/**"
   pull_request:
     branches:
       - dev
       - master
     paths:
-      - ".github/actions/**"
       - ".github/workflows/**"
 
 concurrency:

.github/workflows/cast_deployment.yaml

@@ -29,23 +29,28 @@ jobs:
           ref: dev
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build Cast
-        uses: ./.github/actions/build
-        with:
-          target: build-cast
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-cast
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        uses: ./.github/actions/netlify-deploy
-        with:
-          dir: cast/dist
-          alias: dev
-          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          site-id: ${{ secrets.NETLIFY_CAST_SITE_ID }}
+        run: |
+          npx -y netlify-cli deploy --dir=cast/dist --alias dev --json > deploy_output.json
+          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
 
   deploy_master:
     runs-on: ubuntu-latest
@@ -61,19 +66,25 @@ jobs:
           ref: master
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build Cast
-        uses: ./.github/actions/build
-        with:
-          target: build-cast
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-cast
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        uses: ./.github/actions/netlify-deploy
-        with:
-          dir: cast/dist
-          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          site-id: ${{ secrets.NETLIFY_CAST_SITE_ID }}
+        run: |
+          npx -y netlify-cli deploy --dir=cast/dist --prod --json > deploy_output.json
+          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -12,6 +12,7 @@ on:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -29,15 +30,17 @@ jobs:
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --immutable
       - name: Check for duplicate dependencies
         run: yarn dedupe --check
       - name: Build resources
-        id: build_resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Setup lint cache
         uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
@@ -50,16 +53,12 @@ jobs:
       - name: Run eslint
         run: yarn run lint:eslint --quiet
       - name: Run tsc
-        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:types
       - name: Run lit-analyzer
-        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:lit --quiet
       - name: Run prettier
-        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:prettier
       - name: Check dependency licenses
-        if: ${{ !cancelled() && steps.build_resources.outcome == 'success' }}
         run: yarn run lint:licenses
   test:
     name: Run tests
@@ -69,33 +68,37 @@ jobs:
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --immutable
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Run Tests
         run: yarn run test
   build:
     name: Build frontend
-    needs:
-      - lint
-      - test
+    needs: [lint, test]
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
-      - name: Build Application
-        uses: ./.github/actions/build
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          target: build-app
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          is-test: true
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Build Application
+        run: ./node_modules/.bin/gulp build-app
+        env:
+          IS_TEST: "true"
       - name: Upload bundle stats
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.github/workflows/demo_deployment.yaml

@@ -30,22 +30,28 @@ jobs:
           ref: dev
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build Demo
-        uses: ./.github/actions/build
-        with:
-          target: build-demo
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        uses: ./.github/actions/netlify-deploy
-        with:
-          dir: demo/dist
-          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          site-id: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
+        run: |
+          npx -y netlify-cli deploy --dir=demo/dist --prod --json > deploy_output.json
+          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
 
   deploy_master:
     runs-on: ubuntu-latest
@@ -61,19 +67,25 @@ jobs:
           ref: master
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build Demo
-        uses: ./.github/actions/build
-        with:
-          target: build-demo
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        uses: ./.github/actions/netlify-deploy
-        with:
-          dir: demo/dist
-          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          site-id: ${{ secrets.NETLIFY_DEMO_SITE_ID }}
+        run: |
+          npx -y netlify-cli deploy --dir=demo/dist --prod --json > deploy_output.json
+          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -23,19 +23,25 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build Gallery
-        uses: ./.github/actions/build
-        with:
-          target: build-gallery
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Netlify
         id: deploy
-        uses: ./.github/actions/netlify-deploy
-        with:
-          dir: gallery/dist
-          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          site-id: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
+        run: |
+          npx -y netlify-cli deploy --dir=gallery/dist --prod --json > deploy_output.json
+          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -28,23 +28,29 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build Gallery
-        uses: ./.github/actions/build
-        with:
-          target: build-gallery
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy preview to Netlify
         id: deploy
-        uses: ./.github/actions/netlify-deploy
-        with:
-          dir: gallery/dist
-          alias: deploy-preview-${{ github.event.number }}
-          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          site-id: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
+        run: |
+          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+            --json > deploy_output.json
+          echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
 
       - name: Generate summary
         run: echo "${{ steps.deploy.outputs.netlify_url }}" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/e2e.yaml

@@ -32,14 +32,19 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build demo
-        uses: ./.github/actions/build
-        with:
-          target: build-demo
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload demo build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -59,14 +64,19 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build e2e test app
-        uses: ./.github/actions/build
-        with:
-          target: build-e2e-test-app
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-e2e-test-app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload e2e test app build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -86,14 +96,19 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Build gallery
-        uses: ./.github/actions/build
-        with:
-          target: build-gallery
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload gallery build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -118,22 +133,22 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
 
-      # Resolve the installed Playwright version so the browser cache tracks
-      # Playwright itself, not every unrelated dependency bump.
-      - name: Resolve Playwright version
-        id: playwright-version
-        run: echo "version=$(node -p 'require("@playwright/test/package.json").version')" >> "$GITHUB_OUTPUT"
+      - name: Install dependencies
+        run: yarn install --immutable
 
-      # Cache the downloaded browser build keyed on the installed Playwright
-      # version, so re-runs skip the ~170 MB download unless Playwright changes.
+      # Cache the downloaded browser build keyed on the pinned Playwright
+      # version (yarn.lock), so re-runs skip the ~170 MB download.
       - name: Cache Playwright browsers
         uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
           path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
 
       - name: Install Playwright browsers
         run: yarn playwright install --with-deps chromium
@@ -184,8 +199,14 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Download blob report (local)
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1

.github/workflows/nightly.yaml

@@ -29,10 +29,14 @@ jobs:
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          immutable: false
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
 
       - name: Download translations
         run: ./script/translations_download

.github/workflows/release.yaml

@@ -38,11 +38,13 @@ jobs:
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@f4ca6f671bd429efb108c0f2fa0ae8af0215986c # master
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          immutable: false
-          cache: false
+          node-version-file: ".nvmrc"
+
+      - name: Install dependencies
+        run: yarn install
 
       - name: Download Translations
         run: ./script/translations_download
@@ -114,11 +116,12 @@ jobs:
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          immutable: false
-          cache: false
+          node-version-file: ".nvmrc"
+      - name: Install dependencies
+        run: yarn install
       - name: Download Translations
         run: ./script/translations_download
         env:

.github/workflows/sync-numeric-device-classes.yaml

@@ -22,11 +22,15 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with:
-          persist-credentials: false
 
-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      - name: Set up Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
       - name: Regenerate numeric device classes
         run: ./script/gen_numeric_device_classes

.github/workflows/translations.yaml

@@ -6,7 +6,6 @@ on:
     branches:
       - dev
     paths:
-      - .github/workflows/translations.yaml
       - src/translations/en.json
 
 permissions:
@@ -23,6 +22,6 @@ jobs:
           persist-credentials: false
 
       - name: Upload Translations
-        run: ./script/translations_upload_base
-        env:
-          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+        run: |
+          export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
+          ./script/translations_upload_base

.gitignore

@@ -6,8 +6,6 @@ build/
 dist/
 /hass_frontend/
 /translations/
-# Composite action source, not build output
-!/.github/actions/build/
 
 # yarn
 .yarn/*

package.json

@@ -152,7 +152,7 @@
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.61.1",
     "@rsdoctor/rspack-plugin": "1.5.17",
-    "@rspack/core": "2.1.2",
+    "@rspack/core": "2.1.1",
     "@rspack/dev-server": "2.1.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",

src/components/ha-split-panel.ts

@@ -0,0 +1,68 @@
+import SplitPanel from "@home-assistant/webawesome/dist/components/split-panel/split-panel";
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-split-panel")
+export class HaSplitPanel extends SplitPanel {
+  static get styles(): CSSResultGroup {
+    return [
+      SplitPanel.styles,
+      css`
+        :host {
+          --divider-width: var(--ha-split-panel-divider-width, 2px);
+          --divider-hit-area: var(--ha-split-panel-divider-hit-area, 12px);
+          --min: var(--ha-split-panel-min, 0);
+          --max: var(--ha-split-panel-max, 100%);
+        }
+
+        .divider {
+          background-color: var(--divider-color);
+          transition: background-color var(--ha-animation-duration-fast, 150ms)
+            ease-out;
+        }
+
+        /* Grip affordance so the divider reads as draggable. The divider
+           already centers its children via flexbox, so keep this in flow.
+           Consumers slotting their own divider handle can hide it with
+           --ha-split-panel-grip-display: none. */
+        .divider::before {
+          content: "";
+          width: 2px;
+          height: var(--ha-space-8, 32px);
+          display: var(--ha-split-panel-grip-display, block);
+          border-radius: var(--ha-border-radius-pill, 9999px);
+          background-color: var(--secondary-text-color);
+          opacity: 0.5;
+          transition: opacity var(--ha-animation-duration-fast, 150ms) ease-out;
+        }
+
+        /* In vertical orientation the divider is horizontal, so the grip pill
+           lies flat instead of standing upright. */
+        :host([orientation="vertical"]) .divider::before {
+          width: var(--ha-space-8, 32px);
+          height: 2px;
+        }
+
+        @media (hover: hover) {
+          :host(:not([disabled])) .divider:hover {
+            background-color: var(--primary-color);
+          }
+          :host(:not([disabled])) .divider:hover::before {
+            opacity: 1;
+          }
+        }
+
+        :host(:not([disabled])) .divider:focus-visible {
+          background-color: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-split-panel": HaSplitPanel;
+  }
+}

src/panels/config/apps/ha-config-apps-available.ts

@@ -5,7 +5,6 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
-import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
@@ -24,14 +23,8 @@ import type {
   StoreAddon,
   SupervisorStore,
 } from "../../../data/supervisor/store";
-import {
-  addStoreRepository,
-  fetchSupervisorStore,
-} from "../../../data/supervisor/store";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
+import { fetchSupervisorStore } from "../../../data/supervisor/store";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-subpage";
@@ -89,15 +82,7 @@ export class HaConfigAppsAvailable extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
-    const repositoryUrl = extractSearchParam("repository_url");
-    if (repositoryUrl) {
-      navigate("/config/apps/available", { replace: true });
-    }
-    this._loadData().then(() => {
-      if (repositoryUrl) {
-        this._addRepository(repositoryUrl);
-      }
-    });
+    this._loadData();
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
   }
 
@@ -243,40 +228,6 @@ export class HaConfigAppsAvailable extends LitElement {
     navigate("/config/apps/registries");
   }
 
-  private async _addRepository(repositoryUrl: string): Promise<void> {
-    if (
-      !this._store ||
-      this._store.repositories.some((repo) => repo.source === repositoryUrl)
-    ) {
-      return;
-    }
-
-    if (
-      !(await showConfirmationDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.apps.my.add_repository_title"
-        ),
-        text: this.hass.localize(
-          "ui.panel.config.apps.my.add_repository_store_description",
-          { repository: repositoryUrl }
-        ),
-        confirmText: this.hass.localize("ui.common.add"),
-        dismissText: this.hass.localize("ui.common.cancel"),
-      }))
-    ) {
-      return;
-    }
-
-    try {
-      await addStoreRepository(this.hass, repositoryUrl);
-      await this._loadData();
-    } catch (err: any) {
-      showAlertDialog(this, {
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-
   private async _loadData(): Promise<void> {
     try {
       const [addon, store] = await Promise.all([

src/panels/config/apps/ha-config-apps-repositories.ts

@@ -5,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
+import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button";
@@ -55,7 +56,12 @@ export class HaConfigAppsRepositories extends LitElement {
   @state() private _error?: string;
 
   protected firstUpdated() {
-    this._loadData();
+    this._loadData().then(() => {
+      const repositoryUrl = extractSearchParam("repository_url");
+      if (repositoryUrl) {
+        this._addRepository(repositoryUrl);
+      }
+    });
   }
 
   private _columns = memoizeOne(
@@ -218,6 +224,18 @@ export class HaConfigAppsRepositories extends LitElement {
     });
   }
 
+  private async _addRepository(url: string) {
+    try {
+      await addStoreRepository(this.hass, url);
+      await this._loadData();
+      fireEvent(this, "apps-collection-refresh", { collection: "store" });
+    } catch (err: any) {
+      showAlertDialog(this, {
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
   private _removeRepository = async (ev: Event) => {
     const slug = (ev.currentTarget as any).slug;
     const repo = this._repositories?.find((r) => r.slug === slug);

src/panels/config/tools/template/tools-template.ts

@@ -1,9 +1,8 @@
+import { mdiViewSplitHorizontal, mdiViewSplitVertical } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import type { HASSDomEvent } from "../../../../common/dom/fire_event";
+import { customElement, property, state } from "lit/decorators";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
@@ -11,7 +10,11 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-card";
 import "../../../../components/ha-code-editor";
 import "../../../../components/ha-expansion-panel";
+import "../../../../components/ha-label";
 import "../../../../components/ha-spinner";
+import "../../../../components/ha-split-panel";
+import type { HaSplitPanel } from "../../../../components/ha-split-panel";
+import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-tip";
 import type { RenderTemplateResult } from "../../../../data/ws-templates";
 import { subscribeRenderTemplate } from "../../../../data/ws-templates";
@@ -50,11 +53,18 @@ const TEMPLATE_DOCS_LINKS: { key: string; path: string }[] = [
   { key: "docs_functions", path: "/template-functions/" },
 ];
 
+const STORAGE_KEY_TEMPLATE = "panel-dev-template-template";
+const STORAGE_KEY_SPLIT_POSITION = "panel-dev-template-split-position";
+const STORAGE_KEY_SPLIT_ORIENTATION = "panel-dev-template-split-orientation";
+const DEFAULT_SPLIT_POSITION = 50;
+
+type SplitOrientation = "horizontal" | "vertical";
+
 @customElement("tools-template")
 class HaPanelDevTemplate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @state() private _error?: string;
 
@@ -66,9 +76,9 @@ class HaPanelDevTemplate extends LitElement {
 
   @state() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
-  @state() private _descriptionExpanded = false;
+  @state() private _splitPosition = DEFAULT_SPLIT_POSITION;
 
-  @query("ha-tip") private _editorTip?: HTMLElement;
+  @state() private _splitOrientation: SplitOrientation = "horizontal";
 
   private _template = "";
 
@@ -78,8 +88,6 @@ class HaPanelDevTemplate extends LitElement {
   // its late-arriving results discarded.
   private _subscribeRequestId = 0;
 
-  private _tipResizeObserver?: ResizeObserver;
-
   public connectedCallback() {
     super.connectedCallback();
     if (this._template && !this._unsubRenderTemplate) {
@@ -90,18 +98,25 @@ class HaPanelDevTemplate extends LitElement {
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._unsubscribeTemplate();
-    this._tipResizeObserver?.disconnect();
-    this._tipResizeObserver = undefined;
   }
 
   protected firstUpdated() {
-    if (localStorage && localStorage["panel-dev-template-template"]) {
-      this._template = localStorage["panel-dev-template-template"];
+    if (localStorage && localStorage[STORAGE_KEY_TEMPLATE]) {
+      this._template = localStorage[STORAGE_KEY_TEMPLATE];
     } else {
       this._template = DEMO_TEMPLATE;
     }
+    const storedPosition = localStorage?.[STORAGE_KEY_SPLIT_POSITION];
+    if (storedPosition) {
+      const parsed = parseFloat(storedPosition);
+      if (!isNaN(parsed) && parsed >= 0 && parsed <= 100) {
+        this._splitPosition = parsed;
+      }
+    }
+    if (localStorage?.[STORAGE_KEY_SPLIT_ORIENTATION] === "vertical") {
+      this._splitOrientation = "vertical";
+    }
     this._subscribeTemplate();
-    this._observeTipHeight();
     this._inited = true;
   }
 
@@ -114,15 +129,20 @@ class HaPanelDevTemplate extends LitElement {
           : "dict"
         : type;
 
+    const editorCard = this._renderEditorCard();
+    const resultCard = this._renderResultCard(type, resultType);
+
+    // On narrow viewports side-by-side is too cramped, so force the (still
+    // resizable) stacked layout and hide the orientation toggle.
+    const orientation = this.narrow ? "vertical" : this._splitOrientation;
+
     return html`
-      <div class="content">
+      <div class="about">
         <ha-expansion-panel
           .header=${this.hass.localize(
             "ui.panel.config.tools.tabs.templates.about"
           )}
           outlined
-          .expanded=${this._descriptionExpanded}
-          @expanded-changed=${this._expandedChanged}
         >
           <div class="description">
             <p>
@@ -164,261 +184,385 @@ class HaPanelDevTemplate extends LitElement {
           </div>
         </ha-expansion-panel>
       </div>
-      <div
-        class="content ${classMap({
-          layout: !this.narrow,
-          horizontal: !this.narrow,
-        })}"
-        style="--description-expanded: ${this._descriptionExpanded ? 1 : 0}"
-      >
-        <ha-card
-          class="edit-pane"
-          header=${this.hass.localize(
-            "ui.panel.config.tools.tabs.templates.editor"
-          )}
-        >
-          <div class="card-content">
-            <ha-code-editor
-              mode="jinja2"
-              .value=${this._template}
-              .error=${this._error}
-              autofocus
-              autocomplete-entities
-              autocomplete-icons
-              @value-changed=${this._templateChanged}
-              dir="ltr"
-            ></ha-code-editor>
-          </div>
-          <div class="card-actions">
-            <ha-button appearance="plain" @click=${this._restoreDemo}>
-              ${this.hass.localize(
-                "ui.panel.config.tools.tabs.templates.reset"
-              )}
-            </ha-button>
-            <ha-button appearance="plain" @click=${this._clear}>
-              ${this.hass.localize("ui.common.clear")}
-            </ha-button>
-          </div>
-          <ha-tip>
-            ${this.hass.localize(
-              "ui.panel.config.tools.tabs.templates.keyboard_tip",
-              {
-                autocomplete: html`<kbd>Ctrl</kbd>+<kbd>Space</kbd>`,
-              }
-            )}
-          </ha-tip>
-        </ha-card>
 
-        <ha-card
-          class="render-pane"
-          header=${this.hass.localize(
-            "ui.panel.config.tools.tabs.templates.result"
-          )}
-        >
-          <div class="card-content ha-scrollbar">
-            ${
-              this._rendering
-                ? html`<ha-spinner
-                    class="render-spinner"
-                    size="small"
-                  ></ha-spinner>`
-                : ""
-            }
-            ${
-              this._error
-                ? html`<ha-alert
-                    alert-type=${this._errorLevel?.toLowerCase() || "error"}
-                    >${this._error}</ha-alert
-                  >`
-                : nothing
-            }
-            ${
-              this._templateResult
-                ? html`<pre
-                      class="rendered ${classMap({
-                        [resultType]: resultType,
-                      })}"
-                    >
-${
-  type === "object"
-    ? JSON.stringify(this._templateResult.result, null, 2)
-    : this._templateResult.result
-}</pre>
-                    <p>
-                      ${this.hass.localize(
-                        "ui.panel.config.tools.tabs.templates.result_type"
-                      )}:
-                      ${resultType}
-                    </p>
-                    ${
-                      this._templateResult.listeners.time
-                        ? html`
-                            <p>
-                              ${this.hass.localize(
-                                "ui.panel.config.tools.tabs.templates.time"
-                              )}
-                            </p>
-                          `
-                        : ""
-                    }
-                    ${
-                      !this._templateResult.listeners
-                        ? nothing
-                        : this._templateResult.listeners.all
-                          ? html`
-                              <p class="all_listeners">
-                                ${this.hass.localize(
-                                  "ui.panel.config.tools.tabs.templates.all_listeners"
-                                )}
-                              </p>
-                            `
-                          : this._templateResult.listeners.domains.length ||
-                              this._templateResult.listeners.entities.length
-                            ? html`
-                                <p>
-                                  ${this.hass.localize(
-                                    "ui.panel.config.tools.tabs.templates.listeners"
-                                  )}
-                                </p>
-                                <ul>
-                                  ${this._templateResult.listeners.domains
-                                    .sort()
-                                    .map(
-                                      (domain) => html`
-                                        <li>
-                                          <b
-                                            >${this.hass.localize(
-                                              "ui.panel.config.tools.tabs.templates.domain"
-                                            )}</b
-                                          >: ${domain}
-                                        </li>
-                                      `
-                                    )}
-                                  ${this._templateResult.listeners.entities
-                                    .sort()
-                                    .map(
-                                      (entity_id) => html`
-                                        <li>
-                                          <b
-                                            >${this.hass.localize(
-                                              "ui.panel.config.tools.tabs.templates.entity"
-                                            )}</b
-                                          >: ${entity_id}
-                                        </li>
-                                      `
-                                    )}
-                                </ul>
-                              `
-                            : !this._templateResult.listeners.time
-                              ? html`<span class="all_listeners">
-                                  ${this.hass.localize(
-                                    "ui.panel.config.tools.tabs.templates.no_listeners"
-                                  )}
-                                </span>`
-                              : nothing
-                    }`
-                : nothing
-            }
-          </div>
-        </ha-card>
-      </div>
+      <ha-split-panel
+        class="panes ${orientation === "vertical" ? "vertical" : ""}"
+        .position=${this._splitPosition}
+        .orientation=${orientation}
+        snap="50%"
+        @wa-reposition=${this._splitRepositioned}
+      >
+        <div slot="start" class="pane">${editorCard}</div>
+        <div slot="end" class="pane">${resultCard}</div>
+        ${this.narrow ? nothing : this._renderOrientationToggle()}
+      </ha-split-panel>
     `;
   }
 
-  private _observeTipHeight() {
-    if (!this._editorTip || this._tipResizeObserver) {
-      return;
-    }
-    this._tipResizeObserver = new ResizeObserver((entries) => {
-      const height =
-        entries[0]?.borderBoxSize?.[0]?.blockSize ??
-        entries[0]?.contentRect.height;
-      if (height) {
-        this.style.setProperty("--tip-height", `${height}px`);
-      }
-    });
-    this._tipResizeObserver.observe(this._editorTip);
+  private _renderOrientationToggle() {
+    const label = this.hass.localize(
+      this._splitOrientation === "vertical"
+        ? "ui.panel.config.tools.tabs.templates.layout_side_by_side"
+        : "ui.panel.config.tools.tabs.templates.layout_stacked"
+    );
+    return html`
+      <button
+        type="button"
+        slot="divider"
+        class="divider-toggle"
+        .title=${label}
+        aria-label=${label}
+        @mousedown=${this._dividerPointerDown}
+        @touchstart=${this._dividerPointerDown}
+        @click=${this._dividerClick}
+      >
+        <ha-svg-icon
+          .path=${this._splitOrientation === "vertical"
+            ? mdiViewSplitVertical
+            : mdiViewSplitHorizontal}
+        ></ha-svg-icon>
+      </button>
+    `;
   }
 
-  private _expandedChanged(
-    ev: HASSDomEvent<HASSDomEvents["expanded-changed"]>
-  ) {
-    this._descriptionExpanded = ev.detail.expanded;
+  private _renderEditorCard() {
+    return html`
+      <ha-card
+        class="edit-pane"
+        header=${this.hass.localize(
+          "ui.panel.config.tools.tabs.templates.editor"
+        )}
+      >
+        <div class="card-content">
+          <ha-code-editor
+            mode="jinja2"
+            .value=${this._template}
+            .error=${this._error}
+            autofocus
+            autocomplete-entities
+            autocomplete-icons
+            @value-changed=${this._templateChanged}
+            dir="ltr"
+          ></ha-code-editor>
+        </div>
+        <div class="card-actions">
+          <ha-button appearance="plain" @click=${this._restoreDemo}>
+            ${this.hass.localize("ui.panel.config.tools.tabs.templates.reset")}
+          </ha-button>
+          <ha-button appearance="plain" @click=${this._clear}>
+            ${this.hass.localize("ui.common.clear")}
+          </ha-button>
+        </div>
+        <ha-tip>
+          ${this.hass.localize(
+            "ui.panel.config.tools.tabs.templates.keyboard_tip",
+            {
+              autocomplete: html`<kbd>Ctrl</kbd>+<kbd>Space</kbd>`,
+            }
+          )}
+        </ha-tip>
+      </ha-card>
+    `;
   }
 
+  private _renderResultCard(type: string, resultType: string) {
+    const showEmptyState =
+      !this._error && !this._rendering && !this._template?.trim();
+
+    return html`
+      <ha-card
+        class="render-pane"
+        header=${this.hass.localize(
+          "ui.panel.config.tools.tabs.templates.result"
+        )}
+      >
+        <div class="card-content ha-scrollbar">
+          ${this._rendering
+            ? html`<ha-spinner
+                class="render-spinner"
+                size="small"
+              ></ha-spinner>`
+            : ""}
+          ${this._error
+            ? html`<ha-alert
+                alert-type=${this._errorLevel?.toLowerCase() || "error"}
+                >${this._error}</ha-alert
+              >`
+            : nothing}
+          ${showEmptyState
+            ? html`<div class="empty">
+                ${this.hass.localize(
+                  "ui.panel.config.tools.tabs.templates.result_placeholder"
+                )}
+              </div>`
+            : this._templateResult
+              ? html`
+                  <ha-label dense>
+                    ${this.hass.localize(
+                      "ui.panel.config.tools.tabs.templates.result_type"
+                    )}:
+                    ${resultType}
+                  </ha-label>
+                  <pre class="rendered">
+${type === "object"
+                      ? JSON.stringify(this._templateResult.result, null, 2)
+                      : this._templateResult.result}</pre
+                  >
+                  ${this._templateResult.listeners.time
+                    ? html`
+                        <p>
+                          ${this.hass.localize(
+                            "ui.panel.config.tools.tabs.templates.time"
+                          )}
+                        </p>
+                      `
+                    : ""}
+                  ${!this._templateResult.listeners
+                    ? nothing
+                    : this._templateResult.listeners.all
+                      ? html`
+                          <p class="all_listeners">
+                            ${this.hass.localize(
+                              "ui.panel.config.tools.tabs.templates.all_listeners"
+                            )}
+                          </p>
+                        `
+                      : this._templateResult.listeners.domains.length ||
+                          this._templateResult.listeners.entities.length
+                        ? html`
+                            <p>
+                              ${this.hass.localize(
+                                "ui.panel.config.tools.tabs.templates.listeners"
+                              )}
+                            </p>
+                            <ul>
+                              ${this._templateResult.listeners.domains
+                                .sort()
+                                .map(
+                                  (domain) => html`
+                                    <li>
+                                      <b
+                                        >${this.hass.localize(
+                                          "ui.panel.config.tools.tabs.templates.domain"
+                                        )}</b
+                                      >: ${domain}
+                                    </li>
+                                  `
+                                )}
+                              ${this._templateResult.listeners.entities
+                                .sort()
+                                .map(
+                                  (entity_id) => html`
+                                    <li>
+                                      <b
+                                        >${this.hass.localize(
+                                          "ui.panel.config.tools.tabs.templates.entity"
+                                        )}</b
+                                      >: ${entity_id}
+                                    </li>
+                                  `
+                                )}
+                            </ul>
+                          `
+                        : !this._templateResult.listeners.time
+                          ? html`<span class="all_listeners">
+                              ${this.hass.localize(
+                                "ui.panel.config.tools.tabs.templates.no_listeners"
+                              )}
+                            </span>`
+                          : nothing}
+                `
+              : nothing}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _splitRepositioned(ev: Event) {
+    this._splitPosition = (ev.target as HaSplitPanel).position;
+    this._storeSplitPosition();
+  }
+
+  private _toggleOrientation() {
+    this._splitOrientation =
+      this._splitOrientation === "vertical" ? "horizontal" : "vertical";
+    if (this._inited) {
+      localStorage[STORAGE_KEY_SPLIT_ORIENTATION] = this._splitOrientation;
+    }
+  }
+
+  private _dividerPointerStart?: { x: number; y: number };
+
+  private _dividerPointerDown = (ev: MouseEvent | TouchEvent) => {
+    const point = "touches" in ev ? ev.touches[0] : ev;
+    if (point) {
+      this._dividerPointerStart = { x: point.clientX, y: point.clientY };
+    }
+  };
+
+  private _dividerClick = (ev: MouseEvent) => {
+    const start = this._dividerPointerStart;
+    this._dividerPointerStart = undefined;
+    // Ignore the click that ends a drag-resize; only a genuine (still) click
+    // toggles the orientation.
+    if (start && Math.hypot(ev.clientX - start.x, ev.clientY - start.y) > 5) {
+      return;
+    }
+    this._toggleOrientation();
+  };
+
+  private _storeSplitPosition = debounce(
+    () => {
+      if (!this._inited) {
+        return;
+      }
+      localStorage[STORAGE_KEY_SPLIT_POSITION] = String(this._splitPosition);
+    },
+    500,
+    false
+  );
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleScrollbar,
       css`
         :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
           user-select: none;
         }
 
-        .content {
-          gap: var(--ha-space-4);
+        .about {
+          flex: none;
           padding: var(--ha-space-4);
-        }
-
-        .content:has(ha-expansion-panel) {
           padding-bottom: 0;
         }
 
-        .content.horizontal {
-          --panel-header-height: calc(
-            var(--header-height) + 1em * 2 + var(--ha-line-height-normal) *
-              var(--ha-font-size-m) + 1px + 2px
-          );
-          --description-pane-height: calc(
-            var(--ha-space-4) + 48px +
-              (
-                var(--ha-line-height-normal) * var(--ha-font-size-m) * 3 +
-                  var(--ha-space-1) * 2
-              ) *
-              var(--description-expanded) + var(--ha-card-border-width, 1px) * 2
-          );
-          --card-header-height: calc(
-            var(--ha-space-3) + var(--ha-space-4) +
-              var(--ha-line-height-expanded) *
-              var(--ha-card-header-font-size, var(--ha-font-size-2xl))
-          );
-          --card-actions-height: calc(1px + var(--ha-space-2) * 2 + 40px);
-          --tip-height-minimal: calc(
-            var(--mdc-icon-size, 24px) + var(--ha-space-4)
-          );
-          --edit-pane-height: calc(
-            100vh - var(--panel-header-height) - var(
-                --description-pane-height
-              ) - var(--ha-space-4) *
-              2
-          );
-          --code-mirror-max-height: calc(
-            var(--edit-pane-height) - var(--card-header-height) +
-              var(--ha-space-2) - var(--card-actions-height) - var(
-                --tip-height,
-                var(--tip-height-minimal)
-              ) - var(--ha-space-4) - var(--ha-card-border-width, 1px) *
-              2
-          );
+        .about a {
+          color: var(--primary-color);
+        }
+
+        .panes {
+          flex: 1;
+          min-height: 0;
+          box-sizing: border-box;
+          padding: var(--ha-space-4);
+          --ha-split-panel-min: 20%;
+          --ha-split-panel-max: 80%;
+          --ha-split-panel-divider-hit-area: var(--ha-space-4);
+        }
+
+        /* On wide viewports we slot our own handle (the orientation toggle)
+           into the divider, so hide the default grip. On narrow there is no
+           toggle, so keep the default grip as the resize affordance. */
+        :host(:not([narrow])) .panes {
+          --ha-split-panel-grip-display: none;
+        }
+
+        /* Orientation toggle that lives on the divider and doubles as a grip.
+           Clicks toggle orientation; dragging the divider elsewhere resizes. */
+        .divider-toggle {
+          position: relative;
+          z-index: 1;
+          flex: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          width: 24px;
+          height: 24px;
+          margin: 0;
+          padding: 0;
+          border: 1px solid var(--divider-color);
+          border-radius: 50%;
+          background-color: var(--card-background-color);
+          color: var(--secondary-text-color);
+          cursor: pointer;
+          --mdc-icon-size: 16px;
+          transition:
+            color var(--ha-animation-duration-fast, 150ms) ease-out,
+            border-color var(--ha-animation-duration-fast, 150ms) ease-out;
+        }
+
+        @media (hover: hover) {
+          .divider-toggle:hover {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+          }
+        }
+
+        .divider-toggle:focus-visible {
+          outline: none;
+          color: var(--primary-color);
+          border-color: var(--primary-color);
+        }
+
+        .pane {
+          display: flex;
+          min-width: 0;
+          height: 100%;
+          box-sizing: border-box;
+        }
+
+        .pane[slot="start"] {
+          padding-inline-end: var(--ha-space-4);
+        }
+
+        .pane[slot="end"] {
+          padding-inline-start: var(--ha-space-4);
+        }
+
+        .panes.vertical .pane[slot="start"] {
+          padding-inline-end: 0;
+          padding-block-end: var(--ha-space-4);
+        }
+
+        .panes.vertical .pane[slot="end"] {
+          padding-inline-start: 0;
+          padding-block-start: var(--ha-space-4);
+        }
+
+        .pane ha-card {
+          flex: 1;
+          min-width: 0;
         }
 
         ha-card {
-          margin-bottom: var(--ha-space-4);
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          margin: 0;
+        }
+
+        .edit-pane .card-content {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+        }
+
+        .edit-pane ha-code-editor {
+          flex: 1;
+          min-height: 0;
+          width: 100%;
+          --code-mirror-height: 100%;
+        }
+
+        .render-pane .card-content {
+          flex: 1;
+          min-height: 0;
+          overflow: auto;
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-2);
+          user-select: text;
         }
 
         .edit-pane {
           direction: var(--direction);
         }
 
-        .edit-pane a {
-          color: var(--primary-color);
-        }
-
-        .content.horizontal > * {
-          width: 50%;
-          margin-bottom: 0px;
-        }
-
         .render-spinner {
           position: absolute;
           top: var(--ha-space-2);
@@ -428,10 +572,24 @@ ${
         }
 
         ha-alert {
-          margin-bottom: var(--ha-space-2);
           display: block;
         }
 
+        .render-pane ha-label {
+          align-self: flex-start;
+        }
+
+        .empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          min-height: 120px;
+          padding: var(--ha-space-4);
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
+
         .rendered {
           font-family: var(--ha-font-family-code);
           -webkit-font-smoothing: var(--ha-font-smoothing);
@@ -439,6 +597,7 @@ ${
           clear: both;
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);
+          border-radius: var(--ha-border-radius-md);
           padding: var(--ha-space-2);
           margin-top: 0;
           margin-bottom: 0;
@@ -447,7 +606,7 @@ ${
 
         p,
         ul {
-          margin-block-end: 0;
+          margin-block: 0;
         }
         .description > p {
           margin-block-start: 0;
@@ -468,26 +627,6 @@ ${
           color: var(--secondary-text-color);
         }
 
-        .render-pane .card-content {
-          user-select: text;
-        }
-
-        .content.horizontal .render-pane .card-content {
-          overflow: auto;
-          max-height: calc(
-            var(--code-mirror-max-height) +
-              47px - var(--ha-card-border-radius, var(--ha-border-radius-lg))
-          );
-        }
-
-        .content.horizontal .render-pane {
-          overflow: hidden;
-          padding-bottom: var(
-            --ha-card-border-radius,
-            var(--ha-border-radius-lg)
-          );
-        }
-
         .all_listeners {
           color: var(--warning-color);
         }
@@ -508,12 +647,6 @@ ${
           white-space: nowrap;
         }
 
-        @media all and (max-width: 870px) {
-          .content ha-card {
-            max-width: 100%;
-          }
-        }
-
         .card-actions {
           display: flex;
         }
@@ -615,7 +748,7 @@ ${
     if (!this._inited) {
       return;
     }
-    localStorage["panel-dev-template-template"] = this._template;
+    localStorage[STORAGE_KEY_TEMPLATE] = this._template;
   }
 
   private async _restoreDemo() {
@@ -631,7 +764,7 @@ ${
     }
     this._template = DEMO_TEMPLATE;
     this._subscribeTemplate();
-    delete localStorage["panel-dev-template-template"];
+    delete localStorage[STORAGE_KEY_TEMPLATE];
   }
 
   private async _clear() {
@@ -647,12 +780,8 @@ ${
     }
     this._unsubscribeTemplate();
     this._template = "";
-    // Reset to empty result. Setting to 'undefined' results in a different visual
-    // behaviour compared to manually emptying the template input box.
-    this._templateResult = {
-      result: "",
-      listeners: { all: false, entities: [], domains: [], time: false },
-    };
+    // An empty template shows the placeholder empty state.
+    this._templateResult = undefined;
   }
 }
 

src/translations/en.json

@@ -2853,7 +2853,6 @@
           "my": {
             "add_repository_title": "Add app repository?",
             "add_repository_description": "This app requires a repository that is currently not known. Do you want to add the repository {repository}?",
-            "add_repository_store_description": "Do you want to add the app repository {repository}?",
             "error_repository_not_found": "The repository for this app was not found"
           },
           "panel": {
@@ -3911,6 +3910,9 @@
               "about": "About templates",
               "editor": "Template editor",
               "result": "Result",
+              "result_placeholder": "Your template result will appear here.",
+              "layout_stacked": "Drag to resize, click for stacked view",
+              "layout_side_by_side": "Drag to resize, click for side-by-side view",
               "reset": "Reset to demo template",
               "confirm_reset": "Do you want to reset your current template back to the demo template?",
               "confirm_clear": "Do you want to clear your current template?",

yarn.lock

@@ -3758,15 +3758,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@napi-rs/wasm-runtime@npm:1.1.6, @napi-rs/wasm-runtime@npm:^1.1.1, @napi-rs/wasm-runtime@npm:^1.1.4":
-  version: 1.1.6
-  resolution: "@napi-rs/wasm-runtime@npm:1.1.6"
+"@napi-rs/wasm-runtime@npm:1.1.5, @napi-rs/wasm-runtime@npm:^1.1.1, @napi-rs/wasm-runtime@npm:^1.1.4":
+  version: 1.1.5
+  resolution: "@napi-rs/wasm-runtime@npm:1.1.5"
   dependencies:
-    "@tybys/wasm-util": "npm:^0.10.3"
+    "@tybys/wasm-util": "npm:^0.10.2"
   peerDependencies:
     "@emnapi/core": ^1.7.1
     "@emnapi/runtime": ^1.7.1
-  checksum: 10/3e43425df17547d9d58ab69cce8e6cef38a062eccec4d2def5fc9e10e81cd19ae228b3ab9be4b149b57078d33913687511312d2414089877759b7db1f43625ba
+  checksum: 10/57a4b68f05f15b79bf45240ac173d3eaf72620d1b73261e7db407aa7ba8eb68e670fb1612d2ceef6b8cc500970a5ed6995c71c77661027971012ed2459ce307f
   languageName: node
   linkType: hard
 
@@ -4735,110 +4735,110 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rspack/binding-darwin-arm64@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-darwin-arm64@npm:2.1.2"
+"@rspack/binding-darwin-arm64@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-darwin-arm64@npm:2.1.1"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rspack/binding-darwin-x64@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-darwin-x64@npm:2.1.2"
+"@rspack/binding-darwin-x64@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-darwin-x64@npm:2.1.1"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-arm64-gnu@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-linux-arm64-gnu@npm:2.1.2"
+"@rspack/binding-linux-arm64-gnu@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-linux-arm64-gnu@npm:2.1.1"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-arm64-musl@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-linux-arm64-musl@npm:2.1.2"
+"@rspack/binding-linux-arm64-musl@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-linux-arm64-musl@npm:2.1.1"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-riscv64-gnu@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-linux-riscv64-gnu@npm:2.1.2"
+"@rspack/binding-linux-riscv64-gnu@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-linux-riscv64-gnu@npm:2.1.1"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-riscv64-musl@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-linux-riscv64-musl@npm:2.1.2"
+"@rspack/binding-linux-riscv64-musl@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-linux-riscv64-musl@npm:2.1.1"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-x64-gnu@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-linux-x64-gnu@npm:2.1.2"
+"@rspack/binding-linux-x64-gnu@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-linux-x64-gnu@npm:2.1.1"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-x64-musl@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-linux-x64-musl@npm:2.1.2"
+"@rspack/binding-linux-x64-musl@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-linux-x64-musl@npm:2.1.1"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rspack/binding-wasm32-wasi@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-wasm32-wasi@npm:2.1.2"
+"@rspack/binding-wasm32-wasi@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-wasm32-wasi@npm:2.1.1"
   dependencies:
     "@emnapi/core": "npm:1.11.1"
     "@emnapi/runtime": "npm:1.11.1"
-    "@napi-rs/wasm-runtime": "npm:1.1.6"
+    "@napi-rs/wasm-runtime": "npm:1.1.5"
   conditions: cpu=wasm32
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-arm64-msvc@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-win32-arm64-msvc@npm:2.1.2"
+"@rspack/binding-win32-arm64-msvc@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-win32-arm64-msvc@npm:2.1.1"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-ia32-msvc@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-win32-ia32-msvc@npm:2.1.2"
+"@rspack/binding-win32-ia32-msvc@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-win32-ia32-msvc@npm:2.1.1"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-x64-msvc@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding-win32-x64-msvc@npm:2.1.2"
+"@rspack/binding-win32-x64-msvc@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding-win32-x64-msvc@npm:2.1.1"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@rspack/binding@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/binding@npm:2.1.2"
+"@rspack/binding@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/binding@npm:2.1.1"
   dependencies:
-    "@rspack/binding-darwin-arm64": "npm:2.1.2"
-    "@rspack/binding-darwin-x64": "npm:2.1.2"
-    "@rspack/binding-linux-arm64-gnu": "npm:2.1.2"
-    "@rspack/binding-linux-arm64-musl": "npm:2.1.2"
-    "@rspack/binding-linux-riscv64-gnu": "npm:2.1.2"
-    "@rspack/binding-linux-riscv64-musl": "npm:2.1.2"
-    "@rspack/binding-linux-x64-gnu": "npm:2.1.2"
-    "@rspack/binding-linux-x64-musl": "npm:2.1.2"
-    "@rspack/binding-wasm32-wasi": "npm:2.1.2"
-    "@rspack/binding-win32-arm64-msvc": "npm:2.1.2"
-    "@rspack/binding-win32-ia32-msvc": "npm:2.1.2"
-    "@rspack/binding-win32-x64-msvc": "npm:2.1.2"
+    "@rspack/binding-darwin-arm64": "npm:2.1.1"
+    "@rspack/binding-darwin-x64": "npm:2.1.1"
+    "@rspack/binding-linux-arm64-gnu": "npm:2.1.1"
+    "@rspack/binding-linux-arm64-musl": "npm:2.1.1"
+    "@rspack/binding-linux-riscv64-gnu": "npm:2.1.1"
+    "@rspack/binding-linux-riscv64-musl": "npm:2.1.1"
+    "@rspack/binding-linux-x64-gnu": "npm:2.1.1"
+    "@rspack/binding-linux-x64-musl": "npm:2.1.1"
+    "@rspack/binding-wasm32-wasi": "npm:2.1.1"
+    "@rspack/binding-win32-arm64-msvc": "npm:2.1.1"
+    "@rspack/binding-win32-ia32-msvc": "npm:2.1.1"
+    "@rspack/binding-win32-x64-msvc": "npm:2.1.1"
   dependenciesMeta:
     "@rspack/binding-darwin-arm64":
       optional: true
@@ -4864,15 +4864,15 @@ __metadata:
       optional: true
     "@rspack/binding-win32-x64-msvc":
       optional: true
-  checksum: 10/2bb02582435f07cd2e3cf4cc990aecee6fbeda475d3e2dbbf8eba8d98ffffdcc19a687ddb259a29884283c6c7ab48c1e2b8ead50356c5252db1dc565b74e70e9
+  checksum: 10/6b6a34bbc504d0ec344e8b9f383a0141143235cba90036016ff3a011aa4019bdd73b6fcb6c89844bd872c672ef2d4f153cc3091a6168f515ee14dca5dc33b158
   languageName: node
   linkType: hard
 
-"@rspack/core@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@rspack/core@npm:2.1.2"
+"@rspack/core@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@rspack/core@npm:2.1.1"
   dependencies:
-    "@rspack/binding": "npm:2.1.2"
+    "@rspack/binding": "npm:2.1.1"
   peerDependencies:
     "@module-federation/runtime-tools": ^0.24.1 || ^2.0.0
     "@swc/helpers": ^0.5.23
@@ -4881,7 +4881,7 @@ __metadata:
       optional: true
     "@swc/helpers":
       optional: true
-  checksum: 10/a7a16c2eeba0cc048dd4dd4b03db5778627704def24654e088cbc2f787a9ae86d131d7f1dad445aae0a175d9be7ce500c590048869f7f4ce1725261b03c6960e
+  checksum: 10/a652f39809f557136950e690b14655350e74f50ddd5eb32d4f912a6d40e6dda87f73f5c80a8bd296529b32ce4358bd6f66497f437ee032342151b5be293846b0
   languageName: node
   linkType: hard
 
@@ -5402,12 +5402,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tybys/wasm-util@npm:^0.10.3":
-  version: 0.10.3
-  resolution: "@tybys/wasm-util@npm:0.10.3"
+"@tybys/wasm-util@npm:^0.10.2":
+  version: 0.10.2
+  resolution: "@tybys/wasm-util@npm:0.10.2"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10/6cf39f7a2926b1c8bc6fe3f9f03318a33dd6dae81bdbd059983f9c6ee22d10a827f12564d648c05a2d4926e03c86cbe2799fb20609ee65e9efc39603039b4765
+  checksum: 10/d12f1dafe12d7a573c406b35ffef0038042b9cc9fbcc74d657267eb635499b956276afc05eebdbd81bea582e1c4c921421a1dd7243a93daaa8c8216b19395c23
   languageName: node
   linkType: hard
 
@@ -9772,7 +9772,7 @@ __metadata:
     "@playwright/test": "npm:1.61.1"
     "@replit/codemirror-indentation-markers": "npm:6.5.3"
     "@rsdoctor/rspack-plugin": "npm:1.5.17"
-    "@rspack/core": "npm:2.1.2"
+    "@rspack/core": "npm:2.1.1"
     "@rspack/dev-server": "npm:2.1.0"
     "@swc/helpers": "npm:0.5.23"
     "@thomasloven/round-slider": "npm:0.6.0"