Merge pull request #336 from rcarteraz/master

Fix Title

package.json

@@ -5,11 +5,12 @@
   "description": "Meshtastic web client",
   "license": "GPL-3.0-only",
   "scripts": {
-    "dev": "vite --host",
+    "build": "rsbuild build",
-    "build": "tsc && pnpm check && vite build ",
     "check": "biome check .",
     "check:fix": "pnpm check --write",
-    "preview": "vite preview",
+    "dev": "rsbuild dev --open",
+    "format": "biome format --write",
+    "preview": "rsbuild preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)"
   },
   "repository": {
@@ -66,13 +67,14 @@
   "devDependencies": {
     "@biomejs/biome": "^1.8.2",
     "@buf/meshtastic_protobufs.bufbuild_es": "1.10.0-20240906232734-3da561588c55.1",
+    "@rsbuild/core": "^1.0.10",
+    "@rsbuild/plugin-react": "^1.0.3",
     "@types/chrome": "^0.0.263",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/w3c-web-serial": "^1.0.6",
     "@types/web-bluetooth": "^0.0.20",
-    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "gzipper": "^7.2.0",
     "postcss": "^8.4.38",
@@ -80,8 +82,6 @@
     "tailwindcss": "^3.4.4",
     "tar": "^6.2.1",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.2"
-    "vite": "^5.3.1",
-    "vite-plugin-environment": "^1.1.3"
   }
 }

rsbuild.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { execSync } from "node:child_process";
+
+let hash = "";
+
+try {
+  hash = execSync("git rev-parse --short HEAD").toString().trim();
+} catch (error) {
+  hash = "DEV";
+}
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    define: {
+      "process.env.COMMIT_HASH": JSON.stringify(hash),
+    },
+    alias: {
+      "@app": "./src",
+      "@pages": "./src/pages",
+      "@components": "./src/components",
+      "@core": "./src/core",
+      "@layouts": "./src/layouts",
+    },
+  },
+  html: {
+    title: "Meshtastic Web",
+  },
+});

src/App.tsx

@@ -1,15 +1,15 @@
-import { DeviceWrapper } from "@app/DeviceWrapper.js";
+import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
-import { PageRouter } from "@app/PageRouter.js";
+import { PageRouter } from "@app/PageRouter.tsx";
-import { CommandPalette } from "@components/CommandPalette.js";
+import { CommandPalette } from "@components/CommandPalette.tsx";
-import { DeviceSelector } from "@components/DeviceSelector.js";
+import { DeviceSelector } from "@components/DeviceSelector.tsx";
-import { DialogManager } from "@components/Dialog/DialogManager.js";
+import { DialogManager } from "@components/Dialog/DialogManager.tsx";
-import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.js";
+import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.tsx";
-import { Toaster } from "@components/Toaster.js";
+import { Toaster } from "@components/Toaster.tsx";
-import Footer from "@components/UI/Footer.js";
+import Footer from "@components/UI/Footer.tsx";
-import { ThemeController } from "@components/generic/ThemeController.js";
+import { ThemeController } from "@components/generic/ThemeController.tsx";
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
-import { Dashboard } from "@pages/Dashboard/index.js";
+import { Dashboard } from "@pages/Dashboard/index.tsx";
 import { MapProvider } from "react-map-gl";
 
 export const App = (): JSX.Element => {

src/DeviceWrapper.tsx

@@ -1,5 +1,5 @@
-import { DeviceContext } from "@core/stores/deviceStore.js";
+import { DeviceContext } from "@core/stores/deviceStore.ts";
-import type { Device } from "@core/stores/deviceStore.js";
+import type { Device } from "@core/stores/deviceStore.ts";
 import type { ReactNode } from "react";
 
 export interface DeviceWrapperProps {

src/PageRouter.tsx

@@ -1,9 +1,9 @@
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
-import { ChannelsPage } from "@pages/Channels.js";
+import { ChannelsPage } from "@pages/Channels.tsx";
-import { ConfigPage } from "@pages/Config/index.js";
+import { ConfigPage } from "@pages/Config/index.tsx";
-import { MapPage } from "@pages/Map.js";
+import { MapPage } from "@pages/Map.tsx";
-import { MessagesPage } from "@pages/Messages.js";
+import { MessagesPage } from "@pages/Messages.tsx";
-import { NodesPage } from "@pages/Nodes.js";
+import { NodesPage } from "@pages/Nodes.tsx";
 
 export const PageRouter = (): JSX.Element => {
   const { activePage } = useDevice();

src/components/CommandPalette.tsx

@@ -5,9 +5,9 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@components/UI/Command.js";
+} from "@components/UI/Command.tsx";
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
-import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
+import { useDevice, useDeviceStore } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { useCommandState } from "cmdk";
 import {

src/components/DeviceSelector.tsx

@@ -1,8 +1,8 @@
-import { DeviceSelectorButton } from "@components/DeviceSelectorButton.js";
+import { DeviceSelectorButton } from "@components/DeviceSelectorButton.tsx";
-import { Separator } from "@components/UI/Seperator.js";
+import { Separator } from "@components/UI/Seperator.tsx";
-import { Code } from "@components/UI/Typography/Code.js";
+import { Code } from "@components/UI/Typography/Code.tsx";
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
   HomeIcon,

src/components/Dialog/DeviceNameDialog.tsx

@@ -1,5 +1,5 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
@@ -7,9 +7,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
-import { Label } from "@components/UI/Label.js";
+import { Label } from "@components/UI/Label.tsx";
 import { Protobuf } from "@meshtastic/js";
 import { useForm } from "react-hook-form";
 

src/components/Dialog/DialogManager.tsx

@@ -1,10 +1,10 @@
-import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.js";
+import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.tsx";
-import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.js";
+import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.tsx";
-import { ImportDialog } from "@components/Dialog/ImportDialog.js";
+import { ImportDialog } from "@components/Dialog/ImportDialog.tsx";
-import { QRDialog } from "@components/Dialog/QRDialog.js";
+import { QRDialog } from "@components/Dialog/QRDialog.tsx";
-import { RebootDialog } from "@components/Dialog/RebootDialog.js";
+import { RebootDialog } from "@components/Dialog/RebootDialog.tsx";
-import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
+import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 
 export const DialogManager = (): JSX.Element => {
   const { channels, config, dialog, setDialogOpen } = useDevice();

src/components/Dialog/ImportDialog.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Checkbox } from "@components/UI/Checkbox.js";
+import { Checkbox } from "@components/UI/Checkbox.tsx";
 import {
   Dialog,
   DialogContent,
@@ -7,11 +7,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
-import { Label } from "@components/UI/Label.js";
+import { Label } from "@components/UI/Label.tsx";
-import { Switch } from "@components/UI/Switch.js";
+import { Switch } from "@components/UI/Switch.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 import { toByteArray } from "base64-js";
 import { useEffect, useState } from "react";

src/components/Dialog/NewDeviceDialog.tsx

@@ -1,20 +1,20 @@
-import { BLE } from "@components/PageComponents/Connect/BLE.js";
+import { BLE } from "@components/PageComponents/Connect/BLE.tsx";
-import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
+import { HTTP } from "@components/PageComponents/Connect/HTTP.tsx";
-import { Serial } from "@components/PageComponents/Connect/Serial.js";
+import { Serial } from "@components/PageComponents/Connect/Serial.tsx";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@components/UI/Tabs.js";
+} from "@components/UI/Tabs.tsx";
-import { Link } from "@components/UI/Typography/Link.js";
+import { Link } from "@components/UI/Typography/Link.tsx";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 
 export interface TabElementProps {
   closeDialog: () => void;

src/components/Dialog/PkiRegenerateDialog.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
@@ -6,7 +6,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
 
 export interface PkiRegenerateDialogProps {
   open: boolean;

src/components/Dialog/QRDialog.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from "@components/UI/Checkbox.js";
+import { Checkbox } from "@components/UI/Checkbox.tsx";
 import {
   Dialog,
   DialogContent,
@@ -6,9 +6,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
-import { Label } from "@components/UI/Label.js";
+import { Label } from "@components/UI/Label.tsx";
 import { Protobuf, type Types } from "@meshtastic/js";
 import { fromByteArray } from "base64-js";
 import { ClipboardIcon } from "lucide-react";

src/components/Dialog/RebootDialog.tsx

@@ -1,13 +1,13 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { ClockIcon, RefreshCwIcon } from "lucide-react";
 import { useState } from "react";
 

src/components/Dialog/RemoveNodeDialog.tsx

@@ -1,6 +1,6 @@
 import { useAppStore } from "@app/core/stores/appStore";
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
@@ -8,8 +8,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
-import { Label } from "@components/UI/Label.js";
+import { Label } from "@components/UI/Label.tsx";
 
 export interface RemoveNodeDialogProps {
   open: boolean;

src/components/Dialog/ShutdownDialog.tsx

@@ -1,13 +1,13 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { ClockIcon, PowerIcon } from "lucide-react";
 import { useState } from "react";
 

src/components/Form/DynamicForm.tsx

@@ -1,11 +1,11 @@
 import {
   DynamicFormField,
   type FieldProps,
-} from "@components/Form/DynamicFormField.js";
+} from "@components/Form/DynamicFormField.tsx";
-import { FieldWrapper } from "@components/Form/FormWrapper.js";
+import { FieldWrapper } from "@components/Form/FormWrapper.tsx";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { H4 } from "@components/UI/Typography/H4.js";
+import { H4 } from "@components/UI/Typography/H4.tsx";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import {
   type Control,
   type DefaultValues,

src/components/Form/DynamicFormField.tsx

@@ -1,19 +1,19 @@
 import {
   GenericInput,
   type InputFieldProps,
-} from "@components/Form/FormInput.js";
+} from "@components/Form/FormInput.tsx";
 import {
   PasswordGenerator,
   type PasswordGeneratorProps,
-} from "@components/Form/FormPasswordGenerator.js";
+} from "@components/Form/FormPasswordGenerator.tsx";
 import {
   type SelectFieldProps,
   SelectInput,
-} from "@components/Form/FormSelect.js";
+} from "@components/Form/FormSelect.tsx";
 import {
   type ToggleFieldProps,
   ToggleInput,
-} from "@components/Form/FormToggle.js";
+} from "@components/Form/FormToggle.tsx";
 import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =

src/components/Form/FormInput.tsx

@@ -1,10 +1,12 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
+} from "@components/Form/DynamicForm.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
 import type { LucideIcon } from "lucide-react";
+import { Eye, EyeOff } from "lucide-react";
 import type { ChangeEventHandler } from "react";
+import { useState } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
@@ -27,13 +29,28 @@ export function GenericInput<T extends FieldValues>({
   disabled,
   field,
 }: GenericFormElementProps<T, InputFieldProps<T>>) {
+  const [passwordShown, setPasswordShown] = useState(false);
+  const togglePasswordVisiblity = () => {
+    setPasswordShown(!passwordShown);
+  };
+
   return (
     <Controller
       name={field.name}
       control={control}
       render={({ field: { value, onChange, ...rest } }) => (
         <Input
-          type={field.type}
+          type={
+            field.type === "password" && passwordShown ? "text" : field.type
+          }
+          action={
+            field.type === "password"
+              ? {
+                  icon: passwordShown ? EyeOff : Eye,
+                  onClick: togglePasswordVisiblity,
+                }
+              : undefined
+          }
           step={field.properties?.step}
           value={field.type === "number" ? Number.parseFloat(value) : value}
           onChange={(e) => {

src/components/Form/FormPasswordGenerator.tsx

@@ -1,9 +1,11 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
+} from "@components/Form/DynamicForm.tsx";
-import { Generator } from "@components/UI/Generator.js";
+import { Generator } from "@components/UI/Generator.tsx";
+import { Eye, EyeOff } from "lucide-react";
 import type { ChangeEventHandler, MouseEventHandler } from "react";
+import { useState } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
@@ -21,13 +23,26 @@ export function PasswordGenerator<T extends FieldValues>({
   field,
   disabled,
 }: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
+  const [passwordShown, setPasswordShown] = useState(false);
+  const togglePasswordVisiblity = () => {
+    setPasswordShown(!passwordShown);
+  };
+
   return (
     <Controller
       name={field.name}
       control={control}
       render={({ field: { value, ...rest } }) => (
         <Generator
-          hide={field.hide}
+          type={field.hide && !passwordShown ? "password" : "text"}
+          action={
+            field.hide
+              ? {
+                  icon: passwordShown ? EyeOff : Eye,
+                  onClick: togglePasswordVisiblity,
+                }
+              : undefined
+          }
           devicePSKBitCount={field.devicePSKBitCount}
           bits={field.bits}
           inputChange={field.inputChange}

src/components/Form/FormSelect.tsx

@@ -1,14 +1,14 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
+} from "@components/Form/DynamicForm.tsx";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@components/UI/Select.js";
+} from "@components/UI/Select.tsx";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {

src/components/Form/FormToggle.tsx

@@ -1,8 +1,8 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
+} from "@components/Form/DynamicForm.tsx";
-import { Switch } from "@components/UI/Switch.js";
+import { Switch } from "@components/UI/Switch.tsx";
 import type { ChangeEvent } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 

src/components/Form/FormWrapper.tsx

@@ -1,4 +1,4 @@
-import { Label } from "@components/UI/Label.js";
+import { Label } from "@components/UI/Label.tsx";
 
 export interface FieldWrapperProps {
   label: string;

src/components/PageComponents/Channel.tsx

@@ -1,7 +1,7 @@
-import type { ChannelValidation } from "@app/validation/channel.js";
+import type { ChannelValidation } from "@app/validation/channel.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useToast } from "@core/hooks/useToast.js";
+import { useToast } from "@core/hooks/useToast.ts";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 import { fromByteArray, toByteArray } from "base64-js";
 import cryptoRandomString from "crypto-random-string";
@@ -111,10 +111,14 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               type: "select",
               name: "role",
               label: "Role",
+              disabled: channel.index === 0,
               description:
                 "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
               properties: {
-                enumValue: Protobuf.Channel.Channel_Role,
+                enumValue:
+                  channel.index === 0
+                    ? { PRIMARY: 1 }
+                    : { DISABLED: 0, SECONDARY: 2 },
               },
             },
             {
@@ -127,6 +131,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               inputChange: inputChangeEvent,
               selectChange: selectChangeEvent,
               buttonClick: clickEvent,
+              hide: true,
               properties: {
                 value: pass,
               },

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,6 +1,6 @@
-import type { BluetoothValidation } from "@app/validation/config/bluetooth.js";
+import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Bluetooth = (): JSX.Element => {

src/components/PageComponents/Config/Device.tsx

@@ -1,6 +1,6 @@
-import type { DeviceValidation } from "@app/validation/config/device.js";
+import type { DeviceValidation } from "@app/validation/config/device.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Device = (): JSX.Element => {
@@ -32,7 +32,22 @@ export const Device = (): JSX.Element => {
               label: "Role",
               description: "What role the device performs on the mesh",
               properties: {
-                enumValue: Protobuf.Config.Config_DeviceConfig_Role,
+                enumValue: {
+                  Client: Protobuf.Config.Config_DeviceConfig_Role.CLIENT,
+                  "Client Mute":
+                    Protobuf.Config.Config_DeviceConfig_Role.CLIENT_MUTE,
+                  Router: Protobuf.Config.Config_DeviceConfig_Role.ROUTER,
+                  Repeater: Protobuf.Config.Config_DeviceConfig_Role.REPEATER,
+                  Tracker: Protobuf.Config.Config_DeviceConfig_Role.TRACKER,
+                  Sensor: Protobuf.Config.Config_DeviceConfig_Role.SENSOR,
+                  TAK: Protobuf.Config.Config_DeviceConfig_Role.TAK,
+                  "Client Hidden":
+                    Protobuf.Config.Config_DeviceConfig_Role.CLIENT_HIDDEN,
+                  "Lost and Found":
+                    Protobuf.Config.Config_DeviceConfig_Role.LOST_AND_FOUND,
+                  "TAK Tracker":
+                    Protobuf.Config.Config_DeviceConfig_Role.SENSOR,
+                },
                 formatEnumName: true,
               },
             },

src/components/PageComponents/Config/Display.tsx

@@ -1,6 +1,6 @@
-import type { DisplayValidation } from "@app/validation/config/display.js";
+import type { DisplayValidation } from "@app/validation/config/display.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Display = (): JSX.Element => {

src/components/PageComponents/Config/LoRa.tsx

@@ -1,6 +1,6 @@
-import type { LoRaValidation } from "@app/validation/config/lora.js";
+import type { LoRaValidation } from "@app/validation/config/lora.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const LoRa = (): JSX.Element => {

src/components/PageComponents/Config/Network.tsx

@@ -1,6 +1,10 @@
-import type { NetworkValidation } from "@app/validation/config/network.js";
+import type { NetworkValidation } from "@app/validation/config/network.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import {
+  convertIntToIpAddress,
+  convertIpAddressToInt,
+} from "@core/utils/ip.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Network = (): JSX.Element => {
@@ -13,9 +17,12 @@ export const Network = (): JSX.Element => {
           case: "network",
           value: {
             ...data,
-            ipv4Config: new Protobuf.Config.Config_NetworkConfig_IpV4Config(
+            ipv4Config: new Protobuf.Config.Config_NetworkConfig_IpV4Config({
-              data.ipv4Config,
+              ip: convertIpAddressToInt(data.ipv4Config.ip) ?? 0,
-            ),
+              gateway: convertIpAddressToInt(data.ipv4Config.gateway) ?? 0,
+              subnet: convertIpAddressToInt(data.ipv4Config.subnet) ?? 0,
+              dns: convertIpAddressToInt(data.ipv4Config.dns) ?? 0,
+            }),
           },
         },
       }),
@@ -25,7 +32,19 @@ export const Network = (): JSX.Element => {
   return (
     <DynamicForm<NetworkValidation>
       onSubmit={onSubmit}
-      defaultValues={config.network}
+      defaultValues={{
+        ...config.network,
+        ipv4Config: {
+          ip: convertIntToIpAddress(config.network?.ipv4Config?.ip ?? 0),
+          gateway: convertIntToIpAddress(
+            config.network?.ipv4Config?.gateway ?? 0,
+          ),
+          subnet: convertIntToIpAddress(
+            config.network?.ipv4Config?.subnet ?? 0,
+          ),
+          dns: convertIntToIpAddress(config.network?.ipv4Config?.dns ?? 0),
+        },
+      }}
       fieldGroups={[
         {
           label: "WiFi Config",

src/components/PageComponents/Config/Position.tsx

@@ -1,6 +1,6 @@
-import type { PositionValidation } from "@app/validation/config/position.js";
+import type { PositionValidation } from "@app/validation/config/position.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Position = (): JSX.Element => {
@@ -77,12 +77,6 @@ export const Position = (): JSX.Element => {
               label: "Enable Pin",
               description: "GPS module enable pin override",
             },
-            {
-              type: "number",
-              name: "channelPrecision",
-              label: "Channel Precision",
-              description: "GPS channel precision",
-            },
           ],
         },
         {

src/components/PageComponents/Config/Power.tsx

@@ -1,6 +1,6 @@
-import type { PowerValidation } from "@app/validation/config/power.js";
+import type { PowerValidation } from "@app/validation/config/power.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Power = (): JSX.Element => {

src/components/PageComponents/Config/Security.tsx

@@ -1,11 +1,11 @@
 import { PkiRegenerateDialog } from "@app/components/Dialog/PkiRegenerateDialog";
-import { DynamicForm } from "@app/components/Form/DynamicForm.js";
+import { DynamicForm } from "@app/components/Form/DynamicForm.tsx";
 import {
   getX25519PrivateKey,
   getX25519PublicKey,
 } from "@app/core/utils/x25519";
-import type { SecurityValidation } from "@app/validation/config/security.js";
+import type { SecurityValidation } from "@app/validation/config/security.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 import { fromByteArray, toByteArray } from "base64-js";
 import { Eye, EyeOff } from "lucide-react";

src/components/PageComponents/Connect/BLE.tsx

@@ -1,10 +1,10 @@
 import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Mono } from "@components/generic/Mono.js";
+import { Mono } from "@components/generic/Mono.tsx";
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
-import { subscribeAll } from "@core/subscriptions.js";
+import { subscribeAll } from "@core/subscriptions.ts";
-import { randId } from "@core/utils/randId.js";
+import { randId } from "@core/utils/randId.ts";
 import { BleConnection, Constants } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";
 

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,12 +1,12 @@
 import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
-import { Label } from "@components/UI/Label.js";
+import { Label } from "@components/UI/Label.tsx";
-import { Switch } from "@components/UI/Switch.js";
+import { Switch } from "@components/UI/Switch.tsx";
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
-import { subscribeAll } from "@core/subscriptions.js";
+import { subscribeAll } from "@core/subscriptions.ts";
-import { randId } from "@core/utils/randId.js";
+import { randId } from "@core/utils/randId.ts";
 import { HttpConnection } from "@meshtastic/js";
 import { useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";

src/components/PageComponents/Connect/Serial.tsx

@@ -1,10 +1,10 @@
 import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Mono } from "@components/generic/Mono.js";
+import { Mono } from "@components/generic/Mono.tsx";
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
-import { subscribeAll } from "@core/subscriptions.js";
+import { subscribeAll } from "@core/subscriptions.ts";
-import { randId } from "@core/utils/randId.js";
+import { randId } from "@core/utils/randId.ts";
 import { SerialConnection } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";
 

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,11 +1,11 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.js";
+import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
 import {
   type MessageWithState,
   useDevice,
-} from "@app/core/stores/deviceStore.js";
+} from "@app/core/stores/deviceStore.ts";
-import { Message } from "@components/PageComponents/Messages/Message.js";
+import { Message } from "@components/PageComponents/Messages/Message.tsx";
-import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
+import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
-import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
+import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.tsx";
 import type { Protobuf, Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
 

src/components/PageComponents/Messages/Message.tsx

@@ -1,4 +1,4 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.js";
+import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import type { Protobuf } from "@meshtastic/js";
 import {

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,6 +1,6 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/js";
 import { SendIcon } from "lucide-react";
 

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -1,5 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { Protobuf } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 
 export interface TraceRouteProps {
   from?: Protobuf.Mesh.NodeInfo;
@@ -24,7 +25,10 @@ export const TraceRoute = ({
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
         {to?.user?.longName}↔
-        {route.map((hop) => `${nodes.get(hop)?.user?.longName ?? "Unknown"}↔`)}
+        {route.map((hop) => {
+          const node = nodes.get(hop);
+          return `${node?.user?.longName ?? (node?.num ? numberToHexUnpadded(node.num) : "Unknown")}↔`;
+        })}
         {from?.user?.longName}
       </span>
     </div>

src/components/PageComponents/ModuleConfig/AmbientLighting.tsx

@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
-import type { AmbientLightingValidation } from "@app/validation/moduleConfig/ambientLighting.js";
+import type { AmbientLightingValidation } from "@app/validation/moduleConfig/ambientLighting.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";
 
 export const AmbientLighting = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -1,6 +1,6 @@
-import type { AudioValidation } from "@app/validation/moduleConfig/audio.js";
+import type { AudioValidation } from "@app/validation/moduleConfig/audio.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Audio = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -1,6 +1,6 @@
-import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
+import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const CannedMessage = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/DetectionSensor.tsx

@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
-import type { DetectionSensorValidation } from "@app/validation/moduleConfig/detectionSensor.js";
+import type { DetectionSensorValidation } from "@app/validation/moduleConfig/detectionSensor.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";
 
 export const DetectionSensor = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -1,6 +1,6 @@
-import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
+import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const ExternalNotification = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
-import type { MqttValidation } from "@app/validation/moduleConfig/mqtt.js";
+import type { MqttValidation } from "@app/validation/moduleConfig/mqtt.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";
 
 export const MQTT = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/NeighborInfo.tsx

@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
-import type { NeighborInfoValidation } from "@app/validation/moduleConfig/neighborInfo.js";
+import type { NeighborInfoValidation } from "@app/validation/moduleConfig/neighborInfo.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";
 
 export const NeighborInfo = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/Paxcounter.tsx

@@ -1,6 +1,6 @@
-import type { PaxcounterValidation } from "@app/validation/moduleConfig/paxcounter.js";
+import type { PaxcounterValidation } from "@app/validation/moduleConfig/paxcounter.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Paxcounter = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -1,6 +1,6 @@
-import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
+import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const RangeTest = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -1,6 +1,6 @@
-import type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
+import type { SerialValidation } from "@app/validation/moduleConfig/serial.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Serial = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -1,6 +1,6 @@
-import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
+import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.ts";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const StoreForward = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -1,6 +1,6 @@
-import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
+import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.tsx";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 
 export const Telemetry = (): JSX.Element => {

src/components/PageLayout.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
 import { AlignLeftIcon, type LucideIcon } from "lucide-react";
 import Footer from "./UI/Footer";
 

src/components/Sidebar.tsx

@@ -1,8 +1,8 @@
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
-import type { Page } from "@core/stores/deviceStore.js";
+import type { Page } from "@core/stores/deviceStore.ts";
 import {
   BatteryMediumIcon,
   CpuIcon,

src/components/Toaster.tsx

@@ -1,4 +1,4 @@
-import { useToast } from "@core/hooks/useToast.js";
+import { useToast } from "@core/hooks/useToast.ts";
 
 import {
   Toast,
@@ -7,7 +7,7 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@components/UI/Toast.js";
+} from "@components/UI/Toast.tsx";
 
 export function Toaster() {
   const { toasts } = useToast();

src/components/UI/Button.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",

src/components/UI/Checkbox.tsx

@@ -2,7 +2,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

src/components/UI/Command.tsx

@@ -3,8 +3,8 @@ import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
 
-import { Dialog, DialogContent } from "@components/UI/Dialog.js";
+import { Dialog, DialogContent } from "@components/UI/Dialog.tsx";
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

src/components/UI/Dialog.tsx

@@ -2,7 +2,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Dialog = DialogPrimitive.Root;
 

src/components/UI/DropdownMenu.tsx

@@ -2,7 +2,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

src/components/UI/Generator.tsx

@@ -1,18 +1,18 @@
 import * as React from "react";
 
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Input } from "@components/UI/Input.js";
+import { Input } from "@components/UI/Input.tsx";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@components/UI/Select.js";
+} from "@components/UI/Select.tsx";
 import type { LucideIcon } from "lucide-react";
 
 export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
-  hide?: boolean;
+  type: "text" | "password";
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
@@ -31,7 +31,7 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
 const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
     {
-      hide = true,
+      type,
       devicePSKBitCount,
       variant,
       value,
@@ -68,7 +68,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
     return (
       <>
         <Input
-          type={hide ? "password" : "text"}
+          type={type}
           id="pskInput"
           variant={variant}
           value={value}

src/components/UI/Input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 import { type VariantProps, cva } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 

src/components/UI/Label.tsx

@@ -1,7 +1,7 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,

src/components/UI/Menubar.tsx

@@ -2,7 +2,7 @@ import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const MenubarMenu = MenubarPrimitive.Menu;
 

src/components/UI/Popover.tsx

@@ -1,7 +1,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Popover = PopoverPrimitive.Root;
 

src/components/UI/ScrollArea.tsx

@@ -1,7 +1,7 @@
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,

src/components/UI/Select.tsx

@@ -2,7 +2,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Select = SelectPrimitive.Root;
 

src/components/UI/Seperator.tsx

@@ -1,7 +1,7 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

src/components/UI/Sidebar/SidebarSection.tsx

@@ -1,4 +1,4 @@
-import { H4 } from "@components/UI/Typography/H4.js";
+import { H4 } from "@components/UI/Typography/H4.tsx";
 
 export interface SidebarSectionProps {
   label: string;

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import type { LucideIcon } from "lucide-react";
 
 export interface SidebarButtonProps {

src/components/UI/Switch.tsx

@@ -1,7 +1,7 @@
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

src/components/UI/Tabs.tsx

@@ -1,7 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Tabs = TabsPrimitive.Root;
 

src/components/UI/Toast.tsx

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const ToastProvider = ToastPrimitives.Provider;
 

src/components/UI/Tooltip.tsx

@@ -1,7 +1,7 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

src/components/UI/Typography/H4.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
 
 export interface H4Props {
   className?: string;

src/components/UI/Typography/Subtle.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
 
 export interface SubtleProps {
   className?: string;

src/components/generic/ThemeController.tsx

@@ -1,4 +1,4 @@
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
 import type { ReactNode } from "react";
 
 export interface ThemeControllerProps {

src/core/hooks/useToast.ts

@@ -1,6 +1,6 @@
 import { type ReactNode, useSyncExternalStore } from "react";
 
-import type { ToastActionElement, ToastProps } from "@components/UI/Toast.js";
+import type { ToastActionElement, ToastProps } from "@components/UI/Toast.tsx";
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
@@ -30,21 +30,21 @@ type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"];
+    type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
+    toast: ToasterToast;
-    }
+  }
   | {
-      type: ActionType["UPDATE_TOAST"];
+    type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
+    toast: Partial<ToasterToast>;
-    }
+  }
   | {
-      type: ActionType["DISMISS_TOAST"];
+    type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
+    toastId?: ToasterToast["id"];
-    }
+  }
   | {
-      type: ActionType["REMOVE_TOAST"];
+    type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
+    toastId?: ToasterToast["id"];
-    };
+  };
 
 interface State {
   toasts: ToasterToast[];
@@ -80,7 +80,7 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
         ),
       };
 
@@ -102,10 +102,10 @@ export const reducer = (state: State, action: Action): State => {
         toasts: state.toasts.map((t) =>
           t.id === toastId || toastId === undefined
             ? {
-                ...t,
+              ...t,
-                open: false,
+              open: false,
-              }
+            }
-            : t,
+            : t
         ),
       };
     }
@@ -190,4 +190,4 @@ function useToast() {
   };
 }
 
-export { useToast, toast };
+export { toast, useToast };

src/core/subscriptions.ts

@@ -1,4 +1,4 @@
-import type { Device } from "@core/stores/deviceStore.js";
+import type { Device } from "@core/stores/deviceStore.ts";
 import { Protobuf, type Types } from "@meshtastic/js";
 
 export const subscribeAll = (

src/core/utils/ip.ts

@@ -0,0 +1,14 @@
+export function convertIntToIpAddress(int: number): string {
+  return `${int & 0xff}.${(int >> 8) & 0xff}.${(int >> 16) & 0xff}.${(int >> 24) & 0xff}`;
+}
+
+export function convertIpAddressToInt(ip: string): number | null {
+  return (
+    ip
+      .split(".")
+      .reverse()
+      .reduce((ipnum, octet) => {
+        return (ipnum << 8) + Number.parseInt(octet);
+      }, 0) >>> 0
+  );
+}

src/index.tsx

@@ -4,7 +4,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import { App } from "@app/App.js";
+import { App } from "@app/App.tsx";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);

src/pages/Channels.tsx

@@ -3,11 +3,11 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@app/components/UI/Tabs.js";
+} from "@app/components/UI/Tabs.tsx";
-import { Channel } from "@components/PageComponents/Channel.js";
+import { Channel } from "@components/PageComponents/Channel.tsx";
-import { PageLayout } from "@components/PageLayout.js";
+import { PageLayout } from "@components/PageLayout.tsx";
-import { Sidebar } from "@components/Sidebar.js";
+import { Sidebar } from "@components/Sidebar.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Types } from "@meshtastic/js";
 import type { Protobuf } from "@meshtastic/js";
 import { ImportIcon, QrCodeIcon } from "lucide-react";

src/pages/Config/DeviceConfig.tsx

@@ -1,18 +1,18 @@
-import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
+import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.tsx";
-import { Device } from "@components/PageComponents/Config/Device.js";
+import { Device } from "@components/PageComponents/Config/Device.tsx";
-import { Display } from "@components/PageComponents/Config/Display.js";
+import { Display } from "@components/PageComponents/Config/Display.tsx";
-import { LoRa } from "@components/PageComponents/Config/LoRa.js";
+import { LoRa } from "@components/PageComponents/Config/LoRa.tsx";
-import { Network } from "@components/PageComponents/Config/Network.js";
+import { Network } from "@components/PageComponents/Config/Network.tsx";
-import { Position } from "@components/PageComponents/Config/Position.js";
+import { Position } from "@components/PageComponents/Config/Position.tsx";
-import { Power } from "@components/PageComponents/Config/Power.js";
+import { Power } from "@components/PageComponents/Config/Power.tsx";
-import { Security } from "@components/PageComponents/Config/Security.js";
+import { Security } from "@components/PageComponents/Config/Security.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@components/UI/Tabs.js";
+} from "@components/UI/Tabs.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 
 export const DeviceConfig = (): JSX.Element => {
   const { metadata } = useDevice();

src/pages/Config/ModuleConfig.tsx

@@ -1,21 +1,21 @@
-import { AmbientLighting } from "@app/components/PageComponents/ModuleConfig/AmbientLighting.js";
+import { AmbientLighting } from "@app/components/PageComponents/ModuleConfig/AmbientLighting.tsx";
-import { DetectionSensor } from "@app/components/PageComponents/ModuleConfig/DetectionSensor.js";
+import { DetectionSensor } from "@app/components/PageComponents/ModuleConfig/DetectionSensor.tsx";
-import { NeighborInfo } from "@app/components/PageComponents/ModuleConfig/NeighborInfo.js";
+import { NeighborInfo } from "@app/components/PageComponents/ModuleConfig/NeighborInfo.tsx";
-import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
+import { Audio } from "@components/PageComponents/ModuleConfig/Audio.tsx";
-import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.js";
+import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.tsx";
-import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
+import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.tsx";
-import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
+import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.tsx";
-import { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.js";
+import { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.tsx";
-import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js";
+import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.tsx";
-import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
+import { Serial } from "@components/PageComponents/ModuleConfig/Serial.tsx";
-import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
+import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.tsx";
-import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
+import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@components/UI/Tabs.js";
+} from "@components/UI/Tabs.tsx";
 
 export const ModuleConfig = (): JSX.Element => {
   const tabs = [

src/pages/Config/index.tsx

@@ -1,11 +1,11 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
-import { PageLayout } from "@components/PageLayout.js";
+import { PageLayout } from "@components/PageLayout.tsx";
-import { Sidebar } from "@components/Sidebar.js";
+import { Sidebar } from "@components/Sidebar.tsx";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
-import { useToast } from "@core/hooks/useToast.js";
+import { useToast } from "@core/hooks/useToast.ts";
-import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
+import { DeviceConfig } from "@pages/Config/DeviceConfig.tsx";
-import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
+import { ModuleConfig } from "@pages/Config/ModuleConfig.tsx";
 import { BoxesIcon, SaveIcon, SettingsIcon } from "lucide-react";
 import { useState } from "react";
 

src/pages/Dashboard/index.tsx

@@ -1,9 +1,9 @@
-import { useAppStore } from "@app/core/stores/appStore.js";
+import { useAppStore } from "@app/core/stores/appStore.ts";
-import { useDeviceStore } from "@app/core/stores/deviceStore.js";
+import { useDeviceStore } from "@app/core/stores/deviceStore.ts";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Separator } from "@components/UI/Seperator.js";
+import { Separator } from "@components/UI/Seperator.tsx";
-import { H3 } from "@components/UI/Typography/H3.js";
+import { H3 } from "@components/UI/Typography/H3.tsx";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import {
   BluetoothIcon,
   ListPlusIcon,

src/pages/Map.tsx

@@ -1,12 +1,13 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.js";
+import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
-import { PageLayout } from "@components/PageLayout.js";
+import { PageLayout } from "@components/PageLayout.tsx";
-import { Sidebar } from "@components/Sidebar.js";
+import { Sidebar } from "@components/Sidebar.tsx";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { bbox, lineString } from "@turf/turf";
 import {
   BoxSelectIcon,
@@ -180,7 +181,8 @@ export const MapPage = (): JSX.Element => {
                   <div className="flex cursor-pointer gap-2 rounded-md border bg-backgroundPrimary p-1.5">
                     <Hashicon value={node.num.toString()} size={22} />
                     <Subtle className={cn(zoom < 12 && "hidden")}>
-                      {node.user?.longName}
+                      {node.user?.longName ||
+                        `!${numberToHexUnpadded(node.num)}`}
                     </Subtle>
                   </div>
                 </Marker>

src/pages/Messages.tsx

@@ -1,13 +1,14 @@
-import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
+import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.tsx";
-import { PageLayout } from "@components/PageLayout.js";
+import { PageLayout } from "@components/PageLayout.tsx";
-import { Sidebar } from "@components/Sidebar.js";
+import { Sidebar } from "@components/Sidebar.tsx";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
-import { useToast } from "@core/hooks/useToast.js";
+import { useToast } from "@core/hooks/useToast.ts";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
-import { getChannelName } from "@pages/Channels.js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import { getChannelName } from "@pages/Channels.tsx";
 import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
 
@@ -28,6 +29,8 @@ export const MessagesPage = (): JSX.Element => {
   );
   const currentChannel = channels.get(activeChat);
   const { toast } = useToast();
+  const node = nodes.get(activeChat);
+  const nodeHex = node?.num ? numberToHexUnpadded(node.num) : "Unknown";
 
   return (
     <>
@@ -56,7 +59,7 @@ export const MessagesPage = (): JSX.Element => {
           {filteredNodes.map((node) => (
             <SidebarButton
               key={node.num}
-              label={node.user?.longName ?? "Unknown"}
+              label={node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`}
               active={activeChat === node.num}
               onClick={() => {
                 setChatType("direct");
@@ -73,7 +76,7 @@ export const MessagesPage = (): JSX.Element => {
             chatType === "broadcast" && currentChannel
               ? getChannelName(currentChannel)
               : chatType === "direct" && nodes.get(activeChat)
-                ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
+                ? nodes.get(activeChat)?.user?.longName ?? nodeHex
                 : "Loading..."
           }`}
           actions={

src/pages/Nodes.tsx

@@ -1,13 +1,14 @@
 import Footer from "@app/components/UI/Footer";
 import { useAppStore } from "@app/core/stores/appStore";
-import { Sidebar } from "@components/Sidebar.js";
+import { Sidebar } from "@components/Sidebar.tsx";
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
-import { Mono } from "@components/generic/Mono.js";
+import { Mono } from "@components/generic/Mono.tsx";
-import { Table } from "@components/generic/Table/index.js";
+import { Table } from "@components/generic/Table/index.tsx";
-import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
+import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react";
 import { Fragment } from "react";
 import { base16 } from "rfc4648";
@@ -50,7 +51,7 @@ export const NodesPage = (): JSX.Element => {
                     ? `Meshtastic ${base16
                         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
                         .toLowerCase()}`
-                    : `UNK: ${node.num}`)}
+                    : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
 
               <Mono key="model">

src/validation/config/network.ts

@@ -41,21 +41,24 @@ export class NetworkValidation
 
 export class NetworkValidationIpV4Config
   implements
-    Omit<Protobuf.Config.Config_NetworkConfig_IpV4Config, keyof Message>
+    Omit<
+      Protobuf.Config.Config_NetworkConfig_IpV4Config,
+      keyof Message | "ip" | "gateway" | "subnet" | "dns"
+    >
 {
   @IsIP()
   @IsOptional()
-  ip: number;
+  ip: string;
 
   @IsIP()
   @IsOptional()
-  gateway: number;
+  gateway: string;
 
   @IsIP()
   @IsOptional()
-  subnet: number;
+  subnet: string;
 
   @IsIP()
   @IsOptional()
-  dns: number;
+  dns: string;
 }

src/validation/config/position.ts

@@ -43,7 +43,4 @@ export class PositionValidation
 
   @IsEnum(Protobuf.Config.Config_PositionConfig_GpsMode)
   gpsMode: Protobuf.Config.Config_PositionConfig_GpsMode;
-
-  @IsArray()
-  channelPrecision: number[];
 }

src/validation/rasterSource.ts

@@ -1,6 +1,6 @@
 import { IsArray, IsBoolean, IsNumber, IsString, IsUrl } from "class-validator";
 
-import type { RasterSource } from "@core/stores/appStore.js";
+import type { RasterSource } from "@core/stores/appStore.ts";
 
 export class MapValidation {
   @IsArray()

tsconfig.json

@@ -34,6 +34,7 @@
       "@types/w3c-web-serial"
     ],
     "strictPropertyInitialization": false,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "allowImportingTsExtensions": true,
   }
 }