Improve messaging and error handling http config

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/actions/setup/action.yml

@@ -8,33 +8,16 @@ inputs:
   cache:
     description: Enable the yarn cache in setup-node
     default: "true"
-  node-modules-cache:
-    description: Restore the exact shared node_modules cache before installing
-    default: "false"
 
 runs:
   using: composite
   steps:
-    - name: Restore complete dependency tree
-      id: dependency-cache
-      if: inputs.node-modules-cache == 'true'
-      continue-on-error: true
-      uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-      with:
-        path: |
-          node_modules
-          .yarn/install-state.gz
-        key: >-
-          node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
-          hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
-
     - name: Setup Node
       uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
       with:
         node-version-file: ".nvmrc"
-        cache: ${{ inputs.cache == 'true' && (inputs.node-modules-cache != 'true' || steps.dependency-cache.outputs.cache-hit != 'true') && 'yarn' || '' }}
+        cache: ${{ inputs.cache == 'true' && 'yarn' || '' }}
 
     - name: Install dependencies
-      if: inputs.node-modules-cache != 'true' || steps.dependency-cache.outputs.cache-hit != 'true'
       shell: bash
       run: yarn install ${{ inputs.immutable == 'true' && '--immutable' || '' }}

.github/workflows/ci.yaml

@@ -1,7 +1,6 @@
 name: CI
 
 on:
-  workflow_dispatch:
   push:
     branches:
       - dev
@@ -22,56 +21,16 @@ permissions:
   contents: read
 
 jobs:
-  prepare-dependencies:
-    name: Prepare dependencies
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-        with:
-          persist-credentials: false
-      - name: Check for complete dependency tree
-        id: dependencies
-        continue-on-error: true
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: |
-            node_modules
-            .yarn/install-state.gz
-          key: >-
-            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
-            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
-          lookup-only: true
-      - name: Setup Node and install
-        if: steps.dependencies.outputs.cache-hit != 'true'
-        uses: ./.github/actions/setup
-        with:
-          cache: false
-      - name: Save complete dependency tree
-        if: steps.dependencies.outputs.cache-hit != 'true'
-        continue-on-error: true
-        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: |
-            node_modules
-            .yarn/install-state.gz
-          key: >-
-            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
-            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
-
   lint:
     name: Lint and check format
-    needs: prepare-dependencies
     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 with shared dependencies
+      - name: Setup Node and install
         uses: ./.github/actions/setup
-        with:
-          node-modules-cache: true
       - name: Check for duplicate dependencies
         run: yarn dedupe --check
       - name: Build resources
@@ -104,17 +63,14 @@ jobs:
         run: yarn run lint:licenses
   test:
     name: Run tests
-    needs: prepare-dependencies
     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 with shared dependencies
+      - name: Setup Node and install
         uses: ./.github/actions/setup
-        with:
-          node-modules-cache: true
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
         env:
@@ -124,7 +80,6 @@ jobs:
   build:
     name: Build frontend
     needs:
-      - prepare-dependencies
       - lint
       - test
     runs-on: ubuntu-latest
@@ -133,10 +88,8 @@ jobs:
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node with shared dependencies
+      - name: Setup Node and install
         uses: ./.github/actions/setup
-        with:
-          node-modules-cache: true
       - name: Build Application
         uses: ./.github/actions/build
         with:

package.json

@@ -52,15 +52,15 @@
     "@codemirror/view": "6.43.6",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.10",
-    "@formatjs/intl-displaynames": "7.3.11",
-    "@formatjs/intl-durationformat": "0.10.16",
-    "@formatjs/intl-getcanonicallocales": "3.2.10",
-    "@formatjs/intl-listformat": "8.3.11",
-    "@formatjs/intl-locale": "5.3.9",
-    "@formatjs/intl-numberformat": "9.3.12",
-    "@formatjs/intl-pluralrules": "6.3.11",
-    "@formatjs/intl-relativetimeformat": "12.3.11",
+    "@formatjs/intl-datetimeformat": "7.5.0",
+    "@formatjs/intl-displaynames": "7.3.12",
+    "@formatjs/intl-durationformat": "0.10.17",
+    "@formatjs/intl-getcanonicallocales": "3.2.11",
+    "@formatjs/intl-listformat": "8.3.12",
+    "@formatjs/intl-locale": "5.3.10",
+    "@formatjs/intl-numberformat": "9.3.13",
+    "@formatjs/intl-pluralrules": "6.3.12",
+    "@formatjs/intl-relativetimeformat": "12.3.12",
     "@fullcalendar/core": "6.1.21",
     "@fullcalendar/daygrid": "6.1.21",
     "@fullcalendar/interaction": "6.1.21",
@@ -107,7 +107,7 @@
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.10",
+    "intl-messageformat": "11.2.11",
     "js-yaml": "5.2.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -173,7 +173,7 @@
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.6.0",
+    "eslint": "10.7.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",

src/common/string/is_ip_address.ts

@@ -1,4 +1,53 @@
-const regexp =
-  /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+// Unanchored regex fragments, shared as the single source of truth for both
+// the boolean validators below and the HTML `pattern` attribute (the browser
+// anchors a pattern as `^(?:…)$`).
+const IPV4 =
+  "(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)";
 
-export const isIPAddress = (input: string): boolean => regexp.test(input);
+const IPV6 =
+  "(?:([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|::(ffff(:0{1,4})?:)?((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))";
+
+// CIDR prefix lengths: 0-32 for IPv4, 0-128 for IPv6.
+const IPV4_PREFIX = "(?:3[0-2]|[12]?[0-9])";
+const IPV6_PREFIX = "(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])";
+
+// IPv4 or IPv6 address.
+export const IP_ADDRESS_PATTERN = `${IPV4}|${IPV6}`;
+
+// IPv4/IPv6 address, optionally with a CIDR prefix (network).
+export const IP_ADDRESS_OR_NETWORK_PATTERN = `${IPV4}(?:/${IPV4_PREFIX})?|${IPV6}(?:/${IPV6_PREFIX})?`;
+
+const anchored = (pattern: string): RegExp => new RegExp(`^(?:${pattern})$`);
+
+const ipv4Regexp = anchored(IPV4);
+const ipv6Regexp = anchored(IPV6);
+
+// IPv4 address, e.g. 192.168.1.10
+export const isIPAddress = (input: string): boolean => ipv4Regexp.test(input);
+
+// IPv6 address, e.g. fe80::85d:e82c:9446:7995
+export const isIPv6Address = (input: string): boolean => ipv6Regexp.test(input);
+
+// IPv4 or IPv6 address
+export const isIPAddressV4OrV6 = (input: string): boolean =>
+  isIPAddress(input) || isIPv6Address(input);
+
+// IP network in CIDR notation, e.g. 192.168.1.0/24 or fd00::/8
+export const isIPNetwork = (input: string): boolean => {
+  const parts = input.split("/");
+  if (parts.length !== 2) {
+    return false;
+  }
+  const [address, prefix] = parts;
+  if (!/^\d{1,3}$/.test(prefix)) {
+    return false;
+  }
+  const prefixLength = Number(prefix);
+  if (isIPAddress(address)) {
+    return prefixLength >= 0 && prefixLength <= 32;
+  }
+  if (isIPv6Address(address)) {
+    return prefixLength >= 0 && prefixLength <= 128;
+  }
+  return false;
+};

src/components/ha-selector/ha-selector-text.ts

@@ -28,6 +28,10 @@ export class HaTextSelector extends LitElement {
 
   @query("ha-input, ha-textarea") private _input?: HTMLInputElement;
 
+  @query("ha-input-multi") private _inputMulti?: {
+    reportValidity: () => boolean;
+  };
+
   public async focus() {
     await this.updateComplete;
     this._input?.focus();
@@ -35,7 +39,7 @@ export class HaTextSelector extends LitElement {
 
   public reportValidity(): boolean {
     if (this.selector.text?.multiple) {
-      return true;
+      return this._inputMulti?.reportValidity() ?? true;
     }
     return this._input?.reportValidity() ?? true;
   }
@@ -52,6 +56,8 @@ export class HaTextSelector extends LitElement {
           .inputPrefix=${this.selector.text?.prefix}
           .helper=${this.helper}
           .autocomplete=${this.selector.text?.autocomplete}
+          .pattern=${this.selector.text?.pattern}
+          .validationMessage=${this.selector.text?.validation_message}
           @value-changed=${this._handleChange}
         >
         </ha-input-multi>
@@ -80,6 +86,9 @@ export class HaTextSelector extends LitElement {
       .hint=${this.helper}
       .disabled=${this.disabled}
       .type=${this.selector.text?.type}
+      .pattern=${this.selector.text?.pattern}
+      .validationMessage=${this.selector.text?.validation_message}
+      .autoValidate=${this.selector.text?.pattern !== undefined}
       @input=${this._handleChange}
       @change=${this._handleChange}
       .label=${this.label || ""}

src/components/input/ha-input-multi.ts

@@ -2,7 +2,13 @@ import { consume, type ContextType } from "@lit/context";
 import { mdiDeleteOutline, mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAll,
+  state,
+} from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../common/dom/fire_event";
 import { uid } from "../../common/util/uid";
@@ -50,6 +56,13 @@ class HaInputMulti extends LitElement {
 
   @property() public autocomplete?: string;
 
+  /** Regular expression each entry is validated against (HTML `pattern`). */
+  @property() public pattern?: string;
+
+  /** Message shown on an entry when it fails `pattern` validation. */
+  @property({ attribute: "validation-message" })
+  public validationMessage?: string;
+
   @property({ attribute: "add-label" }) public addLabel?: string;
 
   @property({ attribute: "remove-label" }) public removeLabel?: string;
@@ -70,6 +83,8 @@ class HaInputMulti extends LitElement {
 
   @query("ha-input[data-last]") private _lastInput?: HaInput;
 
+  @queryAll("ha-input") private _inputs?: NodeListOf<HaInput>;
+
   // Stable key per row, kept in sync with `value`. Because items are plain
   // strings we cannot use a WeakMap (as the object-based sortable lists do),
   // so we track keys in a parallel array. Keys stay fixed while a row is
@@ -89,6 +104,16 @@ class HaInputMulti extends LitElement {
     }
   }
 
+  public reportValidity(): boolean {
+    let valid = true;
+    this._inputs?.forEach((input) => {
+      if (!input.reportValidity()) {
+        valid = false;
+      }
+    });
+    return valid;
+  }
+
   protected render() {
     return html`
       <ha-sortable
@@ -109,6 +134,9 @@ class HaInputMulti extends LitElement {
                     .type=${this.inputType}
                     .autocomplete=${this.autocomplete}
                     .disabled=${this.disabled}
+                    .pattern=${this.pattern}
+                    .validationMessage=${this.validationMessage}
+                    .autoValidate=${this.pattern !== undefined}
                     dialogInitialFocus=${index}
                     .index=${index}
                     class="flex-auto"

src/data/http.ts

@@ -21,6 +21,21 @@ export interface HttpConfigState {
   revert_at: string | null;
 }
 
+export const HTTP_CONFIG_FIELDS: (keyof HttpConfig)[] = [
+  "server_port",
+  "server_host",
+  "ssl_certificate",
+  "ssl_key",
+  "ssl_peer_certificate",
+  "ssl_profile",
+  "cors_allowed_origins",
+  "use_x_forwarded_for",
+  "trusted_proxies",
+  "use_x_frame_options",
+  "ip_ban_enabled",
+  "login_attempts_threshold",
+];
+
 export interface SaveHttpConfigResult {
   restart: boolean;
 }

src/data/selector.ts

@@ -530,6 +530,10 @@ export interface StringSelector {
     placeholder?: string;
     autocomplete?: string;
     multiple?: true;
+    // Regular expression the value must match (HTML `pattern`); with `multiple`
+    // every entry is validated. `validation_message` is shown when it fails.
+    pattern?: string;
+    validation_message?: string;
   } | null;
 }
 

src/dialogs/http-pending-config/dialog-http-pending-config.ts

@@ -1,34 +1,27 @@
+import { mdiArrowRight } from "@mdi/js";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { formatNumericDuration } from "../../common/datetime/format_duration";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../components/ha-dialog-footer";
 import "../../components/ha-dialog";
+import "../../components/ha-svg-icon";
 import type { HttpConfig } from "../../data/http";
-import { promoteHttpConfig, saveHttpConfig } from "../../data/http";
+import {
+  HTTP_CONFIG_FIELDS,
+  promoteHttpConfig,
+  saveHttpConfig,
+} from "../../data/http";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../make-dialog-manager";
 import type { HttpPendingConfigDialogParams } from "./show-dialog-http-pending-config";
 
-const HTTP_FIELDS: (keyof HttpConfig)[] = [
-  "server_port",
-  "server_host",
-  "ssl_certificate",
-  "ssl_key",
-  "ssl_peer_certificate",
-  "ssl_profile",
-  "cors_allowed_origins",
-  "use_x_forwarded_for",
-  "trusted_proxies",
-  "use_x_frame_options",
-  "ip_ban_enabled",
-  "login_attempts_threshold",
-];
-
 @customElement("dialog-http-pending-config")
 export class DialogHttpPendingConfig
   extends LitElement
@@ -57,6 +50,10 @@ export class DialogHttpPendingConfig
     this._error = undefined;
     this._reverted = false;
     this._startCountdown();
+    // The field labels live in the config panel fragment, which is not loaded
+    // yet when this dialog pops up on startup. Load it so the changed-field
+    // names resolve; the dialog re-renders once hass updates.
+    this.hass.loadFragmentTranslation("config");
   }
 
   public closeDialog(): boolean {
@@ -114,17 +111,44 @@ export class DialogHttpPendingConfig
       return [];
     }
     const { stable, pending } = this._params.state;
-    return HTTP_FIELDS.filter(
+    return HTTP_CONFIG_FIELDS.filter(
       (key) => JSON.stringify(stable[key]) !== JSON.stringify(pending[key])
     );
   }
 
+  private _formatValue(key: keyof HttpConfig, value: unknown): string {
+    if (value === undefined || value === null || value === "") {
+      return this.hass.localize("ui.dialogs.http_pending_config.not_set");
+    }
+    if (typeof value === "boolean") {
+      return this.hass.localize(value ? "ui.common.yes" : "ui.common.no");
+    }
+    if (Array.isArray(value)) {
+      return value.length
+        ? value.join(", ")
+        : this.hass.localize("ui.dialogs.http_pending_config.not_set");
+    }
+    if (key === "ssl_profile") {
+      return (
+        this.hass.localize(
+          `ui.panel.config.network.http.ssl_profile_${value}` as any
+        ) || String(value)
+      );
+    }
+    return String(value);
+  }
+
   protected render() {
     if (!this._params) {
       return nothing;
     }
 
     const changes = this._changedFields;
+    const { stable, pending } = this._params.state;
+    const rtl = computeRTL(
+      this.hass.language,
+      this.hass.translationMetadata.translations
+    );
 
     return html`
       <ha-dialog
@@ -187,9 +211,25 @@ export class DialogHttpPendingConfig
                     ${changes.map(
                       (key) => html`
                         <li>
-                          ${this.hass.localize(
-                            `ui.panel.config.network.http.fields.${key}` as any
-                          )}
+                          <span class="field">
+                            ${this.hass.localize(
+                              `ui.panel.config.network.http.fields.${key}` as any
+                            )}
+                          </span>
+                          <span class="values">
+                            <span class="old"
+                              >${this._formatValue(key, stable[key])}</span
+                            >
+                            <ha-svg-icon
+                              .path=${mdiArrowRight}
+                              style=${styleMap({
+                                transform: rtl ? "scaleX(-1)" : "",
+                              })}
+                            ></ha-svg-icon>
+                            <span class="new"
+                              >${this._formatValue(key, pending![key])}</span
+                            >
+                          </span>
                         </li>
                       `
                     )}
@@ -320,13 +360,37 @@ export class DialogHttpPendingConfig
         margin-bottom: var(--ha-space-2);
       }
       ul {
+        list-style: none;
         margin: 0 0 var(--ha-space-4) 0;
-        padding-left: var(--ha-space-6);
-        color: var(--secondary-text-color);
+        padding: 0;
       }
       li {
+        padding: var(--ha-space-2) 0;
+        border-bottom: 1px solid var(--divider-color);
+      }
+      li:last-child {
+        border-bottom: none;
+      }
+      .field {
+        display: block;
+        font-weight: var(--ha-font-weight-medium);
         margin-bottom: var(--ha-space-1);
       }
+      .values {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--ha-space-2);
+        color: var(--secondary-text-color);
+        word-break: break-word;
+      }
+      .values .new {
+        color: var(--primary-text-color);
+      }
+      .values ha-svg-icon {
+        --mdc-icon-size: 18px;
+        flex-shrink: 0;
+      }
       ha-alert {
         display: block;
         margin-top: var(--ha-space-4);

src/panels/config/network/ha-config-http-form.ts

@@ -3,6 +3,10 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import {
+  IP_ADDRESS_OR_NETWORK_PATTERN,
+  IP_ADDRESS_PATTERN,
+} from "../../../common/string/is_ip_address";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -10,7 +14,11 @@ import "../../../components/ha-card";
 import "../../../components/ha-form/ha-form";
 import type { HaForm } from "../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../components/ha-form/types";
-import { fetchHttpConfig, saveHttpConfig } from "../../../data/http";
+import {
+  fetchHttpConfig,
+  HTTP_CONFIG_FIELDS,
+  saveHttpConfig,
+} from "../../../data/http";
 import type { HttpConfig } from "../../../data/http";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
@@ -24,10 +32,6 @@ const SCHEMA = memoizeOne(
         required: true,
         selector: { number: { min: 1, max: 65535, mode: "box" } },
       },
-      {
-        name: "server_host",
-        selector: { text: { multiple: true } },
-      },
       {
         name: "ssl",
         type: "expandable",
@@ -81,7 +85,15 @@ const SCHEMA = memoizeOne(
           },
           {
             name: "trusted_proxies",
-            selector: { text: { multiple: true } },
+            selector: {
+              text: {
+                multiple: true,
+                pattern: IP_ADDRESS_OR_NETWORK_PATTERN,
+                validation_message: localize(
+                  "ui.panel.config.network.http.invalid_network"
+                ),
+              },
+            },
           },
         ],
       },
@@ -108,6 +120,18 @@ const SCHEMA = memoizeOne(
         flatten: true,
         title: localize("ui.panel.config.network.http.sections.advanced"),
         schema: [
+          {
+            name: "server_host",
+            selector: {
+              text: {
+                multiple: true,
+                pattern: IP_ADDRESS_PATTERN,
+                validation_message: localize(
+                  "ui.panel.config.network.http.invalid_host"
+                ),
+              },
+            },
+          },
           {
             name: "cors_allowed_origins",
             selector: { text: { multiple: true } },
@@ -165,6 +189,9 @@ class HaConfigHttpForm extends LitElement {
 
     const schema = SCHEMA(this.hass.localize);
 
+    const portChanged =
+      !!this._stable && this._config?.server_port !== this._stable.server_port;
+
     return html`
       <ha-card
         outlined
@@ -174,6 +201,17 @@ class HaConfigHttpForm extends LitElement {
           <p class="description">
             ${this.hass.localize("ui.panel.config.network.http.description")}
           </p>
+          ${
+            portChanged
+              ? html`
+                  <ha-alert alert-type="warning">
+                    ${this.hass.localize(
+                      "ui.panel.config.network.http.port_warning"
+                    )}
+                  </ha-alert>
+                `
+              : nothing
+          }
           ${
             this._error
               ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
@@ -318,15 +356,7 @@ class HaConfigHttpForm extends LitElement {
       ) {
         return;
       }
-      // voluptuous formats errors as "<message> @ data['<field>']".
-      // If a field is identified, mark it inline; otherwise show a card-level
-      // alert.
-      const fieldMatch = err.message?.match(/\bdata\['([^']+)'\]/);
-      if (fieldMatch) {
-        this._fieldErrors = { [fieldMatch[1]]: err.message };
-      } else {
-        this._error = err.message;
-      }
+      this._handleSaveError(err);
     } finally {
       this._saving = false;
     }
@@ -340,6 +370,34 @@ class HaConfigHttpForm extends LitElement {
     target?.scrollIntoView({ behavior: "smooth", block: "center" });
   }
 
+  private _handleSaveError(err: any): void {
+    const rawMessage =
+      (typeof err === "string" ? err : err?.message) ||
+      this.hass.localize("ui.panel.config.network.http.save_error");
+    // Voluptuous formats validation errors as
+    //   "<reason> @ data['config']['<field>'][<index>]. Got '<value>'"
+    // Strip the internal data path for display and pick the deepest known
+    // field name so it can also be flagged inline.
+    const message =
+      rawMessage.replace(/\s*@\s*data(\['[^']*'\]|\[\d+\])+/g, "").trim() ||
+      rawMessage;
+    const field = [...rawMessage.matchAll(/\['([^']+)'\]/g)]
+      .map((match) => match[1])
+      .reverse()
+      .find((name) => HTTP_CONFIG_FIELDS.includes(name as keyof HttpConfig)) as
+      keyof HttpConfig | undefined;
+
+    if (field) {
+      // Show a card-level alert too — the field may sit in a collapsed section.
+      this._error = `${this.hass.localize(
+        `ui.panel.config.network.http.fields.${field}` as any
+      )}: ${message}`;
+      this._fieldErrors = { [field]: message };
+    } else {
+      this._error = message;
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/translations/en.json

@@ -1486,6 +1486,7 @@
         "auto_revert": "Settings will automatically revert in {time}.",
         "reverted": "Home Assistant reverted the HTTP server settings.",
         "changes_label": "Changed settings:",
+        "not_set": "Not set",
         "confirm": "Confirm",
         "revert": "Revert",
         "close": "Close",
@@ -8679,6 +8680,10 @@
             "description": "Configure how Home Assistant serves its web interface. Saving restarts Home Assistant.",
             "save": "Save",
             "save_no_changes": "Nothing changed — no restart needed.",
+            "save_error": "Could not save the HTTP configuration.",
+            "port_warning": "Changing the server port breaks the connection for the Home Assistant mobile apps and other clients until you update the port in their settings.",
+            "invalid_host": "Enter a valid IP address.",
+            "invalid_network": "Enter a valid IP address or network.",
             "save_confirm": {
               "title": "Restart required",
               "text": "Saving will restart Home Assistant to apply the new HTTP settings.",
@@ -8690,7 +8695,7 @@
               "ssl": "SSL/TLS",
               "reverse_proxy": "Reverse proxy",
               "ip_banning": "IP banning",
-              "advanced": "Advanced"
+              "advanced": "More options"
             },
             "fields": {
               "server_port": "Server port",

test/common/string/is_ip_address.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest";
+import {
+  IP_ADDRESS_OR_NETWORK_PATTERN,
+  IP_ADDRESS_PATTERN,
+  isIPAddress,
+  isIPAddressV4OrV6,
+  isIPNetwork,
+  isIPv6Address,
+} from "../../../src/common/string/is_ip_address";
+
+describe("isIPAddress (IPv4)", () => {
+  it("accepts valid IPv4 addresses", () => {
+    expect(isIPAddress("192.168.1.10")).toBe(true);
+    expect(isIPAddress("0.0.0.0")).toBe(true);
+    expect(isIPAddress("255.255.255.255")).toBe(true);
+  });
+  it("rejects invalid IPv4 addresses", () => {
+    expect(isIPAddress("256.1.1.1")).toBe(false);
+    expect(isIPAddress("192.168.1")).toBe(false);
+    expect(isIPAddress("192.168.1.10/24")).toBe(false);
+    expect(isIPAddress("fe80::1")).toBe(false);
+    expect(isIPAddress("")).toBe(false);
+  });
+});
+
+describe("isIPv6Address", () => {
+  it("accepts valid IPv6 addresses", () => {
+    expect(isIPv6Address("fe80::85d:e82c:9446:7995")).toBe(true);
+    expect(isIPv6Address("::1")).toBe(true);
+    expect(isIPv6Address("1050:0000:0000:0000:0005:0600:300c:326b")).toBe(true);
+    expect(isIPv6Address("::ffff:192.168.1.1")).toBe(true);
+  });
+  it("rejects invalid IPv6 addresses", () => {
+    expect(isIPv6Address("192.168.1.10")).toBe(false);
+    expect(isIPv6Address("fe80::85d::7995")).toBe(false);
+    expect(isIPv6Address("gggg::1")).toBe(false);
+    expect(isIPv6Address("")).toBe(false);
+  });
+});
+
+describe("isIPAddressV4OrV6", () => {
+  it("accepts both families", () => {
+    expect(isIPAddressV4OrV6("192.168.1.10")).toBe(true);
+    expect(isIPAddressV4OrV6("fe80::1")).toBe(true);
+  });
+  it("rejects networks and garbage", () => {
+    expect(isIPAddressV4OrV6("192.168.1.0/24")).toBe(false);
+    expect(isIPAddressV4OrV6("not-an-ip")).toBe(false);
+  });
+});
+
+describe("isIPNetwork (CIDR)", () => {
+  it("accepts valid networks", () => {
+    expect(isIPNetwork("192.168.1.0/24")).toBe(true);
+    expect(isIPNetwork("10.0.0.0/8")).toBe(true);
+    expect(isIPNetwork("172.16.0.0/12")).toBe(true);
+    expect(isIPNetwork("0.0.0.0/0")).toBe(true);
+    expect(isIPNetwork("fd00::/8")).toBe(true);
+    expect(isIPNetwork("fe80::/128")).toBe(true);
+  });
+  it("rejects invalid networks", () => {
+    // Prefix out of range — the reported production error.
+    expect(isIPNetwork("172.30.33.0/24444444")).toBe(false);
+    expect(isIPNetwork("192.168.1.0/33")).toBe(false);
+    expect(isIPNetwork("fd00::/129")).toBe(false);
+    expect(isIPNetwork("192.168.1.0")).toBe(false);
+    expect(isIPNetwork("192.168.1.0/24/24")).toBe(false);
+    expect(isIPNetwork("not-a-network/24")).toBe(false);
+  });
+});
+
+// The HTML `pattern` attribute is anchored by the browser as `^(?:…)$`.
+const matchesPattern = (pattern: string, value: string): boolean =>
+  new RegExp(`^(?:${pattern})$`).test(value);
+
+describe("IP_ADDRESS_PATTERN", () => {
+  it("accepts IPv4 and IPv6 addresses", () => {
+    expect(matchesPattern(IP_ADDRESS_PATTERN, "192.168.1.10")).toBe(true);
+    expect(matchesPattern(IP_ADDRESS_PATTERN, "fe80::1")).toBe(true);
+  });
+  it("rejects networks and garbage", () => {
+    expect(matchesPattern(IP_ADDRESS_PATTERN, "192.168.1.0/24")).toBe(false);
+    expect(matchesPattern(IP_ADDRESS_PATTERN, "not-an-ip")).toBe(false);
+    expect(matchesPattern(IP_ADDRESS_PATTERN, "256.1.1.1")).toBe(false);
+  });
+});
+
+describe("IP_ADDRESS_OR_NETWORK_PATTERN", () => {
+  it("accepts addresses and networks", () => {
+    expect(matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "192.168.1.10")).toBe(
+      true
+    );
+    expect(
+      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "192.168.1.0/24")
+    ).toBe(true);
+    expect(matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "fd00::/8")).toBe(
+      true
+    );
+  });
+  it("rejects out-of-range prefixes and garbage", () => {
+    // The reported production error.
+    expect(
+      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "172.30.33.0/24444444")
+    ).toBe(false);
+    expect(
+      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "192.168.1.0/33")
+    ).toBe(false);
+    expect(
+      matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "1.1.1.1/233444")
+    ).toBe(false);
+    expect(matchesPattern(IP_ADDRESS_OR_NETWORK_PATTERN, "not-an-ip")).toBe(
+      false
+    );
+  });
+});

yarn.lock

@@ -2745,135 +2745,135 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/bigdecimal@npm:0.2.6":
-  version: 0.2.6
-  resolution: "@formatjs/bigdecimal@npm:0.2.6"
-  checksum: 10/5ef248f0feadeb1bceb9fa65ba36ccd1768a41ea6165bc58ae794564ebb09a67621d894fc94ab8b328cc7bba60e4c181847562c92b7cec5cd1208a4191fbbe67
+"@formatjs/bigdecimal@npm:0.2.7":
+  version: 0.2.7
+  resolution: "@formatjs/bigdecimal@npm:0.2.7"
+  checksum: 10/e78fe804ed6805708b849fbd49006e981cfa736677bac29556f84bd6ca5271f848076f2f35de087197a559d434435bbfaecca2776563a5b46ecd6246bde7406d
   languageName: node
   linkType: hard
 
-"@formatjs/fast-memoize@npm:3.1.6":
-  version: 3.1.6
-  resolution: "@formatjs/fast-memoize@npm:3.1.6"
-  checksum: 10/7dec3e82586d4c4889671c6081d7b0d87b2c229ba551d8328f96ae8ab58b2cd6056fc5d360c0b0c9688b7164f12ef517428016fbce15b950987a77005e481824
+"@formatjs/fast-memoize@npm:3.1.7":
+  version: 3.1.7
+  resolution: "@formatjs/fast-memoize@npm:3.1.7"
+  checksum: 10/2d7ead48684539764ecb8a52178719169186595e830d9d6941eff12bec1ae31e20642a9cfd197007c48a8cc7e965bf61445ffcccc0fd77281341271d00e7b8fb
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:3.5.13":
-  version: 3.5.13
-  resolution: "@formatjs/icu-messageformat-parser@npm:3.5.13"
+"@formatjs/icu-messageformat-parser@npm:3.5.14":
+  version: 3.5.14
+  resolution: "@formatjs/icu-messageformat-parser@npm:3.5.14"
   dependencies:
-    "@formatjs/icu-skeleton-parser": "npm:2.1.10"
-  checksum: 10/b6451febdcfbe32571af5ae1c94cc560f6b3d815401321849c9dba229c460edf9ee4eca4c2d4da6dedefea416f2e3b10b4aa5507383e12b67042f941157e8045
+    "@formatjs/icu-skeleton-parser": "npm:2.1.11"
+  checksum: 10/e842d8ec0c17c174da0eb562e161f5216b31cb83546bf94fd3dd6e4b6493f8c0c404b9fb47b6b8106a607a83d305386bc1fb44abbc70453cf467d261e39d09c1
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:2.1.10":
-  version: 2.1.10
-  resolution: "@formatjs/icu-skeleton-parser@npm:2.1.10"
-  checksum: 10/ec30d106ce38de80f4128d0cdfac15699628652807695843254bf0d31650bd0dc4b57e48691d164556234494d59b2816e710fa12321234c85b803c5cda32bedf
+"@formatjs/icu-skeleton-parser@npm:2.1.11":
+  version: 2.1.11
+  resolution: "@formatjs/icu-skeleton-parser@npm:2.1.11"
+  checksum: 10/492f42bd4ad72b2cdb4fd75a07e3874aa78e88f346027058f74c58e3828378092784176c9f7c77f4b5baf58ffaa1a4e8f5efcb53143552def2990510d0ac3c16
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:7.4.10":
-  version: 7.4.10
-  resolution: "@formatjs/intl-datetimeformat@npm:7.4.10"
+"@formatjs/intl-datetimeformat@npm:7.5.0":
+  version: 7.5.0
+  resolution: "@formatjs/intl-datetimeformat@npm:7.5.0"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.6"
-    "@formatjs/intl-localematcher": "npm:0.8.11"
-  checksum: 10/67fd55857555fe2651bc8ed5544fb036807d926542c92ccc07e475c14493d93a87d2cc805d04c812c6df68c9fdaeb4d64b399ac019f8c27940e2b872c9837618
+    "@formatjs/bigdecimal": "npm:0.2.7"
+    "@formatjs/intl-localematcher": "npm:0.8.12"
+  checksum: 10/8f5bbcd2768609e466e5d03cd42880e62fa5c584ef57d716023a0f89ffff12036da41a248956cc1b3369b1af0155459464ac05d5f8fdfb42c0aa066d77ede815
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:7.3.11":
-  version: 7.3.11
-  resolution: "@formatjs/intl-displaynames@npm:7.3.11"
+"@formatjs/intl-displaynames@npm:7.3.12":
+  version: 7.3.12
+  resolution: "@formatjs/intl-displaynames@npm:7.3.12"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.11"
-  checksum: 10/3278e430d7f2bbb0656f5cf0a76a1a539a572c58f0d2473e2a175bc927de7e3a4a01823c3c98a38dc2878fd05ca3a6ebe83afa94dbd254733fe9195377064347
+    "@formatjs/intl-localematcher": "npm:0.8.12"
+  checksum: 10/d802f9d44831fcb567efd7399b2f20da7872bf6cdf3cc8c5b38b188111fc8c38af704a79f55902caadd50edb8ebf2f830c473aecc5a93573ddbe1bcfba275793
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.10.16":
-  version: 0.10.16
-  resolution: "@formatjs/intl-durationformat@npm:0.10.16"
+"@formatjs/intl-durationformat@npm:0.10.17":
+  version: 0.10.17
+  resolution: "@formatjs/intl-durationformat@npm:0.10.17"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.6"
-    "@formatjs/intl-localematcher": "npm:0.8.11"
-  checksum: 10/8d0f5bbf24528c6d8e65636502de64b13e12c71854935db8bf2ce6bcc5b6e0e19533d0e0178c1079b1dd52214b025369c98e297b0e8484fa8ce29c9f6408c953
+    "@formatjs/bigdecimal": "npm:0.2.7"
+    "@formatjs/intl-localematcher": "npm:0.8.12"
+  checksum: 10/ee3210da7b946a80995b36609a360a55d63f4626e3f40223215d782082f1f8254c49af6145f397ea6324b370038095145c6ff51fda8712e7b611f8609e1ac2b3
   languageName: node
   linkType: hard
 
-"@formatjs/intl-getcanonicallocales@npm:3.2.10":
-  version: 3.2.10
-  resolution: "@formatjs/intl-getcanonicallocales@npm:3.2.10"
-  checksum: 10/dbf704d141bd4efc4e2687bd745d1a847a7b94955c23d2f06fe26add8e5ab8ad6096168babad72f2b4568f1fbee32c1528082269273b750bed4bdd1dc5b5d396
+"@formatjs/intl-getcanonicallocales@npm:3.2.11":
+  version: 3.2.11
+  resolution: "@formatjs/intl-getcanonicallocales@npm:3.2.11"
+  checksum: 10/3132dba96c7cfe63787e126a91e620211a32fa6a623cb763f96102ff153845fb12486f378aa1d761736a7641adb19f5cc307156c8b7a40eedd00223b87c8d2a9
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:8.3.11":
-  version: 8.3.11
-  resolution: "@formatjs/intl-listformat@npm:8.3.11"
+"@formatjs/intl-listformat@npm:8.3.12":
+  version: 8.3.12
+  resolution: "@formatjs/intl-listformat@npm:8.3.12"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.11"
-  checksum: 10/a08a74c22bb01871944cad91fcb87342e30f3f6792375af3028737794a56b2dec6b7506c8e2b9d0495f4eff50f4d63542fcf86116cd4fdf1d4d8b6838a54ac5c
+    "@formatjs/intl-localematcher": "npm:0.8.12"
+  checksum: 10/3ae640ab968b3051fd1b2d150d892a087d5a4feecb8bdf4a6a61726888996ee0b054de43e35548374d0a61d8577b5a48f23abfb9506c1560f88d64c0809691f1
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:5.3.9":
-  version: 5.3.9
-  resolution: "@formatjs/intl-locale@npm:5.3.9"
+"@formatjs/intl-locale@npm:5.3.10":
+  version: 5.3.10
+  resolution: "@formatjs/intl-locale@npm:5.3.10"
   dependencies:
-    "@formatjs/intl-getcanonicallocales": "npm:3.2.10"
-    "@formatjs/intl-supportedvaluesof": "npm:2.3.8"
-  checksum: 10/e2af858ec3ff75611d5412a1e39abce882eab2cf13eb278e4cd1647481321823cc2303c74e86c38b95662e668f6900f9d666136debb2377231d5ddf0bdba3218
+    "@formatjs/intl-getcanonicallocales": "npm:3.2.11"
+    "@formatjs/intl-supportedvaluesof": "npm:2.3.9"
+  checksum: 10/f7d8be5ea145089b9daa56e24158f835ed0f3d67d3230b42c3a8a32f3dbdd98534236e9262d86f628288d09968fec32d1c2f5906ec1d5f38e692d436a4052255
   languageName: node
   linkType: hard
 
-"@formatjs/intl-localematcher@npm:0.8.11":
-  version: 0.8.11
-  resolution: "@formatjs/intl-localematcher@npm:0.8.11"
+"@formatjs/intl-localematcher@npm:0.8.12":
+  version: 0.8.12
+  resolution: "@formatjs/intl-localematcher@npm:0.8.12"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.6"
-  checksum: 10/482b819100997439b2c7295c8112b43c81f64083644cde7124ef1afecaa8fc663bc7b9820b6386d02b45872db7a943c3f1f43a4f78780fe52ed4873ef422e7dc
+    "@formatjs/fast-memoize": "npm:3.1.7"
+  checksum: 10/4f9ecb936ac76cb978460edacbb2704e9760f65203e2c17f96b8db605a3c344ecc7da2ac78c897316f519b033c623b39062ba720e23fe0c2162af7c761f765e6
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:9.3.12":
-  version: 9.3.12
-  resolution: "@formatjs/intl-numberformat@npm:9.3.12"
+"@formatjs/intl-numberformat@npm:9.3.13":
+  version: 9.3.13
+  resolution: "@formatjs/intl-numberformat@npm:9.3.13"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.6"
-    "@formatjs/intl-localematcher": "npm:0.8.11"
-  checksum: 10/6a9f3115136ce9f74fab520d5eeddb6a3f23d32492b004c9c6f108a19dd18e9ccaec04582569238f089b3028cc68783a2b75328b3ce38b13bf30d6267cb33b20
+    "@formatjs/bigdecimal": "npm:0.2.7"
+    "@formatjs/intl-localematcher": "npm:0.8.12"
+  checksum: 10/59530d3aec0411a2dae8f2113829b969dceec3ec4a59032cc985ef1b9cebec6d406fbe4dd44ac69e905b4f3b3edb333d61f728a5610fc1e1e132e4bdcb2436aa
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:6.3.11":
-  version: 6.3.11
-  resolution: "@formatjs/intl-pluralrules@npm:6.3.11"
+"@formatjs/intl-pluralrules@npm:6.3.12":
+  version: 6.3.12
+  resolution: "@formatjs/intl-pluralrules@npm:6.3.12"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.6"
-    "@formatjs/intl-localematcher": "npm:0.8.11"
-  checksum: 10/c5506c1a20f1aa7fdca24b6800243aec5cbacd5aa0de96d01b497fa9485f6affa7abf6b0d2ea04ebff0ec8a2d22a41913f4353b9fd9c6054899a9f168ef2ebd0
+    "@formatjs/bigdecimal": "npm:0.2.7"
+    "@formatjs/intl-localematcher": "npm:0.8.12"
+  checksum: 10/23833b17822a648fc4e87dfe581733f303a8d1c4721a47e875994bcb56c5985c83ea01f0ab176557886fc6b2ef158ce50f9cafa1e1441badefddec0ea79c5303
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:12.3.11":
-  version: 12.3.11
-  resolution: "@formatjs/intl-relativetimeformat@npm:12.3.11"
+"@formatjs/intl-relativetimeformat@npm:12.3.12":
+  version: 12.3.12
+  resolution: "@formatjs/intl-relativetimeformat@npm:12.3.12"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.11"
-  checksum: 10/ead23de113c9c28334ff2f8696e0f5ff0567f2b929def10d06e67dba2ca502967671abb1bb6ad06b200329e0215b469edd3c3ad9ed4259b313e97f2badfdab53
+    "@formatjs/intl-localematcher": "npm:0.8.12"
+  checksum: 10/c667ed62a13cbc8cd5d07f5dbc57a4d1b7e23c31f2aac0ef9e5f509feec014c5a2dfd77ac41a2c34fe537d6f1f6d8ebc8391a479a4294867bb4e980c7211f822
   languageName: node
   linkType: hard
 
-"@formatjs/intl-supportedvaluesof@npm:2.3.8":
-  version: 2.3.8
-  resolution: "@formatjs/intl-supportedvaluesof@npm:2.3.8"
+"@formatjs/intl-supportedvaluesof@npm:2.3.9":
+  version: 2.3.9
+  resolution: "@formatjs/intl-supportedvaluesof@npm:2.3.9"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.6"
-  checksum: 10/d9d4e4d5dda1c26c771d0f2746e1031f9695dee663fb2d2ef9f83794c1e8683de88caf6cdb9718022c592cc879c5c1afa7f72af4c77da9ce5e1d98b54267dfff
+    "@formatjs/fast-memoize": "npm:3.1.7"
+  checksum: 10/36254064dd8aab3cb2cbe31db88d751cb0c1d2b0739563ddd1736ed7bd8ec02881de385a69cc4ab7b691f670a3f11ec61a41ba678baa3d0967d87dc0b395cc7b
   languageName: node
   linkType: hard
 
@@ -8681,9 +8681,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:10.6.0":
-  version: 10.6.0
-  resolution: "eslint@npm:10.6.0"
+"eslint@npm:10.7.0":
+  version: 10.7.0
+  resolution: "eslint@npm:10.7.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.8.0"
     "@eslint-community/regexpp": "npm:^4.12.2"
@@ -8722,7 +8722,7 @@ __metadata:
       optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10/36d02cdbe37668e601f255917c605d10a5d06d278648dc72cec21fe23b7b60a53453241b32c382ba8107533cacba70aeec97581cc4f4bb591544b1ada2516335
+  checksum: 10/51cb70fbdd0de6586f0cb12625388faab18eb679cbdb523ecb631cae9f47fd9171d9ff02f570dc4d2e5700017908a81477511025ccb2a6603c5928fbfddcaebf
   languageName: node
   linkType: hard
 
@@ -9736,15 +9736,15 @@ __metadata:
     "@date-fns/tz": "npm:1.5.0"
     "@egjs/hammerjs": "npm:2.0.17"
     "@eslint/js": "npm:10.0.1"
-    "@formatjs/intl-datetimeformat": "npm:7.4.10"
-    "@formatjs/intl-displaynames": "npm:7.3.11"
-    "@formatjs/intl-durationformat": "npm:0.10.16"
-    "@formatjs/intl-getcanonicallocales": "npm:3.2.10"
-    "@formatjs/intl-listformat": "npm:8.3.11"
-    "@formatjs/intl-locale": "npm:5.3.9"
-    "@formatjs/intl-numberformat": "npm:9.3.12"
-    "@formatjs/intl-pluralrules": "npm:6.3.11"
-    "@formatjs/intl-relativetimeformat": "npm:12.3.11"
+    "@formatjs/intl-datetimeformat": "npm:7.5.0"
+    "@formatjs/intl-displaynames": "npm:7.3.12"
+    "@formatjs/intl-durationformat": "npm:0.10.17"
+    "@formatjs/intl-getcanonicallocales": "npm:3.2.11"
+    "@formatjs/intl-listformat": "npm:8.3.12"
+    "@formatjs/intl-locale": "npm:5.3.10"
+    "@formatjs/intl-numberformat": "npm:9.3.13"
+    "@formatjs/intl-pluralrules": "npm:6.3.12"
+    "@formatjs/intl-relativetimeformat": "npm:12.3.12"
     "@fullcalendar/core": "npm:6.1.21"
     "@fullcalendar/daygrid": "npm:6.1.21"
     "@fullcalendar/interaction": "npm:6.1.21"
@@ -9814,7 +9814,7 @@ __metadata:
     dialog-polyfill: "npm:0.5.6"
     echarts: "npm:6.1.0"
     element-internals-polyfill: "npm:3.0.2"
-    eslint: "npm:10.6.0"
+    eslint: "npm:10.7.0"
     eslint-config-prettier: "npm:10.1.8"
     eslint-import-resolver-webpack: "npm:0.13.11"
     eslint-plugin-import-x: "npm:4.17.1"
@@ -9838,7 +9838,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.3.0"
-    intl-messageformat: "npm:11.2.10"
+    intl-messageformat: "npm:11.2.11"
     js-yaml: "npm:5.2.1"
     jsdom: "npm:29.1.1"
     jszip: "npm:3.10.1"
@@ -10186,13 +10186,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:11.2.10":
-  version: 11.2.10
-  resolution: "intl-messageformat@npm:11.2.10"
+"intl-messageformat@npm:11.2.11":
+  version: 11.2.11
+  resolution: "intl-messageformat@npm:11.2.11"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.6"
-    "@formatjs/icu-messageformat-parser": "npm:3.5.13"
-  checksum: 10/d3f751ebfe2015cf4a011afe5679398dfa7156c0bc2ccd76ba8c5aa4e82946bd663e750538c97a8b4c946a6d5f5d19fbb56b2e159d422c416e51bba9b10b2746
+    "@formatjs/fast-memoize": "npm:3.1.7"
+    "@formatjs/icu-messageformat-parser": "npm:3.5.14"
+  checksum: 10/5074494588d6c16fb2730234b3c8eb80799189c9c21485323b5c119c22d3a7a8b385868b46479b81c09ca350d82ea0eeaf82b5e9799911b9a1b8bddbb2c3ad1c
   languageName: node
   linkType: hard