chore: 🚨 lint client

packages/client/src/account.ts

@@ -1,10 +1,10 @@
+import type * as misskey from "firefish-js";
+import { defineAsyncComponent, reactive } from "vue";
+import { i18n } from "./i18n";
 import { apiUrl } from "@/config";
 import { alert, api, popup, popupMenu, success, waiting } from "@/os";
 import { del, get, set } from "@/scripts/idb-proxy";
 import { reloadChannel, unisonReload } from "@/scripts/unison-reload";
-import type * as misskey from "firefish-js";
-import { defineAsyncComponent, reactive } from "vue";
-import { i18n } from "./i18n";
 
 // TODO: 他のタブと永続化されたstateを同期
 

packages/client/src/components/mfm.ts

@@ -1,3 +1,6 @@
+import * as mfm from "mfm-js";
+import { defineComponent, h } from "vue";
+import type { VNode } from "vue";
 import MkCode from "@/components/MkCode.vue";
 import MkFormula from "@/components/MkFormula.vue";
 import MkGoogle from "@/components/MkGoogle.vue";
@@ -11,9 +14,6 @@ import { host } from "@/config";
 import { concat } from "@/scripts/array";
 import { reducedMotion } from "@/scripts/reduced-motion";
 import { defaultStore } from "@/store";
-import * as mfm from "mfm-js";
-import { defineComponent, h } from "vue";
-import type { VNode } from "vue";
 
 export default defineComponent({
 	props: {

packages/client/src/directives/follow-append.ts

@@ -1,5 +1,5 @@
-import { getScrollContainer, getScrollPosition } from "@/scripts/scroll";
 import type { Directive } from "vue";
+import { getScrollContainer, getScrollPosition } from "@/scripts/scroll";
 
 export default {
 	mounted(src, binding, vn) {

packages/client/src/directives/tooltip.ts

@@ -1,11 +1,11 @@
 // TODO: useTooltip関数使うようにしたい
 // ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
 
+import type { Directive } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { alert, popup } from "@/os";
 import { mainRouter } from "@/router";
 import { isTouchUsing } from "@/scripts/touch";
-import type { Directive } from "vue";
-import { defineAsyncComponent, ref } from "vue";
 
 const start = isTouchUsing ? "touchstart" : "mouseover";
 const end = isTouchUsing ? "touchend" : "mouseleave";

packages/client/src/directives/user-preview.ts

@@ -1,6 +1,6 @@
-import { popup } from "@/os";
 import type { Directive } from "vue";
 import { defineAsyncComponent, ref } from "vue";
+import { popup } from "@/os";
 
 export class UserPreview {
 	private el;

packages/client/src/filters/user.ts

@@ -1,6 +1,6 @@
-import { url } from "@/config";
 import type * as misskey from "firefish-js";
 import * as Acct from "firefish-js/built/acct";
+import { url } from "@/config";
 
 export const acct = (user: misskey.Acct) => {
 	return Acct.toString(user);

packages/client/src/i18n.ts

@@ -1,6 +1,6 @@
+import { markRaw } from "vue";
 import { locale } from "@/config";
 import { I18n } from "@/scripts/i18n";
-import { markRaw } from "vue";
 
 export const i18n = markRaw(new I18n(locale));
 

packages/client/src/navbar.ts

@@ -1,10 +1,10 @@
+import { computed, reactive, ref } from "vue";
+import { $i } from "./account";
 import { ui } from "@/config";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 import { search } from "@/scripts/search";
 import { unisonReload } from "@/scripts/unison-reload";
-import { computed, reactive, ref } from "vue";
-import { $i } from "./account";
 
 export const navbarItemDef = reactive({
 	notifications: {

packages/client/src/nirax.ts

@@ -1,10 +1,10 @@
 // NIRAX --- A lightweight router
 
-import { pleaseLogin } from "@/scripts/please-login";
-import { safeURIDecode } from "@/scripts/safe-uri-decode";
 import { EventEmitter } from "eventemitter3";
 import type { Component, ShallowRef } from "vue";
 import { Ref, ref, shallowRef } from "vue";
+import { safeURIDecode } from "@/scripts/safe-uri-decode";
+import { pleaseLogin } from "@/scripts/please-login";
 
 interface RouteDef {
 	path: string;
@@ -93,8 +93,8 @@ export class Router extends EventEmitter<{
 	}
 
 	public resolve(path: string): Resolved | null {
-		let queryString: string | null = null;
-		let hash: string | null = null;
+		let queryString: string | null = null,
+			hash: string | null = null;
 		if (path[0] === "/") path = path.substring(1);
 		if (path.includes("#")) {
 			hash = path.substring(path.indexOf("#") + 1);

packages/client/src/os.ts

@@ -1,18 +1,18 @@
 // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 
-import { $i } from "@/account";
-import MkDialog from "@/components/MkDialog.vue";
-import MkPostFormDialog from "@/components/MkPostFormDialog.vue";
-import MkToast from "@/components/MkToast.vue";
-import MkWaitingDialog from "@/components/MkWaitingDialog.vue";
-import { url, apiUrl } from "@/config";
-import type { MenuItem } from "@/types/menu";
 import { EventEmitter } from "eventemitter3";
 import * as Misskey from "firefish-js";
 import insertTextAtCursor from "insert-text-at-cursor";
 import type { Component, Ref } from "vue";
 import { defineAsyncComponent, markRaw, ref } from "vue";
 import { i18n } from "./i18n";
+import { $i } from "@/account";
+import MkDialog from "@/components/MkDialog.vue";
+import MkPostFormDialog from "@/components/MkPostFormDialog.vue";
+import MkToast from "@/components/MkToast.vue";
+import MkWaitingDialog from "@/components/MkWaitingDialog.vue";
+import { apiUrl, url } from "@/config";
+import type { MenuItem } from "@/types/menu";
 
 export const pendingApiRequestsCount = ref(0);
 
@@ -772,8 +772,8 @@ type AwaitType<T> = T extends Promise<infer U>
 	: T extends (...args: any[]) => Promise<infer V>
 	? V
 	: T;
-let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null;
-let activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
+let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null,
+	activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
 export async function openEmojiPicker(
 	src: HTMLElement,
 	opts,

packages/client/src/plugin.ts

@@ -1,3 +1,6 @@
+import { AiScript, utils, values } from "@syuilo/aiscript";
+import { jsToVal } from "@syuilo/aiscript/built/interpreter/util";
+import { deserialize } from "@syuilo/aiscript/built/serializer";
 import { inputText } from "@/os";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
 import {
@@ -7,9 +10,6 @@ import {
 	postFormActions,
 	userActions,
 } from "@/store";
-import { AiScript, utils, values } from "@syuilo/aiscript";
-import { jsToVal } from "@syuilo/aiscript/built/interpreter/util";
-import { deserialize } from "@syuilo/aiscript/built/serializer";
 
 const pluginContexts = new Map<string, AiScript>();
 

packages/client/src/router.ts

@@ -1,11 +1,11 @@
+import type { AsyncComponentLoader } from "vue";
+import { defineAsyncComponent, inject } from "vue";
 import { $i, iAmModerator } from "@/account";
 import { ui } from "@/config";
 import { Router } from "@/nirax";
 import { api } from "@/os";
 import MkError from "@/pages/_error_.vue";
 import MkLoading from "@/pages/_loading_.vue";
-import type { AsyncComponentLoader } from "vue";
-import { defineAsyncComponent, inject } from "vue";
 
 function getGuestTimelineStatus() {
 	api("meta", {

packages/client/src/scripts/aiscript/api.ts

@@ -1,6 +1,6 @@
+import { utils, values } from "@syuilo/aiscript";
 import { $i } from "@/account";
 import * as os from "@/os";
-import { utils, values } from "@syuilo/aiscript";
 
 export function createAiScriptEnv(opts) {
 	let apiRequests = 0;

packages/client/src/scripts/autocomplete.ts

@@ -1,8 +1,8 @@
-import { popup } from "@/os";
 import { toASCII } from "punycode/";
 import getCaretCoordinates from "textarea-caret";
 import type { Ref } from "vue";
 import { defineAsyncComponent, nextTick, ref } from "vue";
+import { popup } from "@/os";
 
 export class Autocomplete {
 	private suggestion: {

packages/client/src/scripts/emojilist.ts

@@ -1,8 +1,8 @@
-import { defaultStore } from "@/store";
 import keywordSet from "emojilib";
 import individualData from "unicode-emoji-json/data-by-emoji.json";
 import data from "unicode-emoji-json/data-by-group.json";
 import emojiComponents from "unicode-emoji-json/data-emoji-components.json";
+import { defaultStore } from "@/store";
 
 export interface UnicodeEmojiDef {
 	emoji: string;

packages/client/src/scripts/extract-url-from-mfm.ts

@@ -1,5 +1,5 @@
-import { unique } from "@/scripts/array";
 import * as mfm from "mfm-js";
+import { unique } from "@/scripts/array";
 
 // unique without hash
 // [ http://a/#1, http://a/#2, http://b/#3 ] => [ http://a/#1, http://b/#3 ]

packages/client/src/scripts/gen-search-query.ts

@@ -1,9 +1,8 @@
-import { host as localHost } from "@/config";
 import * as Acct from "firefish-js/built/acct";
+import { host as localHost } from "@/config";
 
 export async function genSearchQuery(v: any, q: string) {
-	let host: string;
-	let userId: string;
+	let host: string, userId: string;
 	if (q.split(" ").some((x) => x.startsWith("@"))) {
 		for (const at of q
 			.split(" ")

packages/client/src/scripts/get-note-menu.ts

@@ -1,3 +1,6 @@
+import type * as misskey from "firefish-js";
+import type { Ref } from "vue";
+import { defineAsyncComponent, inject } from "vue";
 import { $i } from "@/account";
 import { url } from "@/config";
 import { i18n } from "@/i18n";
@@ -7,9 +10,6 @@ import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { getUserMenu } from "@/scripts/get-user-menu";
 import { shareAvailable } from "@/scripts/share-available";
 import { noteActions } from "@/store";
-import type * as misskey from "firefish-js";
-import type { Ref } from "vue";
-import { defineAsyncComponent, inject } from "vue";
 
 export function getNoteMenu(props: {
 	note: misskey.entities.Note;

packages/client/src/scripts/get-note-summary.ts

@@ -1,5 +1,5 @@
-import { i18n } from "@/i18n";
 import type * as misskey from "firefish-js";
+import { i18n } from "@/i18n";
 
 /**
  * 投稿を表す文字列を取得します。

packages/client/src/scripts/get-user-menu.ts

@@ -1,3 +1,5 @@
+import * as Acct from "firefish-js/built/acct";
+import { defineAsyncComponent } from "vue";
 import { $i, iAmModerator } from "@/account";
 import { host } from "@/config";
 import { i18n } from "@/i18n";
@@ -6,8 +8,6 @@ import * as os from "@/os";
 import { mainRouter } from "@/router";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { userActions } from "@/store";
-import * as Acct from "firefish-js/built/acct";
-import { defineAsyncComponent } from "vue";
 
 export function getUserMenu(user, router: Router = mainRouter) {
 	const meId = $i ? $i.id : null;

packages/client/src/scripts/helpMenu.ts

@@ -1,9 +1,9 @@
+import XTutorial from "../components/MkTutorialDialog.vue";
 import { host } from "@/config";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
-import XTutorial from "../components/MkTutorialDialog.vue";
 
 export function openHelpMenu_(ev: MouseEvent) {
 	os.popupMenu(

packages/client/src/scripts/hpml/evaluator.ts

@@ -1,16 +1,16 @@
-import { version } from "@/config";
-import * as os from "@/os";
 import { AiScript, utils, values } from "@syuilo/aiscript";
 import autobind from "autobind-decorator";
 import type { Ref } from "vue";
 import { markRaw, ref, unref } from "vue";
-import { HpmlError, HpmlScope } from ".";
-import type { Fn, PageVar, envVarsDef } from ".";
 import { createAiScriptEnv } from "../aiscript/api";
 import { collectPageVars } from "../collect-page-vars";
 import type { Expr, Variable } from "./expr";
 import { isLiteralValue } from "./expr";
 import { initAiLib, initHpmlLib } from "./lib";
+import type { Fn, PageVar, envVarsDef } from ".";
+import { HpmlError, HpmlScope } from ".";
+import * as os from "@/os";
+import { version } from "@/config";
 
 /**
  * Hpml evaluator

packages/client/src/scripts/hpml/lib.ts

@@ -1,9 +1,9 @@
 import { utils, values } from "@syuilo/aiscript";
 import seedrandom from "seedrandom";
 import tinycolor from "tinycolor2";
-import type { Fn, HpmlScope } from ".";
 import type { Hpml } from "./evaluator";
 import type { Expr } from "./expr";
+import type { Fn, HpmlScope } from ".";
 
 /* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
 // https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs

packages/client/src/scripts/hpml/type-checker.ts

@@ -1,9 +1,9 @@
 import autobind from "autobind-decorator";
-import { envVarsDef } from ".";
-import type { PageVar, Type } from ".";
 import type { Expr, Variable } from "./expr";
 import { isLiteralValue } from "./expr";
 import { funcDefs } from "./lib";
+import type { PageVar, Type } from ".";
+import { envVarsDef } from ".";
 
 interface TypeError {
 	arg: number;

packages/client/src/scripts/katex-macro.ts

@@ -61,8 +61,8 @@ function parseSingleKaTeXMacro(src: string): [string, KaTeXMacro] {
 	currentPos = skipSpaces(currentPos);
 
 	while (currentPos < src.length - 1) {
-		let numbersignPos = -1;
-		let isEscaped = false;
+		let numbersignPos = -1,
+			isEscaped = false;
 
 		for (let i = currentPos; i < src.length - 1; ++i) {
 			if (src[i] !== "\\" && src[i] !== "#") {
@@ -210,15 +210,15 @@ function expandKaTeXMacroOnce(
 		--maxNumberOfExpansions;
 
 		// search for a custom macro
-		let checkedPos = beginPos - 1;
-		let macroName = "";
-		let macroBackslashPos = 0;
-		// for macros w/o args: unused
-		//            w/  args: the first open bracket ("(", "{", or "[") after cmd name
-		let macroArgBeginPos = 0;
-		// for macros w/o args: the end of cmd name
-		//            w/  args: the closing bracket of the last arg
-		let macroArgEndPos = 0;
+		let checkedPos = beginPos - 1,
+			macroName = "",
+			macroBackslashPos = 0,
+			// for macros w/o args: unused
+			//            w/  args: the first open bracket ("(", "{", or "[") after cmd name
+			macroArgBeginPos = 0,
+			// for macros w/o args: the end of cmd name
+			//            w/  args: the closing bracket of the last arg
+			macroArgEndPos = 0;
 
 		while (checkedPos < endPos) {
 			checkedPos = src.indexOf("\\", checkedPos + 1);

packages/client/src/scripts/lookup-user.ts

@@ -1,6 +1,6 @@
+import * as Acct from "firefish-js/built/acct";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
-import * as Acct from "firefish-js/built/acct";
 
 export async function lookupUser() {
 	const { canceled, result } = await os.inputText({

packages/client/src/scripts/please-login.ts

@@ -1,7 +1,7 @@
+import { defineAsyncComponent } from "vue";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { popup } from "@/os";
-import { defineAsyncComponent } from "vue";
 
 export function pleaseLogin(path?: string) {
 	if ($i) return;

packages/client/src/scripts/popout.ts

@@ -1,5 +1,5 @@
-import * as config from "@/config";
 import { appendQuery } from "./url";
+import * as config from "@/config";
 
 export function popout(path: string, w?: HTMLElement) {
 	let url =

packages/client/src/scripts/popup-position.ts

@@ -22,8 +22,7 @@ export function calcPopupPosition(
 	}
 
 	const calcPosWhenTop = () => {
-		let left: number;
-		let top: number;
+		let left: number, top: number;
 
 		if (props.anchorElement) {
 			left =
@@ -44,8 +43,7 @@ export function calcPopupPosition(
 	};
 
 	const calcPosWhenBottom = () => {
-		let left: number;
-		let top: number;
+		let left: number, top: number;
 
 		if (props.anchorElement) {
 			left =
@@ -70,8 +68,7 @@ export function calcPopupPosition(
 	};
 
 	const calcPosWhenLeft = () => {
-		let left: number;
-		let top: number;
+		let left: number, top: number;
 
 		if (props.anchorElement) {
 			left = rect.left + window.pageXOffset - contentWidth - props.innerMargin;
@@ -92,8 +89,7 @@ export function calcPopupPosition(
 	};
 
 	const calcPosWhenRight = () => {
-		let left: number;
-		let top: number;
+		let left: number, top: number;
 
 		if (props.anchorElement) {
 			left =

packages/client/src/scripts/preprocess.ts

@@ -1,6 +1,6 @@
+import * as mfm from "mfm-js";
 import { expandKaTeXMacro } from "@/scripts/katex-macro";
 import { defaultStore } from "@/store";
-import * as mfm from "mfm-js";
 
 export function preprocess(text: string): string {
 	if (defaultStore.state.enableCustomKaTeXMacro) {

packages/client/src/scripts/reaction-picker.ts

@@ -1,6 +1,6 @@
-import { popup } from "@/os";
 import type { Ref } from "vue";
 import { defineAsyncComponent, ref } from "vue";
+import { popup } from "@/os";
 
 class ReactionPicker {
 	private src: Ref<HTMLElement | null> = ref(null);

packages/client/src/scripts/select-file.ts

@@ -1,10 +1,10 @@
+import type { DriveFile } from "firefish-js/built/entities";
+import { ref } from "vue";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 import { uploadFile } from "@/scripts/upload";
 import { defaultStore } from "@/store";
 import { stream } from "@/stream";
-import type { DriveFile } from "firefish-js/built/entities";
-import { ref } from "vue";
 
 function select(
 	src: any,

packages/client/src/scripts/shuffle.ts

@@ -2,8 +2,8 @@
  * 配列をシャッフル (破壊的)
  */
 export function shuffle<T extends any[]>(array: T): T {
-	let currentIndex = array.length;
-	let randomIndex;
+	let currentIndex = array.length,
+		randomIndex;
 
 	// While there remain elements to shuffle.
 	while (currentIndex !== 0) {

packages/client/src/scripts/theme.ts

@@ -1,6 +1,6 @@
-import { globalEvents } from "@/events";
 import tinycolor from "tinycolor2";
 import { ref } from "vue";
+import { globalEvents } from "@/events";
 
 export interface Theme {
 	id: string;

packages/client/src/scripts/upload.ts

@@ -1,11 +1,11 @@
+import { readAndCompressImage } from "browser-image-resizer";
+import type * as Misskey from "firefish-js";
+import { reactive, ref } from "vue";
 import { $i } from "@/account";
 import { apiUrl } from "@/config";
 import { i18n } from "@/i18n";
 import { alert } from "@/os";
 import { defaultStore } from "@/store";
-import { readAndCompressImage } from "browser-image-resizer";
-import type * as Misskey from "firefish-js";
-import { reactive, ref } from "vue";
 
 interface Uploading {
 	id: string;

packages/client/src/scripts/use-chart-tooltip.ts

@@ -1,6 +1,6 @@
+import { onDeactivated, onUnmounted, ref } from "vue";
 import MkChartTooltip from "@/components/MkChartTooltip.vue";
 import * as os from "@/os";
-import { onDeactivated, onUnmounted, ref } from "vue";
 
 export function useChartTooltip(
 	opts: { position: "top" | "middle" } = { position: "top" },

packages/client/src/scripts/use-leave-guard.ts

@@ -1,7 +1,7 @@
-import { i18n } from "@/i18n";
-import * as os from "@/os";
 import type { Ref } from "vue";
 import { inject, onUnmounted } from "vue";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
 
 export function useLeaveGuard(enabled: Ref<boolean>) {
 	/* TODO

packages/client/src/scripts/use-note-capture.ts

@@ -1,9 +1,9 @@
-import { $i } from "@/account";
-import * as os from "@/os";
-import { stream } from "@/stream";
 import type * as misskey from "firefish-js";
 import type { Ref } from "vue";
 import { onUnmounted } from "vue";
+import { $i } from "@/account";
+import * as os from "@/os";
+import { stream } from "@/stream";
 
 export function useNoteCapture(props: {
 	rootEl: Ref<HTMLElement>;

packages/client/src/scripts/use-tooltip.ts

@@ -6,13 +6,13 @@ export function useTooltip(
 	onShow: (showing: Ref<boolean>) => void,
 	delay = 300,
 ): void {
-	let isHovering = false;
-	// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、それを無視するためのフラグ
-	// 無視しないと、画面に触れてないのにツールチップが出たりし、ユーザビリティが損なわれる
-	// TODO: 一度でもタップすると二度とマウスでツールチップ出せなくなるのをどうにかする 定期的にfalseに戻すとか...？
-	let shouldIgnoreMouseover = false;
-	let timeoutId: number;
-	let changeShowingState: (() => void) | null;
+	let isHovering = false,
+		// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、それを無視するためのフラグ
+		// 無視しないと、画面に触れてないのにツールチップが出たりし、ユーザビリティが損なわれる
+		// TODO: 一度でもタップすると二度とマウスでツールチップ出せなくなるのをどうにかする 定期的にfalseに戻すとか...？
+		shouldIgnoreMouseover = false,
+		timeoutId: number,
+		changeShowingState: (() => void) | null;
 
 	const open = () => {
 		close();

packages/client/src/stream.ts

@@ -1,7 +1,7 @@
-import { $i } from "@/account";
-import { url } from "@/config";
 import * as Misskey from "firefish-js";
 import { markRaw } from "vue";
+import { $i } from "@/account";
+import { url } from "@/config";
 
 export const stream = markRaw(
 	new Misskey.Stream(

packages/client/src/theme-store.ts

@@ -1,6 +1,6 @@
+import type { Theme } from "./scripts/theme";
 import { $i } from "@/account";
 import { api } from "@/os";
-import type { Theme } from "./scripts/theme";
 
 const lsCacheKey = $i ? `themes:${$i.id}` : "";
 

packages/client/src/ui/_common_/sw-inject.ts

@@ -1,9 +1,9 @@
+import { inject } from "vue";
 import { $i, login } from "@/account";
 import { post } from "@/os";
 import { mainRouter } from "@/router";
 import { getAccountFromId } from "@/scripts/get-account-from-id";
 import { defaultStore } from "@/store";
-import { inject } from "vue";
 
 export function swInject() {
 	navigator.serviceWorker.addEventListener("message", (ev) => {

packages/client/src/ui/deck/deck-store.ts

@@ -1,10 +1,10 @@
-import { i18n } from "@/i18n";
-import { api } from "@/os";
-import { deepClone } from "@/scripts/clone";
 import type { notificationTypes } from "firefish-js";
 import { throttle } from "throttle-debounce";
 import { markRaw } from "vue";
 import { Storage } from "../../pizzax";
+import { deepClone } from "@/scripts/clone";
+import { api } from "@/os";
+import { i18n } from "@/i18n";
 
 interface ColumnWidget {
 	name: string;

packages/client/src/widgets/widget.ts

@@ -1,8 +1,8 @@
+import { throttle } from "throttle-debounce";
+import { reactive, watch } from "vue";
 import * as os from "@/os";
 import { deepClone } from "@/scripts/clone";
 import type { Form, GetFormResultType } from "@/scripts/form";
-import { throttle } from "throttle-debounce";
-import { reactive, watch } from "vue";
 
 export interface Widget<P extends Record<string, unknown>> {
 	id: string;