Merge branch 'dev' of github.com:home-assistant/frontend into gulp-ts

* Handle visibility changes in webrtc player

* Implement visibility handling for hls

* Remove console logs

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -11,7 +11,7 @@ body:
 
         **Please do not report issues for custom cards.**
 
-        [fr]: https://github.com/home-assistant/frontend/discussions
+        [fr]: https://github.com/orgs/home-assistant/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases
   - type: checkboxes
     attributes:
@@ -108,9 +108,9 @@ body:
       render: yaml
   - type: textarea
     attributes:
-      label: Javascript errors shown in your browser console/inspector
+      label: JavaScript errors shown in your browser console/inspector
       description: >
-        If you come across any Javascript or other error logs, e.g., in your
+        If you come across any JavaScript or other error logs, e.g., in your
         browser console/inspector please provide them.
       render: txt
   - type: textarea

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: Request a feature for the UI / Dashboards
-    url: https://github.com/home-assistant/frontend/discussions/category_choices
+    url: https://github.com/orgs/home-assistant/discussions
     about: Request a new feature for the Home Assistant frontend.
   - name: Report a bug that is NOT related to the UI / Dashboards
     url: https://github.com/home-assistant/core/issues

.github/ISSUE_TEMPLATE/task.yml

@@ -0,0 +1,53 @@
+name: Task
+description: For staff only - Create a task
+type: Task
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## ⚠️ RESTRICTED ACCESS
+
+        **This form is restricted to Open Home Foundation staff and authorized contributors only.**
+
+        If you are a community member wanting to contribute, please:
+        - For bug reports: Use the [bug report form](https://github.com/home-assistant/frontend/issues/new?template=bug_report.yml)
+        - For feature requests: Submit to [Feature Requests](https://github.com/orgs/home-assistant/discussions)
+
+        ---
+
+        ### For authorized contributors
+
+        Use this form to create tasks for development work, improvements, or other actionable items that need to be tracked.
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: |
+        Provide a clear and detailed description of the task that needs to be accomplished.
+
+        Be specific about what needs to be done, why it's important, and any constraints or requirements.
+      placeholder: |
+        Describe the task, including:
+        - What needs to be done
+        - Why this task is needed
+        - Expected outcome
+        - Any constraints or requirements
+    validations:
+      required: true
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: Additional context
+      description: |
+        Any additional information, links, research, or context that would be helpful.
+
+        Include links to related issues, research, prototypes, roadmap opportunities etc.
+      placeholder: |
+        - Roadmap opportunity: [link]
+        - Epic: [link]
+        - Feature request: [link]
+        - Technical design documents: [link]
+        - Prototype/mockup: [link]
+        - Dependencies: [links]
+    validations:
+      required: false

.github/copilot-instructions.md

@@ -0,0 +1,592 @@
+# GitHub Copilot & Claude Code Instructions
+
+You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.
+
+## Table of Contents
+
+- [Quick Reference](#quick-reference)
+- [Core Architecture](#core-architecture)
+- [Development Standards](#development-standards)
+- [Component Library](#component-library)
+- [Common Patterns](#common-patterns)
+- [Text and Copy Guidelines](#text-and-copy-guidelines)
+- [Development Workflow](#development-workflow)
+- [Review Guidelines](#review-guidelines)
+
+## Quick Reference
+
+### Essential Commands
+
+```bash
+yarn lint          # ESLint + Prettier + TypeScript + Lit
+yarn format        # Auto-fix ESLint + Prettier
+yarn lint:types    # TypeScript compiler
+yarn test          # Vitest
+script/develop     # Development server
+```
+
+### Component Prefixes
+
+- `ha-` - Home Assistant components
+- `hui-` - Lovelace UI components
+- `dialog-` - Dialog components
+
+### Import Patterns
+
+```typescript
+import type { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
+import { showAlertDialog } from "../dialogs/generic/show-alert-dialog";
+```
+
+## Core Architecture
+
+The Home Assistant frontend is a modern web application that:
+
+- Uses Web Components (custom elements) built with Lit framework
+- Is written entirely in TypeScript with strict type checking
+- Communicates with the backend via WebSocket API
+- Provides comprehensive theming and internationalization
+
+## Development Standards
+
+### Code Quality Requirements
+
+**Linting and Formatting (Enforced by Tools)**
+
+- ESLint config extends Airbnb, TypeScript strict, Lit, Web Components, Accessibility
+- Prettier with ES5 trailing commas enforced
+- No console statements (`no-console: "error"`) - use proper logging
+- Import organization: No unused imports, consistent type imports
+
+**Naming Conventions**
+
+- PascalCase for types and classes
+- camelCase for variables, methods
+- Private methods require leading underscore
+- Public methods forbid leading underscore
+
+### TypeScript Usage
+
+- **Always use strict TypeScript**: Enable all strict flags, avoid `any` types
+- **Proper type imports**: Use `import type` for type-only imports
+- **Define interfaces**: Create proper interfaces for data structures
+- **Type component properties**: All Lit properties must be properly typed
+- **No unused variables**: Prefix with `_` if intentionally unused
+- **Consistent imports**: Use `@typescript-eslint/consistent-type-imports`
+
+```typescript
+// Good
+import type { HomeAssistant } from "../types";
+
+interface EntityConfig {
+  entity: string;
+  name?: string;
+}
+
+@property({ type: Object })
+hass!: HomeAssistant;
+
+// Bad
+@property()
+hass: any;
+```
+
+### Web Components with Lit
+
+- **Use Lit 3.x patterns**: Follow modern Lit practices
+- **Extend appropriate base classes**: Use `LitElement`, `SubscribeMixin`, or other mixins as needed
+- **Define custom element names**: Use `ha-` prefix for components
+
+```typescript
+@customElement("ha-my-component")
+export class HaMyComponent extends LitElement {
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _config?: MyComponentConfig;
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+
+  render() {
+    return html`<div>Content</div>`;
+  }
+}
+```
+
+### Component Guidelines
+
+- **Use composition**: Prefer composition over inheritance
+- **Lazy load panels**: Heavy panels should be dynamically imported
+- **Optimize renders**: Use `@state()` for internal state, `@property()` for public API
+- **Handle loading states**: Always show appropriate loading indicators
+- **Support themes**: Use CSS custom properties from theme
+
+### Data Management
+
+- **Use WebSocket API**: All backend communication via home-assistant-js-websocket
+- **Cache appropriately**: Use collections and caching for frequently accessed data
+- **Handle errors gracefully**: All API calls should have error handling
+- **Update real-time**: Subscribe to state changes for live updates
+
+```typescript
+// Good
+try {
+  const result = await fetchEntityRegistry(this.hass.connection);
+  this._processResult(result);
+} catch (err) {
+  showAlertDialog(this, {
+    text: `Failed to load: ${err.message}`,
+  });
+}
+```
+
+### Styling Guidelines
+
+- **Use CSS custom properties**: Leverage the theme system
+- **Mobile-first responsive**: Design for mobile, enhance for desktop
+- **Follow Material Design**: Use Material Web Components where appropriate
+- **Support RTL**: Ensure all layouts work in RTL languages
+
+```typescript
+static get styles() {
+  return css`
+    :host {
+      --spacing: 16px;
+      padding: var(--spacing);
+      color: var(--primary-text-color);
+      background-color: var(--card-background-color);
+    }
+
+    @media (max-width: 600px) {
+      :host {
+        --spacing: 8px;
+      }
+    }
+  `;
+}
+```
+
+### Performance Best Practices
+
+- **Code split**: Split code at the panel/dialog level
+- **Lazy load**: Use dynamic imports for heavy components
+- **Optimize bundle**: Keep initial bundle size minimal
+- **Use virtual scrolling**: For long lists, implement virtual scrolling
+- **Memoize computations**: Cache expensive calculations
+
+### Testing Requirements
+
+- **Write tests**: Add tests for data processing and utilities
+- **Test with Vitest**: Use the established test framework
+- **Mock appropriately**: Mock WebSocket connections and API calls
+- **Test accessibility**: Ensure components are accessible
+
+## Component Library
+
+### Dialog Components
+
+**Available Dialog Types:**
+
+- `ha-md-dialog` - Preferred for new code (Material Design 3)
+- `ha-dialog` - Legacy component still widely used
+
+**Opening Dialogs (Fire Event Pattern - Recommended):**
+
+```typescript
+fireEvent(this, "show-dialog", {
+  dialogTag: "dialog-example",
+  dialogImport: () => import("./dialog-example"),
+  dialogParams: { title: "Example", data: someData },
+});
+```
+
+**Dialog Implementation Requirements:**
+
+- Implement `HassDialog<T>` interface
+- Use `createCloseHeading()` for standard headers
+- Import `haStyleDialog` for consistent styling
+- Return `nothing` when no params (loading state)
+- Fire `dialog-closed` event when closing
+- Add `dialogInitialFocus` for accessibility
+
+````
+
+### Form Component (ha-form)
+- Schema-driven using `HaFormSchema[]`
+- Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
+- Built-in validation with error display
+- Use `dialogInitialFocus` in dialogs
+- Use `computeLabel`, `computeError`, `computeHelper` for translations
+
+```typescript
+<ha-form
+  .hass=${this.hass}
+  .data=${this._data}
+  .schema=${this._schema}
+  .error=${this._errors}
+  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
+  @value-changed=${this._valueChanged}
+></ha-form>
+````
+
+### Alert Component (ha-alert)
+
+- Types: `error`, `warning`, `info`, `success`
+- Properties: `title`, `alert-type`, `dismissable`, `icon`, `action`, `rtl`
+- Content announced by screen readers when dynamically displayed
+
+```html
+<ha-alert alert-type="error">Error message</ha-alert>
+<ha-alert alert-type="warning" title="Warning">Description</ha-alert>
+<ha-alert alert-type="success" dismissable>Success message</ha-alert>
+```
+
+## Common Patterns
+
+### Creating a Panel
+
+```typescript
+@customElement("ha-panel-myfeature")
+export class HaPanelMyFeature extends SubscribeMixin(LitElement) {
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true })
+  narrow!: boolean;
+
+  @property()
+  route!: Route;
+
+  hassSubscribe() {
+    return [
+      subscribeEntityRegistry(this.hass.connection, (entities) => {
+        this._entities = entities;
+      }),
+    ];
+  }
+}
+```
+
+### Creating a Dialog
+
+```typescript
+@customElement("dialog-my-feature")
+export class DialogMyFeature
+  extends LitElement
+  implements HassDialog<MyDialogParams>
+{
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _params?: MyDialogParams;
+
+  public async showDialog(params: MyDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(this.hass, this._params.title)}
+      >
+        <!-- Dialog content -->
+        <ha-button @click=${this.closeDialog} slot="secondaryAction">
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button @click=${this._submit} slot="primaryAction">
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = [haStyleDialog, css``];
+}
+```
+
+### Dialog Design Guidelines
+
+- Max width: 560px (Alert/confirmation: 320px fixed width)
+- Close X-icon on top left (all screen sizes)
+- Submit button grouped with cancel at bottom right
+- Keep button labels short: "Save", "Delete", "Enable"
+- Destructive actions use red warning button
+- Always use a title (best practice)
+- Strive for minimalism
+
+#### Creating a Lovelace Card
+
+**Purpose**: Cards allow users to tell different stories about their house (based on gallery)
+
+```typescript
+@customElement("hui-my-card")
+export class HuiMyCard extends LitElement implements LovelaceCard {
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _config?: MyCardConfig;
+
+  public setConfig(config: MyCardConfig): void {
+    if (!config.entity) {
+      throw new Error("Entity required");
+    }
+    this._config = config;
+  }
+
+  public getCardSize(): number {
+    return 3; // Height in grid units
+  }
+
+  // Optional: Editor for card configuration
+  public static getConfigElement(): LovelaceCardEditor {
+    return document.createElement("hui-my-card-editor");
+  }
+
+  // Optional: Stub config for card picker
+  public static getStubConfig(): object {
+    return { entity: "" };
+  }
+}
+```
+
+**Card Guidelines:**
+
+- Cards are highly customizable for different households
+- Implement `LovelaceCard` interface with `setConfig()` and `getCardSize()`
+- Use proper error handling in `setConfig()`
+- Consider all possible states (loading, error, unavailable)
+- Support different entity types and states
+- Follow responsive design principles
+- Add configuration editor when needed
+
+### Internationalization
+
+- **Use localize**: Always use the localization system
+- **Add translation keys**: Add keys to src/translations/en.json
+- **Support placeholders**: Use proper placeholder syntax
+
+```typescript
+this.hass.localize("ui.panel.config.updates.update_available", {
+  count: 5,
+});
+```
+
+### Accessibility
+
+- **ARIA labels**: Add appropriate ARIA labels
+- **Keyboard navigation**: Ensure all interactions work with keyboard
+- **Screen reader support**: Test with screen readers
+- **Color contrast**: Meet WCAG AA standards
+
+## Development Workflow
+
+### Setup and Commands
+
+1. **Setup**: `script/setup` - Install dependencies
+2. **Develop**: `script/develop` - Development server
+3. **Lint**: `yarn lint` - Run all linting before committing
+4. **Test**: `yarn test` - Add and run tests
+5. **Build**: `script/build_frontend` - Test production build
+
+### Common Pitfalls to Avoid
+
+- Don't use `querySelector` - Use refs or component properties
+- Don't manipulate DOM directly - Let Lit handle rendering
+- Don't use global styles - Scope styles to components
+- Don't block the main thread - Use web workers for heavy computation
+- Don't ignore TypeScript errors - Fix all type issues
+
+### Security Best Practices
+
+- Sanitize HTML - Never use `unsafeHTML` with user content
+- Validate inputs - Always validate user inputs
+- Use HTTPS - All external resources must use HTTPS
+- CSP compliance - Ensure code works with Content Security Policy
+
+### Text and Copy Guidelines
+
+#### Terminology Standards
+
+**Delete vs Remove** (Based on gallery/src/pages/Text/remove-delete-add-create.markdown)
+
+- **Use "Remove"** for actions that can be restored or reapplied:
+  - Removing a user's permission
+  - Removing a user from a group
+  - Removing links between items
+  - Removing a widget from dashboard
+  - Removing an item from a cart
+- **Use "Delete"** for permanent, non-recoverable actions:
+  - Deleting a field
+  - Deleting a value in a field
+  - Deleting a task
+  - Deleting a group
+  - Deleting a permission
+  - Deleting a calendar event
+
+**Create vs Add** (Create pairs with Delete, Add pairs with Remove)
+
+- **Use "Add"** for already-existing items:
+  - Adding a permission to a user
+  - Adding a user to a group
+  - Adding links between items
+  - Adding a widget to dashboard
+  - Adding an item to a cart
+- **Use "Create"** for something made from scratch:
+  - Creating a new field
+  - Creating a new task
+  - Creating a new group
+  - Creating a new permission
+  - Creating a new calendar event
+
+#### Writing Style (Consistent with Home Assistant Documentation)
+
+- **Use American English**: Standard spelling and terminology
+- **Friendly, informational tone**: Be inspiring, personal, comforting, engaging
+- **Address users directly**: Use "you" and "your"
+- **Be inclusive**: Objective, non-discriminatory language
+- **Be concise**: Use clear, direct language
+- **Be consistent**: Follow established terminology patterns
+- **Use active voice**: "Delete the automation" not "The automation should be deleted"
+- **Avoid jargon**: Use terms familiar to home automation users
+
+#### Language Standards
+
+- **Always use "Home Assistant"** in full, never "HA" or "HASS"
+- **Avoid abbreviations**: Spell out terms when possible
+- **Use sentence case everywhere**: Titles, headings, buttons, labels, UI elements
+  - ✅ "Create new automation"
+  - ❌ "Create New Automation"
+  - ✅ "Device settings"
+  - ❌ "Device Settings"
+- **Oxford comma**: Use in lists (item 1, item 2, and item 3)
+- **Replace Latin terms**: Use "like" instead of "e.g.", "for example" instead of "i.e."
+- **Avoid CAPS for emphasis**: Use bold or italics instead
+- **Write for all skill levels**: Both technical and non-technical users
+
+#### Key Terminology
+
+- **"add-on"** (hyphenated, not "addon")
+- **"integration"** (preferred over "component")
+- **Technical terms**: Use lowercase (automation, entity, device, service)
+
+#### Translation Considerations
+
+- **Add translation keys**: All user-facing text must be translatable
+- **Use placeholders**: Support dynamic content in translations
+- **Keep context**: Provide enough context for translators
+
+```typescript
+// Good
+this.hass.localize("ui.panel.config.automation.delete_confirm", {
+  name: automation.alias,
+});
+
+// Bad - hardcoded text
+("Are you sure you want to delete this automation?");
+```
+
+### Common Review Issues (From PR Analysis)
+
+#### User Experience and Accessibility
+
+- **Form validation**: Always provide proper field labels and validation feedback
+- **Form accessibility**: Prevent password managers from incorrectly identifying fields
+- **Loading states**: Show clear progress indicators during async operations
+- **Error handling**: Display meaningful error messages when operations fail
+- **Mobile responsiveness**: Ensure components work well on small screens
+- **Hit targets**: Make clickable areas large enough for touch interaction
+- **Visual feedback**: Provide clear indication of interactive states
+
+#### Dialog and Modal Patterns
+
+- **Dialog width constraints**: Respect minimum and maximum width requirements
+- **Interview progress**: Show clear progress for multi-step operations
+- **State persistence**: Handle dialog state properly during background operations
+- **Cancel behavior**: Ensure cancel/close buttons work consistently
+- **Form prefilling**: Use smart defaults but allow user override
+
+#### Component Design Patterns
+
+- **Terminology consistency**: Use "Join"/"Apply" instead of "Group" when appropriate
+- **Visual hierarchy**: Ensure proper font sizes and spacing ratios
+- **Grid alignment**: Components should align to the design grid system
+- **Badge placement**: Position badges and indicators consistently
+- **Color theming**: Respect theme variables and design system colors
+
+#### Code Quality Issues
+
+- **Null checking**: Always check if entities exist before accessing properties
+- **TypeScript safety**: Handle potentially undefined array/object access
+- **Import organization**: Remove unused imports and use proper type imports
+- **Event handling**: Properly subscribe and unsubscribe from events
+- **Memory leaks**: Clean up subscriptions and event listeners
+
+#### Configuration and Props
+
+- **Optional parameters**: Make configuration fields optional when sensible
+- **Smart defaults**: Provide reasonable default values
+- **Future extensibility**: Design APIs that can be extended later
+- **Validation**: Validate configuration before applying changes
+
+## Review Guidelines
+
+### Core Requirements Checklist
+
+- [ ] TypeScript strict mode passes (`yarn lint:types`)
+- [ ] No ESLint errors or warnings (`yarn lint:eslint`)
+- [ ] Prettier formatting applied (`yarn lint:prettier`)
+- [ ] Lit analyzer passes (`yarn lint:lit`)
+- [ ] Component follows Lit best practices
+- [ ] Proper error handling implemented
+- [ ] Loading states handled
+- [ ] Mobile responsive
+- [ ] Theme variables used
+- [ ] Translations added
+- [ ] Accessible to screen readers
+- [ ] Tests added (where applicable)
+- [ ] No console statements (use proper logging)
+- [ ] Unused imports removed
+- [ ] Proper naming conventions
+
+### Text and Copy Checklist
+
+- [ ] Follows terminology guidelines (Delete vs Remove, Create vs Add)
+- [ ] Localization keys added for all user-facing text
+- [ ] Uses "Home Assistant" (never "HA" or "HASS")
+- [ ] Sentence case for ALL text (titles, headings, buttons, labels)
+- [ ] American English spelling
+- [ ] Friendly, informational tone
+- [ ] Avoids abbreviations and jargon
+- [ ] Correct terminology (add-on not addon, integration not component)
+
+### Component-Specific Checks
+
+- [ ] Dialogs implement HassDialog interface
+- [ ] Dialog styling uses haStyleDialog
+- [ ] Dialog accessibility includes dialogInitialFocus
+- [ ] ha-alert used correctly for messages
+- [ ] ha-form uses proper schema structure
+- [ ] Components handle all states (loading, error, unavailable)
+- [ ] Entity existence checked before property access
+- [ ] Event subscriptions properly cleaned up

.github/workflows/cast_deployment.yaml

@@ -35,7 +35,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Cast
-        run: ./node_modules/.bin/gulp build-cast
+        run: yarn run-task build-cast
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -70,7 +70,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Cast
-        run: ./node_modules/.bin/gulp build-cast
+        run: yarn run-task build-cast
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/ci.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Check for duplicate dependencies
         run: yarn dedupe --check
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
+        run: yarn run-task gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
         uses: actions/cache@v4.2.3
         with:
@@ -67,7 +67,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
+        run: yarn run-task gen-icons-json build-translations build-locale-data
       - name: Run Tests
         run: yarn run test
   build:
@@ -85,7 +85,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build Application
-        run: ./node_modules/.bin/gulp build-app
+        run: yarn run-task build-app
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
@@ -109,7 +109,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build Application
-        run: ./node_modules/.bin/gulp build-hassio
+        run: yarn run-task build-hassio
         env:
           IS_TEST: "true"
       - name: Upload bundle stats

.github/workflows/demo_deployment.yaml

@@ -36,7 +36,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
+        run: yarn run-task build-demo
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -71,7 +71,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
+        run: yarn run-task build-demo
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/design_deployment.yaml

@@ -28,7 +28,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Gallery
-        run: ./node_modules/.bin/gulp build-gallery
+        run: yarn run-task build-gallery
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/design_preview.yaml

@@ -33,7 +33,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build Gallery
-        run: ./node_modules/.bin/gulp build-gallery
+        run: yarn run-task build-gallery
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@v2.2.0
+        uses: relative-ci/agent-action@v3.0.0
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v2.2.2
+        uses: softprops/action-gh-release@v2.3.2
         with:
           files: |
             dist/*.whl
@@ -107,7 +107,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.2.2
+        uses: softprops/action-gh-release@v2.3.2
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -136,6 +136,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.2.2
+        uses: softprops/action-gh-release@v2.3.2
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/restrict-task-creation.yml

@@ -0,0 +1,58 @@
+name: Restrict task creation
+
+# yamllint disable-line rule:truthy
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  check-authorization:
+    runs-on: ubuntu-latest
+    # Only run if this is a Task issue type (from the issue form)
+    if: github.event.issue.issue_type == 'Task'
+    steps:
+      - name: Check if user is authorized
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const issueAuthor = context.payload.issue.user.login;
+
+            // Check if user is an organization member
+            try {
+              await github.rest.orgs.checkMembershipForUser({
+                org: 'home-assistant',
+                username: issueAuthor
+              });
+              console.log(`✅ ${issueAuthor} is an organization member`);
+              return; // Authorized
+            } catch (error) {
+              console.log(`❌ ${issueAuthor} is not authorized to create Task issues`);
+            }
+
+            // Close the issue with a comment
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body: `Hi @${issueAuthor}, thank you for your contribution!\n\n` +
+                    `Task issues are restricted to Open Home Foundation staff and authorized contributors.\n\n` +
+                    `If you would like to:\n` +
+                    `- Report a bug: Please use the [bug report form](https://github.com/home-assistant/frontend/issues/new?template=bug_report.yml)\n` +
+                    `- Request a feature: Please submit to [Feature Requests](https://github.com/orgs/home-assistant/discussions)\n\n` +
+                    `If you believe you should have access to create Task issues, please contact the maintainers.`
+            });
+
+            await github.rest.issues.update({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              state: 'closed'
+            });
+
+            // Add a label to indicate this was auto-closed
+            await github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              labels: ['auto-closed']
+            });

.github/workflows/translations.yaml

@@ -1,6 +1,7 @@
 name: Translations
 
 on:
+  workflow_dispatch:
   push:
     branches:
       - dev

.gitignore

@@ -53,3 +53,7 @@ src/cast/dev_const.ts
 
 # test coverage
 test/coverage/
+
+# AI tooling
+.claude
+

.husky/pre-commit

@@ -1 +1 @@
-yarn run lint-staged --relative --shell "/bin/bash"
+yarn run lint-staged --relative

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

CLAUDE.md

@@ -0,0 +1 @@
+.github/copilot-instructions.md

build-scripts/babel-plugins/custom-polyfill-plugin.ts

@@ -1,6 +1,6 @@
 import defineProvider from "@babel/helper-define-polyfill-provider";
 import { join } from "node:path";
-import paths from "../paths.cjs";
+import paths from "../paths";
 
 const POLYFILL_DIR = join(paths.root_dir, "src/resources/polyfills");
 

build-scripts/bundle.ts

@@ -1,42 +1,41 @@
-const path = require("path");
-const env = require("./env.cjs");
-const paths = require("./paths.cjs");
-const { dependencies } = require("../package.json");
+import path from "node:path";
+import packageJson from "../package.json" assert { type: "json" };
+import { version } from "./env.ts";
+import paths, { dirname } from "./paths.ts";
 
-const BABEL_PLUGINS = path.join(__dirname, "babel-plugins");
+const dependencies = packageJson.dependencies;
+
+const BABEL_PLUGINS = path.join(dirname, "babel-plugins");
 
 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
-module.exports.sourceMapURL = () => {
-  const ref = env.version().endsWith("dev")
+export const sourceMapURL = () => {
+  const ref = version().endsWith("dev")
     ? process.env.GITHUB_SHA || "dev"
-    : env.version();
+    : version();
   return `https://raw.githubusercontent.com/home-assistant/frontend/${ref}/`;
 };
 
-// Files from NPM Packages that should not be imported
-module.exports.ignorePackages = () => [];
-
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild }) =>
+export const emptyPackages = ({ isHassioBuild }) =>
   [
-    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
+    import.meta.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    import.meta.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
-      require.resolve(
+      import.meta.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
     isHassioBuild &&
-      require.resolve(
+      import.meta.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
   ].filter(Boolean);
 
-module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
+export const definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __DEV__: !isProdBuild,
   __BUILD__: JSON.stringify(latestBuild ? "modern" : "legacy"),
-  __VERSION__: JSON.stringify(env.version()),
+  __VERSION__: JSON.stringify(version()),
   __DEMO__: false,
   __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
@@ -53,7 +52,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   ...defineOverlay,
 });
 
-module.exports.htmlMinifierOptions = {
+export const htmlMinifierOptions = {
   caseSensitive: true,
   collapseWhitespace: true,
   conservativeCollapse: true,
@@ -65,16 +64,16 @@ module.exports.htmlMinifierOptions = {
   },
 };
 
-module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
+export const terserOptions = ({ latestBuild, isTestBuild }) => ({
   safari10: !latestBuild,
-  ecma: latestBuild ? 2015 : 5,
+  ecma: latestBuild ? (2015 as const) : (5 as const),
   module: latestBuild,
   format: { comments: false },
   sourceMap: !isTestBuild,
 });
 
 /** @type {import('@rspack/core').SwcLoaderOptions} */
-module.exports.swcOptions = () => ({
+export const swcOptions = () => ({
   jsc: {
     loose: true,
     externalHelpers: true,
@@ -86,11 +85,16 @@ module.exports.swcOptions = () => ({
   },
 });
 
-module.exports.babelOptions = ({
+export const babelOptions = ({
   latestBuild,
   isProdBuild,
   isTestBuild,
   sw,
+}: {
+  latestBuild?: boolean;
+  isProdBuild?: boolean;
+  isTestBuild?: boolean;
+  sw?: boolean;
 }) => ({
   babelrc: false,
   compact: false,
@@ -137,7 +141,7 @@ module.exports.babelOptions = ({
           "@polymer/polymer/lib/utils/html-tag.js": ["html"],
         },
         strictCSS: true,
-        htmlMinifier: module.exports.htmlMinifierOptions,
+        htmlMinifier: htmlMinifierOptions,
         failOnError: false, // we can turn this off in case of false positives
       },
     ],
@@ -160,7 +164,7 @@ module.exports.babelOptions = ({
       // themselves to prevent self-injection.
       plugins: [
         [
-          path.join(BABEL_PLUGINS, "custom-polyfill-plugin.js"),
+          path.join(BABEL_PLUGINS, "custom-polyfill-plugin.ts"),
           { method: "usage-global" },
         ],
       ],
@@ -221,8 +225,20 @@ const publicPath = (latestBuild, root = "") =>
   }
   */
 
-module.exports.config = {
-  app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {
+export const config = {
+  app({
+    isProdBuild,
+    latestBuild,
+    isStatsBuild,
+    isTestBuild,
+    isWDS,
+  }: {
+    isProdBuild?: boolean;
+    latestBuild?: boolean;
+    isStatsBuild?: boolean;
+    isTestBuild?: boolean;
+    isWDS?: boolean;
+  }) {
     return {
       name: "frontend" + nameSuffix(latestBuild),
       entry: {
@@ -257,7 +273,7 @@ module.exports.config = {
       outputPath: outputPath(paths.demo_output_root, latestBuild),
       publicPath: publicPath(latestBuild),
       defineOverlay: {
-        __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
+        __VERSION__: JSON.stringify(`DEMO-${version()}`),
         __DEMO__: true,
       },
       isProdBuild,
@@ -267,7 +283,7 @@ module.exports.config = {
   },
 
   cast({ isProdBuild, latestBuild }) {
-    const entry = {
+    const entry: Record<string, string> = {
       launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
       media: path.resolve(paths.cast_dir, "src/media/entrypoint.ts"),
     };

build-scripts/env.cjs

@@ -1,34 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const paths = require("./paths.cjs");
-
-const isTrue = (value) => value === "1" || value?.toLowerCase() === "true";
-
-module.exports = {
-  isProdBuild() {
-    return (
-      process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
-    );
-  },
-  isStatsBuild() {
-    return isTrue(process.env.STATS);
-  },
-  isTestBuild() {
-    return isTrue(process.env.IS_TEST);
-  },
-  isNetlify() {
-    return isTrue(process.env.NETLIFY);
-  },
-  version() {
-    const version = fs
-      .readFileSync(path.resolve(paths.root_dir, "pyproject.toml"), "utf8")
-      .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
-    if (!version) {
-      throw Error("Version not found");
-    }
-    return version[1];
-  },
-  isDevContainer() {
-    return isTrue(process.env.DEV_CONTAINER);
-  },
-};

build-scripts/env.ts

@@ -0,0 +1,21 @@
+import fs from "node:fs";
+import path from "node:path";
+import paths from "./paths.ts";
+
+const isTrue = (value) => value === "1" || value?.toLowerCase() === "true";
+
+export const isProdBuild = () =>
+  process.env.NODE_ENV === "production" || isStatsBuild();
+export const isStatsBuild = () => isTrue(process.env.STATS);
+export const isTestBuild = () => isTrue(process.env.IS_TEST);
+export const isNetlify = () => isTrue(process.env.NETLIFY);
+export const version = () => {
+  const pyProjectVersion = fs
+    .readFileSync(path.resolve(paths.root_dir, "pyproject.toml"), "utf8")
+    .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
+  if (!pyProjectVersion) {
+    throw Error("Version not found");
+  }
+  return pyProjectVersion[1];
+};
+export const isDevContainer = () => isTrue(process.env.DEV_CONTAINER);

build-scripts/gulp/app.js

@@ -1,57 +0,0 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./compress.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./locale-data.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./rspack.js";
-
-gulp.task(
-  "develop-app",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean",
-    gulp.parallel(
-      "gen-service-worker-app-dev",
-      "gen-icons-json",
-      "gen-pages-app-dev",
-      "build-translations",
-      "build-locale-data"
-    ),
-    "copy-static-app",
-    "rspack-watch-app"
-  )
-);
-
-gulp.task(
-  "build-app",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
-    "copy-static-app",
-    "rspack-prod-app",
-    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
-    // Don't compress running tests
-    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
-  )
-);
-
-gulp.task(
-  "analyze-app",
-  gulp.series(
-    async function setEnv() {
-      process.env.STATS = "1";
-    },
-    "clean",
-    "rspack-prod-app"
-  )
-);

build-scripts/gulp/app.ts

@@ -0,0 +1,54 @@
+import { parallel, series } from "gulp";
+import { isStatsBuild, isTestBuild } from "../env.ts";
+import { clean } from "./clean.ts";
+import { compressApp } from "./compress.ts";
+import { genPagesAppDev, genPagesAppProd } from "./entry-html.ts";
+import { copyStaticApp } from "./gather-static.ts";
+import { genIconsJson } from "./gen-icons-json.ts";
+import { buildLocaleData } from "./locale-data.ts";
+import { rspackProdApp, rspackWatchApp } from "./rspack.ts";
+import {
+  genServiceWorkerAppDev,
+  genServiceWorkerAppProd,
+} from "./service-worker.ts";
+import { buildTranslations } from "./translations.ts";
+
+// develop-app
+export const developApp = series(
+  async () => {
+    process.env.NODE_ENV = "development";
+  },
+  clean,
+  parallel(
+    genServiceWorkerAppDev,
+    genIconsJson,
+    genPagesAppDev,
+    buildTranslations,
+    buildLocaleData
+  ),
+  copyStaticApp,
+  rspackWatchApp
+);
+
+// build-app
+export const buildApp = series(
+  async () => {
+    process.env.NODE_ENV = "production";
+  },
+  clean,
+  parallel(genIconsJson, buildTranslations, buildLocaleData),
+  copyStaticApp,
+  rspackProdApp,
+  parallel(genPagesAppProd, genServiceWorkerAppProd),
+  // Don't compress running tests
+  ...(isTestBuild() || isStatsBuild() ? [] : [compressApp])
+);
+
+// analyze-app
+export const analyzeApp = series(
+  async () => {
+    process.env.STATS = "1";
+  },
+  clean,
+  rspackProdApp
+);

build-scripts/gulp/cast.js

@@ -1,37 +0,0 @@
-import gulp from "gulp";
-import "./clean.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./rspack.js";
-
-gulp.task(
-  "develop-cast",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean-cast",
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
-    "copy-static-cast",
-    "gen-pages-cast-dev",
-    "rspack-dev-server-cast"
-  )
-);
-
-gulp.task(
-  "build-cast",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean-cast",
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
-    "copy-static-cast",
-    "rspack-prod-cast",
-    "gen-pages-cast-prod"
-  )
-);

build-scripts/gulp/cast.ts

@@ -0,0 +1,38 @@
+import { parallel, series } from "gulp";
+import { cleanCast } from "./clean.ts";
+import { genPagesCastDev, genPagesCastProd } from "./entry-html.ts";
+import { copyStaticCast } from "./gather-static.ts";
+import { genIconsJson } from "./gen-icons-json.ts";
+import { buildLocaleData } from "./locale-data.ts";
+import { rspackDevServerCast, rspackProdCast } from "./rspack.ts";
+import "./service-worker.ts";
+import {
+  buildTranslations,
+  translationsEnableMergeBackend,
+} from "./translations.ts";
+
+// develop-cast
+export const developCast = series(
+  async () => {
+    process.env.NODE_ENV = "development";
+  },
+  cleanCast,
+  translationsEnableMergeBackend,
+  parallel(genIconsJson, buildTranslations, buildLocaleData),
+  copyStaticCast,
+  genPagesCastDev,
+  rspackDevServerCast
+);
+
+// build-cast
+export const buildCast = series(
+  async () => {
+    process.env.NODE_ENV = "production";
+  },
+  cleanCast,
+  translationsEnableMergeBackend,
+  parallel(genIconsJson, buildTranslations, buildLocaleData),
+  copyStaticCast,
+  rspackProdCast,
+  genPagesCastProd
+);

build-scripts/gulp/clean.js

@@ -1,51 +0,0 @@
-import { deleteSync } from "del";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-import "./translations.js";
-
-gulp.task(
-  "clean",
-  gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.app_output_root, paths.build_dir])
-  )
-);
-
-gulp.task(
-  "clean-demo",
-  gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.demo_output_root, paths.build_dir])
-  )
-);
-
-gulp.task(
-  "clean-cast",
-  gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.cast_output_root, paths.build_dir])
-  )
-);
-
-gulp.task("clean-hassio", async () =>
-  deleteSync([paths.hassio_output_root, paths.build_dir])
-);
-
-gulp.task(
-  "clean-gallery",
-  gulp.parallel("clean-translations", async () =>
-    deleteSync([
-      paths.gallery_output_root,
-      paths.gallery_build,
-      paths.build_dir,
-    ])
-  )
-);
-
-gulp.task(
-  "clean-landing-page",
-  gulp.parallel("clean-translations", async () =>
-    deleteSync([
-      paths.landingPage_output_root,
-      paths.landingPage_build,
-      paths.build_dir,
-    ])
-  )
-);

build-scripts/gulp/clean.ts

@@ -0,0 +1,31 @@
+import { deleteSync } from "del";
+import { parallel } from "gulp";
+import paths from "../paths.ts";
+import { cleanTranslations } from "./translations.ts";
+
+export const clean = parallel(cleanTranslations, async () =>
+  deleteSync([paths.app_output_root, paths.build_dir])
+);
+
+export const cleanDemo = parallel(cleanTranslations, async () =>
+  deleteSync([paths.demo_output_root, paths.build_dir])
+);
+
+export const cleanCast = parallel(cleanTranslations, async () =>
+  deleteSync([paths.cast_output_root, paths.build_dir])
+);
+
+export const cleanHassio = async () =>
+  deleteSync([paths.hassio_output_root, paths.build_dir]);
+
+export const cleanGallery = parallel(cleanTranslations, async () =>
+  deleteSync([paths.gallery_output_root, paths.gallery_build, paths.build_dir])
+);
+
+export const cleanLandingPage = parallel(cleanTranslations, async () =>
+  deleteSync([
+    paths.landingPage_output_root,
+    paths.landingPage_build,
+    paths.build_dir,
+  ])
+);

build-scripts/gulp/compress.ts

@@ -1,10 +1,10 @@
 // Tasks to compress
 
-import { constants } from "node:zlib";
-import gulp from "gulp";
+import { dest, parallel, src } from "gulp";
 import brotli from "gulp-brotli";
 import zopfli from "gulp-zopfli-green";
-import paths from "../paths.cjs";
+import { constants } from "node:zlib";
+import paths from "../paths.ts";
 
 const filesGlob = "*.{js,json,css,svg,xml}";
 const brotliOptions = {
@@ -16,27 +16,25 @@ const brotliOptions = {
 const zopfliOptions = { threshold: 150 };
 
 const compressModern = (rootDir, modernDir, compress) =>
-  gulp
-    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
-      base: rootDir,
-      allowEmpty: true,
-    })
+  src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
+    base: rootDir,
+    allowEmpty: true,
+  })
     .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
-    .pipe(gulp.dest(rootDir));
+    .pipe(dest(rootDir));
 
 const compressOther = (rootDir, modernDir, compress) =>
-  gulp
-    .src(
-      [
-        `${rootDir}/**/${filesGlob}`,
-        `!${modernDir}/**/${filesGlob}`,
-        `!${rootDir}/{sw-modern,service_worker}.js`,
-        `${rootDir}/{authorize,onboarding}.html`,
-      ],
-      { base: rootDir, allowEmpty: true }
-    )
+  src(
+    [
+      `${rootDir}/**/${filesGlob}`,
+      `!${modernDir}/**/${filesGlob}`,
+      `!${rootDir}/{sw-modern,service_worker}.js`,
+      `${rootDir}/{authorize,onboarding}.html`,
+    ],
+    { base: rootDir, allowEmpty: true }
+  )
     .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
-    .pipe(gulp.dest(rootDir));
+    .pipe(dest(rootDir));
 
 const compressAppModernBrotli = () =>
   compressModern(paths.app_output_root, paths.app_output_latest, "brotli");
@@ -66,21 +64,16 @@ const compressHassioOtherBrotli = () =>
 const compressHassioOtherZopfli = () =>
   compressOther(paths.hassio_output_root, paths.hassio_output_latest, "zopfli");
 
-gulp.task(
-  "compress-app",
-  gulp.parallel(
-    compressAppModernBrotli,
-    compressAppOtherBrotli,
-    compressAppModernZopfli,
-    compressAppOtherZopfli
-  )
+export const compressApp = parallel(
+  compressAppModernBrotli,
+  compressAppOtherBrotli,
+  compressAppModernZopfli,
+  compressAppOtherZopfli
 );
-gulp.task(
-  "compress-hassio",
-  gulp.parallel(
-    compressHassioModernBrotli,
-    compressHassioOtherBrotli,
-    compressHassioModernZopfli,
-    compressHassioOtherZopfli
-  )
+
+export const compressHassio = parallel(
+  compressHassioModernBrotli,
+  compressHassioOtherBrotli,
+  compressHassioModernZopfli,
+  compressHassioOtherZopfli
 );

build-scripts/gulp/demo.js

@@ -1,54 +0,0 @@
-import gulp from "gulp";
-import "./clean.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./rspack.js";
-
-gulp.task(
-  "develop-demo",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean-demo",
-    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "gen-pages-demo-dev",
-      "build-translations",
-      "build-locale-data"
-    ),
-    "copy-static-demo",
-    "rspack-dev-server-demo"
-  )
-);
-
-gulp.task(
-  "build-demo",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean-demo",
-    // Cast needs to be backwards compatible and older HA has no translations
-    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
-    "copy-static-demo",
-    "rspack-prod-demo",
-    "gen-pages-demo-prod"
-  )
-);
-
-gulp.task(
-  "analyze-demo",
-  gulp.series(
-    async function setEnv() {
-      process.env.STATS = "1";
-    },
-    "clean",
-    "rspack-prod-demo"
-  )
-);

build-scripts/gulp/demo.ts

@@ -0,0 +1,47 @@
+import { parallel, series } from "gulp";
+import { clean, cleanDemo } from "./clean.ts";
+import { genPagesDemoDev, genPagesDemoProd } from "./entry-html.ts";
+import { copyStaticDemo } from "./gather-static.ts";
+import { genIconsJson } from "./gen-icons-json.ts";
+import { buildLocaleData } from "./locale-data.ts";
+import { rspackDevServerDemo, rspackProdDemo } from "./rspack.ts";
+import "./service-worker.ts";
+import {
+  buildTranslations,
+  translationsEnableMergeBackend,
+} from "./translations.ts";
+
+// develop-demo
+export const developDemo = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "development";
+  },
+  cleanDemo,
+  translationsEnableMergeBackend,
+  parallel(genIconsJson, genPagesDemoDev, buildTranslations, buildLocaleData),
+  copyStaticDemo,
+  rspackDevServerDemo
+);
+
+// build-demo
+export const buildDemo = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "production";
+  },
+  cleanDemo,
+  // Cast needs to be backwards compatible and older HA has no translations
+  translationsEnableMergeBackend,
+  parallel(genIconsJson, buildTranslations, buildLocaleData),
+  copyStaticDemo,
+  rspackProdDemo,
+  genPagesDemoProd
+);
+
+// analyze-demo
+export const analyzeDemo = series(
+  async function setEnv() {
+    process.env.STATS = "1";
+  },
+  clean,
+  rspackProdDemo
+);

build-scripts/gulp/download-translations.ts

@@ -1,10 +1,10 @@
-import fs from "fs/promises";
-import gulp from "gulp";
-import path from "path";
-import mapStream from "map-stream";
-import transform from "gulp-json-transform";
 import { LokaliseApi } from "@lokalise/node-api";
+import { dest, series, src } from "gulp";
+import transform from "gulp-json-transform";
 import JSZip from "jszip";
+import mapStream from "map-stream";
+import fs from "node:fs/promises";
+import path from "node:path";
 
 const inDir = "translations";
 const inDirFrontend = `${inDir}/frontend`;
@@ -12,11 +12,14 @@ const inDirBackend = `${inDir}/backend`;
 const srcMeta = "src/translations/translationMetadata.json";
 const encoding = "utf8";
 
-function hasHtml(data) {
-  return /<\S*>/i.test(data);
-}
+const hasHtml = (data) => /<\S*>/i.test(data);
 
-function recursiveCheckHasHtml(file, data, errors, recKey) {
+const recursiveCheckHasHtml = (
+  file,
+  data,
+  errors: string[],
+  recKey?: string
+) => {
   Object.keys(data).forEach(function (key) {
     if (typeof data[key] === "object") {
       const nextRecKey = recKey ? `${recKey}.${key}` : key;
@@ -25,9 +28,9 @@ function recursiveCheckHasHtml(file, data, errors, recKey) {
       errors.push(`HTML found in ${file.path} at key ${recKey}.${key}`);
     }
   });
-}
+};
 
-function checkHtml() {
+const checkHtml = () => {
   const errors = [];
 
   return mapStream(function (file, cb) {
@@ -44,9 +47,9 @@ function checkHtml() {
     }
     cb(error, file);
   });
-}
+};
 
-function convertBackendTranslations(data, _file) {
+const convertBackendTranslationsTransform = (data, _file) => {
   const output = { component: {} };
   if (!data.component) {
     return output;
@@ -62,25 +65,22 @@ function convertBackendTranslations(data, _file) {
     });
   });
   return output;
-}
+};
 
-gulp.task("convert-backend-translations", function () {
-  return gulp
-    .src([`${inDirBackend}/*.json`])
-    .pipe(transform((data, file) => convertBackendTranslations(data, file)))
-    .pipe(gulp.dest(inDirBackend));
-});
+const convertBackendTranslations = () =>
+  src([`${inDirBackend}/*.json`])
+    .pipe(
+      transform((data, file) => convertBackendTranslationsTransform(data, file))
+    )
+    .pipe(dest(inDirBackend));
 
-gulp.task("check-translations-html", function () {
-  return gulp
-    .src([`${inDirFrontend}/*.json`, `${inDirBackend}/*.json`])
-    .pipe(checkHtml());
-});
+const checkTranslationsHtml = () =>
+  src([`${inDirFrontend}/*.json`, `${inDirBackend}/*.json`]).pipe(checkHtml());
 
-gulp.task("check-all-files-exist", async function () {
+const checkAllFilesExist = async () => {
   const file = await fs.readFile(srcMeta, { encoding });
   const meta = JSON.parse(file);
-  const writings = [];
+  const writings: Promise<void>[] = [];
   Object.keys(meta).forEach((lang) => {
     writings.push(
       fs.writeFile(`${inDirFrontend}/${lang}.json`, JSON.stringify({}), {
@@ -92,14 +92,14 @@ gulp.task("check-all-files-exist", async function () {
     );
   });
   await Promise.allSettled(writings);
-});
+};
 
 const lokaliseProjects = {
   backend: "130246255a974bd3b5e8a1.51616605",
   frontend: "3420425759f6d6d241f598.13594006",
 };
 
-gulp.task("fetch-lokalise", async function () {
+const fetchLokalise = async () => {
   let apiKey;
   try {
     apiKey =
@@ -168,14 +168,11 @@ gulp.task("fetch-lokalise", async function () {
         })
     )
   );
-});
+};
 
-gulp.task(
-  "download-translations",
-  gulp.series(
-    "fetch-lokalise",
-    "convert-backend-translations",
-    "check-translations-html",
-    "check-all-files-exist"
-  )
+export const downloadTranslations = series(
+  fetchLokalise,
+  convertBackendTranslations,
+  checkTranslationsHtml,
+  checkAllFilesExist
 );

build-scripts/gulp/entry-html.ts

@@ -6,12 +6,11 @@ import {
   getPreUserAgentRegexes,
 } from "browserslist-useragent-regexp";
 import fs from "fs-extra";
-import gulp from "gulp";
 import { minify } from "html-minifier-terser";
 import template from "lodash.template";
 import { dirname, extname, resolve } from "node:path";
-import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
-import paths from "../paths.cjs";
+import { htmlMinifierOptions, terserOptions } from "../bundle.ts";
+import paths from "../paths.ts";
 
 // macOS companion app has no way to obtain the Safari version used by WKWebView,
 // and it is not in the default user agent string. So we add an additional regex
@@ -34,9 +33,9 @@ const getCommonTemplateVars = () => {
     mobileToDesktop: true,
     throwOnMissing: true,
   });
-  const minSafariVersion = browserRegexes.find(
-    (regex) => regex.family === "safari"
-  )?.matchedVersions[0][0];
+  const minSafariVersion =
+    browserRegexes.find((regex) => regex.family === "safari")
+      ?.matchedVersions[0][0] ?? 18;
   const minMacOSVersion = SAFARI_TO_MACOS[minSafariVersion];
   if (!minMacOSVersion) {
     throw Error(
@@ -106,10 +105,10 @@ const genPagesDevTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
-          latestEntryJS: entries.map(
+          latestEntryJS: (entries as string[]).map(
             (entry) => `${publicRoot}/frontend_latest/${entry}.js`
           ),
-          es5EntryJS: entries.map(
+          es5EntryJS: (entries as string[]).map(
             (entry) => `${publicRoot}/frontend_es5/${entry}.js`
           ),
           latestCustomPanelJS: `${publicRoot}/frontend_latest/custom-panel.js`,
@@ -128,7 +127,7 @@ const genPagesProdTask =
     inputRoot,
     outputRoot,
     outputLatest,
-    outputES5,
+    outputES5?: string,
     inputSub = "src/html"
   ) =>
   async () => {
@@ -139,14 +138,18 @@ const genPagesProdTask =
       ? fs.readJsonSync(resolve(outputES5, "manifest.json"))
       : {};
     const commonVars = getCommonTemplateVars();
-    const minifiedHTML = [];
+    const minifiedHTML: Promise<void>[] = [];
     for (const [page, entries] of Object.entries(pageEntries)) {
       const content = renderTemplate(
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
-          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
+          latestEntryJS: (entries as string[]).map(
+            (entry) => latestManifest[`${entry}.js`]
+          ),
+          es5EntryJS: (entries as string[]).map(
+            (entry) => es5Manifest[`${entry}.js`]
+          ),
           latestCustomPanelJS: latestManifest["custom-panel.js"],
           es5CustomPanelJS: es5Manifest["custom-panel.js"],
         }
@@ -167,20 +170,18 @@ const APP_PAGE_ENTRIES = {
   "index.html": ["core", "app"],
 };
 
-gulp.task(
-  "gen-pages-app-dev",
-  genPagesDevTask(APP_PAGE_ENTRIES, paths.root_dir, paths.app_output_root)
+export const genPagesAppDev = genPagesDevTask(
+  APP_PAGE_ENTRIES,
+  paths.root_dir,
+  paths.app_output_root
 );
 
-gulp.task(
-  "gen-pages-app-prod",
-  genPagesProdTask(
-    APP_PAGE_ENTRIES,
-    paths.root_dir,
-    paths.app_output_root,
-    paths.app_output_latest,
-    paths.app_output_es5
-  )
+export const genPagesAppProd = genPagesProdTask(
+  APP_PAGE_ENTRIES,
+  paths.root_dir,
+  paths.app_output_root,
+  paths.app_output_latest,
+  paths.app_output_es5
 );
 
 const CAST_PAGE_ENTRIES = {
@@ -190,104 +191,82 @@ const CAST_PAGE_ENTRIES = {
   "receiver.html": ["receiver"],
 };
 
-gulp.task(
-  "gen-pages-cast-dev",
-  genPagesDevTask(CAST_PAGE_ENTRIES, paths.cast_dir, paths.cast_output_root)
+export const genPagesCastDev = genPagesDevTask(
+  CAST_PAGE_ENTRIES,
+  paths.cast_dir,
+  paths.cast_output_root
 );
 
-gulp.task(
-  "gen-pages-cast-prod",
-  genPagesProdTask(
-    CAST_PAGE_ENTRIES,
-    paths.cast_dir,
-    paths.cast_output_root,
-    paths.cast_output_latest,
-    paths.cast_output_es5
-  )
+export const genPagesCastProd = genPagesProdTask(
+  CAST_PAGE_ENTRIES,
+  paths.cast_dir,
+  paths.cast_output_root,
+  paths.cast_output_latest,
+  paths.cast_output_es5
 );
 
 const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
 
-gulp.task(
-  "gen-pages-demo-dev",
-  genPagesDevTask(DEMO_PAGE_ENTRIES, paths.demo_dir, paths.demo_output_root)
+export const genPagesDemoDev = genPagesDevTask(
+  DEMO_PAGE_ENTRIES,
+  paths.demo_dir,
+  paths.demo_output_root
 );
 
-gulp.task(
-  "gen-pages-demo-prod",
-  genPagesProdTask(
-    DEMO_PAGE_ENTRIES,
-    paths.demo_dir,
-    paths.demo_output_root,
-    paths.demo_output_latest,
-    paths.demo_output_es5
-  )
+export const genPagesDemoProd = genPagesProdTask(
+  DEMO_PAGE_ENTRIES,
+  paths.demo_dir,
+  paths.demo_output_root,
+  paths.demo_output_latest,
+  paths.demo_output_es5
 );
 
 const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
-gulp.task(
-  "gen-pages-gallery-dev",
-  genPagesDevTask(
-    GALLERY_PAGE_ENTRIES,
-    paths.gallery_dir,
-    paths.gallery_output_root
-  )
+export const genPagesGalleryDev = genPagesDevTask(
+  GALLERY_PAGE_ENTRIES,
+  paths.gallery_dir,
+  paths.gallery_output_root
 );
 
-gulp.task(
-  "gen-pages-gallery-prod",
-  genPagesProdTask(
-    GALLERY_PAGE_ENTRIES,
-    paths.gallery_dir,
-    paths.gallery_output_root,
-    paths.gallery_output_latest
-  )
+export const genPagesGalleryProd = genPagesProdTask(
+  GALLERY_PAGE_ENTRIES,
+  paths.gallery_dir,
+  paths.gallery_output_root,
+  paths.gallery_output_latest
 );
 
 const LANDING_PAGE_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
-gulp.task(
-  "gen-pages-landing-page-dev",
-  genPagesDevTask(
-    LANDING_PAGE_PAGE_ENTRIES,
-    paths.landingPage_dir,
-    paths.landingPage_output_root
-  )
+export const genPagesLandingPageDev = genPagesDevTask(
+  LANDING_PAGE_PAGE_ENTRIES,
+  paths.landingPage_dir,
+  paths.landingPage_output_root
 );
 
-gulp.task(
-  "gen-pages-landing-page-prod",
-  genPagesProdTask(
-    LANDING_PAGE_PAGE_ENTRIES,
-    paths.landingPage_dir,
-    paths.landingPage_output_root,
-    paths.landingPage_output_latest,
-    paths.landingPage_output_es5
-  )
+export const genPagesLandingPageProd = genPagesProdTask(
+  LANDING_PAGE_PAGE_ENTRIES,
+  paths.landingPage_dir,
+  paths.landingPage_output_root,
+  paths.landingPage_output_latest,
+  paths.landingPage_output_es5
 );
 
 const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
 
-gulp.task(
-  "gen-pages-hassio-dev",
-  genPagesDevTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
-    "src",
-    paths.hassio_publicPath
-  )
+export const genPagesHassioDev = genPagesDevTask(
+  HASSIO_PAGE_ENTRIES,
+  paths.hassio_dir,
+  paths.hassio_output_root,
+  "src",
+  paths.hassio_publicPath
 );
 
-gulp.task(
-  "gen-pages-hassio-prod",
-  genPagesProdTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    paths.hassio_output_es5,
-    "src"
-  )
+export const genPagesHassioProd = genPagesProdTask(
+  HASSIO_PAGE_ENTRIES,
+  paths.hassio_dir,
+  paths.hassio_output_root,
+  paths.hassio_output_latest,
+  paths.hassio_output_es5,
+  "src"
 );

build-scripts/gulp/fetch-nightly-translations.ts

@@ -1,14 +1,14 @@
-// Task to download the latest Lokalise translations from the nightly workflow artifacts
+// Task to download the latest 00Lokalise translations from the nightly workflow artifacts
 
 import { createOAuthDeviceAuth } from "@octokit/auth-oauth-device";
 import { retry } from "@octokit/plugin-retry";
 import { Octokit } from "@octokit/rest";
 import { deleteAsync } from "del";
-import { mkdir, readFile, writeFile } from "fs/promises";
-import gulp from "gulp";
+import { series } from "gulp";
 import jszip from "jszip";
-import path from "path";
-import process from "process";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import process from "node:process";
 import { extract } from "tar";
 
 const MAX_AGE = 24; // hours
@@ -22,12 +22,13 @@ const TOKEN_FILE = path.posix.join(EXTRACT_DIR, "token.json");
 const ARTIFACT_FILE = path.posix.join(EXTRACT_DIR, "artifact.json");
 
 let allowTokenSetup = false;
-gulp.task("allow-setup-fetch-nightly-translations", (done) => {
+
+export const allowSetupFetchNightlyTranslations = (done) => {
   allowTokenSetup = true;
   done();
-});
+};
 
-gulp.task("fetch-nightly-translations", async function () {
+export const fetchNightlyTranslations = async () => {
   // Skip all when environment flag is set (assumes translations are already in place)
   if (process.env?.SKIP_FETCH_NIGHTLY_TRANSLATIONS) {
     console.log("Skipping fetch due to environment signal");
@@ -54,7 +55,7 @@ gulp.task("fetch-nightly-translations", async function () {
 
   // To store file writing promises
   const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
-  const writings = [];
+  const writings: Promise<void>[] = [];
 
   // Authenticate to GitHub using GitHub action token if it exists,
   // otherwise look for a saved user token or generate a new one if none
@@ -87,7 +88,7 @@ gulp.task("fetch-nightly-translations", async function () {
       });
       tokenAuth = await auth({ type: "oauth" });
       writings.push(
-        createExtractDir.then(
+        createExtractDir.then(() =>
           writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
         )
       );
@@ -131,13 +132,13 @@ gulp.task("fetch-nightly-translations", async function () {
     throw Error("Latest nightly workflow run has no translations artifact");
   }
   writings.push(
-    createExtractDir.then(
+    createExtractDir.then(() =>
       writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
     )
   );
 
   // Remove the current translations
-  const deleteCurrent = Promise.all(writings).then(
+  const deleteCurrent = Promise.all(writings).then(() =>
     deleteAsync([`${EXTRACT_DIR}/*`, `!${ARTIFACT_FILE}`, `!${TOKEN_FILE}`])
   );
 
@@ -148,24 +149,22 @@ gulp.task("fetch-nightly-translations", async function () {
     artifact_id: latestArtifact.id,
     archive_format: "zip",
   });
+  // @ts-ignore OctokitResponse<unknown, 302> doesn't allow to check for 200
   if (downloadResponse.status !== 200) {
     throw Error("Failure downloading translations artifact");
   }
 
   // Artifact is a tarball, but GitHub adds it to a zip file
   console.log("Unpacking downloaded translations...");
-  const zip = await jszip.loadAsync(downloadResponse.data);
+  const zip = await jszip.loadAsync(downloadResponse.data as any);
   await deleteCurrent;
   const extractStream = zip.file(/.*/)[0].nodeStream().pipe(extract());
   await new Promise((resolve, reject) => {
     extractStream.on("close", resolve).on("error", reject);
   });
-});
+};
 
-gulp.task(
-  "setup-and-fetch-nightly-translations",
-  gulp.series(
-    "allow-setup-fetch-nightly-translations",
-    "fetch-nightly-translations"
-  )
+export const setupAndFetchNightlyTranslations = series(
+  allowSetupFetchNightlyTranslations,
+  fetchNightlyTranslations
 );

build-scripts/gulp/gallery.ts

@@ -1,44 +1,23 @@
-import fs from "fs";
 import { glob } from "glob";
-import gulp from "gulp";
+import { parallel, series, watch } from "gulp";
 import yaml from "js-yaml";
 import { marked } from "marked";
-import ts from "typescript";
-import { create } from "@custom-elements-manifest/analyzer";
-import { litPlugin } from "@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/lit.js";
-import path from "path";
-import paths from "../paths.cjs";
-import "./clean.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./rspack.js";
+import fs from "node:fs";
+import path from "node:path";
+import paths from "../paths.ts";
+import { cleanGallery } from "./clean.ts";
+import { genPagesGalleryDev, genPagesGalleryProd } from "./entry-html.ts";
+import { copyStaticGallery } from "./gather-static.ts";
+import { genIconsJson } from "./gen-icons-json.ts";
+import { buildLocaleData } from "./locale-data.ts";
+import { rspackDevServerGallery, rspackProdGallery } from "./rspack.ts";
+import {
+  buildTranslations,
+  translationsEnableMergeBackend,
+} from "./translations.ts";
 
-gulp.task("generate-component-docs", async function generateComponentDocs() {
-  const filePaths = ["src/components/ha-alert.ts"];
-
-  const modules = await Promise.all(
-    filePaths.map(async (file) => {
-      const filePath = path.resolve(file);
-      console.log(`Reading ${file} -> ${filePath}`);
-      const source = fs.readFileSync(filePath).toString();
-
-      return ts.createSourceFile(file, source, ts.ScriptTarget.ES2015, true);
-    })
-  );
-
-  const manifest = create({
-    modules,
-    plugins: litPlugin(),
-    context: { dev: true },
-  });
-
-  console.log(manifest);
-});
-
-gulp.task("gather-gallery-pages", async function gatherPages() {
+// gather-gallery-pages
+export const gatherGalleryPages = async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
   const files = await glob(path.resolve(pageDir, "**/*"));
 
@@ -47,7 +26,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
   let content = "export const PAGES = {\n";
 
-  const processed = new Set();
+  const processed = new Set<string>();
 
   for (const file of files) {
     if (fs.lstatSync(file).isDirectory()) {
@@ -72,7 +51,9 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
       if (descriptionContent.startsWith("---")) {
         const metadataEnd = descriptionContent.indexOf("---", 3);
-        metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
+        metadata = yaml.load(
+          descriptionContent.substring(3, metadataEnd)
+        ) as any;
         descriptionContent = descriptionContent
           .substring(metadataEnd + 3)
           .trim();
@@ -82,7 +63,9 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
       if (descriptionContent === "") {
         hasDescription = false;
       } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
+        // eslint-disable-next-line no-await-in-loop
+        descriptionContent = await marked(descriptionContent);
+        descriptionContent = descriptionContent.replace(/`/g, "\\`");
         fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
         fs.writeFileSync(
           path.resolve(galleryBuild, `${pageId}-description.ts`),
@@ -120,7 +103,10 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
     pagesToProcess[category].add(page);
   }
 
-  for (const group of Object.values(sidebar)) {
+  for (const group of Object.values(sidebar) as {
+    category: string;
+    pages?: string[];
+  }[]) {
     const toProcess = pagesToProcess[group.category];
     delete pagesToProcess[group.category];
 
@@ -143,7 +129,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
       group.pages = [];
     }
     for (const page of Array.from(toProcess).sort()) {
-      group.pages.push(page);
+      group.pages.push(page as string);
     }
   }
 
@@ -151,7 +137,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
     sidebar.push({
       category,
       header: category,
-      pages: Array.from(pages).sort(),
+      pages: Array.from(pages as Set<string>).sort(),
     });
   }
 
@@ -162,55 +148,48 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
     content,
     "utf-8"
   );
-});
+};
 
-gulp.task(
-  "develop-gallery",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean-gallery",
-    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "build-locale-data",
-      "gather-gallery-pages"
-    ),
-    "copy-static-gallery",
-    "gen-pages-gallery-dev",
-    gulp.parallel(
-      "rspack-dev-server-gallery",
-      async function watchMarkdownFiles() {
-        gulp.watch(
-          [
-            path.resolve(paths.gallery_dir, "src/pages/**/*.markdown"),
-            path.resolve(paths.gallery_dir, "sidebar.js"),
-          ],
-          gulp.series("gather-gallery-pages")
-        );
-      }
-    )
-  )
+// develop-gallery
+export const developGallery = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "development";
+  },
+  cleanGallery,
+  translationsEnableMergeBackend,
+  parallel(
+    genIconsJson,
+    buildTranslations,
+    buildLocaleData,
+    gatherGalleryPages
+  ),
+  copyStaticGallery,
+  genPagesGalleryDev,
+  parallel(rspackDevServerGallery, async function watchMarkdownFiles() {
+    watch(
+      [
+        path.resolve(paths.gallery_dir, "src/pages/**/*.markdown"),
+        path.resolve(paths.gallery_dir, "sidebar.js"),
+      ],
+      series(gatherGalleryPages)
+    );
+  })
 );
 
-gulp.task(
-  "build-gallery",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean-gallery",
-    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "build-locale-data",
-      "gather-gallery-pages"
-    ),
-    "copy-static-gallery",
-    "rspack-prod-gallery",
-    "gen-pages-gallery-prod"
-  )
+// build-gallery
+export const buildGallery = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "production";
+  },
+  cleanGallery,
+  translationsEnableMergeBackend,
+  parallel(
+    genIconsJson,
+    buildTranslations,
+    buildLocaleData,
+    gatherGalleryPages
+  ),
+  copyStaticGallery,
+  rspackProdGallery,
+  genPagesGalleryProd
 );

build-scripts/gulp/gather-static.ts

@@ -1,9 +1,8 @@
 // Gulp task to gather all static files.
 
 import fs from "fs-extra";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
+import path from "node:path";
+import paths from "../paths.ts";
 
 const npmPath = (...parts) =>
   path.resolve(paths.root_dir, "node_modules", ...parts);
@@ -17,7 +16,7 @@ const genStaticPath =
   (...parts) =>
     path.resolve(staticDir, ...parts);
 
-function copyTranslations(staticDir) {
+const copyTranslations = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
 
   // Translation output
@@ -25,23 +24,23 @@ function copyTranslations(staticDir) {
     polyPath("build/translations/output"),
     staticPath("translations")
   );
-}
+};
 
-function copyLocaleData(staticDir) {
+const copyLocaleData = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
 
   // Locale data output
   fs.copySync(polyPath("build/locale-data"), staticPath("locale-data"));
-}
+};
 
-function copyMdiIcons(staticDir) {
+const copyMdiIcons = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
 
   // MDI icons output
   fs.copySync(polyPath("build/mdi"), staticPath("mdi"));
-}
+};
 
-function copyPolyfills(staticDir) {
+const copyPolyfills = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
 
   // For custom panels using ES5 builds that don't use Babel 7+
@@ -70,9 +69,9 @@ function copyPolyfills(staticDir) {
     npmPath("dialog-polyfill/dialog-polyfill.css"),
     staticPath("polyfills/")
   );
-}
+};
 
-function copyFonts(staticDir) {
+const copyFonts = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
   fs.copySync(
@@ -82,14 +81,14 @@ function copyFonts(staticDir) {
       filter: (src) => !src.includes(".") || src.endsWith(".woff2"),
     }
   );
-}
+};
 
-function copyQrScannerWorker(staticDir) {
+const copyQrScannerWorker = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
-}
+};
 
-function copyMapPanel(staticDir) {
+const copyMapPanel = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
     npmPath("leaflet/dist/leaflet.css"),
@@ -103,43 +102,38 @@ function copyMapPanel(staticDir) {
     npmPath("leaflet/dist/images"),
     staticPath("images/leaflet/images/")
   );
-}
+};
 
-function copyZXingWasm(staticDir) {
+const copyZXingWasm = (staticDir) => {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
     npmPath("zxing-wasm/dist/reader/zxing_reader.wasm"),
     staticPath("js")
   );
-}
+};
 
-gulp.task("copy-locale-data", async () => {
-  const staticDir = paths.app_output_static;
-  copyLocaleData(staticDir);
-});
-
-gulp.task("copy-translations-app", async () => {
+export const copyTranslationsApp = async () => {
   const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
-});
+};
 
-gulp.task("copy-translations-supervisor", async () => {
+export const copyTranslationsSupervisor = async () => {
   const staticDir = paths.hassio_output_static;
   copyTranslations(staticDir);
-});
+};
 
-gulp.task("copy-translations-landing-page", async () => {
+export const copyTranslationsLandingPage = async () => {
   const staticDir = paths.landingPage_output_static;
   copyTranslations(staticDir);
-});
+};
 
-gulp.task("copy-static-supervisor", async () => {
+export const copyStaticSupervisor = async () => {
   const staticDir = paths.hassio_output_static;
   copyLocaleData(staticDir);
   copyFonts(staticDir);
-});
+};
 
-gulp.task("copy-static-app", async () => {
+export const copyStaticApp = async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
   fs.copySync(polyPath("public"), paths.app_output_root);
@@ -155,9 +149,9 @@ gulp.task("copy-static-app", async () => {
   // Qr Scanner assets
   copyZXingWasm(staticDir);
   copyQrScannerWorker(staticDir);
-});
+};
 
-gulp.task("copy-static-demo", async () => {
+export const copyStaticDemo = async () => {
   // Copy app static files
   fs.copySync(
     polyPath("public/static"),
@@ -171,9 +165,9 @@ gulp.task("copy-static-demo", async () => {
   copyTranslations(paths.demo_output_static);
   copyLocaleData(paths.demo_output_static);
   copyMdiIcons(paths.demo_output_static);
-});
+};
 
-gulp.task("copy-static-cast", async () => {
+export const copyStaticCast = async () => {
   // Copy app static files
   fs.copySync(polyPath("public/static"), paths.cast_output_static);
   // Copy cast static files
@@ -184,9 +178,9 @@ gulp.task("copy-static-cast", async () => {
   copyTranslations(paths.cast_output_static);
   copyLocaleData(paths.cast_output_static);
   copyMdiIcons(paths.cast_output_static);
-});
+};
 
-gulp.task("copy-static-gallery", async () => {
+export const copyStaticGallery = async () => {
   // Copy app static files
   fs.copySync(polyPath("public/static"), paths.gallery_output_static);
   // Copy gallery static files
@@ -200,9 +194,9 @@ gulp.task("copy-static-gallery", async () => {
   copyTranslations(paths.gallery_output_static);
   copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
-});
+};
 
-gulp.task("copy-static-landing-page", async () => {
+export const copyStaticLandingPage = async () => {
   // Copy landing-page static files
   fs.copySync(
     path.resolve(paths.landingPage_dir, "public"),
@@ -211,4 +205,4 @@ gulp.task("copy-static-landing-page", async () => {
 
   copyFonts(paths.landingPage_output_static);
   copyTranslations(paths.landingPage_output_static);
-});
+};

build-scripts/gulp/gen-icons-json.ts

@@ -1,8 +1,7 @@
-import fs from "fs";
-import gulp from "gulp";
+import fs from "node:fs";
+import path from "node:path";
 import hash from "object-hash";
-import path from "path";
-import paths from "../paths.cjs";
+import paths from "../paths.ts";
 
 const ICON_PACKAGE_PATH = path.resolve("node_modules/@mdi/svg/");
 const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
@@ -21,7 +20,7 @@ const getMeta = () => {
       encoding,
     });
     return {
-      path: svg.match(/ d="([^"]+)"/)[1],
+      path: svg.match(/ d="([^"]+)"/)?.[1],
       name: icon.name,
       tags: icon.tags,
       aliases: icon.aliases,
@@ -55,14 +54,14 @@ const orderMeta = (meta) => {
 };
 
 const splitBySize = (meta) => {
-  const chunks = [];
+  const chunks: any[] = [];
   const CHUNK_SIZE = 50000;
 
   let curSize = 0;
   let startKey;
-  let icons = [];
+  let icons: any[] = [];
 
-  Object.values(meta).forEach((icon) => {
+  Object.values(meta).forEach((icon: any) => {
     if (startKey === undefined) {
       startKey = icon.name;
     }
@@ -94,10 +93,10 @@ const findDifferentiator = (curString, prevString) => {
       return curString.substring(0, i + 1);
     }
   }
-  throw new Error("Cannot find differentiator", curString, prevString);
+  throw new Error(`Cannot find differentiator; ${curString}; ${prevString}`);
 };
 
-gulp.task("gen-icons-json", (done) => {
+export const genIconsJson = (done) => {
   const meta = getMeta();
 
   const metaAndRemoved = addRemovedMeta(meta);
@@ -106,7 +105,7 @@ gulp.task("gen-icons-json", (done) => {
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
   }
-  const parts = [];
+  const parts: any[] = [];
 
   let lastEnd;
   split.forEach((chunk) => {
@@ -153,13 +152,13 @@ gulp.task("gen-icons-json", (done) => {
   );
 
   done();
-});
+};
 
-gulp.task("gen-dummy-icons-json", (done) => {
+export const genDummyIconsJson = (done) => {
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
   }
 
   fs.writeFileSync(path.resolve(OUTPUT_DIR, "iconList.json"), "[]");
   done();
-});
+};

build-scripts/gulp/hassio.js

@@ -1,45 +0,0 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./compress.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./translations.js";
-import "./rspack.js";
-
-gulp.task(
-  "develop-hassio",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean-hassio",
-    "gen-dummy-icons-json",
-    "gen-pages-hassio-dev",
-    "build-supervisor-translations",
-    "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-static-supervisor",
-    "rspack-watch-hassio"
-  )
-);
-
-gulp.task(
-  "build-hassio",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean-hassio",
-    "gen-dummy-icons-json",
-    "build-supervisor-translations",
-    "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-static-supervisor",
-    "rspack-prod-hassio",
-    "gen-pages-hassio-prod",
-    ...// Don't compress running tests
-    (env.isTestBuild() ? [] : ["compress-hassio"])
-  )
-);

build-scripts/gulp/hassio.ts

@@ -0,0 +1,45 @@
+import { series } from "gulp";
+import { isTestBuild } from "../env.ts";
+import { cleanHassio } from "./clean.ts";
+import { compressHassio } from "./compress.ts";
+import { genPagesHassioDev, genPagesHassioProd } from "./entry-html.ts";
+import {
+  copyStaticSupervisor,
+  copyTranslationsSupervisor,
+} from "./gather-static.ts";
+import { genDummyIconsJson } from "./gen-icons-json.ts";
+import { buildLocaleData } from "./locale-data.ts";
+import { rspackProdHassio, rspackWatchHassio } from "./rspack.ts";
+import { buildSupervisorTranslations } from "./translations.ts";
+
+// develop-hassio
+export const developHassio = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "development";
+  },
+  cleanHassio,
+  genDummyIconsJson,
+  genPagesHassioDev,
+  buildSupervisorTranslations,
+  copyTranslationsSupervisor,
+  buildLocaleData,
+  copyStaticSupervisor,
+  rspackWatchHassio
+);
+
+// build-hassio
+export const buildHassio = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "production";
+  },
+  cleanHassio,
+  genDummyIconsJson,
+  buildSupervisorTranslations,
+  copyTranslationsSupervisor,
+  buildLocaleData,
+  copyStaticSupervisor,
+  rspackProdHassio,
+  genPagesHassioProd,
+  ...// Don't compress running tests
+  (isTestBuild() ? [] : [compressHassio])
+);

build-scripts/gulp/index.mjs

@@ -1,17 +0,0 @@
-import "./app.js";
-import "./cast.js";
-import "./clean.js";
-import "./compress.js";
-import "./demo.js";
-import "./download-translations.js";
-import "./entry-html.js";
-import "./fetch-nightly-translations.js";
-import "./gallery.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./hassio.js";
-import "./landing-page.js";
-import "./locale-data.js";
-import "./rspack.js";
-import "./service-worker.js";
-import "./translations.js";

build-scripts/gulp/index.ts

@@ -0,0 +1,42 @@
+import { analyzeApp, buildApp, developApp } from "./app";
+import { buildCast, developCast } from "./cast";
+import { analyzeDemo, buildDemo, developDemo } from "./demo";
+import { downloadTranslations } from "./download-translations";
+import { setupAndFetchNightlyTranslations } from "./fetch-nightly-translations";
+import { buildGallery, developGallery, gatherGalleryPages } from "./gallery";
+import { genIconsJson } from "./gen-icons-json";
+import { buildHassio, developHassio } from "./hassio";
+import { buildLandingPage, developLandingPage } from "./landing-page";
+import { buildLocaleData } from "./locale-data";
+import { buildTranslations } from "./translations";
+
+export default {
+  "develop-app": developApp,
+  "build-app": buildApp,
+  "analyze-app": analyzeApp,
+
+  "develop-cast": developCast,
+  "build-cast": buildCast,
+
+  "develop-demo": developDemo,
+  "build-demo": buildDemo,
+  "analyze-demo": analyzeDemo,
+
+  "develop-gallery": developGallery,
+  "build-gallery": buildGallery,
+  "gather-gallery-pages": gatherGalleryPages,
+
+  "develop-hassio": developHassio,
+  "build-hassio": buildHassio,
+
+  "develop-landing-page": developLandingPage,
+  "build-landing-page": buildLandingPage,
+
+  "setup-and-fetch-nightly-translations": setupAndFetchNightlyTranslations,
+  "download-translations": downloadTranslations,
+  "build-translations": buildTranslations,
+
+  "gen-icons-json": genIconsJson,
+
+  "build-locale-data": buildLocaleData,
+};

build-scripts/gulp/landing-page.js

@@ -1,41 +0,0 @@
-import gulp from "gulp";
-import "./clean.js";
-import "./compress.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./translations.js";
-import "./rspack.js";
-
-gulp.task(
-  "develop-landing-page",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean-landing-page",
-    "translations-enable-merge-backend",
-    "build-landing-page-translations",
-    "copy-translations-landing-page",
-    "build-locale-data",
-    "copy-static-landing-page",
-    "gen-pages-landing-page-dev",
-    "rspack-watch-landing-page"
-  )
-);
-
-gulp.task(
-  "build-landing-page",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "production";
-    },
-    "clean-landing-page",
-    "build-landing-page-translations",
-    "copy-translations-landing-page",
-    "build-locale-data",
-    "copy-static-landing-page",
-    "rspack-prod-landing-page",
-    "gen-pages-landing-page-prod"
-  )
-);

build-scripts/gulp/landing-page.ts

@@ -0,0 +1,46 @@
+import { series } from "gulp";
+import { cleanLandingPage } from "./clean.ts";
+import "./compress.ts";
+import {
+  genPagesLandingPageDev,
+  genPagesLandingPageProd,
+} from "./entry-html.ts";
+import {
+  copyStaticLandingPage,
+  copyTranslationsLandingPage,
+} from "./gather-static.ts";
+import { buildLocaleData } from "./locale-data.ts";
+import { rspackProdLandingPage, rspackWatchLandingPage } from "./rspack.ts";
+import {
+  buildLandingPageTranslations,
+  translationsEnableMergeBackend,
+} from "./translations.ts";
+
+// develop-landing-page
+export const developLandingPage = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "development";
+  },
+  cleanLandingPage,
+  translationsEnableMergeBackend,
+  buildLandingPageTranslations,
+  copyTranslationsLandingPage,
+  buildLocaleData,
+  copyStaticLandingPage,
+  genPagesLandingPageDev,
+  rspackWatchLandingPage
+);
+
+// build-landing-page
+export const buildLandingPage = series(
+  async function setEnv() {
+    process.env.NODE_ENV = "production";
+  },
+  cleanLandingPage,
+  buildLandingPageTranslations,
+  copyTranslationsLandingPage,
+  buildLocaleData,
+  copyStaticLandingPage,
+  rspackProdLandingPage,
+  genPagesLandingPageProd
+);

build-scripts/gulp/locale-data.ts

@@ -1,8 +1,8 @@
 import { deleteSync } from "del";
-import { mkdir, readFile, writeFile } from "fs/promises";
-import gulp from "gulp";
+import { series } from "gulp";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { join, resolve } from "node:path";
-import paths from "../paths.cjs";
+import paths from "../paths.ts";
 
 const formatjsDir = join(paths.root_dir, "node_modules", "@formatjs");
 const outDir = join(paths.build_dir, "locale-data");
@@ -31,7 +31,7 @@ const convertToJSON = async (
       join(formatjsDir, pkg, subDir, `${language}.js`),
       "utf-8"
     );
-  } catch (e) {
+  } catch (e: any) {
     // Ignore if language is missing (i.e. not supported by @formatjs)
     if (e.code === "ENOENT" && skipMissing) {
       console.warn(`Skipped missing data for language ${lang} from ${pkg}`);
@@ -54,16 +54,16 @@ const convertToJSON = async (
   await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
 };
 
-gulp.task("clean-locale-data", async () => deleteSync([outDir]));
+const cleanLocaleData = async () => deleteSync([outDir]);
 
-gulp.task("create-locale-data", async () => {
+const createLocaleData = async () => {
   const translationMeta = JSON.parse(
     await readFile(
       resolve(paths.translations_src, "translationMetadata.json"),
       "utf-8"
     )
   );
-  const conversions = [];
+  const conversions: any[] = [];
   for (const pkg of Object.keys(INTL_POLYFILLS)) {
     // eslint-disable-next-line no-await-in-loop
     await mkdir(join(outDir, pkg), { recursive: true });
@@ -81,9 +81,6 @@ gulp.task("create-locale-data", async () => {
     )
   );
   await Promise.all(conversions);
-});
+};
 
-gulp.task(
-  "build-locale-data",
-  gulp.series("clean-locale-data", "create-locale-data")
-);
+export const buildLocaleData = series(cleanLocaleData, createLocaleData);

build-scripts/gulp/rspack.ts

@@ -1,13 +1,13 @@
 // Tasks to run rspack.
 
-import fs from "fs";
-import path from "path";
-import log from "fancy-log";
-import gulp from "gulp";
 import rspack from "@rspack/core";
 import { RspackDevServer } from "@rspack/dev-server";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
+import log from "fancy-log";
+import { series, watch } from "gulp";
+import fs from "node:fs";
+import path from "node:path";
+import { isDevContainer, isStatsBuild, isTestBuild } from "../env.ts";
+import paths from "../paths.ts";
 import {
   createAppConfig,
   createCastConfig,
@@ -15,7 +15,17 @@ import {
   createGalleryConfig,
   createHassioConfig,
   createLandingPageConfig,
-} from "../rspack.cjs";
+} from "../rspack.ts";
+import {
+  copyTranslationsApp,
+  copyTranslationsLandingPage,
+  copyTranslationsSupervisor,
+} from "./gather-static.ts";
+import {
+  buildLandingPageTranslations,
+  buildSupervisorTranslations,
+  buildTranslations,
+} from "./translations.ts";
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),
@@ -29,6 +39,14 @@ const isWsl =
     .toLocaleLowerCase()
     .includes("microsoft");
 
+interface RunDevServer {
+  compiler: any;
+  contentBase: string;
+  port: number;
+  listenHost?: string;
+  proxy?: any;
+}
+
 /**
  * @param {{
  *   compiler: import("@rspack/core").Compiler,
@@ -41,12 +59,12 @@ const runDevServer = async ({
   compiler,
   contentBase,
   port,
-  listenHost = undefined,
-  proxy = undefined,
-}) => {
+  listenHost,
+  proxy,
+}: RunDevServer) => {
   if (listenHost === undefined) {
     // For dev container, we need to listen on all hosts
-    listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
+    listenHost = isDevContainer() ? "0.0.0.0" : "localhost";
   }
   const server = new RspackDevServer(
     {
@@ -68,7 +86,7 @@ const runDevServer = async ({
   log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
 };
 
-const doneHandler = (done) => (err, stats) => {
+const doneHandler = (done?: (value?: unknown) => void) => (err, stats) => {
   if (err) {
     log.error(err.stack || err);
     if (err.details) {
@@ -97,49 +115,46 @@ const prodBuild = (conf) =>
     );
   });
 
-gulp.task("rspack-watch-app", () => {
+export const rspackWatchApp = () => {
   // This command will run forever because we don't close compiler
   rspack(
     process.env.ES5
       ? bothBuilds(createAppConfig, { isProdBuild: false })
       : createAppConfig({ isProdBuild: false, latestBuild: true })
   ).watch({ poll: isWsl }, doneHandler());
-  gulp.watch(
+  watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations-app")
+    series(buildTranslations, copyTranslationsApp)
   );
-});
+};
 
-gulp.task("rspack-prod-app", () =>
+export const rspackProdApp = () =>
   prodBuild(
     bothBuilds(createAppConfig, {
       isProdBuild: true,
-      isStatsBuild: env.isStatsBuild(),
-      isTestBuild: env.isTestBuild(),
+      isStatsBuild: isStatsBuild(),
+      isTestBuild: isTestBuild(),
     })
-  )
-);
+  );
 
-gulp.task("rspack-dev-server-demo", () =>
+export const rspackDevServerDemo = () =>
   runDevServer({
     compiler: rspack(
       createDemoConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.demo_output_root,
     port: 8090,
-  })
-);
+  });
 
-gulp.task("rspack-prod-demo", () =>
+export const rspackProdDemo = () =>
   prodBuild(
     bothBuilds(createDemoConfig, {
       isProdBuild: true,
-      isStatsBuild: env.isStatsBuild(),
+      isStatsBuild: isStatsBuild(),
     })
-  )
-);
+  );
 
-gulp.task("rspack-dev-server-cast", () =>
+export const rspackDevServerCast = () =>
   runDevServer({
     compiler: rspack(
       createCastConfig({ isProdBuild: false, latestBuild: true })
@@ -148,18 +163,16 @@ gulp.task("rspack-dev-server-cast", () =>
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
-  })
-);
+  });
 
-gulp.task("rspack-prod-cast", () =>
+export const rspackProdCast = () =>
   prodBuild(
     bothBuilds(createCastConfig, {
       isProdBuild: true,
     })
-  )
-);
+  );
 
-gulp.task("rspack-watch-hassio", () => {
+export const rspackWatchHassio = () => {
   // This command will run forever because we don't close compiler
   rspack(
     createHassioConfig({
@@ -168,23 +181,22 @@ gulp.task("rspack-watch-hassio", () => {
     })
   ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
 
-  gulp.watch(
+  watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
+    series(buildSupervisorTranslations, copyTranslationsSupervisor)
   );
-});
+};
 
-gulp.task("rspack-prod-hassio", () =>
+export const rspackProdHassio = () =>
   prodBuild(
     bothBuilds(createHassioConfig, {
       isProdBuild: true,
-      isStatsBuild: env.isStatsBuild(),
-      isTestBuild: env.isTestBuild(),
+      isStatsBuild: isStatsBuild(),
+      isTestBuild: isTestBuild(),
     })
-  )
-);
+  );
 
-gulp.task("rspack-dev-server-gallery", () =>
+export const rspackDevServerGallery = () =>
   runDevServer({
     compiler: rspack(
       createGalleryConfig({ isProdBuild: false, latestBuild: true })
@@ -192,19 +204,17 @@ gulp.task("rspack-dev-server-gallery", () =>
     contentBase: paths.gallery_output_root,
     port: 8100,
     listenHost: "0.0.0.0",
-  })
-);
+  });
 
-gulp.task("rspack-prod-gallery", () =>
+export const rspackProdGallery = () =>
   prodBuild(
     createGalleryConfig({
       isProdBuild: true,
       latestBuild: true,
     })
-  )
-);
+  );
 
-gulp.task("rspack-watch-landing-page", () => {
+export const rspackWatchLandingPage = () => {
   // This command will run forever because we don't close compiler
   rspack(
     process.env.ES5
@@ -212,21 +222,17 @@ gulp.task("rspack-watch-landing-page", () => {
       : createLandingPageConfig({ isProdBuild: false, latestBuild: true })
   ).watch({ poll: isWsl }, doneHandler());
 
-  gulp.watch(
+  watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series(
-      "build-landing-page-translations",
-      "copy-translations-landing-page"
-    )
+    series(buildLandingPageTranslations, copyTranslationsLandingPage)
   );
-});
+};
 
-gulp.task("rspack-prod-landing-page", () =>
+export const rspackProdLandingPage = () =>
   prodBuild(
     bothBuilds(createLandingPageConfig, {
       isProdBuild: true,
-      isStatsBuild: env.isStatsBuild(),
-      isTestBuild: env.isTestBuild(),
+      isStatsBuild: isStatsBuild(),
+      isTestBuild: isTestBuild(),
     })
-  )
-);
+  );

build-scripts/gulp/service-worker.ts

@@ -1,11 +1,10 @@
 // Generate service workers
 
 import { deleteAsync } from "del";
-import gulp from "gulp";
 import { mkdir, readFile, symlink, writeFile } from "node:fs/promises";
 import { basename, join, relative } from "node:path";
 import { injectManifest } from "workbox-build";
-import paths from "../paths.cjs";
+import paths from "../paths.ts";
 
 const SW_MAP = {
   [paths.app_output_latest]: "modern",
@@ -23,7 +22,7 @@ self.addEventListener('install', (event) => {
 });
   `.trim() + "\n";
 
-gulp.task("gen-service-worker-app-dev", async () => {
+export const genServiceWorkerAppDev = async () => {
   await mkdir(paths.app_output_root, { recursive: true });
   await Promise.all(
     Object.values(SW_MAP).map((build) =>
@@ -32,9 +31,9 @@ gulp.task("gen-service-worker-app-dev", async () => {
       })
     )
   );
-});
+};
 
-gulp.task("gen-service-worker-app-prod", () =>
+export const genServiceWorkerAppProd = () =>
   Promise.all(
     Object.entries(SW_MAP).map(async ([outPath, build]) => {
       const manifest = JSON.parse(
@@ -83,5 +82,4 @@ gulp.task("gen-service-worker-app-prod", () =>
         await symlink(basename(swDest), swOld);
       }
     })
-  )
-);
+  );

build-scripts/gulp/translations.ts

@@ -2,7 +2,7 @@
 
 import { deleteAsync } from "del";
 import { glob } from "glob";
-import gulp from "gulp";
+import { src as glupSrc, dest as gulpDest, parallel, series } from "gulp";
 import rename from "gulp-rename";
 import merge from "lodash.merge";
 import { createHash } from "node:crypto";
@@ -10,9 +10,12 @@ import { mkdir, readFile } from "node:fs/promises";
 import { basename, join } from "node:path";
 import { PassThrough, Transform } from "node:stream";
 import { finished } from "node:stream/promises";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
-import "./fetch-nightly-translations.js";
+import { isProdBuild } from "../env.ts";
+import paths from "../paths.ts";
+import {
+  allowSetupFetchNightlyTranslations,
+  fetchNightlyTranslations,
+} from "./fetch-nightly-translations.ts";
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
@@ -23,18 +26,20 @@ const TEST_LOCALE = "en-x-test";
 
 let mergeBackend = false;
 
-gulp.task(
-  "translations-enable-merge-backend",
-  gulp.parallel(async () => {
-    mergeBackend = true;
-  }, "allow-setup-fetch-nightly-translations")
-);
+// translations-enable-merge-backend
+export const translationsEnableMergeBackend = parallel(async () => {
+  mergeBackend = true;
+}, allowSetupFetchNightlyTranslations);
 
 // Transform stream to apply a function on Vinyl JSON files (buffer mode only).
 // The provided function can either return a new object, or an array of
 // [object, subdirectory] pairs for fragmentizing the JSON.
 class CustomJSON extends Transform {
-  constructor(func, reviver = null) {
+  _func: any;
+
+  _reviver: any;
+
+  constructor(func, reviver: any = null) {
     super({ objectMode: true });
     this._func = func;
     this._reviver = reviver;
@@ -56,9 +61,17 @@ class CustomJSON extends Transform {
 
 // Transform stream to merge Vinyl JSON files (buffer mode only).
 class MergeJSON extends Transform {
-  _objects = [];
+  _objects: any[] = [];
 
-  constructor(stem, startObj = {}, reviver = null) {
+  _stem: any;
+
+  _startObj: any;
+
+  _reviver: any;
+
+  _outFile: any;
+
+  constructor(stem, startObj = {}, reviver: any = null) {
     super({ objectMode: true, allowHalfOpen: false });
     this._stem = stem;
     this._startObj = structuredClone(startObj);
@@ -111,11 +124,12 @@ const testReviver = (_key, value) =>
 const KEY_REFERENCE = /\[%key:([^%]+)%\]/;
 const lokaliseTransform = (data, path, original = data) => {
   const output = {};
-  for (const [key, value] of Object.entries(data)) {
+  for (const entry of Object.entries(data)) {
+    const [key, value] = entry as [string, string];
     if (typeof value === "object") {
       output[key] = lokaliseTransform(value, path, original);
     } else {
-      output[key] = value.replace(KEY_REFERENCE, (_match, lokalise_key) => {
+      output[key] = value?.replace(KEY_REFERENCE, (_match, lokalise_key) => {
         const replace = lokalise_key.split("::").reduce((tr, k) => {
           if (!tr) {
             throw Error(`Invalid key placeholder ${lokalise_key} in ${path}`);
@@ -132,18 +146,17 @@ const lokaliseTransform = (data, path, original = data) => {
   return output;
 };
 
-gulp.task("clean-translations", () => deleteAsync([workDir]));
+export const cleanTranslations = () => deleteAsync([workDir]);
 
 const makeWorkDir = () => mkdir(workDir, { recursive: true });
 
 const createTestTranslation = () =>
-  env.isProdBuild()
+  isProdBuild()
     ? Promise.resolve()
-    : gulp
-        .src(EN_SRC)
+    : glupSrc(EN_SRC)
         .pipe(new CustomJSON(null, testReviver))
         .pipe(rename(`${TEST_LOCALE}.json`))
-        .pipe(gulp.dest(workDir));
+        .pipe(gulpDest(workDir));
 
 /**
  * This task will build a master translation file, to be used as the base for
@@ -155,11 +168,10 @@ const createTestTranslation = () =>
  * the Lokalise update to translations/en.json will not happen immediately.
  */
 const createMasterTranslation = () =>
-  gulp
-    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
+  glupSrc([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
     .pipe(new CustomJSON(lokaliseTransform))
     .pipe(new MergeJSON("en"))
-    .pipe(gulp.dest(workDir));
+    .pipe(gulpDest(workDir));
 
 const FRAGMENTS = ["base"];
 
@@ -186,12 +198,12 @@ const createTranslations = async () => {
   // each locale, then fragmentizes and flattens the data for final output.
   const translationFiles = await glob([
     `${inFrontendDir}/!(en).json`,
-    ...(env.isProdBuild() ? [] : [`${workDir}/${TEST_LOCALE}.json`]),
+    ...(isProdBuild() ? [] : [`${workDir}/${TEST_LOCALE}.json`]),
   ]);
   const hashStream = new Transform({
     objectMode: true,
     transform: async (file, _, callback) => {
-      const hash = env.isProdBuild()
+      const hash = isProdBuild()
         ? createHash("md5").update(file.contents).digest("hex")
         : "dev";
       HASHES.set(file.stem, hash);
@@ -230,7 +242,7 @@ const createTranslations = async () => {
         })
       )
     )
-    .pipe(gulp.dest(outDir));
+    .pipe(gulpDest(outDir));
 
   // Send the English master downstream first, then for each other locale
   // generate merged JSON data to continue piping. It begins with the master
@@ -240,15 +252,15 @@ const createTranslations = async () => {
   // TODO: This is a naive interpretation of BCP47 that should be improved.
   //       Will be OK for now as long as we don't have anything more complicated
   // than a base translation + region.
-  const masterStream = gulp
-    .src(`${workDir}/en.json`)
-    .pipe(new PassThrough({ objectMode: true }));
+  const masterStream = glupSrc(`${workDir}/en.json`).pipe(
+    new PassThrough({ objectMode: true })
+  );
   masterStream.pipe(hashStream, { end: false });
   const mergesFinished = [finished(masterStream)];
   for (const translationFile of translationFiles) {
     const locale = basename(translationFile, ".json");
     const subtags = locale.split("-");
-    const mergeFiles = [];
+    const mergeFiles: string[] = [];
     for (let i = 1; i <= subtags.length; i++) {
       const lang = subtags.slice(0, i).join("-");
       if (lang === TEST_LOCALE) {
@@ -260,9 +272,9 @@ const createTranslations = async () => {
         }
       }
     }
-    const mergeStream = gulp
-      .src(mergeFiles, { allowEmpty: true })
-      .pipe(new MergeJSON(locale, enMaster, emptyReviver));
+    const mergeStream = glupSrc(mergeFiles, { allowEmpty: true }).pipe(
+      new MergeJSON(locale, enMaster, emptyReviver)
+    );
     mergesFinished.push(finished(mergeStream));
     mergeStream.pipe(hashStream, { end: false });
   }
@@ -275,12 +287,11 @@ const createTranslations = async () => {
 };
 
 const writeTranslationMetaData = () =>
-  gulp
-    .src([`${paths.translations_src}/translationMetadata.json`])
+  glupSrc([`${paths.translations_src}/translationMetadata.json`])
     .pipe(
       new CustomJSON((meta) => {
         // Add the test translation in development.
-        if (!env.isProdBuild()) {
+        if (!isProdBuild()) {
           meta[TEST_LOCALE] = { nativeName: "Translation Test" };
         }
         // Filter out locales without a native name, and add the hashes.
@@ -300,28 +311,22 @@ const writeTranslationMetaData = () =>
         };
       })
     )
-    .pipe(gulp.dest(workDir));
+    .pipe(gulpDest(workDir));
 
-gulp.task(
-  "build-translations",
-  gulp.series(
-    gulp.parallel(
-      "fetch-nightly-translations",
-      gulp.series("clean-translations", makeWorkDir)
-    ),
-    createTestTranslation,
-    createMasterTranslation,
-    createTranslations,
-    writeTranslationMetaData
-  )
+export const buildTranslations = series(
+  parallel(fetchNightlyTranslations, series(cleanTranslations, makeWorkDir)),
+  createTestTranslation,
+  createMasterTranslation,
+  createTranslations,
+  writeTranslationMetaData
 );
 
-gulp.task(
-  "build-supervisor-translations",
-  gulp.series(setFragment("supervisor"), "build-translations")
+export const buildSupervisorTranslations = series(
+  setFragment("supervisor"),
+  buildTranslations
 );
 
-gulp.task(
-  "build-landing-page-translations",
-  gulp.series(setFragment("landing-page"), "build-translations")
+export const buildLandingPageTranslations = series(
+  setFragment("landing-page"),
+  buildTranslations
 );

build-scripts/list-plugins-and-polyfills.ts

@@ -5,10 +5,11 @@ import { version as babelVersion } from "@babel/core";
 import presetEnv from "@babel/preset-env";
 import compilationTargets from "@babel/helper-compilation-targets";
 import coreJSCompat from "core-js-compat";
+
 import { logPlugin } from "@babel/preset-env/lib/debug.js";
 // eslint-disable-next-line import/no-relative-packages
 import shippedPolyfills from "../node_modules/babel-plugin-polyfill-corejs3/lib/shipped-proposals.js";
-import { babelOptions } from "./bundle.cjs";
+import { babelOptions } from "./bundle.ts";
 
 const detailsOpen = (heading) =>
   `<details>\n<summary><h4>${heading}</h4></summary>\n`;
@@ -50,6 +51,12 @@ for (const buildType of ["Modern", "Legacy"]) {
   const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
   const presetEnvOpts = babelOpts.presets[0][1];
 
+  if (typeof presetEnvOpts !== "object") {
+    throw new Error(
+      "The first preset in babelOptions is not an object. This is unexpected."
+    );
+  }
+
   // Invoking preset-env in debug mode will log the included plugins
   console.log(detailsOpen(`${buildType} Build Babel Plugins`));
   presetEnv.default(dummyAPI, {

build-scripts/paths.cjs

@@ -1,63 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  root_dir: path.resolve(__dirname, ".."),
-
-  build_dir: path.resolve(__dirname, "../build"),
-  app_output_root: path.resolve(__dirname, "../hass_frontend"),
-  app_output_static: path.resolve(__dirname, "../hass_frontend/static"),
-  app_output_latest: path.resolve(
-    __dirname,
-    "../hass_frontend/frontend_latest"
-  ),
-  app_output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
-
-  demo_dir: path.resolve(__dirname, "../demo"),
-  demo_output_root: path.resolve(__dirname, "../demo/dist"),
-  demo_output_static: path.resolve(__dirname, "../demo/dist/static"),
-  demo_output_latest: path.resolve(__dirname, "../demo/dist/frontend_latest"),
-  demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
-
-  cast_dir: path.resolve(__dirname, "../cast"),
-  cast_output_root: path.resolve(__dirname, "../cast/dist"),
-  cast_output_static: path.resolve(__dirname, "../cast/dist/static"),
-  cast_output_latest: path.resolve(__dirname, "../cast/dist/frontend_latest"),
-  cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
-
-  gallery_dir: path.resolve(__dirname, "../gallery"),
-  gallery_build: path.resolve(__dirname, "../gallery/build"),
-  gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
-  gallery_output_latest: path.resolve(
-    __dirname,
-    "../gallery/dist/frontend_latest"
-  ),
-  gallery_output_static: path.resolve(__dirname, "../gallery/dist/static"),
-
-  landingPage_dir: path.resolve(__dirname, "../landing-page"),
-  landingPage_build: path.resolve(__dirname, "../landing-page/build"),
-  landingPage_output_root: path.resolve(__dirname, "../landing-page/dist"),
-  landingPage_output_latest: path.resolve(
-    __dirname,
-    "../landing-page/dist/frontend_latest"
-  ),
-  landingPage_output_es5: path.resolve(
-    __dirname,
-    "../landing-page/dist/frontend_es5"
-  ),
-  landingPage_output_static: path.resolve(
-    __dirname,
-    "../landing-page/dist/static"
-  ),
-
-  hassio_dir: path.resolve(__dirname, "../hassio"),
-  hassio_output_root: path.resolve(__dirname, "../hassio/build"),
-  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
-  hassio_output_latest: path.resolve(
-    __dirname,
-    "../hassio/build/frontend_latest"
-  ),
-  hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
-  hassio_publicPath: "/api/hassio/app",
-
-  translations_src: path.resolve(__dirname, "../src/translations"),
-};

build-scripts/paths.ts

@@ -0,0 +1,63 @@
+import path, { dirname as pathDirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const dirname = pathDirname(fileURLToPath(import.meta.url));
+
+export default {
+  root_dir: path.resolve(dirname, ".."),
+
+  build_dir: path.resolve(dirname, "../build"),
+  app_output_root: path.resolve(dirname, "../hass_frontend"),
+  app_output_static: path.resolve(dirname, "../hass_frontend/static"),
+  app_output_latest: path.resolve(dirname, "../hass_frontend/frontend_latest"),
+  app_output_es5: path.resolve(dirname, "../hass_frontend/frontend_es5"),
+
+  demo_dir: path.resolve(dirname, "../demo"),
+  demo_output_root: path.resolve(dirname, "../demo/dist"),
+  demo_output_static: path.resolve(dirname, "../demo/dist/static"),
+  demo_output_latest: path.resolve(dirname, "../demo/dist/frontend_latest"),
+  demo_output_es5: path.resolve(dirname, "../demo/dist/frontend_es5"),
+
+  cast_dir: path.resolve(dirname, "../cast"),
+  cast_output_root: path.resolve(dirname, "../cast/dist"),
+  cast_output_static: path.resolve(dirname, "../cast/dist/static"),
+  cast_output_latest: path.resolve(dirname, "../cast/dist/frontend_latest"),
+  cast_output_es5: path.resolve(dirname, "../cast/dist/frontend_es5"),
+
+  gallery_dir: path.resolve(dirname, "../gallery"),
+  gallery_build: path.resolve(dirname, "../gallery/build"),
+  gallery_output_root: path.resolve(dirname, "../gallery/dist"),
+  gallery_output_latest: path.resolve(
+    dirname,
+    "../gallery/dist/frontend_latest"
+  ),
+  gallery_output_static: path.resolve(dirname, "../gallery/dist/static"),
+
+  landingPage_dir: path.resolve(dirname, "../landing-page"),
+  landingPage_build: path.resolve(dirname, "../landing-page/build"),
+  landingPage_output_root: path.resolve(dirname, "../landing-page/dist"),
+  landingPage_output_latest: path.resolve(
+    dirname,
+    "../landing-page/dist/frontend_latest"
+  ),
+  landingPage_output_es5: path.resolve(
+    dirname,
+    "../landing-page/dist/frontend_es5"
+  ),
+  landingPage_output_static: path.resolve(
+    dirname,
+    "../landing-page/dist/static"
+  ),
+
+  hassio_dir: path.resolve(dirname, "../hassio"),
+  hassio_output_root: path.resolve(dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(dirname, "../hassio/build/static"),
+  hassio_output_latest: path.resolve(
+    dirname,
+    "../hassio/build/frontend_latest"
+  ),
+  hassio_output_es5: path.resolve(dirname, "../hassio/build/frontend_es5"),
+  hassio_publicPath: "/api/hassio/app",
+
+  translations_src: path.resolve(dirname, "../src/translations"),
+};

build-scripts/rspack.ts

@@ -1,20 +1,25 @@
-const { existsSync } = require("fs");
-const path = require("path");
-const rspack = require("@rspack/core");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const { StatsWriterPlugin } = require("webpack-stats-plugin");
-const filterStats = require("@bundle-stats/plugin-webpack-filter");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const TerserPlugin = require("terser-webpack-plugin");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
-const log = require("fancy-log");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WebpackBar = require("webpackbar/rspack");
-const paths = require("./paths.cjs");
-const bundle = require("./bundle.cjs");
+import filterStats from "@bundle-stats/plugin-webpack-filter";
+import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
+import { DefinePlugin, NormalModuleReplacementPlugin } from "@rspack/core";
+import { defineConfig } from "@rspack/cli";
+import log from "fancy-log";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { WebpackManifestPlugin } from "rspack-manifest-plugin";
+import TerserPlugin from "terser-webpack-plugin";
+import { StatsWriterPlugin } from "webpack-stats-plugin";
+// @ts-ignore
+import WebpackBar from "webpackbar/rspack";
+import {
+  babelOptions,
+  config,
+  definedVars,
+  emptyPackages,
+  sourceMapURL,
+  swcOptions,
+  terserOptions,
+} from "./bundle.ts";
+import paths from "./paths.ts";
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -30,7 +35,7 @@ class LogStartCompilePlugin {
   }
 }
 
-const createRspackConfig = ({
+export const createRspackConfig = ({
   name,
   entry,
   outputPath,
@@ -42,12 +47,23 @@ const createRspackConfig = ({
   isTestBuild,
   isHassioBuild,
   dontHash,
+}: {
+  name: string;
+  entry: any;
+  outputPath: string;
+  publicPath: string;
+  defineOverlay?: Record<string, any>;
+  isProdBuild?: boolean;
+  latestBuild?: boolean;
+  isStatsBuild?: boolean;
+  isTestBuild?: boolean;
+  isHassioBuild?: boolean;
+  dontHash?: Set<string>;
 }) => {
   if (!dontHash) {
     dontHash = new Set();
   }
-  const ignorePackages = bundle.ignorePackages({ latestBuild });
-  return {
+  return defineConfig({
     name,
     mode: isProdBuild ? "production" : "development",
     target: `browserslist:${latestBuild ? "modern" : "legacy"}`,
@@ -70,7 +86,7 @@ const createRspackConfig = ({
             {
               loader: "babel-loader",
               options: {
-                ...bundle.babelOptions({
+                ...babelOptions({
                   latestBuild,
                   isProdBuild,
                   isTestBuild,
@@ -82,7 +98,7 @@ const createRspackConfig = ({
             },
             {
               loader: "builtin:swc-loader",
-              options: bundle.swcOptions(),
+              options: swcOptions(),
             },
           ],
           resolve: {
@@ -103,7 +119,7 @@ const createRspackConfig = ({
         new TerserPlugin({
           parallel: true,
           extractComments: true,
-          terserOptions: bundle.terserOptions({ latestBuild, isTestBuild }),
+          terserOptions: terserOptions({ latestBuild, isTestBuild }),
         }),
       ],
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
@@ -122,7 +138,7 @@ const createRspackConfig = ({
               !chunk.canBeInitial() &&
               !new RegExp(
                 `^.+-work${latestBuild ? "(?:let|er)" : "let"}$`
-              ).test(chunk.name),
+              ).test(chunk?.name || ""),
       },
     },
     plugins: [
@@ -131,44 +147,11 @@ const createRspackConfig = ({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
-      new rspack.DefinePlugin(
-        bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
+      new DefinePlugin(
+        definedVars({ isProdBuild, latestBuild, defineOverlay })
       ),
-      new rspack.IgnorePlugin({
-        checkResource(resource, context) {
-          // Only use ignore to intercept imports that we don't control
-          // inside node_module dependencies.
-          if (
-            !context.includes("/node_modules/") ||
-            // calling define.amd will call require("!!webpack amd options")
-            resource.startsWith("!!webpack") ||
-            // loaded by webpack dev server but doesn't exist.
-            resource === "webpack/hot" ||
-            resource.startsWith("@swc/helpers")
-          ) {
-            return false;
-          }
-          let fullPath;
-          try {
-            fullPath = resource.startsWith(".")
-              ? path.resolve(context, resource)
-              : require.resolve(resource);
-          } catch (err) {
-            console.error(
-              "Error in Home Assistant ignore plugin",
-              resource,
-              context
-            );
-            throw err;
-          }
-
-          return ignorePackages.some((toIgnorePath) =>
-            fullPath.startsWith(toIgnorePath)
-          );
-        },
-      }),
-      new rspack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+      new NormalModuleReplacementPlugin(
+        new RegExp(emptyPackages({ isHassioBuild }).join("|")),
         path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
@@ -184,7 +167,9 @@ const createRspackConfig = ({
       isProdBuild &&
         isStatsBuild &&
         new RsdoctorRspackPlugin({
-          reportDir: path.join(paths.build_dir, "rsdoctor"),
+          output: {
+            reportDir: path.join(paths.build_dir, "rsdoctor"),
+          },
           features: ["plugins", "bundle"],
           supports: {
             generateTileGraph: true,
@@ -219,7 +204,9 @@ const createRspackConfig = ({
     output: {
       module: latestBuild,
       filename: ({ chunk }) =>
-        !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
+        !isProdBuild ||
+        isStatsBuild ||
+        (chunk?.name && dontHash.has(chunk.name))
           ? "[name].js"
           : "[name].[contenthash].js",
       chunkFilename:
@@ -250,7 +237,7 @@ const createRspackConfig = ({
                   // dev tools, and they stay happy getting 404s with valid requests.
                   return `/unknown${path.resolve("/", info.resourcePath)}`;
                 }
-                return new URL(info.resourcePath, bundle.sourceMapURL()).href;
+                return new URL(info.resourcePath, sourceMapURL()).href;
               }
             : undefined,
         ])
@@ -260,35 +247,51 @@ const createRspackConfig = ({
       layers: true,
       outputModule: true,
     },
-  };
+  });
 };
 
-const createAppConfig = ({
+export const createAppConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
   isTestBuild,
+}: {
+  isProdBuild?: boolean;
+  latestBuild?: boolean;
+  isStatsBuild?: boolean;
+  isTestBuild?: boolean;
 }) =>
   createRspackConfig(
-    bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
+    config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
-  createRspackConfig(
-    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
-  );
+export const createDemoConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+}: {
+  isProdBuild?: boolean;
+  latestBuild?: boolean;
+  isStatsBuild?: boolean;
+}) =>
+  createRspackConfig(config.demo({ isProdBuild, latestBuild, isStatsBuild }));
 
-const createCastConfig = ({ isProdBuild, latestBuild }) =>
-  createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
+export const createCastConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(config.cast({ isProdBuild, latestBuild }));
 
-const createHassioConfig = ({
+export const createHassioConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
   isTestBuild,
+}: {
+  isProdBuild?: boolean;
+  latestBuild?: boolean;
+  isStatsBuild?: boolean;
+  isTestBuild?: boolean;
 }) =>
   createRspackConfig(
-    bundle.config.hassio({
+    config.hassio({
       isProdBuild,
       latestBuild,
       isStatsBuild,
@@ -296,18 +299,8 @@ const createHassioConfig = ({
     })
   );
 
-const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
-  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
+export const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(config.gallery({ isProdBuild, latestBuild }));
 
-const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
-  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
-
-module.exports = {
-  createAppConfig,
-  createDemoConfig,
-  createCastConfig,
-  createHassioConfig,
-  createGalleryConfig,
-  createRspackConfig,
-  createLandingPageConfig,
-};
+export const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(config.landingPage({ isProdBuild, latestBuild }));

build-scripts/runTask.ts

@@ -0,0 +1,42 @@
+// run-build.ts
+import { series } from "gulp";
+import { availableParallelism } from "node:os";
+import tasks from "./gulp/index.ts";
+
+process.env.UV_THREADPOOL_SIZE = availableParallelism().toString();
+
+const runGulpTask = async (runTasks: string[]) => {
+  try {
+    for (const taskName of runTasks) {
+      if (tasks[taskName] === undefined) {
+        console.error(`Gulp task "${taskName}" does not exist.`);
+        console.log("Available tasks:");
+        Object.keys(tasks).forEach((task) => {
+          console.log(`  - ${task}`);
+        });
+        process.exit(1);
+      }
+    }
+
+    await new Promise((resolve, reject) => {
+      series(...runTasks.map((taskName) => tasks[taskName]))((err?: Error) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(null);
+        }
+      });
+    });
+
+    process.exit(0);
+  } catch (error: any) {
+    console.error(`Error running Gulp task "${runTasks}":`, error);
+    process.exit(1);
+  }
+};
+
+// Get the task name from command line arguments
+// TODO arg validation
+const tasksToRun = process.argv.slice(2);
+
+runGulpTask(tasksToRun);

cast/script/build_cast

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp build-cast
+yarn run-task build-cast

cast/script/develop_cast

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp develop-cast
+yarn run-task develop-cast

cast/src/launcher/layout/hc-layout.ts

@@ -88,7 +88,7 @@ class HcLayout extends LitElement {
       font-family: var(--ha-card-header-font-family, inherit);
       font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
-      line-height: 32px;
+      line-height: var(--ha-line-height-condensed);
       padding: 24px 16px 16px;
       display: block;
       margin: 0;

custom-elements.json

@@ -1,186 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "src/components/ha-alert.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A custom alert component for displaying messages with various alert types.",
-          "name": "HaAlert",
-          "cssProperties": [
-            {
-              "description": "The color used for \"info\" alerts.",
-              "name": "--info-color"
-            },
-            {
-              "description": "The color used for \"warning\" alerts.",
-              "name": "--warning-color"
-            },
-            {
-              "description": "The color used for \"error\" alerts.",
-              "name": "--error-color"
-            },
-            {
-              "description": "The color used for \"success\" alerts.",
-              "name": "--success-color"
-            },
-            {
-              "description": "The primary text color used in the alert.",
-              "name": "--primary-text-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container for the alert.",
-              "name": "issue-type"
-            },
-            {
-              "description": "The container for the alert icon.",
-              "name": "icon"
-            },
-            {
-              "description": "The container for the alert content.",
-              "name": "content"
-            },
-            {
-              "description": "The container for the alert actions.",
-              "name": "action"
-            },
-            {
-              "description": "The container for the alert title.",
-              "name": "title"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The main content of the alert.",
-              "name": ""
-            },
-            {
-              "description": "Slot for providing a custom icon for the alert.",
-              "name": "icon"
-            },
-            {
-              "description": "Slot for providing custom actions or buttons for the alert.",
-              "name": "action"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The title of the alert. Defaults to an empty string.",
-              "attribute": "title"
-            },
-            {
-              "kind": "field",
-              "name": "alertType",
-              "type": {
-                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
-              },
-              "privacy": "public",
-              "default": "\"info\"",
-              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
-              "attribute": "alert-type"
-            },
-            {
-              "kind": "field",
-              "name": "dismissable",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
-              "attribute": "dismissable"
-            },
-            {
-              "kind": "field",
-              "name": "narrow",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
-              "attribute": "narrow"
-            },
-            {
-              "kind": "method",
-              "name": "_dismissClicked",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when the dismiss button is clicked.",
-              "name": "alert-dismissed-clicked"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The title of the alert. Defaults to an empty string.",
-              "fieldName": "title"
-            },
-            {
-              "name": "alert-type",
-              "type": {
-                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
-              },
-              "default": "\"info\"",
-              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
-              "fieldName": "alertType"
-            },
-            {
-              "name": "dismissable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
-              "fieldName": "dismissable"
-            },
-            {
-              "name": "narrow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
-              "fieldName": "narrow"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "ha-alert",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "ha-alert",
-          "declaration": {
-            "name": "HaAlert",
-            "module": "src/components/ha-alert.ts"
-          }
-        }
-      ]
-    }
-  ]
-}

demo/script/build_demo

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp build-demo
+yarn run-task build-demo

demo/script/develop_demo

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp develop-demo
+yarn run-task develop-demo

demo/script/size_stats

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp analyze-demo
+yarn run-task analyze-demo

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -76,7 +76,7 @@
         padding-top: 48px;
       }
       .ohf-logo {
-        margin: max(env(safe-area-inset-bottom), 48px) 0;
+        margin: max(var(--safe-area-inset-bottom), 48px) 0;
         display: flex;
         flex-direction: column;
         align-items: center;

demo/src/stubs/frontend.ts

@@ -1,7 +1,30 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+let changeFunction;
+
 export const mockFrontend = (hass: MockHomeAssistant) => {
   hass.mockWS("frontend/get_user_data", () => ({
     value: null,
   }));
+  hass.mockWS("frontend/set_user_data", ({ key, value }) => {
+    if (key === "sidebar") {
+      changeFunction?.({
+        value: {
+          panelOrder: value.panelOrder || [],
+          hiddenPanels: value.hiddenPanels || [],
+        },
+      });
+    }
+  });
+  hass.mockWS("frontend/subscribe_user_data", (_msg, _hass, onChange) => {
+    changeFunction = onChange;
+    onChange?.({
+      value: {
+        panelOrder: [],
+        hiddenPanels: [],
+      },
+    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
 };

eslint.config.mjs

@@ -11,6 +11,7 @@ import tseslint from "typescript-eslint";
 import eslintConfigPrettier from "eslint-config-prettier";
 import { configs as litConfigs } from "eslint-plugin-lit";
 import { configs as wcConfigs } from "eslint-plugin-wc";
+import { configs as a11yConfigs } from "eslint-plugin-lit-a11y";
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -21,13 +22,14 @@ const compat = new FlatCompat({
 });
 
 export default tseslint.config(
-  ...compat.extends("airbnb-base", "plugin:lit-a11y/recommended"),
+  ...compat.extends("airbnb-base"),
   eslintConfigPrettier,
   litConfigs["flat/all"],
   tseslint.configs.recommended,
   tseslint.configs.strict,
   tseslint.configs.stylistic,
   wcConfigs["flat/recommended"],
+  a11yConfigs.recommended,
   {
     plugins: {
       "unused-imports": unusedImports,
@@ -54,15 +56,6 @@ export default tseslint.config(
         },
       },
     },
-
-    settings: {
-      "import/resolver": {
-        webpack: {
-          config: "./rspack.config.cjs",
-        },
-      },
-    },
-
     rules: {
       "class-methods-use-this": "off",
       "new-cap": "off",
@@ -185,5 +178,12 @@ export default tseslint.config(
       ],
       "no-use-before-define": "off",
     },
+    settings: {
+      "import/resolver": {
+        node: {
+          extensions: [".ts", ".js"],
+        },
+      },
+    },
   }
 );

gallery/script/build_gallery

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp build-gallery
+yarn run-task build-gallery

gallery/script/develop_gallery

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp develop-gallery
+yarn run-task develop-gallery

gallery/src/components/page-description.ts

@@ -38,12 +38,12 @@ class PageDescription extends HaMarkdown {
       }
       .title {
         font-size: 42px;
-        line-height: 56px;
+        line-height: var(--ha-line-height-condensed);
         padding-bottom: 8px;
       }
       .subtitle {
         font-size: var(--ha-font-size-l);
-        line-height: 24px;
+        line-height: var(--ha-line-height-normal);
       }
       .root {
         max-width: 800px;

gallery/src/ha-gallery.ts

@@ -252,12 +252,12 @@ class HaGallery extends LitElement {
       .page-footer .header {
         font-size: var(--ha-font-size-l);
         font-weight: var(--ha-font-weight-medium);
-        line-height: 28px;
+        line-height: var(--ha-line-height-normal);
         text-align: center;
       }
 
       .page-footer .secondary {
-        line-height: 23px;
+        line-height: var(--ha-line-height-normal);
         text-align: center;
       }
 

gallery/src/pages/components/ha-control-select.ts

@@ -135,7 +135,7 @@ export class DemoHaControlSelect extends LitElement {
                 .options=${options}
                 class=${ifDefined(config.class)}
                 @value-changed=${this.handleValueChanged}
-                aria-labelledby=${id}
+                .label=${label}
                 ?disabled=${config.disabled}
               >
               </ha-control-select>
@@ -156,7 +156,7 @@ export class DemoHaControlSelect extends LitElement {
                   vertical
                   class=${ifDefined(config.class)}
                   @value-changed=${this.handleValueChanged}
-                  aria-labelledby=${id}
+                  .label=${label}
                   ?disabled=${config.disabled}
                 >
                 </ha-control-select>

gallery/src/pages/components/ha-control-slider.ts

@@ -97,7 +97,7 @@ export class DemoHaBarSlider extends LitElement {
                 class=${ifDefined(config.class)}
                 @value-changed=${this.handleValueChanged}
                 @slider-moved=${this.handleSliderMoved}
-                aria-labelledby=${id}
+                .label=${label}
                 .unit=${config.unit}
               >
               </ha-control-slider>
@@ -119,7 +119,7 @@ export class DemoHaBarSlider extends LitElement {
                   class=${ifDefined(config.class)}
                   @value-changed=${this.handleValueChanged}
                   @slider-moved=${this.handleSliderMoved}
-                  aria-label=${label}
+                  .label=${label}
                   .unit=${config.unit}
                 >
                 </ha-control-slider>

gallery/src/pages/components/ha-control-switch.ts

@@ -63,7 +63,7 @@ export class DemoHaControlSwitch extends LitElement {
                 @change=${this.handleValueChanged}
                 .pathOn=${mdiLightbulb}
                 .pathOff=${mdiLightbulbOff}
-                aria-labelledby=${id}
+                .label=${label}
                 ?disabled=${config.disabled}
                 ?reversed=${config.reversed}
               >
@@ -84,7 +84,7 @@ export class DemoHaControlSwitch extends LitElement {
                   vertical
                   class=${ifDefined(config.class)}
                   @change=${this.handleValueChanged}
-                  aria-label=${label}
+                  .label=${label}
                   .pathOn=${mdiGarageOpen}
                   .pathOff=${mdiGarage}
                   ?disabled=${config.disabled}

gallery/src/pages/components/ha-selector.ts

@@ -416,6 +416,34 @@ const SCHEMAS: {
           },
         },
       },
+      items: {
+        name: "Items",
+        selector: {
+          object: {
+            label_field: "name",
+            description_field: "value",
+            multiple: true,
+            fields: {
+              name: {
+                label: "Name",
+                selector: { text: {} },
+                required: true,
+              },
+              value: {
+                label: "Value",
+                selector: {
+                  number: {
+                    mode: "slider",
+                    min: 0,
+                    max: 100,
+                    unit_of_measurement: "%",
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
     },
   },
 ];

gulpfile.js

@@ -1,4 +0,0 @@
-import { availableParallelism } from "node:os";
-import "./build-scripts/gulp/index.mjs";
-
-process.env.UV_THREADPOOL_SIZE = availableParallelism();

hassio/script/build_hassio

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp build-hassio
+yarn run-task build-hassio

hassio/script/develop

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp develop-hassio
+yarn run-task develop-hassio

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -430,7 +430,7 @@ class HassioAddonConfig extends LitElement {
           font-family: var(--ha-card-header-font-family, inherit);
           font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
           letter-spacing: -0.012em;
-          line-height: 48px;
+          line-height: var(--ha-line-height-expanded);
           padding: 12px 16px 16px;
           display: block;
           margin-block: 0px;

hassio/src/components/hassio-card-content.ts

@@ -101,7 +101,7 @@ class HassioCardContent extends LitElement {
       overflow: hidden;
       position: relative;
       height: 2.4em;
-      line-height: 1.2em;
+      line-height: var(--ha-line-height-condensed);
     }
     .icon_image img {
       max-height: 40px;

hassio/src/dashboard/hassio-dashboard.ts

@@ -132,9 +132,9 @@ class HassioDashboard extends LitElement {
         }
         ha-fab.non-tabs {
           position: fixed;
-          right: calc(16px + env(safe-area-inset-right));
-          bottom: calc(16px + env(safe-area-inset-bottom));
-          inset-inline-end: calc(16px + env(safe-area-inset-right));
+          right: calc(16px + var(--safe-area-inset-right));
+          bottom: calc(16px + var(--safe-area-inset-bottom));
+          inset-inline-end: calc(16px + var(--safe-area-inset-right));
           inset-inline-start: initial;
           z-index: 1;
         }

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -610,7 +610,7 @@ export class DialogHassioNetwork
           display: flex;
           justify-content: space-between;
           padding: 8px;
-          padding-bottom: max(env(safe-area-inset-bottom), 8px);
+          padding-bottom: max(var(--safe-area-inset-bottom), 8px);
           background-color: var(--mdc-theme-surface, #fff);
         }
         .warning {

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -249,6 +249,8 @@ class HassioRepositoriesDialog extends LitElement {
       await addStoreRepository(this.hass, input.value);
       await this._loadData();
 
+      fireEvent(this, "supervisor-collection-refresh", { collection: "store" });
+
       input.value = "";
     } catch (err: any) {
       this._error = extractApiErrorMessage(err);
@@ -261,6 +263,8 @@ class HassioRepositoriesDialog extends LitElement {
     try {
       await removeStoreRepository(this.hass, slug);
       await this._loadData();
+
+      fireEvent(this, "supervisor-collection-refresh", { collection: "store" });
     } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -354,7 +354,7 @@ class HassioIngressView extends LitElement {
 
     .main-title {
       margin: var(--margin-title);
-      line-height: 20px;
+      line-height: var(--ha-line-height-condensed);
       flex-grow: 1;
     }
 

landing-page/script/build_landing_page

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp build-landing-page
+yarn run-task build-landing-page

landing-page/script/develop

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/../.."
 
-./node_modules/.bin/gulp develop-landing-page
+yarn run-task develop-landing-page

landing-page/src/components/landing-page-logs.ts

@@ -1,5 +1,6 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
+
 // eslint-disable-next-line import/extensions
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";

package.json

@@ -21,22 +21,21 @@
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
     "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
-    "analyze": "cem analyze --litelement --globs \"src/components/ha-alert.ts\" --dev",
-    "doc": "gulp generate-component-docs"
+    "run-task": "tsx ./build-scripts/runTask.ts"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.27.1",
+    "@babel/runtime": "7.27.6",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/commands": "6.8.1",
-    "@codemirror/language": "6.11.0",
+    "@codemirror/language": "6.11.2",
     "@codemirror/legacy-modes": "6.5.1",
-    "@codemirror/search": "6.5.10",
+    "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.36.7",
+    "@codemirror/view": "6.38.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -47,18 +46,18 @@
     "@formatjs/intl-numberformat": "8.15.4",
     "@formatjs/intl-pluralrules": "5.4.4",
     "@formatjs/intl-relativetimeformat": "11.4.11",
-    "@fullcalendar/core": "6.1.17",
-    "@fullcalendar/daygrid": "6.1.17",
-    "@fullcalendar/interaction": "6.1.17",
-    "@fullcalendar/list": "6.1.17",
-    "@fullcalendar/luxon3": "6.1.17",
-    "@fullcalendar/timegrid": "6.1.17",
+    "@fullcalendar/core": "6.1.18",
+    "@fullcalendar/daygrid": "6.1.18",
+    "@fullcalendar/interaction": "6.1.18",
+    "@fullcalendar/list": "6.1.18",
+    "@fullcalendar/luxon3": "6.1.18",
+    "@fullcalendar/timegrid": "6.1.18",
     "@lezer/highlight": "1.2.1",
-    "@lit-labs/motion": "1.0.8",
-    "@lit-labs/observers": "2.0.5",
-    "@lit-labs/virtualizer": "2.1.0",
-    "@lit/context": "1.1.5",
-    "@lit/reactive-element": "2.1.0",
+    "@lit-labs/motion": "1.0.9",
+    "@lit-labs/observers": "2.0.6",
+    "@lit-labs/virtualizer": "2.1.1",
+    "@lit/context": "1.1.6",
+    "@lit/reactive-element": "2.1.1",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
@@ -91,17 +90,17 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.8.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.5",
-    "@vaadin/vaadin-themable-mixin": "24.7.5",
+    "@vaadin/combo-box": "24.7.9",
+    "@vaadin/vaadin-themable-mixin": "24.7.9",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.4",
+    "barcode-detector": "3.0.5",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
-    "core-js": "3.42.0",
+    "core-js": "3.44.0",
     "cropperjs": "1.6.2",
     "date-fns": "4.1.0",
     "date-fns-tz": "3.2.0",
@@ -113,7 +112,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.2",
+    "hls.js": "1.6.7",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -121,10 +120,10 @@
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
-    "lit": "3.3.0",
-    "lit-html": "3.3.0",
-    "luxon": "3.6.1",
-    "marked": "15.0.11",
+    "lit": "3.3.1",
+    "lit-html": "3.3.1",
+    "luxon": "3.7.1",
+    "marked": "16.1.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -137,9 +136,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.3",
-    "vis-data": "7.1.9",
-    "vis-network": "9.1.9",
+    "ua-parser-js": "2.0.4",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -152,94 +149,92 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.27.1",
-    "@babel/helper-define-polyfill-provider": "0.6.4",
-    "@babel/plugin-transform-runtime": "7.27.1",
-    "@babel/preset-env": "7.27.2",
-    "@bundle-stats/plugin-webpack-filter": "4.20.1",
-    "@custom-elements-manifest/analyzer": "0.10.4",
-    "@custom-elements-manifest/to-markdown": "0.1.0",
-    "@lokalise/node-api": "14.7.0",
-    "@octokit/auth-oauth-device": "7.1.5",
-    "@octokit/plugin-retry": "7.2.1",
-    "@octokit/rest": "21.1.1",
-    "@rsdoctor/rspack-plugin": "1.1.2",
-    "@rspack/cli": "1.3.9",
-    "@rspack/core": "1.3.9",
+    "@babel/core": "7.28.0",
+    "@babel/helper-define-polyfill-provider": "0.6.5",
+    "@babel/plugin-transform-runtime": "7.28.0",
+    "@babel/preset-env": "7.28.0",
+    "@bundle-stats/plugin-webpack-filter": "4.21.0",
+    "@lokalise/node-api": "14.9.1",
+    "@octokit/auth-oauth-device": "8.0.1",
+    "@octokit/plugin-retry": "8.0.1",
+    "@octokit/rest": "22.0.0",
+    "@rsdoctor/rspack-plugin": "1.1.8",
+    "@rspack/cli": "1.4.8",
+    "@rspack/core": "1.4.8",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.21",
+    "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
-    "@types/glob": "8.1.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.17",
+    "@types/leaflet": "1.9.20",
     "@types/leaflet-draw": "1.0.12",
     "@types/leaflet.markercluster": "1.5.5",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.6.2",
     "@types/mocha": "10.0.10",
+    "@types/node": "22.15.16",
     "@types/qrcode": "1.5.5",
     "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.1.3",
+    "@vitest/coverage-v8": "3.2.4",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.26.0",
+    "eslint": "9.31.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "10.1.5",
-    "eslint-import-resolver-webpack": "0.13.10",
-    "eslint-plugin-import": "2.31.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-lit": "2.1.1",
-    "eslint-plugin-lit-a11y": "4.1.4",
+    "eslint-plugin-lit-a11y": "5.1.0",
     "eslint-plugin-unused-imports": "4.1.4",
     "eslint-plugin-wc": "3.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.0",
-    "glob": "11.0.2",
-    "gulp": "5.0.0",
+    "glob": "11.0.3",
+    "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
-    "gulp-rename": "2.0.0",
+    "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "15.5.2",
+    "lint-staged": "16.1.2",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "rspack-manifest-plugin": "5.0.3",
     "serve": "14.2.4",
-    "sinon": "20.0.0",
+    "sinon": "21.0.0",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
+    "tsx": "4.19.4",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.32.0",
+    "typescript-eslint": "8.37.0",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.1.3",
+    "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
   },
   "resolutions": {
     "@material/mwc-button@^0.25.3": "^0.27.0",
-    "lit": "3.3.0",
-    "lit-html": "3.3.0",
+    "lit": "3.3.1",
+    "lit-html": "3.3.1",
     "clean-css": "5.3.3",
-    "@lit/reactive-element": "2.1.0",
-    "@fullcalendar/daygrid": "6.1.17",
-    "globals": "16.1.0",
+    "@lit/reactive-element": "2.1.1",
+    "@fullcalendar/daygrid": "6.1.18",
+    "globals": "16.3.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.9.2"
 }

public/static/images/dashboard-options/dark/icon-dashboard-areas.svg

@@ -0,0 +1,32 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3969_57097)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V4C20 6.20914 18.2091 8 16 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 20C0 15.5817 3.58172 12 8 12H68C72.4183 12 76 15.5817 76 20V36C76 40.4183 72.4183 44 68 44H8C3.58172 44 0 40.4183 0 36V20Z" fill="#1C1C1C"/>
+<path d="M8 12.5H68C72.1421 12.5 75.5 15.8579 75.5 20V36C75.5 40.1421 72.1421 43.5 68 43.5H8C3.85786 43.5 0.5 40.1421 0.5 36V20C0.5 15.8579 3.85786 12.5 8 12.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M32.9844 27.0156C32.9844 26.0781 32.7031 25.2656 32.1406 24.5781C31.5781 23.8594 30.8594 23.375 29.9844 23.125V22C29.9844 21.4375 30.125 20.9375 30.4062 20.5C30.6875 20.0312 31.0469 19.6719 31.4844 19.4219C31.9531 19.1406 32.4531 19 32.9844 19H43.0156C43.5469 19 44.0312 19.1406 44.4688 19.4219C44.9375 19.6719 45.3125 20.0312 45.5938 20.5C45.875 20.9375 46.0156 21.4375 46.0156 22V23.125C45.1406 23.375 44.4219 23.8594 43.8594 24.5781C43.2969 25.2656 43.0156 26.0781 43.0156 27.0156V28.9844H32.9844V27.0156ZM47 25C47.5625 25 48.0312 25.2031 48.4062 25.6094C48.8125 25.9844 49.0156 26.4531 49.0156 27.0156V31.9844C49.0156 32.5469 48.875 33.0625 48.5938 33.5312C48.3125 33.9688 47.9375 34.3281 47.4688 34.6094C47.0312 34.8594 46.5469 34.9844 46.0156 34.9844V36.0156C46.0156 36.2656 45.9062 36.5 45.6875 36.7188C45.5 36.9062 45.2656 37 44.9844 37C44.7344 37 44.5 36.9062 44.2812 36.7188C44.0938 36.5 44 36.2656 44 36.0156V34.9844H32V36.0156C32 36.2656 31.8906 36.5 31.6719 36.7188C31.4844 36.9062 31.2656 37 31.0156 37C30.7344 37 30.4844 36.9062 30.2656 36.7188C30.0781 36.5 29.9844 36.2656 29.9844 36.0156V34.9844C29.4531 34.9844 28.9531 34.8594 28.4844 34.6094C28.0469 34.3281 27.6875 33.9688 27.4062 33.5312C27.125 33.0625 26.9844 32.5469 26.9844 31.9844V27.0156C26.9844 26.4531 27.1719 25.9844 27.5469 25.6094C27.9531 25.2031 28.4375 25 29 25C29.5625 25 30.0312 25.2031 30.4062 25.6094C30.8125 25.9844 31.0156 26.4531 31.0156 27.0156V31H44.9844V27.0156C44.9844 26.4531 45.1719 25.9844 45.5469 25.6094C45.9531 25.2031 46.4375 25 47 25Z" fill="#03A9F4"/>
+<path d="M0 56C0 51.5817 3.58172 48 8 48H68C72.4183 48 76 51.5817 76 56V72C76 76.4183 72.4183 80 68 80H8C3.58172 80 0 76.4183 0 72V56Z" fill="#1C1C1C"/>
+<path d="M8 48.5H68C72.1421 48.5 75.5 51.8579 75.5 56V72C75.5 76.1421 72.1421 79.5 68 79.5H8C3.85786 79.5 0.5 76.1421 0.5 72V56C0.5 51.8579 3.85786 48.5 8 48.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M44 61.9844H47.9844V64H46.0156V72.0156H29.9844V64H28.0156V61.9844H32C31.4375 61.9844 30.9531 61.7969 30.5469 61.4219C30.1719 61.0156 29.9844 60.5469 29.9844 60.0156V55.9844H35.9844V60.0156C35.9844 60.5469 35.7812 61.0156 35.375 61.4219C35 61.7969 34.5469 61.9844 34.0156 61.9844H41.9844V58.9844C41.9844 58.7344 41.8906 58.5156 41.7031 58.3281C41.5156 58.1094 41.2812 58 41 58C40.7188 58 40.4844 58.1094 40.2969 58.3281C40.1094 58.5156 40.0156 58.7344 40.0156 58.9844H38C38 58.4531 38.125 57.9688 38.375 57.5312C38.6562 57.0625 39.0156 56.6875 39.4531 56.4062C39.9219 56.125 40.4375 55.9844 41 55.9844C41.5625 55.9844 42.0625 56.125 42.5 56.4062C42.9688 56.6875 43.3281 57.0625 43.5781 57.5312C43.8594 57.9688 44 58.4531 44 58.9844V61.9844ZM38.9844 70V64H37.0156V70H38.9844Z" fill="#03A9F4"/>
+<path d="M0 92C0 87.5817 3.58172 84 8 84H68C72.4183 84 76 87.5817 76 92V108C76 112.418 72.4183 116 68 116H8C3.58172 116 0 112.418 0 108V92Z" fill="#1C1C1C"/>
+<path d="M8 84.5H68C72.1421 84.5 75.5 87.8579 75.5 92V108C75.5 112.142 72.1421 115.5 68 115.5H8C3.85786 115.5 0.5 112.142 0.5 108V92C0.5 87.8579 3.85786 84.5 8 84.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M44.9844 94.9844C46.0781 94.9844 47.0156 95.3906 47.7969 96.2031C48.6094 96.9844 49.0156 97.9219 49.0156 99.0156V108.016H47V105.016H29V108.016H26.9844V93.0156H29V102.016H37.0156V94.9844H44.9844ZM35.0938 100.094C34.5 100.688 33.7969 100.984 32.9844 100.984C32.1719 100.984 31.4688 100.688 30.875 100.094C30.2812 99.5 29.9844 98.7969 29.9844 97.9844C29.9844 97.1719 30.2812 96.4688 30.875 95.875C31.4688 95.2812 32.1719 94.9844 32.9844 94.9844C33.7969 94.9844 34.5 95.2812 35.0938 95.875C35.6875 96.4688 35.9844 97.1719 35.9844 97.9844C35.9844 98.7969 35.6875 99.5 35.0938 100.094Z" fill="#03A9F4"/>
+<path d="M0 128C0 123.582 3.58172 120 8 120H68C72.4183 120 76 123.582 76 128V144C76 148.418 72.4183 152 68 152H8C3.58172 152 0 148.418 0 144V128Z" fill="#1C1C1C"/>
+<path d="M8 120.5H68C72.1421 120.5 75.5 123.858 75.5 128V144C75.5 148.142 72.1421 151.5 68 151.5H8C3.85786 151.5 0.5 148.142 0.5 144V128C0.5 123.858 3.85786 120.5 8 120.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M46.0156 136.984H47.9844V142.984C47.9844 143.516 47.7812 143.984 47.375 144.391C47 144.797 46.5469 145 46.0156 145C46.0156 145.281 45.9062 145.516 45.6875 145.703C45.5 145.891 45.2656 145.984 44.9844 145.984H31.0156C30.7344 145.984 30.4844 145.891 30.2656 145.703C30.0781 145.516 29.9844 145.281 29.9844 145C29.4531 145 28.9844 144.797 28.5781 144.391C28.2031 143.984 28.0156 143.516 28.0156 142.984V136.984H31.0156V136.234C31.0156 135.641 31.2344 135.125 31.6719 134.688C32.1406 134.219 32.6719 133.984 33.2656 133.984C33.8906 133.984 34.4531 134.234 34.9531 134.734L36.3125 136.281C36.5 136.5 36.7812 136.734 37.1562 136.984H44V128.828C44 128.609 43.9219 128.422 43.7656 128.266C43.6094 128.078 43.4062 127.984 43.1562 127.984C42.9375 127.984 42.75 128.062 42.5938 128.219L41.3281 129.484C41.3906 129.734 41.4219 129.906 41.4219 130C41.4219 130.344 41.3125 130.703 41.0938 131.078L38.3281 128.312C38.7031 128.094 39.0625 127.984 39.4062 127.984C39.5625 127.984 39.7344 128.016 39.9219 128.078L41.1875 126.812C41.7188 126.281 42.375 126.016 43.1562 126.016C43.9375 126.016 44.6094 126.297 45.1719 126.859C45.7344 127.391 46.0156 128.047 46.0156 128.828V136.984ZM31.5781 132.438C31.2031 132.031 31.0156 131.547 31.0156 130.984C31.0156 130.422 31.2031 129.953 31.5781 129.578C31.9531 129.203 32.4219 129.016 32.9844 129.016C33.5469 129.016 34.0156 129.203 34.3906 129.578C34.7969 129.953 35 130.422 35 130.984C35 131.547 34.7969 132.031 34.3906 132.438C34.0156 132.812 33.5469 133 32.9844 133C32.4219 133 31.9531 132.812 31.5781 132.438Z" fill="#03A9F4"/>
+<path d="M84 4C84 1.79086 85.7909 0 88 0H100C102.209 0 104 1.79086 104 4V4C104 6.20914 102.209 8 100 8H88C85.7909 8 84 6.20914 84 4V4Z" fill="white" fill-opacity="0.48"/>
+<path d="M84 20C84 15.5817 87.5817 12 92 12H152C156.418 12 160 15.5817 160 20V36C160 40.4183 156.418 44 152 44H92C87.5817 44 84 40.4183 84 36V20Z" fill="#1C1C1C"/>
+<path d="M92 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V36C159.5 40.1421 156.142 43.5 152 43.5H92C87.8579 43.5 84.5 40.1421 84.5 36V20C84.5 15.8579 87.8579 12.5 92 12.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M131.984 30.0156C131.984 30.7656 131.797 31.4531 131.422 32.0781C131.047 32.6719 130.562 33.1406 129.969 33.4844C129.844 34.2031 129.5 34.8125 128.938 35.3125C128.406 35.7812 127.766 36.0156 127.016 36.0156C126.359 36.0156 125.766 35.8281 125.234 35.4531C124.734 35.0781 124.391 34.5938 124.203 34H119.797C119.609 34.5938 119.25 35.0781 118.719 35.4531C118.219 35.8281 117.641 36.0156 116.984 36.0156C116.234 36.0156 115.578 35.7812 115.016 35.3125C114.484 34.8125 114.156 34.2031 114.031 33.4844C113.438 33.1406 112.953 32.6719 112.578 32.0781C112.203 31.4531 112.016 30.7656 112.016 30.0156C112.016 29.1094 112.266 28.3125 112.766 27.625C113.297 26.9375 113.969 26.4688 114.781 26.2188L113 24.3906L112.719 24.7188C112.5 24.9062 112.25 25 111.969 25C111.719 25 111.5 24.9062 111.312 24.7188C111.094 24.5312 110.984 24.2969 110.984 24.0156C110.984 23.7344 111.094 23.5 111.312 23.3125L113.281 21.2969C113.469 21.1094 113.703 21.0156 113.984 21.0156C114.266 21.0156 114.5 21.1094 114.688 21.2969C114.906 21.4844 115.016 21.7188 115.016 22C115.016 22.2812 114.906 22.5156 114.688 22.7031L114.406 22.9844L115.812 24.3906L116.609 22.0469C116.797 21.4219 117.156 20.9219 117.688 20.5469C118.219 20.1719 118.797 19.9844 119.422 19.9844H124.578C125.203 19.9844 125.781 20.1719 126.312 20.5469C126.844 20.9219 127.203 21.4219 127.391 22.0469L128.75 26.0781C129.375 26.2031 129.922 26.4531 130.391 26.8281C130.891 27.2031 131.281 27.6719 131.562 28.2344C131.844 28.7656 131.984 29.3594 131.984 30.0156ZM116.984 34C117.266 34 117.5 33.9062 117.688 33.7188C117.906 33.5 118.016 33.2656 118.016 33.0156C118.016 32.7344 117.906 32.5 117.688 32.3125C117.5 32.0938 117.266 31.9844 116.984 31.9844C116.734 31.9844 116.5 32.0938 116.281 32.3125C116.094 32.5 116 32.7344 116 33.0156C116 33.2656 116.094 33.5 116.281 33.7188C116.5 33.9062 116.734 34 116.984 34ZM121.016 25.9844V22H119.422C118.953 22 118.641 22.2344 118.484 22.7031L117.406 25.9844H121.016ZM122.984 22V25.9844H126.594L125.516 22.7031C125.359 22.2344 125.047 22 124.578 22H122.984ZM127.016 34C127.266 34 127.484 33.9062 127.672 33.7188C127.891 33.5 128 33.2656 128 33.0156C128 32.7344 127.891 32.5 127.672 32.3125C127.484 32.0938 127.266 31.9844 127.016 31.9844C126.734 31.9844 126.484 32.0938 126.266 32.3125C126.078 32.5 125.984 32.7344 125.984 33.0156C125.984 33.2656 126.078 33.5 126.266 33.7188C126.484 33.9062 126.734 34 127.016 34Z" fill="#03A9F4"/>
+<path d="M84 56C84 51.5817 87.5817 48 92 48H152C156.418 48 160 51.5817 160 56V72C160 76.4183 156.418 80 152 80H92C87.5817 80 84 76.4183 84 72V56Z" fill="#1C1C1C"/>
+<path d="M92 48.5H152C156.142 48.5 159.5 51.8579 159.5 56V72C159.5 76.1421 156.142 79.5 152 79.5H92C87.8579 79.5 84.5 76.1421 84.5 72V56C84.5 51.8579 87.8579 48.5 92 48.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M128.984 58.9844C130.078 58.9844 131.016 59.3906 131.797 60.2031C132.609 60.9844 133.016 61.9219 133.016 63.0156V72.0156H131V69.0156H113V72.0156H110.984V57.0156H113V66.0156H121.016V58.9844H128.984ZM119.094 64.0938C118.5 64.6875 117.797 64.9844 116.984 64.9844C116.172 64.9844 115.469 64.6875 114.875 64.0938C114.281 63.5 113.984 62.7969 113.984 61.9844C113.984 61.1719 114.281 60.4688 114.875 59.875C115.469 59.2812 116.172 58.9844 116.984 58.9844C117.797 58.9844 118.5 59.2812 119.094 59.875C119.688 60.4688 119.984 61.1719 119.984 61.9844C119.984 62.7969 119.688 63.5 119.094 64.0938Z" fill="#03A9F4"/>
+<path d="M84 92C84 87.5817 87.5817 84 92 84H152C156.418 84 160 87.5817 160 92V108C160 112.418 156.418 116 152 116H92C87.5817 116 84 112.418 84 108V92Z" fill="#1C1C1C"/>
+<path d="M92 84.5H152C156.142 84.5 159.5 87.8579 159.5 92V108C159.5 112.142 156.142 115.5 152 115.5H92C87.8579 115.5 84.5 112.142 84.5 108V92C84.5 87.8579 87.8579 84.5 92 84.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M112.016 94H131.984V106H130.016V103.984H125.984V106H124.016V96.0156H113.984V106H112.016V94ZM130.016 96.0156H125.984V97.9844H130.016V96.0156ZM125.984 102.016H130.016V100H125.984V102.016Z" fill="#03A9F4"/>
+</g>
+<defs>
+<clipPath id="clip0_3969_57097">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/dark/icon-dashboard-default.svg

@@ -0,0 +1,63 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5534)">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H42.6667C47.0849 0 50.6667 3.58172 50.6667 8V64C50.6667 68.4183 47.0849 72 42.6667 72H8.00001C3.58173 72 0 68.4183 0 64V8Z" fill="#1C1C1C"/>
+<path d="M8 0.5H42.667C46.809 0.500178 50.167 3.85798 50.167 8V64C50.167 68.142 46.809 71.4998 42.667 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M8 12C8 9.79086 9.79086 8 12 8H38.6667C40.8758 8 42.6667 9.79086 42.6667 12V12C42.6667 14.2091 40.8758 16 38.6667 16H12C9.79086 16 8 14.2091 8 12V12Z" fill="white" fill-opacity="0.48"/>
+<path d="M8 27C8 25.3431 9.34315 24 11 24H27.6667C29.3235 24 30.6667 25.3431 30.6667 27V29C30.6667 30.6569 29.3235 32 27.6667 32H11C9.34314 32 8 30.6569 8 29V27Z" fill="white" fill-opacity="0.24"/>
+<path d="M34.6667 28C34.6667 25.7909 36.4575 24 38.6667 24V24C40.8758 24 42.6667 25.7909 42.6667 28V28C42.6667 30.2091 40.8758 32 38.6667 32V32C36.4575 32 34.6667 30.2091 34.6667 28V28Z" fill="white" fill-opacity="0.24"/>
+<path d="M8 43C8 41.3431 9.34315 40 11 40H27.6667C29.3235 40 30.6667 41.3431 30.6667 43V45C30.6667 46.6569 29.3235 48 27.6667 48H11C9.34314 48 8 46.6569 8 45V43Z" fill="white" fill-opacity="0.24"/>
+<path d="M34.6667 44C34.6667 41.7909 36.4575 40 38.6667 40V40C40.8758 40 42.6667 41.7909 42.6667 44V44C42.6667 46.2091 40.8758 48 38.6667 48V48C36.4575 48 34.6667 46.2091 34.6667 44V44Z" fill="white" fill-opacity="0.24"/>
+<path d="M8 59C8 57.3431 9.34315 56 11 56H27.6667C29.3235 56 30.6667 57.3431 30.6667 59V61C30.6667 62.6569 29.3235 64 27.6667 64H11C9.34314 64 8 62.6569 8 61V59Z" fill="white" fill-opacity="0.24"/>
+<path d="M34.6667 60C34.6667 57.7909 36.4575 56 38.6667 56V56C40.8758 56 42.6667 57.7909 42.6667 60V60C42.6667 62.2091 40.8758 64 38.6667 64V64C36.4575 64 34.6667 62.2091 34.6667 60V60Z" fill="white" fill-opacity="0.24"/>
+<path d="M0 84C0 79.5817 3.58172 76 8 76H42.6667C47.0849 76 50.6667 79.5817 50.6667 84V124C50.6667 128.418 47.0849 132 42.6667 132H8.00001C3.58173 132 0 128.418 0 124V84Z" fill="#1C1C1C"/>
+<path d="M8 76.5H42.667C46.809 76.5002 50.167 79.858 50.167 84V124C50.167 128.142 46.809 131.5 42.667 131.5H8C3.85787 131.5 0.5 128.142 0.5 124V84C0.5 79.8579 3.85786 76.5 8 76.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M8 88C8 85.7909 9.79086 84 12 84H38.6667C40.8758 84 42.6667 85.7909 42.6667 88V88C42.6667 90.2091 40.8758 92 38.6667 92H12C9.79086 92 8 90.2091 8 88V88Z" fill="white" fill-opacity="0.48"/>
+<path d="M8 103C8 101.343 9.34315 100 11 100H27.6667C29.3235 100 30.6667 101.343 30.6667 103V105C30.6667 106.657 29.3235 108 27.6667 108H11C9.34314 108 8 106.657 8 105V103Z" fill="white" fill-opacity="0.24"/>
+<path d="M34.6667 104C34.6667 101.791 36.4575 100 38.6667 100V100C40.8758 100 42.6667 101.791 42.6667 104V104C42.6667 106.209 40.8758 108 38.6667 108V108C36.4575 108 34.6667 106.209 34.6667 104V104Z" fill="white" fill-opacity="0.24"/>
+<path d="M8 119C8 117.343 9.34315 116 11 116H27.6667C29.3235 116 30.6667 117.343 30.6667 119V121C30.6667 122.657 29.3235 124 27.6667 124H11C9.34314 124 8 122.657 8 121V119Z" fill="white" fill-opacity="0.24"/>
+<path d="M34.6667 120C34.6667 117.791 36.4575 116 38.6667 116V116C40.8758 116 42.6667 117.791 42.6667 120V120C42.6667 122.209 40.8758 124 38.6667 124V124C36.4575 124 34.6667 122.209 34.6667 120V120Z" fill="white" fill-opacity="0.24"/>
+<path d="M0 144C0 139.582 3.58172 136 8 136H42.6667C47.0849 136 50.6667 139.582 50.6667 144V152C50.6667 156.418 47.0849 160 42.6667 160H8.00001C3.58173 160 0 156.418 0 152V144Z" fill="#1C1C1C"/>
+<path d="M8 136.5H42.667C46.809 136.5 50.167 139.858 50.167 144V152C50.167 156.142 46.809 159.5 42.667 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V144C0.5 139.858 3.85786 136.5 8 136.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M8 148C8 145.791 9.79086 144 12 144H38.6667C40.8758 144 42.6667 145.791 42.6667 148V148C42.6667 150.209 40.8758 152 38.6667 152H12C9.79086 152 8 150.209 8 148V148Z" fill="white" fill-opacity="0.48"/>
+<path d="M54.6667 8C54.6667 3.58172 58.2484 0 62.6667 0H97.3333C101.752 0 105.333 3.58172 105.333 8V48C105.333 52.4183 101.752 56 97.3334 56H62.6667C58.2484 56 54.6667 52.4183 54.6667 48V8Z" fill="#1C1C1C"/>
+<path d="M62.6667 0.5H97.3337C101.476 0.50018 104.834 3.85798 104.834 8V48C104.834 52.142 101.476 55.4998 97.3337 55.5H62.6667C58.5246 55.5 55.1667 52.1421 55.1667 48V8C55.1667 3.85786 58.5246 0.5 62.6667 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M62.6667 12C62.6667 9.79086 64.4575 8 66.6667 8H93.3334C95.5425 8 97.3334 9.79086 97.3334 12V12C97.3334 14.2091 95.5425 16 93.3334 16H66.6667C64.4576 16 62.6667 14.2091 62.6667 12V12Z" fill="white" fill-opacity="0.48"/>
+<path d="M62.6667 27C62.6667 25.3431 64.0098 24 65.6667 24H82.3334C83.9902 24 85.3334 25.3431 85.3334 27V29C85.3334 30.6569 83.9902 32 82.3334 32H65.6667C64.0098 32 62.6667 30.6569 62.6667 29V27Z" fill="white" fill-opacity="0.24"/>
+<path d="M89.3333 28C89.3333 25.7909 91.1242 24 93.3333 24V24C95.5425 24 97.3333 25.7909 97.3333 28V28C97.3333 30.2091 95.5425 32 93.3333 32V32C91.1242 32 89.3333 30.2091 89.3333 28V28Z" fill="white" fill-opacity="0.24"/>
+<path d="M62.6667 43C62.6667 41.3431 64.0098 40 65.6667 40H82.3334C83.9902 40 85.3334 41.3431 85.3334 43V45C85.3334 46.6569 83.9902 48 82.3334 48H65.6667C64.0098 48 62.6667 46.6569 62.6667 45V43Z" fill="white" fill-opacity="0.24"/>
+<path d="M89.3333 44C89.3333 41.7909 91.1242 40 93.3333 40V40C95.5425 40 97.3333 41.7909 97.3333 44V44C97.3333 46.2091 95.5425 48 93.3333 48V48C91.1242 48 89.3333 46.2091 89.3333 44V44Z" fill="white" fill-opacity="0.24"/>
+<path d="M54.6667 68C54.6667 63.5817 58.2484 60 62.6667 60H97.3333C101.752 60 105.333 63.5817 105.333 68V76C105.333 80.4183 101.752 84 97.3334 84H62.6667C58.2484 84 54.6667 80.4183 54.6667 76V68Z" fill="#1C1C1C"/>
+<path d="M62.6667 60.5H97.3337C101.476 60.5002 104.834 63.858 104.834 68V76C104.834 80.142 101.476 83.4998 97.3337 83.5H62.6667C58.5246 83.5 55.1667 80.1421 55.1667 76V68C55.1667 63.8579 58.5246 60.5 62.6667 60.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M62.6667 72C62.6667 69.7909 64.4575 68 66.6667 68H93.3334C95.5425 68 97.3334 69.7909 97.3334 72V72C97.3334 74.2091 95.5425 76 93.3334 76H66.6667C64.4576 76 62.6667 74.2091 62.6667 72V72Z" fill="white" fill-opacity="0.48"/>
+<path d="M54.6667 96C54.6667 91.5817 58.2484 88 62.6667 88H97.3333C101.752 88 105.333 91.5817 105.333 96V136C105.333 140.418 101.752 144 97.3334 144H62.6667C58.2484 144 54.6667 140.418 54.6667 136V96Z" fill="#1C1C1C"/>
+<path d="M62.6667 88.5H97.3337C101.476 88.5002 104.834 91.858 104.834 96V136C104.834 140.142 101.476 143.5 97.3337 143.5H62.6667C58.5246 143.5 55.1667 140.142 55.1667 136V96C55.1667 91.8579 58.5246 88.5 62.6667 88.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M62.6667 100C62.6667 97.7909 64.4575 96 66.6667 96H93.3334C95.5425 96 97.3334 97.7909 97.3334 100V100C97.3334 102.209 95.5425 104 93.3334 104H66.6667C64.4576 104 62.6667 102.209 62.6667 100V100Z" fill="white" fill-opacity="0.48"/>
+<path d="M62.6667 115C62.6667 113.343 64.0098 112 65.6667 112H82.3334C83.9902 112 85.3334 113.343 85.3334 115V117C85.3334 118.657 83.9902 120 82.3334 120H65.6667C64.0098 120 62.6667 118.657 62.6667 117V115Z" fill="white" fill-opacity="0.24"/>
+<path d="M89.3333 116C89.3333 113.791 91.1242 112 93.3333 112V112C95.5425 112 97.3333 113.791 97.3333 116V116C97.3333 118.209 95.5425 120 93.3333 120V120C91.1242 120 89.3333 118.209 89.3333 116V116Z" fill="white" fill-opacity="0.24"/>
+<path d="M62.6667 131C62.6667 129.343 64.0098 128 65.6667 128H82.3334C83.9902 128 85.3334 129.343 85.3334 131V133C85.3334 134.657 83.9902 136 82.3334 136H65.6667C64.0098 136 62.6667 134.657 62.6667 133V131Z" fill="white" fill-opacity="0.24"/>
+<path d="M89.3333 132C89.3333 129.791 91.1242 128 93.3333 128V128C95.5425 128 97.3333 129.791 97.3333 132V132C97.3333 134.209 95.5425 136 93.3333 136V136C91.1242 136 89.3333 134.209 89.3333 132V132Z" fill="white" fill-opacity="0.24"/>
+<path d="M109.333 8C109.333 3.58172 112.915 0 117.333 0H152C156.418 0 160 3.58172 160 8V112C160 116.418 156.418 120 152 120H117.333C112.915 120 109.333 116.418 109.333 112V8Z" fill="#1C1C1C"/>
+<path d="M117.333 0.5H152C156.142 0.50018 159.5 3.85798 159.5 8V112C159.5 116.142 156.142 119.5 152 119.5H117.333C113.191 119.5 109.833 116.142 109.833 112V8C109.833 3.85786 113.191 0.5 117.333 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M117.333 12C117.333 9.79086 119.124 8 121.333 8H148C150.209 8 152 9.79086 152 12V12C152 14.2091 150.209 16 148 16H121.333C119.124 16 117.333 14.2091 117.333 12V12Z" fill="white" fill-opacity="0.48"/>
+<path d="M117.333 27C117.333 25.3431 118.676 24 120.333 24H137C138.657 24 140 25.3431 140 27V29C140 30.6569 138.657 32 137 32H120.333C118.676 32 117.333 30.6569 117.333 29V27Z" fill="white" fill-opacity="0.24"/>
+<path d="M144 28C144 25.7909 145.791 24 148 24V24C150.209 24 152 25.7909 152 28V28C152 30.2091 150.209 32 148 32V32C145.791 32 144 30.2091 144 28V28Z" fill="white" fill-opacity="0.24"/>
+<path d="M117.333 43C117.333 41.3431 118.676 40 120.333 40H137C138.657 40 140 41.3431 140 43V45C140 46.6569 138.657 48 137 48H120.333C118.676 48 117.333 46.6569 117.333 45V43Z" fill="white" fill-opacity="0.24"/>
+<path d="M144 44C144 41.7909 145.791 40 148 40V40C150.209 40 152 41.7909 152 44V44C152 46.2091 150.209 48 148 48V48C145.791 48 144 46.2091 144 44V44Z" fill="white" fill-opacity="0.24"/>
+<path d="M117.333 59C117.333 57.3431 118.676 56 120.333 56H137C138.657 56 140 57.3431 140 59V61C140 62.6569 138.657 64 137 64H120.333C118.676 64 117.333 62.6569 117.333 61V59Z" fill="white" fill-opacity="0.24"/>
+<path d="M144 60C144 57.7909 145.791 56 148 56V56C150.209 56 152 57.7909 152 60V60C152 62.2091 150.209 64 148 64V64C145.791 64 144 62.2091 144 60V60Z" fill="white" fill-opacity="0.24"/>
+<path d="M117.333 75C117.333 73.3431 118.676 72 120.333 72H137C138.657 72 140 73.3431 140 75V77C140 78.6569 138.657 80 137 80H120.333C118.676 80 117.333 78.6569 117.333 77V75Z" fill="white" fill-opacity="0.24"/>
+<path d="M144 76C144 73.7909 145.791 72 148 72V72C150.209 72 152 73.7909 152 76V76C152 78.2091 150.209 80 148 80V80C145.791 80 144 78.2091 144 76V76Z" fill="white" fill-opacity="0.24"/>
+<path d="M117.333 91C117.333 89.3431 118.676 88 120.333 88H137C138.657 88 140 89.3431 140 91V93C140 94.6569 138.657 96 137 96H120.333C118.676 96 117.333 94.6569 117.333 93V91Z" fill="white" fill-opacity="0.24"/>
+<path d="M144 92C144 89.7909 145.791 88 148 88V88C150.209 88 152 89.7909 152 92V92C152 94.2091 150.209 96 148 96V96C145.791 96 144 94.2091 144 92V92Z" fill="white" fill-opacity="0.24"/>
+<path d="M117.333 107C117.333 105.343 118.676 104 120.333 104H137C138.657 104 140 105.343 140 107V109C140 110.657 138.657 112 137 112H120.333C118.676 112 117.333 110.657 117.333 109V107Z" fill="white" fill-opacity="0.24"/>
+<path d="M144 108C144 105.791 145.791 104 148 104V104C150.209 104 152 105.791 152 108V108C152 110.209 150.209 112 148 112V112C145.791 112 144 110.209 144 108V108Z" fill="white" fill-opacity="0.24"/>
+<path d="M109.333 132C109.333 127.582 112.915 124 117.333 124H152C156.418 124 160 127.582 160 132V140C160 144.418 156.418 148 152 148H117.333C112.915 148 109.333 144.418 109.333 140V132Z" fill="#1C1C1C"/>
+<path d="M117.333 124.5H152C156.142 124.5 159.5 127.858 159.5 132V140C159.5 144.142 156.142 147.5 152 147.5H117.333C113.191 147.5 109.833 144.142 109.833 140V132C109.833 127.858 113.191 124.5 117.333 124.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M117.333 136C117.333 133.791 119.124 132 121.333 132H148C150.209 132 152 133.791 152 136V136C152 138.209 150.209 140 148 140H121.333C119.124 140 117.333 138.209 117.333 136V136Z" fill="white" fill-opacity="0.48"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5534">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/dark/icon-dashboard-map.svg

@@ -0,0 +1,16 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5540)">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H152C156.418 0 160 3.58172 160 8V152C160 156.418 156.418 160 152 160H8C3.58172 160 0 156.418 0 152V8Z" fill="#1C1C1C"/>
+<path d="M8 0.5H152C156.142 0.500001 159.5 3.85787 159.5 8V152C159.5 156.142 156.142 159.5 152 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V8C0.500001 3.85787 3.85787 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M83 86.9844V75.125L77 73.0156V84.875L83 86.9844ZM88.4844 71C88.8281 71 89 71.1719 89 71.5156V86.6094C89 86.8594 88.875 87.0156 88.625 87.0781L83 89L77 86.8906L71.6562 88.9531L71.5156 89C71.1719 89 71 88.8281 71 88.4844V73.3906C71 73.1406 71.125 72.9844 71.375 72.9219L77 71L83 73.1094L88.3438 71.0469L88.4844 71Z" fill="#03A9F4"/>
+<path d="M148 77.0508L139.288 85.8983M139.288 85.8983L116.852 108.684C115.724 109.83 114.184 110.475 112.576 110.475H81.6939M139.288 85.8983V69.4322M21.1957 82.9492H12M21.1957 82.9492L32.3274 71.6441M21.1957 82.9492L44.427 106.542M81.6939 110.475V124.237M81.6939 110.475H54.5907M81.6939 138V124.237M81.6939 124.237H148M32.3274 71.6441L43.4591 60.339L54.5907 49.0339L70.4941 32.8828C74.2533 29.0651 79.3871 26.9153 84.7451 26.9153H128.641V26.9153C134.521 26.9153 139.288 31.6824 139.288 37.5629V37.7288V49.0339M32.3274 71.6441L24.8569 64.0572C22.5573 61.7218 22.5573 57.9732 24.8569 55.6377L57.9786 22M139.288 49.0339H126.313C124.706 49.0339 123.166 48.389 122.038 47.2436L116.057 41.1695M139.288 49.0339V69.4322M139.288 69.4322H126.313C124.706 69.4322 123.166 68.7873 122.038 67.6419L116.057 61.5678M54.5907 110.475V110.475C54.5907 107.488 52.17 105.068 49.184 105.068H49.0249C45.951 105.068 43.4591 107.56 43.4591 110.634V110.807C43.4591 113.881 45.951 116.373 49.0249 116.373V116.373C52.0988 116.373 54.5907 113.881 54.5907 110.807V110.475ZM44.427 115.39L22.1637 138" stroke="white" stroke-opacity="0.24" stroke-width="5" stroke-linecap="round"/>
+<circle cx="41" cy="39" r="14" fill="white" fill-opacity="0.48"/>
+<circle cx="89" cy="117" r="14" fill="white" fill-opacity="0.48"/>
+<path d="M116 62.325C115.767 62.325 115.533 62.2833 115.3 62.2C115.067 62.1167 114.858 61.9917 114.675 61.825C113.592 60.825 112.633 59.85 111.8 58.9C110.967 57.95 110.267 57.0333 109.7 56.15C109.15 55.25 108.725 54.3917 108.425 53.575C108.142 52.7417 108 51.95 108 51.2C108 48.7 108.8 46.7083 110.4 45.225C112.017 43.7417 113.883 43 116 43C118.117 43 119.975 43.7417 121.575 45.225C123.192 46.7083 124 48.7 124 51.2C124 51.95 123.85 52.7417 123.55 53.575C123.267 54.3917 122.842 55.25 122.275 56.15C121.725 57.0333 121.033 57.95 120.2 58.9C119.367 59.85 118.408 60.825 117.325 61.825C117.142 61.9917 116.933 62.1167 116.7 62.2C116.467 62.2833 116.233 62.325 116 62.325Z" fill="white" fill-opacity="0.48"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5540">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/dark/icon-dashboard-new.svg

@@ -0,0 +1,13 @@
+<svg width="160" height="72" viewBox="0 0 160 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5536)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V4C32 6.20914 30.2091 8 28 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 20C0 15.5817 3.58172 12 8 12H42.6667C47.0849 12 50.6667 15.5817 50.6667 20V64C50.6667 68.4183 47.0849 72 42.6667 72H8.00001C3.58173 72 0 68.4183 0 64V20Z" fill="#1C1C1C"/>
+<path d="M8 12.5H42.667C46.809 12.5002 50.167 15.858 50.167 20V64C50.167 68.142 46.809 71.4998 42.667 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V20L0.509766 19.6143C0.710536 15.6514 3.98724 12.5 8 12.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M32.3177 42.9844H26.3177V48.9844H24.349V42.9844H18.349V41.0156H24.349V35.0156H26.3177V41.0156H32.3177V42.9844Z" fill="#03A9F4"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5536">
+<rect width="160" height="72" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/dark/icon-dashboard-webpage.svg

@@ -0,0 +1,19 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5538)">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H152C156.418 0 160 3.58172 160 8V152C160 156.418 156.418 160 152 160H8C3.58172 160 0 156.418 0 152V8Z" fill="#1C1C1C"/>
+<path d="M8 0.5H152C156.142 0.500001 159.5 3.85787 159.5 8V152C159.5 156.142 156.142 159.5 152 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V8C0.500001 3.85787 3.85787 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M8 13.5C8 10.4624 10.4624 8 13.5 8H146.5C149.538 8 152 10.4624 152 13.5V13.5C152 16.5376 149.538 19 146.5 19H13.5C10.4624 19 8 16.5376 8 13.5V13.5Z" fill="white" fill-opacity="0.48"/>
+<path d="M8 35C8 30.5817 11.5817 27 16 27H45.3333C49.7516 27 53.3333 30.5817 53.3333 35V125C53.3333 129.418 49.7516 133 45.3333 133H16C11.5817 133 8 129.418 8 125V35Z" fill="#1C1C1C"/>
+<path d="M16 27.5H45.333C49.4751 27.5 52.833 30.8579 52.833 35V125C52.833 129.142 49.4751 132.5 45.333 132.5H16C11.8579 132.5 8.5 129.142 8.5 125V35C8.5 30.8579 11.8579 27.5 16 27.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M57.3333 35C57.3333 30.5817 60.9151 27 65.3333 27H94.6667C99.0849 27 102.667 30.5817 102.667 35V49C102.667 53.4183 99.0849 57 94.6667 57H65.3333C60.915 57 57.3333 53.4183 57.3333 49V35Z" fill="#1C1C1C"/>
+<path d="M65.3333 27.5H94.6663C98.8085 27.5 102.166 30.8579 102.166 35V49C102.166 53.1421 98.8085 56.5 94.6663 56.5H65.3333C61.1912 56.5 57.8333 53.1421 57.8333 49V35C57.8333 30.8579 61.1912 27.5 65.3333 27.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M106.667 35C106.667 30.5817 110.248 27 114.667 27H144C148.418 27 152 30.5817 152 35V87C152 91.4183 148.418 95 144 95H114.667C110.248 95 106.667 91.4183 106.667 87V35Z" fill="#1C1C1C"/>
+<path d="M114.667 27.5H144C148.142 27.5 151.5 30.8579 151.5 35V87C151.5 91.1421 148.142 94.5 144 94.5H114.667C110.525 94.5 107.167 91.1421 107.167 87V35C107.167 30.8579 110.525 27.5 114.667 27.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M84.3594 82.0156H87.7344C87.9219 81.1406 88.0156 80.4688 88.0156 80C88.0156 79.5312 87.9219 78.8594 87.7344 77.9844H84.3594C84.4531 78.6406 84.5 79.3125 84.5 80C84.5 80.6875 84.4531 81.3594 84.3594 82.0156ZM82.5781 87.5469C83.3594 87.2969 84.1719 86.8281 85.0156 86.1406C85.8594 85.4219 86.5 84.7031 86.9375 83.9844H83.9844C83.6719 85.2344 83.2031 86.4219 82.5781 87.5469ZM82.3438 82.0156C82.4375 81.3594 82.4844 80.6875 82.4844 80C82.4844 79.3125 82.4375 78.6406 82.3438 77.9844H77.6562C77.5625 78.6406 77.5156 79.3125 77.5156 80C77.5156 80.6875 77.5625 81.3594 77.6562 82.0156H82.3438ZM80 87.9688C80.875 86.6875 81.5156 85.3594 81.9219 83.9844H78.0781C78.4844 85.3594 79.125 86.6875 80 87.9688ZM76.0156 76.0156C76.3906 74.6719 76.8594 73.4844 77.4219 72.4531C76.6406 72.7031 75.8125 73.1875 74.9375 73.9062C74.0938 74.5938 73.4688 75.2969 73.0625 76.0156H76.0156ZM73.0625 83.9844C73.4688 84.7031 74.0938 85.4219 74.9375 86.1406C75.8125 86.8281 76.6406 87.2969 77.4219 87.5469C76.7969 86.4219 76.3281 85.2344 76.0156 83.9844H73.0625ZM72.2656 82.0156H75.6406C75.5469 81.3594 75.5 80.6875 75.5 80C75.5 79.3125 75.5469 78.6406 75.6406 77.9844H72.2656C72.0781 78.8594 71.9844 79.5312 71.9844 80C71.9844 80.4688 72.0781 81.1406 72.2656 82.0156ZM80 72.0312C79.125 73.3125 78.4844 74.6406 78.0781 76.0156H81.9219C81.5156 74.6406 80.875 73.3125 80 72.0312ZM86.9375 76.0156C86.5 75.2969 85.8594 74.5938 85.0156 73.9062C84.1719 73.1875 83.3594 72.7031 82.5781 72.4531C83.1406 73.4844 83.6094 74.6719 83.9844 76.0156H86.9375ZM72.9219 72.9688C74.8906 71 77.25 70.0156 80 70.0156C82.75 70.0156 85.0938 71 87.0312 72.9688C89 74.9062 89.9844 77.25 89.9844 80C89.9844 82.75 89 85.1094 87.0312 87.0781C85.0938 89.0156 82.75 89.9844 80 89.9844C77.25 89.9844 74.8906 89.0156 72.9219 87.0781C70.9844 85.1094 70.0156 82.75 70.0156 80C70.0156 77.25 70.9844 74.9062 72.9219 72.9688Z" fill="#03A9F4"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5538">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/light/icon-dashboard-areas.svg

@@ -0,0 +1,32 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3969_50764)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V4C20 6.20914 18.2091 8 16 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 20C0 15.5817 3.58172 12 8 12H68C72.4183 12 76 15.5817 76 20V36C76 40.4183 72.4183 44 68 44H8C3.58172 44 0 40.4183 0 36V20Z" fill="white"/>
+<path d="M8 12.5H68C72.1421 12.5 75.5 15.8579 75.5 20V36C75.5 40.1421 72.1421 43.5 68 43.5H8C3.85786 43.5 0.5 40.1421 0.5 36V20C0.5 15.8579 3.85786 12.5 8 12.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M32.9844 27.0156C32.9844 26.0781 32.7031 25.2656 32.1406 24.5781C31.5781 23.8594 30.8594 23.375 29.9844 23.125V22C29.9844 21.4375 30.125 20.9375 30.4062 20.5C30.6875 20.0312 31.0469 19.6719 31.4844 19.4219C31.9531 19.1406 32.4531 19 32.9844 19H43.0156C43.5469 19 44.0312 19.1406 44.4688 19.4219C44.9375 19.6719 45.3125 20.0312 45.5938 20.5C45.875 20.9375 46.0156 21.4375 46.0156 22V23.125C45.1406 23.375 44.4219 23.8594 43.8594 24.5781C43.2969 25.2656 43.0156 26.0781 43.0156 27.0156V28.9844H32.9844V27.0156ZM47 25C47.5625 25 48.0312 25.2031 48.4062 25.6094C48.8125 25.9844 49.0156 26.4531 49.0156 27.0156V31.9844C49.0156 32.5469 48.875 33.0625 48.5938 33.5312C48.3125 33.9688 47.9375 34.3281 47.4688 34.6094C47.0312 34.8594 46.5469 34.9844 46.0156 34.9844V36.0156C46.0156 36.2656 45.9062 36.5 45.6875 36.7188C45.5 36.9062 45.2656 37 44.9844 37C44.7344 37 44.5 36.9062 44.2812 36.7188C44.0938 36.5 44 36.2656 44 36.0156V34.9844H32V36.0156C32 36.2656 31.8906 36.5 31.6719 36.7188C31.4844 36.9062 31.2656 37 31.0156 37C30.7344 37 30.4844 36.9062 30.2656 36.7188C30.0781 36.5 29.9844 36.2656 29.9844 36.0156V34.9844C29.4531 34.9844 28.9531 34.8594 28.4844 34.6094C28.0469 34.3281 27.6875 33.9688 27.4062 33.5312C27.125 33.0625 26.9844 32.5469 26.9844 31.9844V27.0156C26.9844 26.4531 27.1719 25.9844 27.5469 25.6094C27.9531 25.2031 28.4375 25 29 25C29.5625 25 30.0312 25.2031 30.4062 25.6094C30.8125 25.9844 31.0156 26.4531 31.0156 27.0156V31H44.9844V27.0156C44.9844 26.4531 45.1719 25.9844 45.5469 25.6094C45.9531 25.2031 46.4375 25 47 25Z" fill="#03A9F4"/>
+<path d="M0 56C0 51.5817 3.58172 48 8 48H68C72.4183 48 76 51.5817 76 56V72C76 76.4183 72.4183 80 68 80H8C3.58172 80 0 76.4183 0 72V56Z" fill="white"/>
+<path d="M8 48.5H68C72.1421 48.5 75.5 51.8579 75.5 56V72C75.5 76.1421 72.1421 79.5 68 79.5H8C3.85786 79.5 0.5 76.1421 0.5 72V56C0.5 51.8579 3.85786 48.5 8 48.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M44 61.9844H47.9844V64H46.0156V72.0156H29.9844V64H28.0156V61.9844H32C31.4375 61.9844 30.9531 61.7969 30.5469 61.4219C30.1719 61.0156 29.9844 60.5469 29.9844 60.0156V55.9844H35.9844V60.0156C35.9844 60.5469 35.7812 61.0156 35.375 61.4219C35 61.7969 34.5469 61.9844 34.0156 61.9844H41.9844V58.9844C41.9844 58.7344 41.8906 58.5156 41.7031 58.3281C41.5156 58.1094 41.2812 58 41 58C40.7188 58 40.4844 58.1094 40.2969 58.3281C40.1094 58.5156 40.0156 58.7344 40.0156 58.9844H38C38 58.4531 38.125 57.9688 38.375 57.5312C38.6562 57.0625 39.0156 56.6875 39.4531 56.4062C39.9219 56.125 40.4375 55.9844 41 55.9844C41.5625 55.9844 42.0625 56.125 42.5 56.4062C42.9688 56.6875 43.3281 57.0625 43.5781 57.5312C43.8594 57.9688 44 58.4531 44 58.9844V61.9844ZM38.9844 70V64H37.0156V70H38.9844Z" fill="#03A9F4"/>
+<path d="M0 92C0 87.5817 3.58172 84 8 84H68C72.4183 84 76 87.5817 76 92V108C76 112.418 72.4183 116 68 116H8C3.58172 116 0 112.418 0 108V92Z" fill="white"/>
+<path d="M8 84.5H68C72.1421 84.5 75.5 87.8579 75.5 92V108C75.5 112.142 72.1421 115.5 68 115.5H8C3.85786 115.5 0.5 112.142 0.5 108V92C0.5 87.8579 3.85786 84.5 8 84.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M44.9844 94.9844C46.0781 94.9844 47.0156 95.3906 47.7969 96.2031C48.6094 96.9844 49.0156 97.9219 49.0156 99.0156V108.016H47V105.016H29V108.016H26.9844V93.0156H29V102.016H37.0156V94.9844H44.9844ZM35.0938 100.094C34.5 100.688 33.7969 100.984 32.9844 100.984C32.1719 100.984 31.4688 100.688 30.875 100.094C30.2812 99.5 29.9844 98.7969 29.9844 97.9844C29.9844 97.1719 30.2812 96.4688 30.875 95.875C31.4688 95.2812 32.1719 94.9844 32.9844 94.9844C33.7969 94.9844 34.5 95.2812 35.0938 95.875C35.6875 96.4688 35.9844 97.1719 35.9844 97.9844C35.9844 98.7969 35.6875 99.5 35.0938 100.094Z" fill="#03A9F4"/>
+<path d="M0 128C0 123.582 3.58172 120 8 120H68C72.4183 120 76 123.582 76 128V144C76 148.418 72.4183 152 68 152H8C3.58172 152 0 148.418 0 144V128Z" fill="white"/>
+<path d="M8 120.5H68C72.1421 120.5 75.5 123.858 75.5 128V144C75.5 148.142 72.1421 151.5 68 151.5H8C3.85786 151.5 0.5 148.142 0.5 144V128C0.5 123.858 3.85786 120.5 8 120.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M46.0156 136.984H47.9844V142.984C47.9844 143.516 47.7812 143.984 47.375 144.391C47 144.797 46.5469 145 46.0156 145C46.0156 145.281 45.9062 145.516 45.6875 145.703C45.5 145.891 45.2656 145.984 44.9844 145.984H31.0156C30.7344 145.984 30.4844 145.891 30.2656 145.703C30.0781 145.516 29.9844 145.281 29.9844 145C29.4531 145 28.9844 144.797 28.5781 144.391C28.2031 143.984 28.0156 143.516 28.0156 142.984V136.984H31.0156V136.234C31.0156 135.641 31.2344 135.125 31.6719 134.688C32.1406 134.219 32.6719 133.984 33.2656 133.984C33.8906 133.984 34.4531 134.234 34.9531 134.734L36.3125 136.281C36.5 136.5 36.7812 136.734 37.1562 136.984H44V128.828C44 128.609 43.9219 128.422 43.7656 128.266C43.6094 128.078 43.4062 127.984 43.1562 127.984C42.9375 127.984 42.75 128.062 42.5938 128.219L41.3281 129.484C41.3906 129.734 41.4219 129.906 41.4219 130C41.4219 130.344 41.3125 130.703 41.0938 131.078L38.3281 128.312C38.7031 128.094 39.0625 127.984 39.4062 127.984C39.5625 127.984 39.7344 128.016 39.9219 128.078L41.1875 126.812C41.7188 126.281 42.375 126.016 43.1562 126.016C43.9375 126.016 44.6094 126.297 45.1719 126.859C45.7344 127.391 46.0156 128.047 46.0156 128.828V136.984ZM31.5781 132.438C31.2031 132.031 31.0156 131.547 31.0156 130.984C31.0156 130.422 31.2031 129.953 31.5781 129.578C31.9531 129.203 32.4219 129.016 32.9844 129.016C33.5469 129.016 34.0156 129.203 34.3906 129.578C34.7969 129.953 35 130.422 35 130.984C35 131.547 34.7969 132.031 34.3906 132.438C34.0156 132.812 33.5469 133 32.9844 133C32.4219 133 31.9531 132.812 31.5781 132.438Z" fill="#03A9F4"/>
+<path d="M84 4C84 1.79086 85.7909 0 88 0H100C102.209 0 104 1.79086 104 4V4C104 6.20914 102.209 8 100 8H88C85.7909 8 84 6.20914 84 4V4Z" fill="black" fill-opacity="0.32"/>
+<path d="M84 20C84 15.5817 87.5817 12 92 12H152C156.418 12 160 15.5817 160 20V36C160 40.4183 156.418 44 152 44H92C87.5817 44 84 40.4183 84 36V20Z" fill="white"/>
+<path d="M92 12.5H152C156.142 12.5 159.5 15.8579 159.5 20V36C159.5 40.1421 156.142 43.5 152 43.5H92C87.8579 43.5 84.5 40.1421 84.5 36V20C84.5 15.8579 87.8579 12.5 92 12.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M131.984 30.0156C131.984 30.7656 131.797 31.4531 131.422 32.0781C131.047 32.6719 130.562 33.1406 129.969 33.4844C129.844 34.2031 129.5 34.8125 128.938 35.3125C128.406 35.7812 127.766 36.0156 127.016 36.0156C126.359 36.0156 125.766 35.8281 125.234 35.4531C124.734 35.0781 124.391 34.5938 124.203 34H119.797C119.609 34.5938 119.25 35.0781 118.719 35.4531C118.219 35.8281 117.641 36.0156 116.984 36.0156C116.234 36.0156 115.578 35.7812 115.016 35.3125C114.484 34.8125 114.156 34.2031 114.031 33.4844C113.438 33.1406 112.953 32.6719 112.578 32.0781C112.203 31.4531 112.016 30.7656 112.016 30.0156C112.016 29.1094 112.266 28.3125 112.766 27.625C113.297 26.9375 113.969 26.4688 114.781 26.2188L113 24.3906L112.719 24.7188C112.5 24.9062 112.25 25 111.969 25C111.719 25 111.5 24.9062 111.312 24.7188C111.094 24.5312 110.984 24.2969 110.984 24.0156C110.984 23.7344 111.094 23.5 111.312 23.3125L113.281 21.2969C113.469 21.1094 113.703 21.0156 113.984 21.0156C114.266 21.0156 114.5 21.1094 114.688 21.2969C114.906 21.4844 115.016 21.7188 115.016 22C115.016 22.2812 114.906 22.5156 114.688 22.7031L114.406 22.9844L115.812 24.3906L116.609 22.0469C116.797 21.4219 117.156 20.9219 117.688 20.5469C118.219 20.1719 118.797 19.9844 119.422 19.9844H124.578C125.203 19.9844 125.781 20.1719 126.312 20.5469C126.844 20.9219 127.203 21.4219 127.391 22.0469L128.75 26.0781C129.375 26.2031 129.922 26.4531 130.391 26.8281C130.891 27.2031 131.281 27.6719 131.562 28.2344C131.844 28.7656 131.984 29.3594 131.984 30.0156ZM116.984 34C117.266 34 117.5 33.9062 117.688 33.7188C117.906 33.5 118.016 33.2656 118.016 33.0156C118.016 32.7344 117.906 32.5 117.688 32.3125C117.5 32.0938 117.266 31.9844 116.984 31.9844C116.734 31.9844 116.5 32.0938 116.281 32.3125C116.094 32.5 116 32.7344 116 33.0156C116 33.2656 116.094 33.5 116.281 33.7188C116.5 33.9062 116.734 34 116.984 34ZM121.016 25.9844V22H119.422C118.953 22 118.641 22.2344 118.484 22.7031L117.406 25.9844H121.016ZM122.984 22V25.9844H126.594L125.516 22.7031C125.359 22.2344 125.047 22 124.578 22H122.984ZM127.016 34C127.266 34 127.484 33.9062 127.672 33.7188C127.891 33.5 128 33.2656 128 33.0156C128 32.7344 127.891 32.5 127.672 32.3125C127.484 32.0938 127.266 31.9844 127.016 31.9844C126.734 31.9844 126.484 32.0938 126.266 32.3125C126.078 32.5 125.984 32.7344 125.984 33.0156C125.984 33.2656 126.078 33.5 126.266 33.7188C126.484 33.9062 126.734 34 127.016 34Z" fill="#03A9F4"/>
+<path d="M84 56C84 51.5817 87.5817 48 92 48H152C156.418 48 160 51.5817 160 56V72C160 76.4183 156.418 80 152 80H92C87.5817 80 84 76.4183 84 72V56Z" fill="white"/>
+<path d="M92 48.5H152C156.142 48.5 159.5 51.8579 159.5 56V72C159.5 76.1421 156.142 79.5 152 79.5H92C87.8579 79.5 84.5 76.1421 84.5 72V56C84.5 51.8579 87.8579 48.5 92 48.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M128.984 58.9844C130.078 58.9844 131.016 59.3906 131.797 60.2031C132.609 60.9844 133.016 61.9219 133.016 63.0156V72.0156H131V69.0156H113V72.0156H110.984V57.0156H113V66.0156H121.016V58.9844H128.984ZM119.094 64.0938C118.5 64.6875 117.797 64.9844 116.984 64.9844C116.172 64.9844 115.469 64.6875 114.875 64.0938C114.281 63.5 113.984 62.7969 113.984 61.9844C113.984 61.1719 114.281 60.4688 114.875 59.875C115.469 59.2812 116.172 58.9844 116.984 58.9844C117.797 58.9844 118.5 59.2812 119.094 59.875C119.688 60.4688 119.984 61.1719 119.984 61.9844C119.984 62.7969 119.688 63.5 119.094 64.0938Z" fill="#03A9F4"/>
+<path d="M84 92C84 87.5817 87.5817 84 92 84H152C156.418 84 160 87.5817 160 92V108C160 112.418 156.418 116 152 116H92C87.5817 116 84 112.418 84 108V92Z" fill="white"/>
+<path d="M92 84.5H152C156.142 84.5 159.5 87.8579 159.5 92V108C159.5 112.142 156.142 115.5 152 115.5H92C87.8579 115.5 84.5 112.142 84.5 108V92C84.5 87.8579 87.8579 84.5 92 84.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M112.016 94H131.984V106H130.016V103.984H125.984V106H124.016V96.0156H113.984V106H112.016V94ZM130.016 96.0156H125.984V97.9844H130.016V96.0156ZM125.984 102.016H130.016V100H125.984V102.016Z" fill="#03A9F4"/>
+</g>
+<defs>
+<clipPath id="clip0_3969_50764">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/light/icon-dashboard-default.svg

@@ -0,0 +1,63 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5533)">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H42.6667C47.0849 0 50.6667 3.58172 50.6667 8V64C50.6667 68.4183 47.0849 72 42.6667 72H8.00001C3.58173 72 0 68.4183 0 64V8Z" fill="white"/>
+<path d="M8 0.5H42.667C46.809 0.500178 50.167 3.85798 50.167 8V64C50.167 68.142 46.809 71.4998 42.667 71.5H8C3.85787 71.5 0.5 68.1421 0.5 64V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M8 12C8 9.79086 9.79086 8 12 8H38.6667C40.8758 8 42.6667 9.79086 42.6667 12V12C42.6667 14.2091 40.8758 16 38.6667 16H12C9.79086 16 8 14.2091 8 12V12Z" fill="black" fill-opacity="0.32"/>
+<path d="M8 27C8 25.3431 9.34315 24 11 24H27.6667C29.3235 24 30.6667 25.3431 30.6667 27V29C30.6667 30.6569 29.3235 32 27.6667 32H11C9.34314 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
+<rect x="34.6667" y="24" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M8 43C8 41.3431 9.34315 40 11 40H27.6667C29.3235 40 30.6667 41.3431 30.6667 43V45C30.6667 46.6569 29.3235 48 27.6667 48H11C9.34314 48 8 46.6569 8 45V43Z" fill="black" fill-opacity="0.12"/>
+<rect x="34.6667" y="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M8 59C8 57.3431 9.34315 56 11 56H27.6667C29.3235 56 30.6667 57.3431 30.6667 59V61C30.6667 62.6569 29.3235 64 27.6667 64H11C9.34314 64 8 62.6569 8 61V59Z" fill="black" fill-opacity="0.12"/>
+<rect x="34.6667" y="56" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M0 84C0 79.5817 3.58172 76 8 76H42.6667C47.0849 76 50.6667 79.5817 50.6667 84V124C50.6667 128.418 47.0849 132 42.6667 132H8.00001C3.58173 132 0 128.418 0 124V84Z" fill="white"/>
+<path d="M8 76.5H42.667C46.809 76.5002 50.167 79.858 50.167 84V124C50.167 128.142 46.809 131.5 42.667 131.5H8C3.85787 131.5 0.5 128.142 0.5 124V84C0.5 79.8579 3.85786 76.5 8 76.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M8 88C8 85.7909 9.79086 84 12 84H38.6667C40.8758 84 42.6667 85.7909 42.6667 88V88C42.6667 90.2091 40.8758 92 38.6667 92H12C9.79086 92 8 90.2091 8 88V88Z" fill="black" fill-opacity="0.32"/>
+<path d="M8 103C8 101.343 9.34315 100 11 100H27.6667C29.3235 100 30.6667 101.343 30.6667 103V105C30.6667 106.657 29.3235 108 27.6667 108H11C9.34314 108 8 106.657 8 105V103Z" fill="black" fill-opacity="0.12"/>
+<rect x="34.6667" y="100" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M8 119C8 117.343 9.34315 116 11 116H27.6667C29.3235 116 30.6667 117.343 30.6667 119V121C30.6667 122.657 29.3235 124 27.6667 124H11C9.34314 124 8 122.657 8 121V119Z" fill="black" fill-opacity="0.12"/>
+<rect x="34.6667" y="116" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M0 144C0 139.582 3.58172 136 8 136H42.6667C47.0849 136 50.6667 139.582 50.6667 144V152C50.6667 156.418 47.0849 160 42.6667 160H8.00001C3.58173 160 0 156.418 0 152V144Z" fill="white"/>
+<path d="M8 136.5H42.667C46.809 136.5 50.167 139.858 50.167 144V152C50.167 156.142 46.809 159.5 42.667 159.5H8C3.85787 159.5 0.5 156.142 0.5 152V144C0.5 139.858 3.85786 136.5 8 136.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M8 148C8 145.791 9.79086 144 12 144H38.6667C40.8758 144 42.6667 145.791 42.6667 148V148C42.6667 150.209 40.8758 152 38.6667 152H12C9.79086 152 8 150.209 8 148V148Z" fill="black" fill-opacity="0.32"/>
+<path d="M54.6667 8C54.6667 3.58172 58.2484 0 62.6667 0H97.3333C101.752 0 105.333 3.58172 105.333 8V48C105.333 52.4183 101.752 56 97.3334 56H62.6667C58.2484 56 54.6667 52.4183 54.6667 48V8Z" fill="white"/>
+<path d="M62.6667 0.5H97.3337C101.476 0.50018 104.834 3.85798 104.834 8V48C104.834 52.142 101.476 55.4998 97.3337 55.5H62.6667C58.5246 55.5 55.1667 52.1421 55.1667 48V8C55.1667 3.85786 58.5246 0.5 62.6667 0.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M62.6667 12C62.6667 9.79086 64.4575 8 66.6667 8H93.3334C95.5425 8 97.3334 9.79086 97.3334 12V12C97.3334 14.2091 95.5425 16 93.3334 16H66.6667C64.4576 16 62.6667 14.2091 62.6667 12V12Z" fill="black" fill-opacity="0.32"/>
+<path d="M62.6667 27C62.6667 25.3431 64.0098 24 65.6667 24H82.3334C83.9902 24 85.3334 25.3431 85.3334 27V29C85.3334 30.6569 83.9902 32 82.3334 32H65.6667C64.0098 32 62.6667 30.6569 62.6667 29V27Z" fill="black" fill-opacity="0.12"/>
+<rect x="89.3333" y="24" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M62.6667 43C62.6667 41.3431 64.0098 40 65.6667 40H82.3334C83.9902 40 85.3334 41.3431 85.3334 43V45C85.3334 46.6569 83.9902 48 82.3334 48H65.6667C64.0098 48 62.6667 46.6569 62.6667 45V43Z" fill="black" fill-opacity="0.12"/>
+<rect x="89.3333" y="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M54.6667 68C54.6667 63.5817 58.2484 60 62.6667 60H97.3333C101.752 60 105.333 63.5817 105.333 68V76C105.333 80.4183 101.752 84 97.3334 84H62.6667C58.2484 84 54.6667 80.4183 54.6667 76V68Z" fill="white"/>
+<path d="M62.6667 60.5H97.3337C101.476 60.5002 104.834 63.858 104.834 68V76C104.834 80.142 101.476 83.4998 97.3337 83.5H62.6667C58.5246 83.5 55.1667 80.1421 55.1667 76V68C55.1667 63.8579 58.5246 60.5 62.6667 60.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M62.6667 72C62.6667 69.7909 64.4575 68 66.6667 68H93.3334C95.5425 68 97.3334 69.7909 97.3334 72V72C97.3334 74.2091 95.5425 76 93.3334 76H66.6667C64.4576 76 62.6667 74.2091 62.6667 72V72Z" fill="black" fill-opacity="0.32"/>
+<path d="M54.6667 96C54.6667 91.5817 58.2484 88 62.6667 88H97.3333C101.752 88 105.333 91.5817 105.333 96V136C105.333 140.418 101.752 144 97.3334 144H62.6667C58.2484 144 54.6667 140.418 54.6667 136V96Z" fill="white"/>
+<path d="M62.6667 88.5H97.3337C101.476 88.5002 104.834 91.858 104.834 96V136C104.834 140.142 101.476 143.5 97.3337 143.5H62.6667C58.5246 143.5 55.1667 140.142 55.1667 136V96C55.1667 91.8579 58.5246 88.5 62.6667 88.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M62.6667 100C62.6667 97.7909 64.4575 96 66.6667 96H93.3334C95.5425 96 97.3334 97.7909 97.3334 100V100C97.3334 102.209 95.5425 104 93.3334 104H66.6667C64.4576 104 62.6667 102.209 62.6667 100V100Z" fill="black" fill-opacity="0.32"/>
+<path d="M62.6667 115C62.6667 113.343 64.0098 112 65.6667 112H82.3334C83.9902 112 85.3334 113.343 85.3334 115V117C85.3334 118.657 83.9902 120 82.3334 120H65.6667C64.0098 120 62.6667 118.657 62.6667 117V115Z" fill="black" fill-opacity="0.12"/>
+<rect x="89.3333" y="112" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M62.6667 131C62.6667 129.343 64.0098 128 65.6667 128H82.3334C83.9902 128 85.3334 129.343 85.3334 131V133C85.3334 134.657 83.9902 136 82.3334 136H65.6667C64.0098 136 62.6667 134.657 62.6667 133V131Z" fill="black" fill-opacity="0.12"/>
+<rect x="89.3333" y="128" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M109.333 8C109.333 3.58172 112.915 0 117.333 0H152C156.418 0 160 3.58172 160 8V112C160 116.418 156.418 120 152 120H117.333C112.915 120 109.333 116.418 109.333 112V8Z" fill="white"/>
+<path d="M117.333 0.5H152C156.142 0.50018 159.5 3.85798 159.5 8V112C159.5 116.142 156.142 119.5 152 119.5H117.333C113.191 119.5 109.833 116.142 109.833 112V8C109.833 3.85786 113.191 0.5 117.333 0.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M117.333 12C117.333 9.79086 119.124 8 121.333 8H148C150.209 8 152 9.79086 152 12V12C152 14.2091 150.209 16 148 16H121.333C119.124 16 117.333 14.2091 117.333 12V12Z" fill="black" fill-opacity="0.32"/>
+<path d="M117.333 27C117.333 25.3431 118.676 24 120.333 24H137C138.657 24 140 25.3431 140 27V29C140 30.6569 138.657 32 137 32H120.333C118.676 32 117.333 30.6569 117.333 29V27Z" fill="black" fill-opacity="0.12"/>
+<rect x="144" y="24" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M117.333 43C117.333 41.3431 118.676 40 120.333 40H137C138.657 40 140 41.3431 140 43V45C140 46.6569 138.657 48 137 48H120.333C118.676 48 117.333 46.6569 117.333 45V43Z" fill="black" fill-opacity="0.12"/>
+<rect x="144" y="40" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M117.333 59C117.333 57.3431 118.676 56 120.333 56H137C138.657 56 140 57.3431 140 59V61C140 62.6569 138.657 64 137 64H120.333C118.676 64 117.333 62.6569 117.333 61V59Z" fill="black" fill-opacity="0.12"/>
+<rect x="144" y="56" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M117.333 75C117.333 73.3431 118.676 72 120.333 72H137C138.657 72 140 73.3431 140 75V77C140 78.6569 138.657 80 137 80H120.333C118.676 80 117.333 78.6569 117.333 77V75Z" fill="black" fill-opacity="0.12"/>
+<rect x="144" y="72" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M117.333 91C117.333 89.3431 118.676 88 120.333 88H137C138.657 88 140 89.3431 140 91V93C140 94.6569 138.657 96 137 96H120.333C118.676 96 117.333 94.6569 117.333 93V91Z" fill="black" fill-opacity="0.12"/>
+<rect x="144" y="88" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M117.333 107C117.333 105.343 118.676 104 120.333 104H137C138.657 104 140 105.343 140 107V109C140 110.657 138.657 112 137 112H120.333C118.676 112 117.333 110.657 117.333 109V107Z" fill="black" fill-opacity="0.12"/>
+<rect x="144" y="104" width="8" height="8" rx="4" fill="black" fill-opacity="0.12"/>
+<path d="M109.333 132C109.333 127.582 112.915 124 117.333 124H152C156.418 124 160 127.582 160 132V140C160 144.418 156.418 148 152 148H117.333C112.915 148 109.333 144.418 109.333 140V132Z" fill="white"/>
+<path d="M117.333 124.5H152C156.142 124.5 159.5 127.858 159.5 132V140C159.5 144.142 156.142 147.5 152 147.5H117.333C113.191 147.5 109.833 144.142 109.833 140V132C109.833 127.858 113.191 124.5 117.333 124.5Z" stroke="black" stroke-opacity="0.12"/>
+<path d="M117.333 136C117.333 133.791 119.124 132 121.333 132H148C150.209 132 152 133.791 152 136V136C152 138.209 150.209 140 148 140H121.333C119.124 140 117.333 138.209 117.333 136V136Z" fill="black" fill-opacity="0.32"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5533">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/light/icon-dashboard-map.svg

@@ -0,0 +1,16 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5539)">
+<rect width="160" height="160" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="159" height="159" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<path d="M83 86.9844V75.125L77 73.0156V84.875L83 86.9844ZM88.4844 71C88.8281 71 89 71.1719 89 71.5156V86.6094C89 86.8594 88.875 87.0156 88.625 87.0781L83 89L77 86.8906L71.6562 88.9531L71.5156 89C71.1719 89 71 88.8281 71 88.4844V73.3906C71 73.1406 71.125 72.9844 71.375 72.9219L77 71L83 73.1094L88.3438 71.0469L88.4844 71Z" fill="#03A9F4"/>
+<path d="M148 77.0508L139.288 85.8983M139.288 85.8983L116.852 108.684C115.724 109.83 114.184 110.475 112.576 110.475H81.6939M139.288 85.8983V69.4322M21.1957 82.9492H12M21.1957 82.9492L32.3274 71.6441M21.1957 82.9492L44.427 106.542M81.6939 110.475V124.237M81.6939 110.475H54.5907M81.6939 138V124.237M81.6939 124.237H148M32.3274 71.6441L43.4591 60.339L54.5907 49.0339L70.4941 32.8828C74.2533 29.0651 79.3871 26.9153 84.7451 26.9153H128.641V26.9153C134.521 26.9153 139.288 31.6824 139.288 37.5629V37.7288V49.0339M32.3274 71.6441L24.8569 64.0572C22.5573 61.7218 22.5573 57.9732 24.8569 55.6377L57.9786 22M139.288 49.0339H126.313C124.706 49.0339 123.166 48.389 122.038 47.2436L116.057 41.1695M139.288 49.0339V69.4322M139.288 69.4322H126.313C124.706 69.4322 123.166 68.7873 122.038 67.6419L116.057 61.5678M54.5907 110.475V110.475C54.5907 107.488 52.17 105.068 49.184 105.068H49.0249C45.951 105.068 43.4591 107.56 43.4591 110.634V110.807C43.4591 113.881 45.951 116.373 49.0249 116.373V116.373C52.0988 116.373 54.5907 113.881 54.5907 110.807V110.475ZM44.427 115.39L22.1637 138" stroke="black" stroke-opacity="0.12" stroke-width="5" stroke-linecap="round"/>
+<circle cx="41" cy="39" r="14" fill="black" fill-opacity="0.32"/>
+<circle cx="89" cy="117" r="14" fill="black" fill-opacity="0.32"/>
+<path d="M116 62.325C115.767 62.325 115.533 62.2833 115.3 62.2C115.067 62.1167 114.858 61.9917 114.675 61.825C113.592 60.825 112.633 59.85 111.8 58.9C110.967 57.95 110.267 57.0333 109.7 56.15C109.15 55.25 108.725 54.3917 108.425 53.575C108.142 52.7417 108 51.95 108 51.2C108 48.7 108.8 46.7083 110.4 45.225C112.017 43.7417 113.883 43 116 43C118.117 43 119.975 43.7417 121.575 45.225C123.192 46.7083 124 48.7 124 51.2C124 51.95 123.85 52.7417 123.55 53.575C123.267 54.3917 122.842 55.25 122.275 56.15C121.725 57.0333 121.033 57.95 120.2 58.9C119.367 59.85 118.408 60.825 117.325 61.825C117.142 61.9917 116.933 62.1167 116.7 62.2C116.467 62.2833 116.233 62.325 116 62.325Z" fill="black" fill-opacity="0.32"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5539">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/light/icon-dashboard-new.svg

@@ -0,0 +1,13 @@
+<svg width="160" height="72" viewBox="0 0 160 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5535)">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V4C32 6.20914 30.2091 8 28 8H4C1.79086 8 0 6.20914 0 4V4Z" fill="black" fill-opacity="0.32"/>
+<rect y="12" width="50.6667" height="60" rx="8" fill="white"/>
+<rect x="0.5" y="12.5" width="49.6667" height="59" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<path d="M32.3177 42.9844H26.3177V48.9844H24.349V42.9844H18.349V41.0156H24.349V35.0156H26.3177V41.0156H32.3177V42.9844Z" fill="#03A9F4"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5535">
+<rect width="160" height="72" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/dashboard-options/light/icon-dashboard-webpage.svg

@@ -0,0 +1,16 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1738_5537)">
+<rect width="160" height="160" rx="6" fill="white"/>
+<rect x="0.5" y="0.5" width="159" height="159" rx="5.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="8" y="8" width="144" height="11" rx="5.5" fill="black" fill-opacity="0.32"/>
+<rect x="8" y="27" width="45.3333" height="106" rx="4" fill="#E9E9E9"/>
+<rect x="57.3333" y="27" width="45.3333" height="30" rx="4" fill="#E9E9E9"/>
+<rect x="106.667" y="27" width="45.3333" height="68" rx="4" fill="#E9E9E9"/>
+<path d="M84.3594 82.0156H87.7344C87.9219 81.1406 88.0156 80.4688 88.0156 80C88.0156 79.5312 87.9219 78.8594 87.7344 77.9844H84.3594C84.4531 78.6406 84.5 79.3125 84.5 80C84.5 80.6875 84.4531 81.3594 84.3594 82.0156ZM82.5781 87.5469C83.3594 87.2969 84.1719 86.8281 85.0156 86.1406C85.8594 85.4219 86.5 84.7031 86.9375 83.9844H83.9844C83.6719 85.2344 83.2031 86.4219 82.5781 87.5469ZM82.3438 82.0156C82.4375 81.3594 82.4844 80.6875 82.4844 80C82.4844 79.3125 82.4375 78.6406 82.3438 77.9844H77.6562C77.5625 78.6406 77.5156 79.3125 77.5156 80C77.5156 80.6875 77.5625 81.3594 77.6562 82.0156H82.3438ZM80 87.9688C80.875 86.6875 81.5156 85.3594 81.9219 83.9844H78.0781C78.4844 85.3594 79.125 86.6875 80 87.9688ZM76.0156 76.0156C76.3906 74.6719 76.8594 73.4844 77.4219 72.4531C76.6406 72.7031 75.8125 73.1875 74.9375 73.9062C74.0938 74.5938 73.4688 75.2969 73.0625 76.0156H76.0156ZM73.0625 83.9844C73.4688 84.7031 74.0938 85.4219 74.9375 86.1406C75.8125 86.8281 76.6406 87.2969 77.4219 87.5469C76.7969 86.4219 76.3281 85.2344 76.0156 83.9844H73.0625ZM72.2656 82.0156H75.6406C75.5469 81.3594 75.5 80.6875 75.5 80C75.5 79.3125 75.5469 78.6406 75.6406 77.9844H72.2656C72.0781 78.8594 71.9844 79.5312 71.9844 80C71.9844 80.4688 72.0781 81.1406 72.2656 82.0156ZM80 72.0312C79.125 73.3125 78.4844 74.6406 78.0781 76.0156H81.9219C81.5156 74.6406 80.875 73.3125 80 72.0312ZM86.9375 76.0156C86.5 75.2969 85.8594 74.5938 85.0156 73.9062C84.1719 73.1875 83.3594 72.7031 82.5781 72.4531C83.1406 73.4844 83.6094 74.6719 83.9844 76.0156H86.9375ZM72.9219 72.9688C74.8906 71 77.25 70.0156 80 70.0156C82.75 70.0156 85.0938 71 87.0312 72.9688C89 74.9062 89.9844 77.25 89.9844 80C89.9844 82.75 89 85.1094 87.0312 87.0781C85.0938 89.0156 82.75 89.9844 80 89.9844C77.25 89.9844 74.8906 89.0156 72.9219 87.0781C70.9844 85.1094 70.0156 82.75 70.0156 80C70.0156 77.25 70.9844 74.9062 72.9219 72.9688Z" fill="#03A9F4"/>
+</g>
+<defs>
+<clipPath id="clip0_1738_5537">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250430.0"
+version      = "20250625.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

rspack.config.cjs

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-// Needs to remain CommonJS until eslint-import-resolver-webpack supports ES modules
-const rspack = require("./build-scripts/rspack.cjs");
-const env = require("./build-scripts/env.cjs");
-
-// This file exists because we haven't migrated the stats script yet
-
-const configs = [
-  rspack.createAppConfig({
-    isProdBuild: env.isProdBuild(),
-    isStatsBuild: env.isStatsBuild(),
-    isTestBuild: env.isTestBuild(),
-    latestBuild: true,
-  }),
-];
-
-if (env.isProdBuild() && !env.isStatsBuild()) {
-  configs.push(
-    rspack.createAppConfig({
-      isProdBuild: env.isProdBuild(),
-      isStatsBuild: env.isStatsBuild(),
-      isTestBuild: env.isTestBuild(),
-      latestBuild: false,
-    })
-  );
-}
-
-module.exports = configs;

script/build_frontend

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp build-app
+yarn run-task build-app

script/develop

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp develop-app
+yarn run-task develop-app

script/setup_translations

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp setup-and-fetch-nightly-translations
+yarn run-task setup-and-fetch-nightly-translations

script/size_stats

@@ -6,4 +6,4 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp analyze-app
+yarn run-task analyze-app

script/translations_download

@@ -8,4 +8,4 @@ set -eu -o pipefail
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp download-translations
+yarn run-task download-translations