@telemetryos/development-application-host-ui 1.6.0 → 1.7.0

package/dist/services/weather.d.ts

@@ -0,0 +1,446 @@
+import { z } from 'zod';
+import type { Bridge } from '@telemetryos/root-sdk/bridge';
+import type { WeatherConditions, WeatherForecast } from '@telemetryos/root-sdk';
+import type { Message } from './sdk-bridge';
+type WeatherListener = () => void;
+export declare function handleWeatherMessage(bridge: Bridge, message: Message): void;
+export declare function getConditions(): WeatherConditions;
+export declare function getDailyForecast(): WeatherForecast[];
+export declare function getHourlyForecast(): WeatherForecast[];
+export declare function setConditions(value: WeatherConditions): void;
+export declare function setDailyForecast(value: WeatherForecast[]): void;
+export declare function setHourlyForecast(value: WeatherForecast[]): void;
+export declare function onWeatherChange(listener: WeatherListener): () => void;
+export declare function resetWeatherToDefaults(units?: UnitSystem): void;
+export declare function getUnits(): UnitSystem;
+export declare function setUnits(units: UnitSystem): void;
+export declare function convertAllWeatherData(fromUnit: UnitSystem, toUnit: UnitSystem): void;
+export declare const WeatherConditionsSchema: z.ZodObject<{
+    CityEnglish: z.ZodString;
+    CityLocalized: z.ZodString;
+    CountryCode: z.ZodString;
+    Latitude: z.ZodNumber;
+    Longitude: z.ZodNumber;
+    Pod: z.ZodString;
+    Precip: z.ZodNumber;
+    Pressure: z.ZodNumber;
+    RelativeHumidity: z.ZodNumber;
+    State: z.ZodString;
+    Temp: z.ZodNumber;
+    Timestamp: z.ZodNumber;
+    Timezone: z.ZodString;
+    Visibility: z.ZodNumber;
+    WeatherCode: z.ZodString;
+    WeatherText: z.ZodString;
+    WindAbbr: z.ZodString;
+    WindDirectionDegrees: z.ZodString;
+    WindDirectionEnglish: z.ZodString;
+    WindDirectionLocalized: z.ZodString;
+    WindSpeed: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    CityEnglish: string;
+    CityLocalized: string;
+    CountryCode: string;
+    Latitude: number;
+    Pod: string;
+    Precip: number;
+    Pressure: number;
+    RelativeHumidity: number;
+    State: string;
+    Temp: number;
+    Timestamp: number;
+    Timezone: string;
+    Visibility: number;
+    WeatherCode: string;
+    WeatherText: string;
+    WindAbbr: string;
+    WindDirectionDegrees: string;
+    WindDirectionEnglish: string;
+    WindDirectionLocalized: string;
+    WindSpeed: number;
+    Longitude: number;
+}, {
+    CityEnglish: string;
+    CityLocalized: string;
+    CountryCode: string;
+    Latitude: number;
+    Pod: string;
+    Precip: number;
+    Pressure: number;
+    RelativeHumidity: number;
+    State: string;
+    Temp: number;
+    Timestamp: number;
+    Timezone: string;
+    Visibility: number;
+    WeatherCode: string;
+    WeatherText: string;
+    WindAbbr: string;
+    WindDirectionDegrees: string;
+    WindDirectionEnglish: string;
+    WindDirectionLocalized: string;
+    WindSpeed: number;
+    Longitude: number;
+}>;
+export declare const WeatherForecastSchema: z.ZodObject<{
+    Datetime: z.ZodString;
+    Pod: z.ZodString;
+    Label: z.ZodString;
+    WeatherCode: z.ZodString;
+    Timestamp: z.ZodNumber;
+    Temp: z.ZodNumber;
+    MinTemp: z.ZodNumber;
+    MaxTemp: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    Pod: string;
+    Temp: number;
+    Timestamp: number;
+    WeatherCode: string;
+    Datetime: string;
+    Label: string;
+    MinTemp: number;
+    MaxTemp: number;
+}, {
+    Pod: string;
+    Temp: number;
+    Timestamp: number;
+    WeatherCode: string;
+    Datetime: string;
+    Label: string;
+    MinTemp: number;
+    MaxTemp: number;
+}>;
+export declare const DailyForecastArraySchema: z.ZodArray<z.ZodObject<{
+    Datetime: z.ZodString;
+    Pod: z.ZodString;
+    Label: z.ZodString;
+    WeatherCode: z.ZodString;
+    Timestamp: z.ZodNumber;
+    Temp: z.ZodNumber;
+    MinTemp: z.ZodNumber;
+    MaxTemp: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    Pod: string;
+    Temp: number;
+    Timestamp: number;
+    WeatherCode: string;
+    Datetime: string;
+    Label: string;
+    MinTemp: number;
+    MaxTemp: number;
+}, {
+    Pod: string;
+    Temp: number;
+    Timestamp: number;
+    WeatherCode: string;
+    Datetime: string;
+    Label: string;
+    MinTemp: number;
+    MaxTemp: number;
+}>, "many">;
+export declare const HourlyForecastArraySchema: z.ZodArray<z.ZodObject<{
+    Datetime: z.ZodString;
+    Pod: z.ZodString;
+    Label: z.ZodString;
+    WeatherCode: z.ZodString;
+    Timestamp: z.ZodNumber;
+    Temp: z.ZodNumber;
+    MinTemp: z.ZodNumber;
+    MaxTemp: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    Pod: string;
+    Temp: number;
+    Timestamp: number;
+    WeatherCode: string;
+    Datetime: string;
+    Label: string;
+    MinTemp: number;
+    MaxTemp: number;
+}, {
+    Pod: string;
+    Temp: number;
+    Timestamp: number;
+    WeatherCode: string;
+    Datetime: string;
+    Label: string;
+    MinTemp: number;
+    MaxTemp: number;
+}>, "many">;
+export declare function validateConditionsJson(json: string): {
+    success: boolean;
+    data?: WeatherConditions;
+    error?: string;
+};
+export declare function validateDailyForecastJson(json: string): {
+    success: boolean;
+    data?: WeatherForecast[];
+    error?: string;
+};
+export declare function validateHourlyForecastJson(json: string): {
+    success: boolean;
+    data?: WeatherForecast[];
+    error?: string;
+};
+export declare const weatherConditions: readonly [{
+    readonly code: "1";
+    readonly label: "Clear sky";
+    readonly temp: 28;
+    readonly precip: 0;
+    readonly humidity: 35;
+    readonly visibility: 20;
+    readonly windSpeed: 3;
+    readonly pressure: 1020;
+}, {
+    readonly code: "2";
+    readonly label: "Few clouds";
+    readonly temp: 24;
+    readonly precip: 0;
+    readonly humidity: 45;
+    readonly visibility: 18;
+    readonly windSpeed: 6;
+    readonly pressure: 1018;
+}, {
+    readonly code: "3";
+    readonly label: "Scattered clouds";
+    readonly temp: 21;
+    readonly precip: 0;
+    readonly humidity: 50;
+    readonly visibility: 15;
+    readonly windSpeed: 8;
+    readonly pressure: 1015;
+}, {
+    readonly code: "4";
+    readonly label: "Broken clouds";
+    readonly temp: 18;
+    readonly precip: 0;
+    readonly humidity: 55;
+    readonly visibility: 12;
+    readonly windSpeed: 10;
+    readonly pressure: 1012;
+}, {
+    readonly code: "8";
+    readonly label: "Overcast clouds";
+    readonly temp: 15;
+    readonly precip: 0;
+    readonly humidity: 65;
+    readonly visibility: 8;
+    readonly windSpeed: 12;
+    readonly pressure: 1008;
+}, {
+    readonly code: "18";
+    readonly label: "Light rain";
+    readonly temp: 14;
+    readonly precip: 2;
+    readonly humidity: 80;
+    readonly visibility: 6;
+    readonly windSpeed: 12;
+    readonly pressure: 1005;
+}, {
+    readonly code: "19";
+    readonly label: "Moderate rain";
+    readonly temp: 12;
+    readonly precip: 5;
+    readonly humidity: 88;
+    readonly visibility: 4;
+    readonly windSpeed: 15;
+    readonly pressure: 1000;
+}, {
+    readonly code: "20";
+    readonly label: "Heavy rain";
+    readonly temp: 11;
+    readonly precip: 12;
+    readonly humidity: 95;
+    readonly visibility: 2;
+    readonly windSpeed: 20;
+    readonly pressure: 995;
+}, {
+    readonly code: "21";
+    readonly label: "Light snow";
+    readonly temp: -2;
+    readonly precip: 1;
+    readonly humidity: 85;
+    readonly visibility: 4;
+    readonly windSpeed: 8;
+    readonly pressure: 1010;
+}, {
+    readonly code: "22";
+    readonly label: "Snow";
+    readonly temp: -5;
+    readonly precip: 4;
+    readonly humidity: 90;
+    readonly visibility: 2;
+    readonly windSpeed: 12;
+    readonly pressure: 1005;
+}, {
+    readonly code: "29";
+    readonly label: "Thunderstorm";
+    readonly temp: 18;
+    readonly precip: 20;
+    readonly humidity: 95;
+    readonly visibility: 1;
+    readonly windSpeed: 28;
+    readonly pressure: 985;
+}];
+export declare function getRandomCondition(): {
+    readonly code: "1";
+    readonly label: "Clear sky";
+    readonly temp: 28;
+    readonly precip: 0;
+    readonly humidity: 35;
+    readonly visibility: 20;
+    readonly windSpeed: 3;
+    readonly pressure: 1020;
+} | {
+    readonly code: "2";
+    readonly label: "Few clouds";
+    readonly temp: 24;
+    readonly precip: 0;
+    readonly humidity: 45;
+    readonly visibility: 18;
+    readonly windSpeed: 6;
+    readonly pressure: 1018;
+} | {
+    readonly code: "3";
+    readonly label: "Scattered clouds";
+    readonly temp: 21;
+    readonly precip: 0;
+    readonly humidity: 50;
+    readonly visibility: 15;
+    readonly windSpeed: 8;
+    readonly pressure: 1015;
+} | {
+    readonly code: "4";
+    readonly label: "Broken clouds";
+    readonly temp: 18;
+    readonly precip: 0;
+    readonly humidity: 55;
+    readonly visibility: 12;
+    readonly windSpeed: 10;
+    readonly pressure: 1012;
+} | {
+    readonly code: "8";
+    readonly label: "Overcast clouds";
+    readonly temp: 15;
+    readonly precip: 0;
+    readonly humidity: 65;
+    readonly visibility: 8;
+    readonly windSpeed: 12;
+    readonly pressure: 1008;
+} | {
+    readonly code: "18";
+    readonly label: "Light rain";
+    readonly temp: 14;
+    readonly precip: 2;
+    readonly humidity: 80;
+    readonly visibility: 6;
+    readonly windSpeed: 12;
+    readonly pressure: 1005;
+} | {
+    readonly code: "19";
+    readonly label: "Moderate rain";
+    readonly temp: 12;
+    readonly precip: 5;
+    readonly humidity: 88;
+    readonly visibility: 4;
+    readonly windSpeed: 15;
+    readonly pressure: 1000;
+} | {
+    readonly code: "20";
+    readonly label: "Heavy rain";
+    readonly temp: 11;
+    readonly precip: 12;
+    readonly humidity: 95;
+    readonly visibility: 2;
+    readonly windSpeed: 20;
+    readonly pressure: 995;
+} | {
+    readonly code: "21";
+    readonly label: "Light snow";
+    readonly temp: -2;
+    readonly precip: 1;
+    readonly humidity: 85;
+    readonly visibility: 4;
+    readonly windSpeed: 8;
+    readonly pressure: 1010;
+} | {
+    readonly code: "22";
+    readonly label: "Snow";
+    readonly temp: -5;
+    readonly precip: 4;
+    readonly humidity: 90;
+    readonly visibility: 2;
+    readonly windSpeed: 12;
+    readonly pressure: 1005;
+} | {
+    readonly code: "29";
+    readonly label: "Thunderstorm";
+    readonly temp: 18;
+    readonly precip: 20;
+    readonly humidity: 95;
+    readonly visibility: 1;
+    readonly windSpeed: 28;
+    readonly pressure: 985;
+};
+export declare const cityPresets: readonly [{
+    readonly name: "Vancouver";
+    readonly latitude: 49.24966;
+    readonly longitude: -123.11934;
+    readonly timezone: "America/Vancouver";
+    readonly countryCode: "CA";
+    readonly state: "";
+}, {
+    readonly name: "Sydney";
+    readonly latitude: -33.86785;
+    readonly longitude: 151.20732;
+    readonly timezone: "Australia/Sydney";
+    readonly countryCode: "AU";
+    readonly state: "";
+}, {
+    readonly name: "Tokyo";
+    readonly latitude: 35.6762;
+    readonly longitude: 139.6503;
+    readonly timezone: "Asia/Tokyo";
+    readonly countryCode: "JP";
+    readonly state: "";
+}, {
+    readonly name: "London";
+    readonly latitude: 51.5074;
+    readonly longitude: -0.1278;
+    readonly timezone: "Europe/London";
+    readonly countryCode: "GB";
+    readonly state: "";
+}, {
+    readonly name: "New York";
+    readonly latitude: 40.7128;
+    readonly longitude: -74.006;
+    readonly timezone: "America/New_York";
+    readonly countryCode: "US";
+    readonly state: "NY";
+}];
+export declare function degreesToDirection(degrees: number): {
+    abbr: string;
+    english: string;
+};
+export declare function getPodForHour(hour: number): string;
+export declare function getCurrentPod(): string;
+export declare function createDefaultConditions(): WeatherConditions;
+export declare function createDefaultDailyForecast(): WeatherForecast[];
+export declare function createDefaultHourlyForecast(): WeatherForecast[];
+export declare function generateWarmerDailyForecast(currentTemp: number, units?: UnitSystem): WeatherForecast[];
+export declare function generateColderDailyForecast(currentTemp: number, units?: UnitSystem): WeatherForecast[];
+export declare function generateWarmerHourlyForecast(currentTemp: number, units?: UnitSystem): WeatherForecast[];
+export declare function generateColderHourlyForecast(currentTemp: number, units?: UnitSystem): WeatherForecast[];
+export type UnitSystem = 'metric' | 'imperial';
+export declare function celsiusToFahrenheit(c: number): number;
+export declare function fahrenheitToCelsius(f: number): number;
+export declare function msToMph(ms: number): number;
+export declare function mphToMs(mph: number): number;
+export declare function hPaToInHg(hPa: number): number;
+export declare function inHgToHPa(inHg: number): number;
+export declare function kmToMiles(km: number): number;
+export declare function milesToKm(miles: number): number;
+export declare function mmToInches(mm: number): number;
+export declare function inchesToMm(inches: number): number;
+export declare function convertConditionsToUnits(cond: WeatherConditions, fromUnit: UnitSystem, toUnit: UnitSystem): WeatherConditions;
+export declare function convertForecastToUnits(forecast: WeatherForecast[], fromUnit: UnitSystem, toUnit: UnitSystem): WeatherForecast[];
+export {};

package/dist/services/worker-runner.d.ts

@@ -0,0 +1,12 @@
+export declare class WorkerRunner {
+    onMessage: ((message: any) => void) | null;
+    _workers: Map<string, Worker>;
+    _currentDependencies: Record<string, string[]>;
+    _unsubscribeConfig: (() => void) | null;
+    constructor();
+    setDependencies(applicationSpecifiers: Record<string, string[]>): Promise<void>;
+    send(message: any): void;
+    _reconcileWorkers(): void;
+    destroy(): void;
+}
+export declare const workerRunner: WorkerRunner;

package/dist/types/stubs.d.ts

@@ -25,7 +25,7 @@ export interface MediaFolderStubConfig {
     children: MediaFolderStubConfig[];
 }
 export interface EnvironmentStubConfig {
-    colorScheme: 'dark' | 'light';
+    colorScheme: 'dark' | 'light' | 'system';
 }
 export type ApplicationStubConfig = {
     name: string;
@@ -87,9 +87,6 @@ export type WeatherStubConfig = {
     conditions?: WeatherConditionsStub;
     dailyForecast?: WeatherForecastStub[];
     hourlyForecast?: WeatherForecastStub[];
-    accuWeatherConditions?: Record<string, any>;
-    accuWeatherDailyForecast?: Record<string, any>;
-    accuWeatherHourlyForecast?: Record<string, any>;
 };
 export interface StubsConfig {
     device: DeviceStubConfig;

package/dist/utilities/do-async.d.ts

@@ -0,0 +1 @@
+export declare function doAsync(fn: () => Promise<any> | any, onRejected?: (err: any) => void): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telemetryos/development-application-host-ui",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "The official TelemetryOS application CLI package. Use it to build applications that run on the TelemetryOS platform",
   "type": "module",
   "files": [
@@ -24,8 +24,6 @@
     "@types/node": "^22.15.3",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.32.0",
-    "@typescript-eslint/parser": "^8.32.0",
     "@vitejs/plugin-react": "^5.0.2",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.2",
@@ -33,19 +31,21 @@
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.0",
+    "typescript-eslint": "^8.49.0",
     "vite": "^6.3.5",
     "vitest": "^3.1.3"
   },
   "dependencies": {
     "@hugeicons/core-free-icons": "^1.0.5",
     "@hugeicons/react": "^1.0.5",
-    "@telemetryos/root-sdk": "^1.6.0",
+    "@telemetryos/root-sdk": "^1.7.0",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "zod": "^3.24.0"
   },
   "scripts": {
     "build": "vite build",
-    "dev": "vite"
+    "dev": "vite",
+    "watch": "vite build -w --emptyOutDir false"
   }
 }

package/dist/assets/index-BN-rsOqF.css

@@ -1 +0,0 @@
-*{box-sizing:border-box}html{height:100%;font-family:Arial,sans-serif}body{display:flex;flex-direction:column;min-height:100%;margin:0;background:#1b1b1d;font-family:Rubik,sans-serif}#app{display:flex;flex:1}.app__canvas-surround{display:flex;flex:1;padding:20px;min-width:0;min-height:0}.canvas{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:center}.canvas__application-container{position:relative;display:flex;flex-direction:column;border:1px solid rgb(54,52,55);border-radius:8px;background:#1b1b1d}.canvas__application-container iframe{flex:1;border:none}.canvas__application-container-drag-handle{position:absolute;bottom:2px;right:2px;display:flex;align-items:center;justify-content:center;width:12px;height:12px;opacity:.3;cursor:se-resize}.canvas__application-container-drag-handle svg{width:12px;height:12px}.application-info{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:16px;background:#17191c;font-family:Rubik,sans-serif}.application-info__loading,.application-info__empty{padding:20px;color:#94a3b8;font-size:13px;text-align:center;font-style:italic}.application-info__section{margin-bottom:24px}.application-info__section:last-child{margin-bottom:0}.application-info__section-title{color:#d4e0ed;font-size:14px;font-weight:600;margin:0 0 12px}.application-info__field{margin-bottom:12px}.application-info__field:last-child{margin-bottom:0}.application-info__label{display:block;color:#94a3b8;font-size:12px;font-weight:500;margin-bottom:6px}.application-info__value{color:#d4e0ed;font-size:13px;padding:8px 12px;background:#22252a;border:1px solid hsl(220,10%,20%);border-radius:6px;word-break:break-all}.application-settings{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:16px;background:#17191c;font-family:Rubik,sans-serif}.application-settings__loading,.application-settings__empty{padding:20px;color:#94a3b8;font-size:13px;text-align:center;font-style:italic}.device-config{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:16px;background:#17191c;font-family:Rubik,sans-serif}.device-config__section{margin-bottom:24px}.device-config__section:last-child{margin-bottom:0}.device-config__section-title{color:#d4e0ed;font-size:14px;font-weight:600;margin:0 0 12px}.device-config__field{margin-bottom:12px}.device-config__field:last-child{margin-bottom:0}.device-config__label{display:block;color:#94a3b8;font-size:12px;font-weight:500;margin-bottom:6px}.device-config__input,.device-config__select{width:100%;height:40px;padding:8px 12px;background:#22252a;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#d4e0ed;font-size:13px;font-family:inherit;transition:border-color .2s ease-linear}.device-config__input::placeholder,.device-config__select::placeholder{color:#94a3b8}.device-config__input:focus,.device-config__select:focus{outline:1px solid hsl(39,93%,59%);outline-offset:0;border-color:#f8b435;box-shadow:none}.account-config{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:16px;background:#17191c;font-family:Rubik,sans-serif}.account-config__loading,.account-config__empty{padding:20px;color:#94a3b8;font-size:13px;text-align:center;font-style:italic}.account-config__section{margin-bottom:24px}.account-config__section:last-child{margin-bottom:0}.account-config__section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.account-config__section-title{color:#d4e0ed;font-size:14px;font-weight:600;margin:0 0 12px}.account-config__section-header .account-config__section-title{margin:0}.account-config__field{margin-bottom:12px}.account-config__field:last-child{margin-bottom:0}.account-config__label{display:block;color:#94a3b8;font-size:12px;font-weight:500;margin-bottom:6px}.account-config__value{color:#d4e0ed;font-size:13px;padding:8px 12px;background:#22252a;border:1px solid hsl(220,10%,20%);border-radius:6px;word-break:break-all}.account-config__input,.account-config__select{width:100%;height:40px;padding:8px 12px;background:#22252a;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#d4e0ed;font-size:13px;font-family:inherit;transition:border-color .2s ease-linear}.account-config__input::placeholder,.account-config__select::placeholder{color:#94a3b8}.account-config__input:focus,.account-config__select:focus{outline:1px solid hsl(39,93%,59%);outline-offset:0;border-color:#f8b435;box-shadow:none}.account-config__button{height:36px;padding:6px 12px;background:#f8b435;border:none;border-radius:6px;color:#000;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease-linear}.account-config__button:hover{background:#f7a918}.account-config__button:active{background:#ec9d09}.account-config__button--small{height:32px;padding:4px 8px;font-size:12px}.account-config__button--danger{background:#f15746;border:none;color:#f8fafc}.account-config__button--danger:hover{background:#ef3d2a}.account-config__button--danger:active{background:#ed2812}.account-config__item{padding:12px;margin-bottom:12px;background:#22252a;border:1px solid hsl(220,10%,20%);border-radius:8px}.account-config__item:last-child{margin-bottom:0}.account-config__item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid hsl(220,10%,20%)}.account-config__item-title{color:#d4e0ed;font-size:12px;font-weight:600}.media-config{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:16px;background:#17191c;font-family:Rubik,sans-serif}.media-config__empty{padding:20px;color:#94a3b8;font-size:13px;text-align:center;font-style:italic}.media-config__section{margin-bottom:24px}.media-config__section:last-child{margin-bottom:0}.media-config__section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.media-config__section-title{color:#d4e0ed;font-size:14px;font-weight:600;margin:0 0 12px}.media-config__section-header .media-config__section-title{margin:0}.media-config__field{margin-bottom:12px}.media-config__field:last-child{margin-bottom:0}.media-config__label{display:block;color:#94a3b8;font-size:12px;font-weight:500;margin-bottom:6px}.media-config__input{width:100%;height:40px;padding:8px 12px;background:#22252a;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#d4e0ed;font-size:13px;font-family:inherit;transition:border-color .2s ease-linear}.media-config__input::placeholder{color:#94a3b8}.media-config__input:focus{outline:1px solid hsl(39,93%,59%);outline-offset:0;border-color:#f8b435;box-shadow:none}.media-config__button{height:36px;padding:6px 12px;background:#f8b435;border:none;border-radius:6px;color:#000;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease-linear}.media-config__button:hover{background:#f7a918}.media-config__button:active{background:#ec9d09}.media-config__button--small{height:32px;padding:4px 8px;font-size:12px}.media-config__button--danger{background:#f15746;border:none;color:#f8fafc}.media-config__button--danger:hover{background:#ef3d2a}.media-config__button--danger:active{background:#ed2812}.media-config__item{padding:12px;margin-bottom:12px;background:#22252a;border:1px solid hsl(220,10%,20%);border-radius:8px}.media-config__item:last-child{margin-bottom:0}.media-config__item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid hsl(220,10%,20%)}.media-config__item-title{color:#d4e0ed;font-size:12px;font-weight:600}.right-sidebar{display:flex;flex-direction:row;width:400px}.right-sidebar__nav{display:flex;flex-direction:column;width:64px;padding:16px 8px;gap:4px;background:#121416;border-right:1px solid hsl(220,10%,15%);align-items:center}.right-sidebar__nav-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:transparent;border:1px solid rgba(255,255,255,.05);border-radius:8px;color:#fff6;font-size:20px;font-family:Rubik,sans-serif;font-weight:400;cursor:pointer;transition:all .15s ease}.right-sidebar__nav-button:hover{border-color:#ffffff26;color:#fff9}.right-sidebar__nav-button--active{border-color:#f8b435;color:#f8b435}.right-sidebar__nav-icon{display:block}.right-sidebar__container{display:flex;flex-direction:column;flex:1;overflow:hidden;background:#17191c;font-family:Rubik,sans-serif}.right-sidebar__header{display:flex;align-items:center;height:48px;padding:0 16px;border-bottom:1px solid hsl(220,10%,20%);background:#17191c;flex-shrink:0}.right-sidebar__header-title{color:#d4e0ed;font-size:14px;font-weight:600}.right-sidebar__content{flex:1;overflow:hidden;display:flex;flex-direction:column;background:#17191c}.scaling-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0}.scaling-container__inner{display:flex;flex-direction:column}