From 618405c4d39753c1a9135fd0759aff2ecb3a94b3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 10 Jan 2023 06:08:40 +0900
Subject: refactor(client): rename widget filename

---
 packages/frontend/src/components/MkWidgets.vue     |   6 +-
 .../src/widgets/WidgetActivity.calendar.vue        |  81 ++++++++
 .../frontend/src/widgets/WidgetActivity.chart.vue  |  92 +++++++++
 packages/frontend/src/widgets/WidgetActivity.vue   |  90 +++++++++
 packages/frontend/src/widgets/WidgetAichan.vue     |  74 +++++++
 packages/frontend/src/widgets/WidgetAiscript.vue   | 177 +++++++++++++++++
 .../frontend/src/widgets/WidgetAiscriptApp.vue     | 122 ++++++++++++
 packages/frontend/src/widgets/WidgetButton.vue     | 105 ++++++++++
 packages/frontend/src/widgets/WidgetCalendar.vue   | 214 +++++++++++++++++++++
 packages/frontend/src/widgets/WidgetClicker.vue    |  44 +++++
 packages/frontend/src/widgets/WidgetClock.vue      | 203 +++++++++++++++++++
 .../frontend/src/widgets/WidgetDigitalClock.vue    |  92 +++++++++
 packages/frontend/src/widgets/WidgetFederation.vue | 147 ++++++++++++++
 .../frontend/src/widgets/WidgetInstanceCloud.vue   |  81 ++++++++
 .../frontend/src/widgets/WidgetInstanceInfo.vue    |  94 +++++++++
 packages/frontend/src/widgets/WidgetJobQueue.vue   | 197 +++++++++++++++++++
 packages/frontend/src/widgets/WidgetMemo.vue       | 111 +++++++++++
 .../frontend/src/widgets/WidgetNotifications.vue   |  70 +++++++
 .../frontend/src/widgets/WidgetOnlineUsers.vue     |  78 ++++++++
 packages/frontend/src/widgets/WidgetPhotos.vue     | 123 ++++++++++++
 packages/frontend/src/widgets/WidgetPostForm.vue   |  35 ++++
 packages/frontend/src/widgets/WidgetProfile.vue    |  96 +++++++++
 packages/frontend/src/widgets/WidgetRss.vue        | 120 ++++++++++++
 packages/frontend/src/widgets/WidgetRssTicker.vue  | 180 +++++++++++++++++
 packages/frontend/src/widgets/WidgetSlideshow.vue  | 159 +++++++++++++++
 packages/frontend/src/widgets/WidgetTimeline.vue   | 129 +++++++++++++
 packages/frontend/src/widgets/WidgetTrends.vue     | 120 ++++++++++++
 packages/frontend/src/widgets/WidgetUnixClock.vue  | 116 +++++++++++
 packages/frontend/src/widgets/WidgetUserList.vue   | 136 +++++++++++++
 .../frontend/src/widgets/activity.calendar.vue     |  81 --------
 packages/frontend/src/widgets/activity.chart.vue   |  92 ---------
 packages/frontend/src/widgets/activity.vue         |  90 ---------
 packages/frontend/src/widgets/aichan.vue           |  74 -------
 packages/frontend/src/widgets/aiscript-app.vue     | 122 ------------
 packages/frontend/src/widgets/aiscript.vue         | 177 -----------------
 packages/frontend/src/widgets/button.vue           | 105 ----------
 packages/frontend/src/widgets/calendar.vue         | 214 ---------------------
 packages/frontend/src/widgets/clicker.vue          |  44 -----
 packages/frontend/src/widgets/clock.vue            | 203 -------------------
 packages/frontend/src/widgets/digital-clock.vue    |  92 ---------
 packages/frontend/src/widgets/federation.vue       | 147 --------------
 packages/frontend/src/widgets/index.ts             |  54 +++---
 packages/frontend/src/widgets/instance-cloud.vue   |  81 --------
 packages/frontend/src/widgets/instance-info.vue    |  94 ---------
 packages/frontend/src/widgets/job-queue.vue        | 197 -------------------
 packages/frontend/src/widgets/memo.vue             | 111 -----------
 packages/frontend/src/widgets/notifications.vue    |  70 -------
 packages/frontend/src/widgets/online-users.vue     |  78 --------
 packages/frontend/src/widgets/photos.vue           | 123 ------------
 packages/frontend/src/widgets/post-form.vue        |  35 ----
 packages/frontend/src/widgets/profile.vue          |  96 ---------
 packages/frontend/src/widgets/rss-ticker.vue       | 180 -----------------
 packages/frontend/src/widgets/rss.vue              | 120 ------------
 packages/frontend/src/widgets/slideshow.vue        | 159 ---------------
 packages/frontend/src/widgets/timeline.vue         | 129 -------------
 packages/frontend/src/widgets/trends.vue           | 120 ------------
 packages/frontend/src/widgets/unix-clock.vue       | 116 -----------
 packages/frontend/src/widgets/user-list.vue        | 136 -------------
 58 files changed, 3316 insertions(+), 3316 deletions(-)
 create mode 100644 packages/frontend/src/widgets/WidgetActivity.calendar.vue
 create mode 100644 packages/frontend/src/widgets/WidgetActivity.chart.vue
 create mode 100644 packages/frontend/src/widgets/WidgetActivity.vue
 create mode 100644 packages/frontend/src/widgets/WidgetAichan.vue
 create mode 100644 packages/frontend/src/widgets/WidgetAiscript.vue
 create mode 100644 packages/frontend/src/widgets/WidgetAiscriptApp.vue
 create mode 100644 packages/frontend/src/widgets/WidgetButton.vue
 create mode 100644 packages/frontend/src/widgets/WidgetCalendar.vue
 create mode 100644 packages/frontend/src/widgets/WidgetClicker.vue
 create mode 100644 packages/frontend/src/widgets/WidgetClock.vue
 create mode 100644 packages/frontend/src/widgets/WidgetDigitalClock.vue
 create mode 100644 packages/frontend/src/widgets/WidgetFederation.vue
 create mode 100644 packages/frontend/src/widgets/WidgetInstanceCloud.vue
 create mode 100644 packages/frontend/src/widgets/WidgetInstanceInfo.vue
 create mode 100644 packages/frontend/src/widgets/WidgetJobQueue.vue
 create mode 100644 packages/frontend/src/widgets/WidgetMemo.vue
 create mode 100644 packages/frontend/src/widgets/WidgetNotifications.vue
 create mode 100644 packages/frontend/src/widgets/WidgetOnlineUsers.vue
 create mode 100644 packages/frontend/src/widgets/WidgetPhotos.vue
 create mode 100644 packages/frontend/src/widgets/WidgetPostForm.vue
 create mode 100644 packages/frontend/src/widgets/WidgetProfile.vue
 create mode 100644 packages/frontend/src/widgets/WidgetRss.vue
 create mode 100644 packages/frontend/src/widgets/WidgetRssTicker.vue
 create mode 100644 packages/frontend/src/widgets/WidgetSlideshow.vue
 create mode 100644 packages/frontend/src/widgets/WidgetTimeline.vue
 create mode 100644 packages/frontend/src/widgets/WidgetTrends.vue
 create mode 100644 packages/frontend/src/widgets/WidgetUnixClock.vue
 create mode 100644 packages/frontend/src/widgets/WidgetUserList.vue
 delete mode 100644 packages/frontend/src/widgets/activity.calendar.vue
 delete mode 100644 packages/frontend/src/widgets/activity.chart.vue
 delete mode 100644 packages/frontend/src/widgets/activity.vue
 delete mode 100644 packages/frontend/src/widgets/aichan.vue
 delete mode 100644 packages/frontend/src/widgets/aiscript-app.vue
 delete mode 100644 packages/frontend/src/widgets/aiscript.vue
 delete mode 100644 packages/frontend/src/widgets/button.vue
 delete mode 100644 packages/frontend/src/widgets/calendar.vue
 delete mode 100644 packages/frontend/src/widgets/clicker.vue
 delete mode 100644 packages/frontend/src/widgets/clock.vue
 delete mode 100644 packages/frontend/src/widgets/digital-clock.vue
 delete mode 100644 packages/frontend/src/widgets/federation.vue
 delete mode 100644 packages/frontend/src/widgets/instance-cloud.vue
 delete mode 100644 packages/frontend/src/widgets/instance-info.vue
 delete mode 100644 packages/frontend/src/widgets/job-queue.vue
 delete mode 100644 packages/frontend/src/widgets/memo.vue
 delete mode 100644 packages/frontend/src/widgets/notifications.vue
 delete mode 100644 packages/frontend/src/widgets/online-users.vue
 delete mode 100644 packages/frontend/src/widgets/photos.vue
 delete mode 100644 packages/frontend/src/widgets/post-form.vue
 delete mode 100644 packages/frontend/src/widgets/profile.vue
 delete mode 100644 packages/frontend/src/widgets/rss-ticker.vue
 delete mode 100644 packages/frontend/src/widgets/rss.vue
 delete mode 100644 packages/frontend/src/widgets/slideshow.vue
 delete mode 100644 packages/frontend/src/widgets/timeline.vue
 delete mode 100644 packages/frontend/src/widgets/trends.vue
 delete mode 100644 packages/frontend/src/widgets/unix-clock.vue
 delete mode 100644 packages/frontend/src/widgets/user-list.vue

(limited to 'packages/frontend/src')

diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index 21ebbf37b5..e3e4484405 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -15,21 +15,21 @@
 			handle=".handle"
 			:animation="150"
 			:group="{ name: 'SortableMkWidgets' }"
-			@update:model-value="v => emit('updateWidgets', v)"
 			:class="$style['edit-editing']"
+			@update:model-value="v => emit('updateWidgets', v)"
 		>
 			<template #item="{element}">
 				<div :class="[$style.widget, $style['customize-container']]">
 					<button :class="$style['customize-container-config']" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
 					<button :class="$style['customize-container-remove']" class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
 					<div class="handle">
-						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style['customize-container-handle-widget']" :widget="element" @update-props="updateWidget(element.id, $event)"/>
+						<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style['customize-container-handle-widget']" :widget="element" @update-props="updateWidget(element.id, $event)"/>
 					</div>
 				</div>
 			</template>
 		</Sortable>
 	</template>
-	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @update-props="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
+	<component :is="`widget-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @update-props="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
 </div>
 </template>
 <script lang="ts">
diff --git a/packages/frontend/src/widgets/WidgetActivity.calendar.vue b/packages/frontend/src/widgets/WidgetActivity.calendar.vue
new file mode 100644
index 0000000000..84f6af1c13
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetActivity.calendar.vue
@@ -0,0 +1,81 @@
+<template>
+<svg viewBox="0 0 21 7">
+	<rect v-for="record in activity" class="day"
+		width="1" height="1"
+		:x="record.x" :y="record.date.weekday"
+		rx="1" ry="1"
+		fill="transparent">
+		<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
+	</rect>
+	<rect v-for="record in activity" class="day"
+		:width="record.v" :height="record.v"
+		:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
+		rx="1" ry="1"
+		:fill="record.color"
+		style="pointer-events: none;"/>
+	<rect class="today"
+		width="1" height="1"
+		:x="activity[0].x" :y="activity[0].date.weekday"
+		rx="1" ry="1"
+		fill="none"
+		stroke-width="0.1"
+		stroke="#f73520"/>
+</svg>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	activity: any[]
+}>();
+
+for (const d of props.activity) {
+	d.total = d.notes + d.replies + d.renotes;
+}
+const peak = Math.max(...props.activity.map(d => d.total));
+
+const now = new Date();
+const year = now.getFullYear();
+const month = now.getMonth();
+const day = now.getDate();
+
+let x = 20;
+props.activity.slice().forEach((d, i) => {
+	d.x = x;
+
+	const date = new Date(year, month, day - i);
+	d.date = {
+		year: date.getFullYear(),
+		month: date.getMonth(),
+		day: date.getDate(),
+		weekday: date.getDay(),
+	};
+
+	d.v = peak === 0 ? 0 : d.total / (peak / 2);
+	if (d.v > 1) d.v = 1;
+	const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170;
+	const cs = d.v * 100;
+	const cl = 15 + ((1 - d.v) * 80);
+	d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
+
+	if (d.date.weekday === 0) x--;
+});
+</script>
+
+<style lang="scss" scoped>
+svg {
+	display: block;
+	padding: 16px;
+	width: 100%;
+	box-sizing: border-box;
+
+	> rect {
+		transform-origin: center;
+
+		&.day {
+			&:hover {
+				fill: rgba(#000, 0.05);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetActivity.chart.vue b/packages/frontend/src/widgets/WidgetActivity.chart.vue
new file mode 100644
index 0000000000..b61e419f94
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetActivity.chart.vue
@@ -0,0 +1,92 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
+	<polyline
+		:points="pointsNote"
+		fill="none"
+		stroke-width="1"
+		stroke="#41ddde"/>
+	<polyline
+		:points="pointsReply"
+		fill="none"
+		stroke-width="1"
+		stroke="#f7796c"/>
+	<polyline
+		:points="pointsRenote"
+		fill="none"
+		stroke-width="1"
+		stroke="#a1de41"/>
+	<polyline
+		:points="pointsTotal"
+		fill="none"
+		stroke-width="1"
+		stroke="#555"
+		stroke-dasharray="2 2"/>
+</svg>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	activity: any[]
+}>();
+
+let viewBoxX: number = $ref(147);
+let viewBoxY: number = $ref(60);
+let zoom: number = $ref(1);
+let pos: number = $ref(0);
+let pointsNote: any = $ref(null);
+let pointsReply: any = $ref(null);
+let pointsRenote: any = $ref(null);
+let pointsTotal: any = $ref(null);
+
+function dragListen(fn) {
+	window.addEventListener('mousemove', fn);
+	window.addEventListener('mouseleave', dragClear.bind(null, fn));
+	window.addEventListener('mouseup', dragClear.bind(null, fn));
+}
+
+function dragClear(fn) {
+	window.removeEventListener('mousemove', fn);
+	window.removeEventListener('mouseleave', dragClear);
+	window.removeEventListener('mouseup', dragClear);
+}
+
+function onMousedown(ev) {
+	const clickX = ev.clientX;
+	const clickY = ev.clientY;
+	const baseZoom = zoom;
+	const basePos = pos;
+
+	// 動かした時
+	dragListen(me => {
+		let moveLeft = me.clientX - clickX;
+		let moveTop = me.clientY - clickY;
+
+		zoom = Math.max(1, baseZoom + (-moveTop / 20));
+		pos = Math.min(0, basePos + moveLeft);
+		if (pos < -(((props.activity.length - 1) * zoom) - viewBoxX)) pos = -(((props.activity.length - 1) * zoom) - viewBoxX);
+
+		render();
+	});
+}
+
+function render() {
+	const peak = Math.max(...props.activity.map(d => d.total));
+	if (peak !== 0) {
+		const activity = props.activity.slice().reverse();
+		pointsNote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.notes / peak)) * viewBoxY}`).join(' ');
+		pointsReply = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.replies / peak)) * viewBoxY}`).join(' ');
+		pointsRenote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.renotes / peak)) * viewBoxY}`).join(' ');
+		pointsTotal = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.total / peak)) * viewBoxY}`).join(' ');
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+svg {
+	display: block;
+	padding: 16px;
+	width: 100%;
+	box-sizing: border-box;
+	cursor: all-scroll;
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetActivity.vue b/packages/frontend/src/widgets/WidgetActivity.vue
new file mode 100644
index 0000000000..238a05ca09
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetActivity.vue
@@ -0,0 +1,90 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
+	<template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
+	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+
+	<div>
+		<MkLoading v-if="fetching"/>
+		<template v-else>
+			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
+			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
+		</template>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import XCalendar from './activity.calendar.vue';
+import XChart from './activity.chart.vue';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const name = 'activity';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	view: {
+		type: 'number' as const,
+		default: 0,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const activity = ref(null);
+const fetching = ref(true);
+
+const toggleView = () => {
+	if (widgetProps.view === 1) {
+		widgetProps.view = 0;
+	} else {
+		widgetProps.view++;
+	}
+	save();
+};
+
+os.apiGet('charts/user/notes', {
+	userId: $i.id,
+	span: 'day',
+	limit: 7 * 21,
+}).then(res => {
+	activity.value = res.diffs.normal.map((_, i) => ({
+		total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i],
+		notes: res.diffs.normal[i],
+		replies: res.diffs.reply[i],
+		renotes: res.diffs.renote[i],
+	}));
+	fetching.value = false;
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/WidgetAichan.vue b/packages/frontend/src/widgets/WidgetAichan.vue
new file mode 100644
index 0000000000..ab5b375ae4
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetAichan.vue
@@ -0,0 +1,74 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-aichan">
+	<iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+
+const name = 'ai';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const live2d = shallowRef<HTMLIFrameElement>();
+
+const touched = () => {
+	//if (this.live2d) this.live2d.changeExpression('gurugurume');
+};
+
+const onMousemove = (ev: MouseEvent) => {
+	const iframeRect = live2d.value.getBoundingClientRect();
+	live2d.value.contentWindow.postMessage({
+		type: 'moveCursor',
+		body: {
+			x: ev.clientX - iframeRect.left,
+			y: ev.clientY - iframeRect.top,
+		},
+	}, '*');
+};
+
+onMounted(() => {
+	window.addEventListener('mousemove', onMousemove, { passive: true });
+});
+
+onUnmounted(() => {
+	window.removeEventListener('mousemove', onMousemove);
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.dedjhjmo {
+	width: 100%;
+	height: 350px;
+	border: none;
+	pointer-events: none;
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue
new file mode 100644
index 0000000000..dcc73db201
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetAiscript.vue
@@ -0,0 +1,177 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
+	<template #header><i class="ti ti-terminal-2"></i>{{ i18n.ts._widgets.aiscript }}</template>
+
+	<div class="uylguesu _monospace">
+		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
+		<button class="_buttonPrimary" @click="run">RUN</button>
+		<div class="logs">
+			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { Interpreter, Parser, utils } from '@syuilo/aiscript';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const name = 'aiscript';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	script: {
+		type: 'string' as const,
+		multiline: true,
+		default: '(1 + 1)',
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const parser = new Parser();
+
+const logs = ref<{
+	id: string;
+	text: string;
+	print: boolean;
+}[]>([]);
+
+const run = async () => {
+	logs.value = [];
+	const aiscript = new Interpreter(createAiScriptEnv({
+		storageKey: 'widget',
+		token: $i?.token,
+	}), {
+		in: (q) => {
+			return new Promise(ok => {
+				os.inputText({
+					title: q,
+				}).then(({ canceled, result: a }) => {
+					ok(a);
+				});
+			});
+		},
+		out: (value) => {
+			logs.value.push({
+				id: Math.random().toString(),
+				text: value.type === 'str' ? value.value : utils.valToString(value),
+				print: true,
+			});
+		},
+		log: (type, params) => {
+			switch (type) {
+				case 'end': logs.value.push({
+					id: Math.random().toString(),
+					text: utils.valToString(params.val, true),
+					print: false,
+				}); break;
+				default: break;
+			}
+		},
+	});
+
+	let ast;
+	try {
+		ast = parser.parse(widgetProps.script);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: 'Syntax error :(',
+		});
+		return;
+	}
+	try {
+		await aiscript.exec(ast);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: err,
+		});
+	}
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.uylguesu {
+	text-align: right;
+
+	> textarea {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		min-width: 100%;
+		padding: 16px;
+		color: var(--fg);
+		background: transparent;
+		border: none;
+		border-bottom: solid 0.5px var(--divider);
+		border-radius: 0;
+		box-sizing: border-box;
+		font: inherit;
+
+		&:focus-visible {
+			outline: none;
+		}
+	}
+
+	> button {
+		display: inline-block;
+		margin: 8px;
+		padding: 0 10px;
+		height: 28px;
+		outline: none;
+		border-radius: 4px;
+
+		&:disabled {
+			opacity: 0.7;
+			cursor: default;
+		}
+	}
+
+	> .logs {
+		border-top: solid 0.5px var(--divider);
+		text-align: left;
+		padding: 16px;
+
+		&:empty {
+			display: none;
+		}
+
+		> .log {
+			&:not(.print) {
+				opacity: 0.7;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetAiscriptApp.vue b/packages/frontend/src/widgets/WidgetAiscriptApp.vue
new file mode 100644
index 0000000000..1445e5b1ad
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetAiscriptApp.vue
@@ -0,0 +1,122 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscriptApp">
+	<template #header>App</template>
+	<div :class="$style.root">
+		<MkAsUi v-if="root" :component="root" :components="components" size="small"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { Interpreter, Parser, utils, values } from '@syuilo/aiscript';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import { $i } from '@/account';
+import MkAsUi from '@/components/MkAsUi.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import { AsUiComponent, AsUiRoot, patch, registerAsUiLib, render } from '@/scripts/aiscript/ui';
+
+const name = 'aiscriptApp';
+
+const widgetPropsDef = {
+	script: {
+		type: 'string' as const,
+		multiline: true,
+		default: '',
+	},
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const parser = new Parser();
+
+const root = ref<AsUiRoot>();
+const components: Ref<AsUiComponent>[] = [];
+
+async function run() {
+	const aiscript = new Interpreter({
+		...createAiScriptEnv({
+			storageKey: 'widget',
+			token: $i?.token,
+		}),
+		...registerAsUiLib(components, (_root) => {
+			root.value = _root.value;
+		}),
+	}, {
+		in: (q) => {
+			return new Promise(ok => {
+				os.inputText({
+					title: q,
+				}).then(({ canceled, result: a }) => {
+					ok(a);
+				});
+			});
+		},
+		out: (value) => {
+			// nop
+		},
+		log: (type, params) => {
+			// nop
+		},
+	});
+
+	let ast;
+	try {
+		ast = parser.parse(widgetProps.script);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: 'Syntax error :(',
+		});
+		return;
+	}
+	try {
+		await aiscript.exec(ast);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			title: 'AiScript Error',
+			text: err.message,
+		});
+	}
+}
+
+watch(() => widgetProps.script, () => {
+	run();
+});
+
+onMounted(() => {
+	run();
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 16px;
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetButton.vue b/packages/frontend/src/widgets/WidgetButton.vue
new file mode 100644
index 0000000000..f65b115cc0
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetButton.vue
@@ -0,0 +1,105 @@
+<template>
+<div class="mkw-button">
+	<MkButton :primary="widgetProps.colored" full @click="run">
+		{{ widgetProps.label }}
+	</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { Interpreter, Parser, utils } from '@syuilo/aiscript';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import { $i } from '@/account';
+import MkButton from '@/components/MkButton.vue';
+
+const name = 'button';
+
+const widgetPropsDef = {
+	label: {
+		type: 'string' as const,
+		default: 'BUTTON',
+	},
+	colored: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	script: {
+		type: 'string' as const,
+		multiline: true,
+		default: 'Mk:dialog("hello" "world")',
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const parser = new Parser();
+
+const run = async () => {
+	const aiscript = new Interpreter(createAiScriptEnv({
+		storageKey: 'widget',
+		token: $i?.token,
+	}), {
+		in: (q) => {
+			return new Promise(ok => {
+				os.inputText({
+					title: q,
+				}).then(({ canceled, result: a }) => {
+					ok(a);
+				});
+			});
+		},
+		out: (value) => {
+			// nop
+		},
+		log: (type, params) => {
+			// nop
+		},
+	});
+
+	let ast;
+	try {
+		ast = parser.parse(widgetProps.script);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: 'Syntax error :(',
+		});
+		return;
+	}
+	try {
+		await aiscript.exec(ast);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: err,
+		});
+	}
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-button {
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
new file mode 100644
index 0000000000..1bd431259a
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetCalendar.vue
@@ -0,0 +1,214 @@
+<template>
+<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
+	<div class="calendar" :class="{ isHoliday }">
+		<p class="month-and-year">
+			<span class="year">{{ $t('yearX', { year }) }}</span>
+			<span class="month">{{ $t('monthX', { month }) }}</span>
+		</p>
+		<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
+		<p v-else class="day">{{ $t('dayX', { day }) }}</p>
+		<p class="week-day">{{ weekDay }}</p>
+	</div>
+	<div class="info">
+		<div>
+			<p>{{ i18n.ts.today }}<b>{{ dayP.toFixed(1) }}%</b></p>
+			<div class="meter">
+				<div class="val" :style="{ width: `${dayP}%` }"></div>
+			</div>
+		</div>
+		<div>
+			<p>{{ i18n.ts.thisMonth }}<b>{{ monthP.toFixed(1) }}%</b></p>
+			<div class="meter">
+				<div class="val" :style="{ width: `${monthP}%` }"></div>
+			</div>
+		</div>
+		<div>
+			<p>{{ i18n.ts.thisYear }}<b>{{ yearP.toFixed(1) }}%</b></p>
+			<div class="meter">
+				<div class="val" :style="{ width: `${yearP}%` }"></div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { i18n } from '@/i18n';
+import { useInterval } from '@/scripts/use-interval';
+
+const name = 'calendar';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const year = ref(0);
+const month = ref(0);
+const day = ref(0);
+const weekDay = ref('');
+const yearP = ref(0);
+const monthP = ref(0);
+const dayP = ref(0);
+const isHoliday = ref(false);
+const tick = () => {
+	const now = new Date();
+	const nd = now.getDate();
+	const nm = now.getMonth();
+	const ny = now.getFullYear();
+
+	year.value = ny;
+	month.value = nm + 1;
+	day.value = nd;
+	weekDay.value = [
+		i18n.ts._weekday.sunday,
+		i18n.ts._weekday.monday,
+		i18n.ts._weekday.tuesday,
+		i18n.ts._weekday.wednesday,
+		i18n.ts._weekday.thursday,
+		i18n.ts._weekday.friday,
+		i18n.ts._weekday.saturday,
+	][now.getDay()];
+
+	const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
+	const dayDenom = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
+	const monthNumer = now.getTime() - new Date(ny, nm, 1).getTime();
+	const monthDenom = new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
+	const yearNumer = now.getTime() - new Date(ny, 0, 1).getTime();
+	const yearDenom = new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
+
+	dayP.value = dayNumer / dayDenom * 100;
+	monthP.value = monthNumer / monthDenom * 100;
+	yearP.value = yearNumer / yearDenom * 100;
+
+	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
+};
+
+useInterval(tick, 1000, {
+	immediate: true,
+	afterMounted: false,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-calendar {
+	padding: 16px 0;
+
+	&:after {
+		content: "";
+		display: block;
+		clear: both;
+	}
+
+	> .calendar {
+		float: left;
+		width: 60%;
+		text-align: center;
+
+		&.isHoliday {
+			> .day {
+				color: #ef95a0;
+			}
+		}
+
+		> .month-and-year, > .week-day {
+			margin: 0;
+			line-height: 18px;
+			font-size: 0.9em;
+
+			> .year, > .month {
+				margin: 0 4px;
+			}
+		}
+
+		> .day {
+			margin: 10px 0;
+			line-height: 32px;
+			font-size: 1.75em;
+		}
+	}
+
+	> .info {
+		display: block;
+		float: left;
+		width: 40%;
+		padding: 0 16px 0 0;
+		box-sizing: border-box;
+
+		> div {
+			margin-bottom: 8px;
+
+			&:last-child {
+				margin-bottom: 4px;
+			}
+
+			> p {
+				display: flex;
+				margin: 0 0 2px 0;
+				font-size: 0.75em;
+				line-height: 18px;
+				opacity: 0.8;
+
+				> b {
+					margin-left: auto;
+				}
+			}
+
+			> .meter {
+				width: 100%;
+				overflow: hidden;
+				background: var(--X11);
+				border-radius: 8px;
+
+				> .val {
+					height: 4px;
+					transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
+				}
+			}
+
+			&:nth-child(1) {
+				> .meter > .val {
+					background: #f7796c;
+				}
+			}
+
+			&:nth-child(2) {
+				> .meter > .val {
+					background: #a1de41;
+				}
+			}
+
+			&:nth-child(3) {
+				> .meter > .val {
+					background: #41ddde;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetClicker.vue b/packages/frontend/src/widgets/WidgetClicker.vue
new file mode 100644
index 0000000000..168f05bccd
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetClicker.vue
@@ -0,0 +1,44 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-clicker">
+	<template #header><i class="ti ti-cookie"></i>Clicker</template>
+	<MkClickerGame/>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { $i } from '@/account';
+import MkContainer from '@/components/MkContainer.vue';
+import MkClickerGame from '@/components/MkClickerGame.vue';
+
+const name = 'clicker';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/WidgetClock.vue b/packages/frontend/src/widgets/WidgetClock.vue
new file mode 100644
index 0000000000..dc99b6631e
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetClock.vue
@@ -0,0 +1,203 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-clock">
+	<div class="vubelbmv" :class="widgetProps.size">
+		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
+		<MkAnalogClock
+			class="clock"
+			:thickness="widgetProps.thickness"
+			:offset="tzOffset"
+			:graduations="widgetProps.graduations"
+			:fade-graduations="widgetProps.fadeGraduations"
+			:twentyfour="widgetProps.twentyFour"
+			:s-animation="widgetProps.sAnimation"
+		/>
+		<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
+		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkAnalogClock from '@/components/MkAnalogClock.vue';
+import MkDigitalClock from '@/components/MkDigitalClock.vue';
+import { timezones } from '@/scripts/timezones';
+import { i18n } from '@/i18n';
+
+const name = 'clock';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	size: {
+		type: 'radio' as const,
+		default: 'medium',
+		options: [{
+			value: 'small', label: i18n.ts.small,
+		}, {
+			value: 'medium', label: i18n.ts.medium,
+		}, {
+			value: 'large', label: i18n.ts.large,
+		}],
+	},
+	thickness: {
+		type: 'radio' as const,
+		default: 0.2,
+		options: [{
+			value: 0.1, label: 'thin',
+		}, {
+			value: 0.2, label: 'medium',
+		}, {
+			value: 0.3, label: 'thick',
+		}],
+	},
+	graduations: {
+		type: 'radio' as const,
+		default: 'numbers',
+		options: [{
+			value: 'none', label: 'None',
+		}, {
+			value: 'dots', label: 'Dots',
+		}, {
+			value: 'numbers', label: 'Numbers',
+		}],
+	},
+	fadeGraduations: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	sAnimation: {
+		type: 'radio' as const,
+		default: 'elastic',
+		options: [{
+			value: 'none', label: 'None',
+		}, {
+			value: 'elastic', label: 'Elastic',
+		}, {
+			value: 'easeOut', label: 'Ease out',
+		}],
+	},
+	twentyFour: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	label: {
+		type: 'radio' as const,
+		default: 'none',
+		options: [{
+			value: 'none', label: 'None',
+		}, {
+			value: 'time', label: 'Time',
+		}, {
+			value: 'tz', label: 'TZ',
+		}, {
+			value: 'timeAndTz', label: 'Time + TZ',
+		}],
+	},
+	timezone: {
+		type: 'enum' as const,
+		default: null,
+		enum: [...timezones.map((tz) => ({
+			label: tz.name,
+			value: tz.name.toLowerCase(),
+		})), {
+			label: '(auto)',
+			value: null,
+		}],
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const tzAbbrev = $computed(() => (widgetProps.timezone === null
+	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+
+const tzOffset = $computed(() => widgetProps.timezone === null
+	? 0 - new Date().getTimezoneOffset()
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+
+const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.vubelbmv {
+	position: relative;
+
+	> .label {
+		position: absolute;
+		opacity: 0.7;
+
+		&.a {
+			top: 14px;
+			left: 14px;
+		}
+
+		&.b {
+			top: 14px;
+			right: 14px;
+		}
+
+		&.c {
+			bottom: 14px;
+			left: 14px;
+		}
+
+		&.d {
+			bottom: 14px;
+			right: 14px;
+		}
+	}
+
+	> .clock {
+		margin: auto;
+	}
+
+	&.small {
+		padding: 12px;
+
+		> .clock {
+			height: 100px;
+		}
+	}
+
+	&.medium {
+		padding: 14px;
+
+		> .clock {
+			height: 150px;
+		}
+	}
+
+	&.large {
+		padding: 16px;
+
+		> .clock {
+			height: 200px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetDigitalClock.vue b/packages/frontend/src/widgets/WidgetDigitalClock.vue
new file mode 100644
index 0000000000..d2bfd523f3
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetDigitalClock.vue
@@ -0,0 +1,92 @@
+<template>
+<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
+	<div class="time">
+		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
+	</div>
+	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { timezones } from '@/scripts/timezones';
+import MkDigitalClock from '@/components/MkDigitalClock.vue';
+
+const name = 'digitalClock';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	fontSize: {
+		type: 'number' as const,
+		default: 1.5,
+		step: 0.1,
+	},
+	showMs: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	showLabel: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	timezone: {
+		type: 'enum' as const,
+		default: null,
+		enum: [...timezones.map((tz) => ({
+			label: tz.name,
+			value: tz.name.toLowerCase(),
+		})), {
+			label: '(auto)',
+			value: null,
+		}],
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const tzAbbrev = $computed(() => (widgetProps.timezone === null
+	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+
+const tzOffset = $computed(() => widgetProps.timezone === null
+	? 0 - new Date().getTimezoneOffset()
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+
+const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-digitalClock {
+	padding: 16px 0;
+	text-align: center;
+
+	> .label {
+		font-size: 65%;
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
new file mode 100644
index 0000000000..23f7cd4411
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -0,0 +1,147 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
+	<template #header><i class="ti ti-whirl"></i>{{ i18n.ts._widgets.federation }}</template>
+
+	<div class="wbrkwalb">
+		<MkLoading v-if="fetching"/>
+		<TransitionGroup v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
+			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
+				<img :src="getInstanceIcon(instance)" alt=""/>
+				<div class="body">
+					<MkA class="a" :to="`/instance-info/${instance.host}`" behavior="window" :title="instance.host">{{ instance.host }}</MkA>
+					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
+				</div>
+				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
+			</div>
+		</TransitionGroup>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const name = 'federation';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const instances = ref([]);
+const charts = ref([]);
+const fetching = ref(true);
+
+const fetch = async () => {
+	const fetchedInstances = await os.api('federation/instances', {
+		sort: '+latestRequestReceivedAt',
+		limit: 5,
+	});
+	const fetchedCharts = await Promise.all(fetchedInstances.map(i => os.apiGet('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
+	instances.value = fetchedInstances;
+	charts.value = fetchedCharts;
+	fetching.value = false;
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwalb {
+	$bodyTitleHieght: 18px;
+	$bodyInfoHieght: 16px;
+
+	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
+	overflow: hidden;
+
+	> .instances {
+		.chart-move {
+			transition: transform 1s ease;
+		}
+
+		> .instance {
+			display: flex;
+			align-items: center;
+			padding: 14px 16px;
+			border-bottom: solid 0.5px var(--divider);
+
+			> img {
+				display: block;
+				width: ($bodyTitleHieght + $bodyInfoHieght);
+				height: ($bodyTitleHieght + $bodyInfoHieght);
+				object-fit: cover;
+				border-radius: 4px;
+				margin-right: 8px;
+			}
+
+			> .body {
+				flex: 1;
+				overflow: hidden;
+				font-size: 0.9em;
+				color: var(--fg);
+				padding-right: 8px;
+
+				> .a {
+					display: block;
+					width: 100%;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					line-height: $bodyTitleHieght;
+				}
+
+				> p {
+					margin: 0;
+					font-size: 75%;
+					opacity: 0.7;
+					line-height: $bodyInfoHieght;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+
+			> .chart {
+				height: 30px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetInstanceCloud.vue b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
new file mode 100644
index 0000000000..1068c5ac4b
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
@@ -0,0 +1,81 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud">
+	<div class="">
+		<MkTagCloud v-if="activeInstances">
+			<li v-for="instance in activeInstances" :key="instance.id">
+				<a @click.prevent="onInstanceClick(instance)">
+					<img style="width: 32px;" :src="getInstanceIcon(instance)">
+				</a>
+			</li>
+		</MkTagCloud>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkTagCloud from '@/components/MkTagCloud.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const name = 'instanceCloud';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+let cloud = $shallowRef<InstanceType<typeof MkTagCloud> | null>();
+let activeInstances = $shallowRef(null);
+
+function onInstanceClick(i) {
+	os.pageWindow(`/instance-info/${i.host}`);
+}
+
+useInterval(() => {
+	os.api('federation/instances', {
+		sort: '+latestRequestReceivedAt',
+		limit: 25,
+	}).then(res => {
+		activeInstances = res;
+		if (cloud) cloud.update();
+	});
+}, 1000 * 60 * 3, {
+	immediate: true,
+	afterMounted: true,
+});
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
new file mode 100644
index 0000000000..990802d847
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -0,0 +1,94 @@
+<template>
+<div class="_panel">
+	<div :class="$style.container" :style="{ backgroundImage: $instance.bannerUrl ? `url(${ $instance.bannerUrl })` : null }">
+		<div :class="$style.iconContainer">
+			<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon"/>
+		</div>
+		<div :class="$style.bodyContainer">
+			<div :class="$style.body">
+				<MkA :class="$style.name" to="/about" behavior="window">{{ $instance.name }}</MkA>
+				<div :class="$style.host">{{ host }}</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { host } from '@/config';
+
+const name = 'instanceInfo';
+
+const widgetPropsDef = {
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.container {
+	position: relative;
+	background-size: cover;
+	background-position: center;
+	display: flex;
+}
+
+.iconContainer {
+	display: inline-block;
+	text-align: center;
+	padding: 16px;
+}
+
+.icon {
+	display: inline-block;
+	width: 60px;
+	height: 60px;
+	border-radius: 8px;
+	box-sizing: border-box;
+	border: solid 3px #fff;
+}
+
+.bodyContainer {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	padding: 0 16px 0 0;
+}
+
+.body {
+	text-overflow: ellipsis;
+	overflow: clip;
+}
+
+.name {
+	color: #fff;
+	filter: drop-shadow(0 0 4px #000);
+	font-weight: bold;
+}
+
+.host {
+	color: #fff;
+	filter: drop-shadow(0 0 4px #000);
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetJobQueue.vue b/packages/frontend/src/widgets/WidgetJobQueue.vue
new file mode 100644
index 0000000000..9f19c51825
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetJobQueue.vue
@@ -0,0 +1,197 @@
+<template>
+<div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
+	<div class="inbox">
+		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
+		<div class="values">
+			<div>
+				<div>Process</div>
+				<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
+			</div>
+			<div>
+				<div>Active</div>
+				<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
+			</div>
+			<div>
+				<div>Delayed</div>
+				<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
+			</div>
+			<div>
+				<div>Waiting</div>
+				<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
+			</div>
+		</div>
+	</div>
+	<div class="deliver">
+		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
+		<div class="values">
+			<div>
+				<div>Process</div>
+				<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
+			</div>
+			<div>
+				<div>Active</div>
+				<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
+			</div>
+			<div>
+				<div>Delayed</div>
+				<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
+			</div>
+			<div>
+				<div>Waiting</div>
+				<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { stream } from '@/stream';
+import number from '@/filters/number';
+import * as sound from '@/scripts/sound';
+import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
+
+const name = 'jobQueue';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	sound: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const connection = stream.useChannel('queueStats');
+const current = reactive({
+	inbox: {
+		activeSincePrevTick: 0,
+		active: 0,
+		waiting: 0,
+		delayed: 0,
+	},
+	deliver: {
+		activeSincePrevTick: 0,
+		active: 0,
+		waiting: 0,
+		delayed: 0,
+	},
+});
+const prev = reactive({} as typeof current);
+const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
+
+for (const domain of ['inbox', 'deliver']) {
+	prev[domain] = deepClone(current[domain]);
+}
+
+const onStats = (stats) => {
+	for (const domain of ['inbox', 'deliver']) {
+		prev[domain] = deepClone(current[domain]);
+		current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
+		current[domain].active = stats[domain].active;
+		current[domain].waiting = stats[domain].waiting;
+		current[domain].delayed = stats[domain].delayed;
+
+		if (current[domain].waiting > 0 && widgetProps.sound && jammedSound.paused) {
+			jammedSound.play();
+		}
+	}
+};
+
+const onStatsLog = (statsLog) => {
+	for (const stats of [...statsLog].reverse()) {
+		onStats(stats);
+	}
+};
+
+connection.on('stats', onStats);
+connection.on('statsLog', onStatsLog);
+
+connection.send('requestLog', {
+	id: Math.random().toString().substr(2, 8),
+	length: 1,
+});
+
+onUnmounted(() => {
+	connection.off('stats', onStats);
+	connection.off('statsLog', onStatsLog);
+	connection.dispose();
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+@keyframes warnBlink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+.mkw-jobQueue {
+	font-size: 0.9em;
+
+	> div {
+		padding: 16px;
+
+		&:not(:first-child) {
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .label {
+			display: flex;
+
+			> .icon {
+				color: var(--warn);
+				margin-left: auto;
+				animation: warnBlink 1s infinite;
+			}
+		}
+
+		> .values {
+			display: flex;
+
+			> div {
+				flex: 1;
+
+				> div:first-child {
+					opacity: 0.7;
+				}
+
+				> div:last-child {
+					&.inc {
+						color: var(--warn);
+					}
+
+					&.dec {
+						color: var(--success);
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue
new file mode 100644
index 0000000000..1cc0e10bba
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetMemo.vue
@@ -0,0 +1,111 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
+	<template #header><i class="ti ti-note"></i>{{ i18n.ts._widgets.memo }}</template>
+
+	<div class="otgbylcu">
+		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
+		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+
+const name = 'memo';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const text = ref<string | null>(defaultStore.state.memo);
+const changed = ref(false);
+let timeoutId;
+
+const saveMemo = () => {
+	defaultStore.set('memo', text.value);
+	changed.value = false;
+};
+
+const onChange = () => {
+	changed.value = true;
+	window.clearTimeout(timeoutId);
+	timeoutId = window.setTimeout(saveMemo, 1000);
+};
+
+watch(() => defaultStore.reactiveState.memo, newText => {
+	text.value = newText.value;
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.otgbylcu {
+	padding-bottom: 28px + 16px;
+
+	> textarea {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		min-width: 100%;
+		padding: 16px;
+		color: var(--fg);
+		background: transparent;
+		border: none;
+		border-bottom: solid 0.5px var(--divider);
+		border-radius: 0;
+		box-sizing: border-box;
+		font: inherit;
+		font-size: 0.9em;
+
+		&:focus-visible {
+			outline: none;
+		}
+	}
+
+	> button {
+		display: block;
+		position: absolute;
+		bottom: 8px;
+		right: 8px;
+		margin: 0;
+		padding: 0 10px;
+		height: 28px;
+		outline: none;
+		border-radius: 4px;
+
+		&:disabled {
+			opacity: 0.7;
+			cursor: default;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetNotifications.vue b/packages/frontend/src/widgets/WidgetNotifications.vue
new file mode 100644
index 0000000000..e697209444
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetNotifications.vue
@@ -0,0 +1,70 @@
+<template>
+<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
+	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
+	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
+
+	<div>
+		<XNotifications :include-types="widgetProps.includingTypes"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import XNotifications from '@/components/MkNotifications.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const name = 'notifications';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	height: {
+		type: 'number' as const,
+		default: 300,
+	},
+	includingTypes: {
+		type: 'array' as const,
+		hidden: true,
+		default: null,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const configureNotification = () => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
+		includingTypes: widgetProps.includingTypes,
+	}, {
+		done: async (res) => {
+			const { includingTypes } = res;
+			widgetProps.includingTypes = includingTypes;
+			save();
+		},
+	}, 'closed');
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/WidgetOnlineUsers.vue b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
new file mode 100644
index 0000000000..e9ab79b111
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
@@ -0,0 +1,78 @@
+<template>
+<div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
+	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
+		<template #n><b>{{ onlineUsersCount }}</b></template>
+	</I18n>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const name = 'onlineUsers';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const onlineUsersCount = ref(0);
+
+const tick = () => {
+	os.api('get-online-users-count').then(res => {
+		onlineUsersCount.value = res.count;
+	});
+};
+
+useInterval(tick, 1000 * 15, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-onlineUsers {
+	text-align: center;
+
+	&.pad {
+		padding: 16px 0;
+	}
+
+	> .text {
+		::v-deep(b) {
+			color: #41b781;
+		}
+
+		::v-deep(span) {
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue
new file mode 100644
index 0000000000..65d1de1385
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetPhotos.vue
@@ -0,0 +1,123 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
+	<template #header><i class="ti ti-camera"></i>{{ i18n.ts._widgets.photos }}</template>
+
+	<div class="">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.stream">
+			<div
+				v-for="(image, i) in images" :key="i"
+				:class="$style.img"
+				:style="`background-image: url(${thumbnail(image)})`"
+			></div>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { stream } from '@/stream';
+import { getStaticImageUrl } from '@/scripts/media-proxy';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+
+const name = 'photos';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const connection = stream.useChannel('main');
+const images = ref([]);
+const fetching = ref(true);
+
+const onDriveFileCreated = (file) => {
+	if (/^image\/.+$/.test(file.type)) {
+		images.value.unshift(file);
+		if (images.value.length > 9) images.value.pop();
+	}
+};
+
+const thumbnail = (image: any): string => {
+	return defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(image.thumbnailUrl)
+		: image.thumbnailUrl;
+};
+
+os.api('drive/stream', {
+	type: 'image/*',
+	limit: 9,
+}).then(res => {
+	images.value = res;
+	fetching.value = false;
+});
+
+connection.on('driveFileCreated', onDriveFileCreated);
+onUnmounted(() => {
+	connection.dispose();
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root[data-transparent] {
+	.stream {
+		padding: 0;
+	}
+
+	.img {
+		border: solid 4px transparent;
+		border-radius: 8px;
+	}
+}
+
+.stream {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	padding: 8px;
+
+	.img {
+		flex: 1 1 33%;
+		width: 33%;
+		height: 80px;
+		box-sizing: border-box;
+		background-position: center center;
+		background-size: cover;
+		background-clip: content-box;
+		border: solid 2px transparent;
+		border-radius: 4px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetPostForm.vue b/packages/frontend/src/widgets/WidgetPostForm.vue
new file mode 100644
index 0000000000..f1708775ba
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetPostForm.vue
@@ -0,0 +1,35 @@
+<template>
+<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { GetFormResultType } from '@/scripts/form';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import XPostForm from '@/components/MkPostForm.vue';
+
+const name = 'postForm';
+
+const widgetPropsDef = {
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/WidgetProfile.vue b/packages/frontend/src/widgets/WidgetProfile.vue
new file mode 100644
index 0000000000..c6e66c1df2
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetProfile.vue
@@ -0,0 +1,96 @@
+<template>
+<div class="_panel">
+	<div :class="$style.container" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
+		<div :class="$style.avatarContainer">
+			<MkAvatar :class="$style.avatar" :user="$i" :disable-link="true" :disable-preview="true"/>
+		</div>
+		<div :class="$style.bodyContainer">
+			<div :class="$style.body">
+				<MkA :class="$style.name" :to="userPage($i)">
+					<MkUserName :user="$i"/>
+				</MkA>
+				<div :class="$style.username"><MkAcct :user="$i" detail/></div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { $i } from '@/account';
+import { userPage } from '@/filters/user';
+
+const name = 'profile';
+
+const widgetPropsDef = {
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.container {
+	position: relative;
+	background-size: cover;
+	background-position: center;
+	display: flex;
+}
+
+.avatarContainer {
+	display: inline-block;
+	text-align: center;
+	padding: 16px;
+}
+
+.avatar {
+	display: inline-block;
+	width: 60px;
+	height: 60px;
+	box-sizing: border-box;
+	border: solid 3px #fff;
+}
+
+.bodyContainer {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	padding: 0 16px 0 0;
+}
+
+.body {
+	text-overflow: ellipsis;
+	overflow: clip;
+}
+
+.name {
+	color: #fff;
+	filter: drop-shadow(0 0 4px #000);
+	font-weight: bold;
+}
+
+.username {
+	color: #fff;
+	filter: drop-shadow(0 0 4px #000);
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue
new file mode 100644
index 0000000000..554413cd1e
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetRss.vue
@@ -0,0 +1,120 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
+	<template #header><i class="ti ti-rss"></i>RSS</template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+
+	<div class="ekmkgxbj">
+		<MkLoading v-if="fetching"/>
+		<div class="_fullinfo" v-else-if="(!items || items.length === 0) && widgetProps.showHeader">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ i18n.ts.nothing }}</div>
+		</div>
+		<div v-else :class="$style.feed">
+			<a v-for="item in items" :class="$style.item" :href="item.link" :key="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import { url as base } from '@/config';
+import { i18n } from '@/i18n';
+import { useInterval } from '@/scripts/use-interval';
+
+const name = 'rss';
+
+const widgetPropsDef = {
+	url: {
+		type: 'string' as const,
+		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+	},
+	refreshIntervalSec: {
+		type: 'number' as const,
+		default: 60,
+	},
+	maxEntries: {
+		type: 'number' as const,
+		default: 15,
+	},
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const rawItems = ref([]);
+const items = computed(() => rawItems.value.slice(0, widgetProps.maxEntries));
+const fetching = ref(true);
+const fetchEndpoint = computed(() => {
+	const url = new URL('/api/fetch-rss', base);
+	url.searchParams.set('url', widgetProps.url);
+	return url;
+});
+let intervalClear = $ref<(() => void) | undefined>();
+
+const tick = () => {
+	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
+
+	window.fetch(fetchEndpoint.value, {})
+	.then(res => res.json())
+	.then(feed => {
+		rawItems.value = feed.items ?? [];
+		fetching.value = false;
+	});
+};
+
+watch(() => fetchEndpoint, tick);
+watch(() => widgetProps.refreshIntervalSec, () => {
+	if (intervalClear) {
+		intervalClear();
+	}
+	intervalClear = useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
+		immediate: true,
+		afterMounted: true,
+	});
+}, { immediate: true });
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.feed {
+	padding: 0;
+	font-size: 0.9em;
+}
+
+.item {
+	display: block;
+	padding: 8px 16px;
+	color: var(--fg);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+
+	&:nth-child(even) {
+		background: rgba(#000, 0.05);
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetRssTicker.vue b/packages/frontend/src/widgets/WidgetRssTicker.vue
new file mode 100644
index 0000000000..2620ff4eb0
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetRssTicker.vue
@@ -0,0 +1,180 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
+	<template #header><i class="ti ti-rss"></i>RSS</template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+
+	<div :class="$style.feed">
+		<div v-if="fetching" :class="$style.loading">
+			<MkEllipsis/>
+		</div>
+		<div v-else>
+			<Transition :name="$style.change" mode="default" appear>
+				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
+					<span v-for="item in items" :class="$style.item" :key="item.link">
+						<a :class="$style.link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
+					</span>
+				</MarqueeText>
+			</Transition>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import MarqueeText from '@/components/MkMarquee.vue';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import { shuffle } from '@/scripts/shuffle';
+import { url as base } from '@/config';
+import { useInterval } from '@/scripts/use-interval';
+
+const name = 'rssTicker';
+
+const widgetPropsDef = {
+	url: {
+		type: 'string' as const,
+		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+	},
+	shuffle: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	refreshIntervalSec: {
+		type: 'number' as const,
+		default: 60,
+	},
+	maxEntries: {
+		type: 'number' as const,
+		default: 15,
+	},
+	duration: {
+		type: 'range' as const,
+		default: 70,
+		step: 1,
+		min: 5,
+		max: 200,
+	},
+	reverse: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	showHeader: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const rawItems = ref([]);
+const items = computed(() => {
+	const newItems = rawItems.value.slice(0, widgetProps.maxEntries)
+	if (widgetProps.shuffle) {
+		shuffle(newItems);
+	}
+	return newItems;
+});
+const fetching = ref(true);
+const fetchEndpoint = computed(() => {
+	const url = new URL('/api/fetch-rss', base);
+	url.searchParams.set('url', widgetProps.url);
+	return url;
+});
+let intervalClear = $ref<(() => void) | undefined>();
+
+let key = $ref(0);
+
+const tick = () => {
+	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
+
+	window.fetch(fetchEndpoint.value, {})
+	.then(res => res.json())
+	.then(feed => {
+		rawItems.value = feed.items ?? [];
+		fetching.value = false;
+		key++;
+	});
+};
+
+watch(() => fetchEndpoint, tick);
+watch(() => widgetProps.refreshIntervalSec, () => {
+	if (intervalClear) {
+		intervalClear();
+	}
+	intervalClear = useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
+		immediate: true,
+		afterMounted: true,
+	});
+}, { immediate: true });
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.change {
+	&:global(-enter-active),
+	&:global(-leave-active) {
+		position: absolute;
+		top: 0;
+		transition: all 1s ease;
+	}
+	&:global(-enter-from) {
+		opacity: 0;
+		transform: translateY(-100%);
+	}
+	&:global(-leave-to) {
+		opacity: 0;
+		transform: translateY(100%);
+	}
+}
+
+.feed {
+	--height: 42px;
+	padding: 0;
+	font-size: 0.9em;
+	line-height: var(--height);
+	height: var(--height);
+	contain: strict;
+}
+
+.loading {
+	text-align: center;
+}
+
+.item {
+	display: inline-flex;
+	align-items: center;
+	vertical-align: bottom;
+	color: var(--fg);
+}
+
+.divider {
+	display: inline-block;
+	width: 0.5px;
+	height: 16px;
+	margin: 0 1em;
+	background: var(--divider);
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
new file mode 100644
index 0000000000..2c937d85c5
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -0,0 +1,159 @@
+<template>
+<div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
+	<div @click="choose">
+		<p v-if="widgetProps.folderId == null">
+			{{ i18n.ts.folder }}
+		</p>
+		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ $t('no-image') }}</p>
+		<div ref="slideA" class="slide a"></div>
+		<div ref="slideB" class="slide b"></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const name = 'slideshow';
+
+const widgetPropsDef = {
+	height: {
+		type: 'number' as const,
+		default: 300,
+	},
+	folderId: {
+		type: 'string' as const,
+		default: null,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const images = ref([]);
+const fetching = ref(true);
+const slideA = shallowRef<HTMLElement>();
+const slideB = shallowRef<HTMLElement>();
+
+const change = () => {
+	if (images.value.length === 0) return;
+
+	const index = Math.floor(Math.random() * images.value.length);
+	const img = `url(${ images.value[index].url })`;
+
+	slideB.value.style.backgroundImage = img;
+
+	slideB.value.classList.add('anime');
+	window.setTimeout(() => {
+		// 既にこのウィジェットがunmountされていたら要素がない
+		if (slideA.value == null) return;
+
+		slideA.value.style.backgroundImage = img;
+
+		slideB.value.classList.remove('anime');
+	}, 1000);
+};
+
+const fetch = () => {
+	fetching.value = true;
+
+	os.api('drive/files', {
+		folderId: widgetProps.folderId,
+		type: 'image/*',
+		limit: 100,
+	}).then(res => {
+		images.value = res;
+		fetching.value = false;
+		slideA.value.style.backgroundImage = '';
+		slideB.value.style.backgroundImage = '';
+		change();
+	});
+};
+
+const choose = () => {
+	os.selectDriveFolder(false).then(folder => {
+		if (folder == null) {
+			return;
+		}
+		widgetProps.folderId = folder.id;
+		save();
+		fetch();
+	});
+};
+
+useInterval(change, 10000, {
+	immediate: false,
+	afterMounted: true,
+});
+
+onMounted(() => {
+	if (widgetProps.folderId != null) {
+		fetch();
+	}
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.kvausudm {
+	position: relative;
+
+	> div {
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+
+		> p {
+			display: block;
+			margin: 1em;
+			text-align: center;
+			color: #888;
+		}
+
+		> * {
+			pointer-events: none;
+		}
+
+		> .slide {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-size: cover;
+			background-position: center;
+
+			&.b {
+				opacity: 0;
+			}
+
+			&.anime {
+				transition: opacity 1s;
+				opacity: 1;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetTimeline.vue b/packages/frontend/src/widgets/WidgetTimeline.vue
new file mode 100644
index 0000000000..5bd626cd0e
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetTimeline.vue
@@ -0,0 +1,129 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
+	<template #header>
+		<button class="_button" @click="choose">
+			<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
+			<i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i>
+			<i v-else-if="widgetProps.src === 'social'" class="ti ti-rocket"></i>
+			<i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i>
+			<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
+			<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
+			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
+			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
+		</button>
+	</template>
+
+	<div>
+		<XTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const name = 'timeline';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	height: {
+		type: 'number' as const,
+		default: 300,
+	},
+	src: {
+		type: 'string' as const,
+		default: 'home',
+		hidden: true,
+	},
+	antenna: {
+		type: 'object' as const,
+		default: null,
+		hidden: true,
+	},
+	list: {
+		type: 'object' as const,
+		default: null,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const menuOpened = ref(false);
+
+const setSrc = (src) => {
+	widgetProps.src = src;
+	save();
+};
+
+const choose = async (ev) => {
+	menuOpened.value = true;
+	const [antennas, lists] = await Promise.all([
+		os.api('antennas/list'),
+		os.api('users/lists/list'),
+	]);
+	const antennaItems = antennas.map(antenna => ({
+		text: antenna.name,
+		icon: 'ti ti-antenna',
+		action: () => {
+			widgetProps.antenna = antenna;
+			setSrc('antenna');
+		},
+	}));
+	const listItems = lists.map(list => ({
+		text: list.name,
+		icon: 'ti ti-list',
+		action: () => {
+			widgetProps.list = list;
+			setSrc('list');
+		},
+	}));
+	os.popupMenu([{
+		text: i18n.ts._timelines.home,
+		icon: 'ti ti-home',
+		action: () => { setSrc('home'); },
+	}, {
+		text: i18n.ts._timelines.local,
+		icon: 'ti ti-planet',
+		action: () => { setSrc('local'); },
+	}, {
+		text: i18n.ts._timelines.social,
+		icon: 'ti ti-rocket',
+		action: () => { setSrc('social'); },
+	}, {
+		text: i18n.ts._timelines.global,
+		icon: 'ti ti-whirl',
+		action: () => { setSrc('global'); },
+	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
+		menuOpened.value = false;
+	});
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
new file mode 100644
index 0000000000..e500448167
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -0,0 +1,120 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
+	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
+
+	<div class="wbrkwala">
+		<MkLoading v-if="fetching"/>
+		<TransitionGroup v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
+			<div v-for="stat in stats" :key="stat.tag">
+				<div class="tag">
+					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
+					<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
+				</div>
+				<MkMiniChart class="chart" :src="stat.chart"/>
+			</div>
+		</TransitionGroup>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const name = 'hashtags';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const stats = ref([]);
+const fetching = ref(true);
+
+const fetch = () => {
+	os.api('hashtags/trend').then(res => {
+		stats.value = res;
+		fetching.value = false;
+	});
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwala {
+	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
+	overflow: hidden;
+
+	> .tags {
+		.chart-move {
+			transition: transform 1s ease;
+		}
+
+		> div {
+			display: flex;
+			align-items: center;
+			padding: 14px 16px;
+			border-bottom: solid 0.5px var(--divider);
+
+			> .tag {
+				flex: 1;
+				overflow: hidden;
+				font-size: 0.9em;
+				color: var(--fg);
+
+				> .a {
+					display: block;
+					width: 100%;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					line-height: 18px;
+				}
+
+				> p {
+					margin: 0;
+					font-size: 75%;
+					opacity: 0.7;
+					line-height: 16px;
+				}
+			}
+
+			> .chart {
+				height: 30px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetUnixClock.vue b/packages/frontend/src/widgets/WidgetUnixClock.vue
new file mode 100644
index 0000000000..cf85ac782c
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetUnixClock.vue
@@ -0,0 +1,116 @@
+<template>
+<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+	<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
+	<div class="time">
+		<span v-text="ss"></span>
+		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
+		<span v-if="widgetProps.showMs" v-text="ms"></span>
+	</div>
+	<div v-if="widgetProps.showLabel" class="label">UTC</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+
+const name = 'unixClock';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	fontSize: {
+		type: 'number' as const,
+		default: 1.5,
+		step: 0.1,
+	},
+	showMs: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	showLabel: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+let intervalId;
+const ss = ref('');
+const ms = ref('');
+const showColon = ref(false);
+let prevSec: string | null = null;
+
+watch(showColon, (v) => {
+	if (v) {
+		window.setTimeout(() => {
+			showColon.value = false;
+		}, 30);
+	}
+});
+
+const tick = () => {
+	const now = new Date();
+	ss.value = Math.floor(now.getTime() / 1000).toString();
+	ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
+	if (ss.value !== prevSec) showColon.value = true;
+	prevSec = ss.value;
+};
+
+tick();
+
+watch(() => widgetProps.showMs, () => {
+	if (intervalId) window.clearInterval(intervalId);
+	intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
+}, { immediate: true });
+
+onUnmounted(() => {
+	window.clearInterval(intervalId);
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-unixClock {
+	padding: 16px 0;
+	text-align: center;
+
+	> .label {
+		font-size: 65%;
+		opacity: 0.7;
+	}
+
+	> .time {
+		> .colon {
+			opacity: 0;
+			transition: opacity 1s ease;
+
+			&.showColon {
+				opacity: 1;
+				transition: opacity 0s;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetUserList.vue b/packages/frontend/src/widgets/WidgetUserList.vue
new file mode 100644
index 0000000000..9ffbf0d8e3
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetUserList.vue
@@ -0,0 +1,136 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
+	<template #header><i class="ti ti-users"></i>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
+	<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></template>
+
+	<div :class="$style.root">
+		<div v-if="widgetProps.listId == null" class="init">
+			<MkButton primary @click="chooseList">{{ i18n.ts._widgets._userList.chooseList }}</MkButton>
+		</div>
+		<MkLoading v-else-if="fetching"/>
+		<div v-else class="users">
+			<MkA v-for="user in users" :key="user.id" class="user">
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+			</MkA>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+import MkButton from '@/components/MkButton.vue';
+
+const name = 'userList';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	listId: {
+		type: 'string' as const,
+		default: null,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+let list = $ref();
+let users = $ref([]);
+let fetching = $ref(true);
+
+async function chooseList() {
+	const lists = await os.api('users/lists/list');
+	const { canceled, result: list } = await os.select({
+		title: i18n.ts.selectList,
+		items: lists.map(x => ({
+			value: x, text: x.name,
+		})),
+		default: widgetProps.listId,
+	});
+	if (canceled) return;
+
+	widgetProps.listId = list.id;
+	save();
+	fetch();
+}
+
+const fetch = () => {
+	if (widgetProps.listId == null) {
+		fetching = false;
+		return;
+	}
+
+	os.api('users/lists/show', {
+		listId: widgetProps.listId,
+	}).then(_list => {
+		list = _list;
+		os.api('users/show', {
+			userIds: list.userIds,
+		}).then(_users => {
+			users = _users;
+			fetching = false;
+		});
+	});
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .init {
+			padding: 16px;
+		}
+
+		> .users {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
+			grid-gap: 12px;
+			place-content: center;
+			padding: 16px;
+
+			> .user {
+				width: 100%;
+				height: 100%;
+				aspect-ratio: 1;
+
+				> .avatar {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/activity.calendar.vue b/packages/frontend/src/widgets/activity.calendar.vue
deleted file mode 100644
index 84f6af1c13..0000000000
--- a/packages/frontend/src/widgets/activity.calendar.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-<svg viewBox="0 0 21 7">
-	<rect v-for="record in activity" class="day"
-		width="1" height="1"
-		:x="record.x" :y="record.date.weekday"
-		rx="1" ry="1"
-		fill="transparent">
-		<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
-	</rect>
-	<rect v-for="record in activity" class="day"
-		:width="record.v" :height="record.v"
-		:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
-		rx="1" ry="1"
-		:fill="record.color"
-		style="pointer-events: none;"/>
-	<rect class="today"
-		width="1" height="1"
-		:x="activity[0].x" :y="activity[0].date.weekday"
-		rx="1" ry="1"
-		fill="none"
-		stroke-width="0.1"
-		stroke="#f73520"/>
-</svg>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	activity: any[]
-}>();
-
-for (const d of props.activity) {
-	d.total = d.notes + d.replies + d.renotes;
-}
-const peak = Math.max(...props.activity.map(d => d.total));
-
-const now = new Date();
-const year = now.getFullYear();
-const month = now.getMonth();
-const day = now.getDate();
-
-let x = 20;
-props.activity.slice().forEach((d, i) => {
-	d.x = x;
-
-	const date = new Date(year, month, day - i);
-	d.date = {
-		year: date.getFullYear(),
-		month: date.getMonth(),
-		day: date.getDate(),
-		weekday: date.getDay(),
-	};
-
-	d.v = peak === 0 ? 0 : d.total / (peak / 2);
-	if (d.v > 1) d.v = 1;
-	const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170;
-	const cs = d.v * 100;
-	const cl = 15 + ((1 - d.v) * 80);
-	d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
-
-	if (d.date.weekday === 0) x--;
-});
-</script>
-
-<style lang="scss" scoped>
-svg {
-	display: block;
-	padding: 16px;
-	width: 100%;
-	box-sizing: border-box;
-
-	> rect {
-		transform-origin: center;
-
-		&.day {
-			&:hover {
-				fill: rgba(#000, 0.05);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/activity.chart.vue b/packages/frontend/src/widgets/activity.chart.vue
deleted file mode 100644
index b61e419f94..0000000000
--- a/packages/frontend/src/widgets/activity.chart.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
-	<polyline
-		:points="pointsNote"
-		fill="none"
-		stroke-width="1"
-		stroke="#41ddde"/>
-	<polyline
-		:points="pointsReply"
-		fill="none"
-		stroke-width="1"
-		stroke="#f7796c"/>
-	<polyline
-		:points="pointsRenote"
-		fill="none"
-		stroke-width="1"
-		stroke="#a1de41"/>
-	<polyline
-		:points="pointsTotal"
-		fill="none"
-		stroke-width="1"
-		stroke="#555"
-		stroke-dasharray="2 2"/>
-</svg>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	activity: any[]
-}>();
-
-let viewBoxX: number = $ref(147);
-let viewBoxY: number = $ref(60);
-let zoom: number = $ref(1);
-let pos: number = $ref(0);
-let pointsNote: any = $ref(null);
-let pointsReply: any = $ref(null);
-let pointsRenote: any = $ref(null);
-let pointsTotal: any = $ref(null);
-
-function dragListen(fn) {
-	window.addEventListener('mousemove', fn);
-	window.addEventListener('mouseleave', dragClear.bind(null, fn));
-	window.addEventListener('mouseup', dragClear.bind(null, fn));
-}
-
-function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
-}
-
-function onMousedown(ev) {
-	const clickX = ev.clientX;
-	const clickY = ev.clientY;
-	const baseZoom = zoom;
-	const basePos = pos;
-
-	// 動かした時
-	dragListen(me => {
-		let moveLeft = me.clientX - clickX;
-		let moveTop = me.clientY - clickY;
-
-		zoom = Math.max(1, baseZoom + (-moveTop / 20));
-		pos = Math.min(0, basePos + moveLeft);
-		if (pos < -(((props.activity.length - 1) * zoom) - viewBoxX)) pos = -(((props.activity.length - 1) * zoom) - viewBoxX);
-
-		render();
-	});
-}
-
-function render() {
-	const peak = Math.max(...props.activity.map(d => d.total));
-	if (peak !== 0) {
-		const activity = props.activity.slice().reverse();
-		pointsNote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.notes / peak)) * viewBoxY}`).join(' ');
-		pointsReply = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.replies / peak)) * viewBoxY}`).join(' ');
-		pointsRenote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.renotes / peak)) * viewBoxY}`).join(' ');
-		pointsTotal = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.total / peak)) * viewBoxY}`).join(' ');
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-svg {
-	display: block;
-	padding: 16px;
-	width: 100%;
-	box-sizing: border-box;
-	cursor: all-scroll;
-}
-</style>
diff --git a/packages/frontend/src/widgets/activity.vue b/packages/frontend/src/widgets/activity.vue
deleted file mode 100644
index 238a05ca09..0000000000
--- a/packages/frontend/src/widgets/activity.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
-
-	<div>
-		<MkLoading v-if="fetching"/>
-		<template v-else>
-			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
-			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
-		</template>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XCalendar from './activity.calendar.vue';
-import XChart from './activity.chart.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const name = 'activity';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	view: {
-		type: 'number' as const,
-		default: 0,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const activity = ref(null);
-const fetching = ref(true);
-
-const toggleView = () => {
-	if (widgetProps.view === 1) {
-		widgetProps.view = 0;
-	} else {
-		widgetProps.view++;
-	}
-	save();
-};
-
-os.apiGet('charts/user/notes', {
-	userId: $i.id,
-	span: 'day',
-	limit: 7 * 21,
-}).then(res => {
-	activity.value = res.diffs.normal.map((_, i) => ({
-		total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i],
-		notes: res.diffs.normal[i],
-		replies: res.diffs.reply[i],
-		renotes: res.diffs.renote[i],
-	}));
-	fetching.value = false;
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/frontend/src/widgets/aichan.vue b/packages/frontend/src/widgets/aichan.vue
deleted file mode 100644
index ab5b375ae4..0000000000
--- a/packages/frontend/src/widgets/aichan.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-aichan">
-	<iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-
-const name = 'ai';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const live2d = shallowRef<HTMLIFrameElement>();
-
-const touched = () => {
-	//if (this.live2d) this.live2d.changeExpression('gurugurume');
-};
-
-const onMousemove = (ev: MouseEvent) => {
-	const iframeRect = live2d.value.getBoundingClientRect();
-	live2d.value.contentWindow.postMessage({
-		type: 'moveCursor',
-		body: {
-			x: ev.clientX - iframeRect.left,
-			y: ev.clientY - iframeRect.top,
-		},
-	}, '*');
-};
-
-onMounted(() => {
-	window.addEventListener('mousemove', onMousemove, { passive: true });
-});
-
-onUnmounted(() => {
-	window.removeEventListener('mousemove', onMousemove);
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.dedjhjmo {
-	width: 100%;
-	height: 350px;
-	border: none;
-	pointer-events: none;
-}
-</style>
diff --git a/packages/frontend/src/widgets/aiscript-app.vue b/packages/frontend/src/widgets/aiscript-app.vue
deleted file mode 100644
index 1445e5b1ad..0000000000
--- a/packages/frontend/src/widgets/aiscript-app.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscriptApp">
-	<template #header>App</template>
-	<div :class="$style.root">
-		<MkAsUi v-if="root" :component="root" :components="components" size="small"/>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { Interpreter, Parser, utils, values } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import MkAsUi from '@/components/MkAsUi.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import { AsUiComponent, AsUiRoot, patch, registerAsUiLib, render } from '@/scripts/aiscript/ui';
-
-const name = 'aiscriptApp';
-
-const widgetPropsDef = {
-	script: {
-		type: 'string' as const,
-		multiline: true,
-		default: '',
-	},
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const parser = new Parser();
-
-const root = ref<AsUiRoot>();
-const components: Ref<AsUiComponent>[] = [];
-
-async function run() {
-	const aiscript = new Interpreter({
-		...createAiScriptEnv({
-			storageKey: 'widget',
-			token: $i?.token,
-		}),
-		...registerAsUiLib(components, (_root) => {
-			root.value = _root.value;
-		}),
-	}, {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
-				});
-			});
-		},
-		out: (value) => {
-			// nop
-		},
-		log: (type, params) => {
-			// nop
-		},
-	});
-
-	let ast;
-	try {
-		ast = parser.parse(widgetProps.script);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
-		});
-		return;
-	}
-	try {
-		await aiscript.exec(ast);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			title: 'AiScript Error',
-			text: err.message,
-		});
-	}
-}
-
-watch(() => widgetProps.script, () => {
-	run();
-});
-
-onMounted(() => {
-	run();
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	padding: 16px;
-}
-</style>
diff --git a/packages/frontend/src/widgets/aiscript.vue b/packages/frontend/src/widgets/aiscript.vue
deleted file mode 100644
index dcc73db201..0000000000
--- a/packages/frontend/src/widgets/aiscript.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
-	<template #header><i class="ti ti-terminal-2"></i>{{ i18n.ts._widgets.aiscript }}</template>
-
-	<div class="uylguesu _monospace">
-		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
-		<button class="_buttonPrimary" @click="run">RUN</button>
-		<div class="logs">
-			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { Interpreter, Parser, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const name = 'aiscript';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	script: {
-		type: 'string' as const,
-		multiline: true,
-		default: '(1 + 1)',
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const parser = new Parser();
-
-const logs = ref<{
-	id: string;
-	text: string;
-	print: boolean;
-}[]>([]);
-
-const run = async () => {
-	logs.value = [];
-	const aiscript = new Interpreter(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
-				});
-			});
-		},
-		out: (value) => {
-			logs.value.push({
-				id: Math.random().toString(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
-		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
-					id: Math.random().toString(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
-	});
-
-	let ast;
-	try {
-		ast = parser.parse(widgetProps.script);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
-		});
-		return;
-	}
-	try {
-		await aiscript.exec(ast);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	}
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.uylguesu {
-	text-align: right;
-
-	> textarea {
-		display: block;
-		width: 100%;
-		max-width: 100%;
-		min-width: 100%;
-		padding: 16px;
-		color: var(--fg);
-		background: transparent;
-		border: none;
-		border-bottom: solid 0.5px var(--divider);
-		border-radius: 0;
-		box-sizing: border-box;
-		font: inherit;
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	> button {
-		display: inline-block;
-		margin: 8px;
-		padding: 0 10px;
-		height: 28px;
-		outline: none;
-		border-radius: 4px;
-
-		&:disabled {
-			opacity: 0.7;
-			cursor: default;
-		}
-	}
-
-	> .logs {
-		border-top: solid 0.5px var(--divider);
-		text-align: left;
-		padding: 16px;
-
-		&:empty {
-			display: none;
-		}
-
-		> .log {
-			&:not(.print) {
-				opacity: 0.7;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/button.vue b/packages/frontend/src/widgets/button.vue
deleted file mode 100644
index f65b115cc0..0000000000
--- a/packages/frontend/src/widgets/button.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-<div class="mkw-button">
-	<MkButton :primary="widgetProps.colored" full @click="run">
-		{{ widgetProps.label }}
-	</MkButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { Interpreter, Parser, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-
-const name = 'button';
-
-const widgetPropsDef = {
-	label: {
-		type: 'string' as const,
-		default: 'BUTTON',
-	},
-	colored: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	script: {
-		type: 'string' as const,
-		multiline: true,
-		default: 'Mk:dialog("hello" "world")',
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const parser = new Parser();
-
-const run = async () => {
-	const aiscript = new Interpreter(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
-				});
-			});
-		},
-		out: (value) => {
-			// nop
-		},
-		log: (type, params) => {
-			// nop
-		},
-	});
-
-	let ast;
-	try {
-		ast = parser.parse(widgetProps.script);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
-		});
-		return;
-	}
-	try {
-		await aiscript.exec(ast);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	}
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-button {
-}
-</style>
diff --git a/packages/frontend/src/widgets/calendar.vue b/packages/frontend/src/widgets/calendar.vue
deleted file mode 100644
index 1bd431259a..0000000000
--- a/packages/frontend/src/widgets/calendar.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<template>
-<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
-	<div class="calendar" :class="{ isHoliday }">
-		<p class="month-and-year">
-			<span class="year">{{ $t('yearX', { year }) }}</span>
-			<span class="month">{{ $t('monthX', { month }) }}</span>
-		</p>
-		<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
-		<p v-else class="day">{{ $t('dayX', { day }) }}</p>
-		<p class="week-day">{{ weekDay }}</p>
-	</div>
-	<div class="info">
-		<div>
-			<p>{{ i18n.ts.today }}<b>{{ dayP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${dayP}%` }"></div>
-			</div>
-		</div>
-		<div>
-			<p>{{ i18n.ts.thisMonth }}<b>{{ monthP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${monthP}%` }"></div>
-			</div>
-		</div>
-		<div>
-			<p>{{ i18n.ts.thisYear }}<b>{{ yearP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${yearP}%` }"></div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
-
-const name = 'calendar';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const year = ref(0);
-const month = ref(0);
-const day = ref(0);
-const weekDay = ref('');
-const yearP = ref(0);
-const monthP = ref(0);
-const dayP = ref(0);
-const isHoliday = ref(false);
-const tick = () => {
-	const now = new Date();
-	const nd = now.getDate();
-	const nm = now.getMonth();
-	const ny = now.getFullYear();
-
-	year.value = ny;
-	month.value = nm + 1;
-	day.value = nd;
-	weekDay.value = [
-		i18n.ts._weekday.sunday,
-		i18n.ts._weekday.monday,
-		i18n.ts._weekday.tuesday,
-		i18n.ts._weekday.wednesday,
-		i18n.ts._weekday.thursday,
-		i18n.ts._weekday.friday,
-		i18n.ts._weekday.saturday,
-	][now.getDay()];
-
-	const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
-	const dayDenom = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
-	const monthNumer = now.getTime() - new Date(ny, nm, 1).getTime();
-	const monthDenom = new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
-	const yearNumer = now.getTime() - new Date(ny, 0, 1).getTime();
-	const yearDenom = new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
-
-	dayP.value = dayNumer / dayDenom * 100;
-	monthP.value = monthNumer / monthDenom * 100;
-	yearP.value = yearNumer / yearDenom * 100;
-
-	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
-};
-
-useInterval(tick, 1000, {
-	immediate: true,
-	afterMounted: false,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-calendar {
-	padding: 16px 0;
-
-	&:after {
-		content: "";
-		display: block;
-		clear: both;
-	}
-
-	> .calendar {
-		float: left;
-		width: 60%;
-		text-align: center;
-
-		&.isHoliday {
-			> .day {
-				color: #ef95a0;
-			}
-		}
-
-		> .month-and-year, > .week-day {
-			margin: 0;
-			line-height: 18px;
-			font-size: 0.9em;
-
-			> .year, > .month {
-				margin: 0 4px;
-			}
-		}
-
-		> .day {
-			margin: 10px 0;
-			line-height: 32px;
-			font-size: 1.75em;
-		}
-	}
-
-	> .info {
-		display: block;
-		float: left;
-		width: 40%;
-		padding: 0 16px 0 0;
-		box-sizing: border-box;
-
-		> div {
-			margin-bottom: 8px;
-
-			&:last-child {
-				margin-bottom: 4px;
-			}
-
-			> p {
-				display: flex;
-				margin: 0 0 2px 0;
-				font-size: 0.75em;
-				line-height: 18px;
-				opacity: 0.8;
-
-				> b {
-					margin-left: auto;
-				}
-			}
-
-			> .meter {
-				width: 100%;
-				overflow: hidden;
-				background: var(--X11);
-				border-radius: 8px;
-
-				> .val {
-					height: 4px;
-					transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
-				}
-			}
-
-			&:nth-child(1) {
-				> .meter > .val {
-					background: #f7796c;
-				}
-			}
-
-			&:nth-child(2) {
-				> .meter > .val {
-					background: #a1de41;
-				}
-			}
-
-			&:nth-child(3) {
-				> .meter > .val {
-					background: #41ddde;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/clicker.vue b/packages/frontend/src/widgets/clicker.vue
deleted file mode 100644
index 168f05bccd..0000000000
--- a/packages/frontend/src/widgets/clicker.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-clicker">
-	<template #header><i class="ti ti-cookie"></i>Clicker</template>
-	<MkClickerGame/>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { $i } from '@/account';
-import MkContainer from '@/components/MkContainer.vue';
-import MkClickerGame from '@/components/MkClickerGame.vue';
-
-const name = 'clicker';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/frontend/src/widgets/clock.vue b/packages/frontend/src/widgets/clock.vue
deleted file mode 100644
index dc99b6631e..0000000000
--- a/packages/frontend/src/widgets/clock.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-clock">
-	<div class="vubelbmv" :class="widgetProps.size">
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
-		<MkAnalogClock
-			class="clock"
-			:thickness="widgetProps.thickness"
-			:offset="tzOffset"
-			:graduations="widgetProps.graduations"
-			:fade-graduations="widgetProps.fadeGraduations"
-			:twentyfour="widgetProps.twentyFour"
-			:s-animation="widgetProps.sAnimation"
-		/>
-		<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkAnalogClock from '@/components/MkAnalogClock.vue';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
-import { timezones } from '@/scripts/timezones';
-import { i18n } from '@/i18n';
-
-const name = 'clock';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	size: {
-		type: 'radio' as const,
-		default: 'medium',
-		options: [{
-			value: 'small', label: i18n.ts.small,
-		}, {
-			value: 'medium', label: i18n.ts.medium,
-		}, {
-			value: 'large', label: i18n.ts.large,
-		}],
-	},
-	thickness: {
-		type: 'radio' as const,
-		default: 0.2,
-		options: [{
-			value: 0.1, label: 'thin',
-		}, {
-			value: 0.2, label: 'medium',
-		}, {
-			value: 0.3, label: 'thick',
-		}],
-	},
-	graduations: {
-		type: 'radio' as const,
-		default: 'numbers',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'dots', label: 'Dots',
-		}, {
-			value: 'numbers', label: 'Numbers',
-		}],
-	},
-	fadeGraduations: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	sAnimation: {
-		type: 'radio' as const,
-		default: 'elastic',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'elastic', label: 'Elastic',
-		}, {
-			value: 'easeOut', label: 'Ease out',
-		}],
-	},
-	twentyFour: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	label: {
-		type: 'radio' as const,
-		default: 'none',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'time', label: 'Time',
-		}, {
-			value: 'tz', label: 'TZ',
-		}, {
-			value: 'timeAndTz', label: 'Time + TZ',
-		}],
-	},
-	timezone: {
-		type: 'enum' as const,
-		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
-
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
-
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.vubelbmv {
-	position: relative;
-
-	> .label {
-		position: absolute;
-		opacity: 0.7;
-
-		&.a {
-			top: 14px;
-			left: 14px;
-		}
-
-		&.b {
-			top: 14px;
-			right: 14px;
-		}
-
-		&.c {
-			bottom: 14px;
-			left: 14px;
-		}
-
-		&.d {
-			bottom: 14px;
-			right: 14px;
-		}
-	}
-
-	> .clock {
-		margin: auto;
-	}
-
-	&.small {
-		padding: 12px;
-
-		> .clock {
-			height: 100px;
-		}
-	}
-
-	&.medium {
-		padding: 14px;
-
-		> .clock {
-			height: 150px;
-		}
-	}
-
-	&.large {
-		padding: 16px;
-
-		> .clock {
-			height: 200px;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/digital-clock.vue b/packages/frontend/src/widgets/digital-clock.vue
deleted file mode 100644
index d2bfd523f3..0000000000
--- a/packages/frontend/src/widgets/digital-clock.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
-	<div class="time">
-		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
-	</div>
-	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { timezones } from '@/scripts/timezones';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
-
-const name = 'digitalClock';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	fontSize: {
-		type: 'number' as const,
-		default: 1.5,
-		step: 0.1,
-	},
-	showMs: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	showLabel: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	timezone: {
-		type: 'enum' as const,
-		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
-
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
-
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-digitalClock {
-	padding: 16px 0;
-	text-align: center;
-
-	> .label {
-		font-size: 65%;
-		opacity: 0.7;
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/federation.vue b/packages/frontend/src/widgets/federation.vue
deleted file mode 100644
index 23f7cd4411..0000000000
--- a/packages/frontend/src/widgets/federation.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="ti ti-whirl"></i>{{ i18n.ts._widgets.federation }}</template>
-
-	<div class="wbrkwalb">
-		<MkLoading v-if="fetching"/>
-		<TransitionGroup v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
-			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
-				<img :src="getInstanceIcon(instance)" alt=""/>
-				<div class="body">
-					<MkA class="a" :to="`/instance-info/${instance.host}`" behavior="window" :title="instance.host">{{ instance.host }}</MkA>
-					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
-				</div>
-				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
-			</div>
-		</TransitionGroup>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const name = 'federation';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const instances = ref([]);
-const charts = ref([]);
-const fetching = ref(true);
-
-const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+latestRequestReceivedAt',
-		limit: 5,
-	});
-	const fetchedCharts = await Promise.all(fetchedInstances.map(i => os.apiGet('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
-	instances.value = fetchedInstances;
-	charts.value = fetchedCharts;
-	fetching.value = false;
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-
-function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
-}
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.wbrkwalb {
-	$bodyTitleHieght: 18px;
-	$bodyInfoHieght: 16px;
-
-	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
-
-	> .instances {
-		.chart-move {
-			transition: transform 1s ease;
-		}
-
-		> .instance {
-			display: flex;
-			align-items: center;
-			padding: 14px 16px;
-			border-bottom: solid 0.5px var(--divider);
-
-			> img {
-				display: block;
-				width: ($bodyTitleHieght + $bodyInfoHieght);
-				height: ($bodyTitleHieght + $bodyInfoHieght);
-				object-fit: cover;
-				border-radius: 4px;
-				margin-right: 8px;
-			}
-
-			> .body {
-				flex: 1;
-				overflow: hidden;
-				font-size: 0.9em;
-				color: var(--fg);
-				padding-right: 8px;
-
-				> .a {
-					display: block;
-					width: 100%;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					line-height: $bodyTitleHieght;
-				}
-
-				> p {
-					margin: 0;
-					font-size: 75%;
-					opacity: 0.7;
-					line-height: $bodyInfoHieght;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-			}
-
-			> .chart {
-				height: 30px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index 10b8d94234..9bcb9a317a 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -1,33 +1,33 @@
 import { App, defineAsyncComponent } from 'vue';
 
 export default function(app: App) {
-	app.component('MkwProfile', defineAsyncComponent(() => import('./profile.vue')));
-	app.component('MkwInstanceInfo', defineAsyncComponent(() => import('./instance-info.vue')));
-	app.component('MkwMemo', defineAsyncComponent(() => import('./memo.vue')));
-	app.component('MkwNotifications', defineAsyncComponent(() => import('./notifications.vue')));
-	app.component('MkwTimeline', defineAsyncComponent(() => import('./timeline.vue')));
-	app.component('MkwCalendar', defineAsyncComponent(() => import('./calendar.vue')));
-	app.component('MkwRss', defineAsyncComponent(() => import('./rss.vue')));
-	app.component('MkwRssTicker', defineAsyncComponent(() => import('./rss-ticker.vue')));
-	app.component('MkwTrends', defineAsyncComponent(() => import('./trends.vue')));
-	app.component('MkwClock', defineAsyncComponent(() => import('./clock.vue')));
-	app.component('MkwActivity', defineAsyncComponent(() => import('./activity.vue')));
-	app.component('MkwPhotos', defineAsyncComponent(() => import('./photos.vue')));
-	app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue')));
-	app.component('MkwUnixClock', defineAsyncComponent(() => import('./unix-clock.vue')));
-	app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
-	app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
-	app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
-	app.component('MkwServerMetric', defineAsyncComponent(() => import('./server-metric/index.vue')));
-	app.component('MkwOnlineUsers', defineAsyncComponent(() => import('./online-users.vue')));
-	app.component('MkwJobQueue', defineAsyncComponent(() => import('./job-queue.vue')));
-	app.component('MkwInstanceCloud', defineAsyncComponent(() => import('./instance-cloud.vue')));
-	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
-	app.component('MkwAiscript', defineAsyncComponent(() => import('./aiscript.vue')));
-	app.component('MkwAiscriptApp', defineAsyncComponent(() => import('./aiscript-app.vue')));
-	app.component('MkwAichan', defineAsyncComponent(() => import('./aichan.vue')));
-	app.component('MkwUserList', defineAsyncComponent(() => import('./user-list.vue')));
-	app.component('MkwClicker', defineAsyncComponent(() => import('./clicker.vue')));
+	app.component('WidgetProfile', defineAsyncComponent(() => import('./WidgetProfile.vue')));
+	app.component('WidgetInstanceInfo', defineAsyncComponent(() => import('./WidgetInstanceInfo.vue')));
+	app.component('WidgetMemo', defineAsyncComponent(() => import('./WidgetMemo.vue')));
+	app.component('WidgetNotifications', defineAsyncComponent(() => import('./WidgetNotifications.vue')));
+	app.component('WidgetTimeline', defineAsyncComponent(() => import('./WidgetTimeline.vue')));
+	app.component('WidgetCalendar', defineAsyncComponent(() => import('./WidgetCalendar.vue')));
+	app.component('WidgetRss', defineAsyncComponent(() => import('./WidgetRss.vue')));
+	app.component('WidgetRssTicker', defineAsyncComponent(() => import('./WidgetRssTicker.vue')));
+	app.component('WidgetTrends', defineAsyncComponent(() => import('./WidgetTrends.vue')));
+	app.component('WidgetClock', defineAsyncComponent(() => import('./WidgetClock.vue')));
+	app.component('WidgetActivity', defineAsyncComponent(() => import('./WidgetActivity.vue')));
+	app.component('WidgetPhotos', defineAsyncComponent(() => import('./WidgetPhotos.vue')));
+	app.component('WidgetDigitalClock', defineAsyncComponent(() => import('./WidgetDigitalClock.vue')));
+	app.component('WidgetUnixClock', defineAsyncComponent(() => import('./WidgetUnixClock.vue')));
+	app.component('WidgetFederation', defineAsyncComponent(() => import('./WidgetFederation.vue')));
+	app.component('WidgetPostForm', defineAsyncComponent(() => import('./WidgetPostForm.vue')));
+	app.component('WidgetSlideshow', defineAsyncComponent(() => import('./WidgetSlideshow.vue')));
+	app.component('WidgetServerMetric', defineAsyncComponent(() => import('./server-metric/index.vue')));
+	app.component('WidgetOnlineUsers', defineAsyncComponent(() => import('./WidgetOnlineUsers.vue')));
+	app.component('WidgetJobQueue', defineAsyncComponent(() => import('./WidgetJobQueue.vue')));
+	app.component('WidgetInstanceCloud', defineAsyncComponent(() => import('./WidgetInstanceCloud.vue')));
+	app.component('WidgetButton', defineAsyncComponent(() => import('./WidgetButton.vue')));
+	app.component('WidgetAiscript', defineAsyncComponent(() => import('./WidgetAiscript.vue')));
+	app.component('WidgetAiscriptApp', defineAsyncComponent(() => import('./WidgetAiscriptApp.vue')));
+	app.component('WidgetAichan', defineAsyncComponent(() => import('./WidgetAichan.vue')));
+	app.component('WidgetUserList', defineAsyncComponent(() => import('./WidgetUserList.vue')));
+	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 }
 
 export const widgets = [
diff --git a/packages/frontend/src/widgets/instance-cloud.vue b/packages/frontend/src/widgets/instance-cloud.vue
deleted file mode 100644
index 1068c5ac4b..0000000000
--- a/packages/frontend/src/widgets/instance-cloud.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud">
-	<div class="">
-		<MkTagCloud v-if="activeInstances">
-			<li v-for="instance in activeInstances" :key="instance.id">
-				<a @click.prevent="onInstanceClick(instance)">
-					<img style="width: 32px;" :src="getInstanceIcon(instance)">
-				</a>
-			</li>
-		</MkTagCloud>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkTagCloud from '@/components/MkTagCloud.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const name = 'instanceCloud';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-let cloud = $shallowRef<InstanceType<typeof MkTagCloud> | null>();
-let activeInstances = $shallowRef(null);
-
-function onInstanceClick(i) {
-	os.pageWindow(`/instance-info/${i.host}`);
-}
-
-useInterval(() => {
-	os.api('federation/instances', {
-		sort: '+latestRequestReceivedAt',
-		limit: 25,
-	}).then(res => {
-		activeInstances = res;
-		if (cloud) cloud.update();
-	});
-}, 1000 * 60 * 3, {
-	immediate: true,
-	afterMounted: true,
-});
-
-function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
-}
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/widgets/instance-info.vue b/packages/frontend/src/widgets/instance-info.vue
deleted file mode 100644
index 990802d847..0000000000
--- a/packages/frontend/src/widgets/instance-info.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-<div class="_panel">
-	<div :class="$style.container" :style="{ backgroundImage: $instance.bannerUrl ? `url(${ $instance.bannerUrl })` : null }">
-		<div :class="$style.iconContainer">
-			<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon"/>
-		</div>
-		<div :class="$style.bodyContainer">
-			<div :class="$style.body">
-				<MkA :class="$style.name" to="/about" behavior="window">{{ $instance.name }}</MkA>
-				<div :class="$style.host">{{ host }}</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { host } from '@/config';
-
-const name = 'instanceInfo';
-
-const widgetPropsDef = {
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.container {
-	position: relative;
-	background-size: cover;
-	background-position: center;
-	display: flex;
-}
-
-.iconContainer {
-	display: inline-block;
-	text-align: center;
-	padding: 16px;
-}
-
-.icon {
-	display: inline-block;
-	width: 60px;
-	height: 60px;
-	border-radius: 8px;
-	box-sizing: border-box;
-	border: solid 3px #fff;
-}
-
-.bodyContainer {
-	display: flex;
-	align-items: center;
-	min-width: 0;
-	padding: 0 16px 0 0;
-}
-
-.body {
-	text-overflow: ellipsis;
-	overflow: clip;
-}
-
-.name {
-	color: #fff;
-	filter: drop-shadow(0 0 4px #000);
-	font-weight: bold;
-}
-
-.host {
-	color: #fff;
-	filter: drop-shadow(0 0 4px #000);
-}
-</style>
diff --git a/packages/frontend/src/widgets/job-queue.vue b/packages/frontend/src/widgets/job-queue.vue
deleted file mode 100644
index 9f19c51825..0000000000
--- a/packages/frontend/src/widgets/job-queue.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-<div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
-	<div class="inbox">
-		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
-			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
-			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
-			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
-			</div>
-		</div>
-	</div>
-	<div class="deliver">
-		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
-			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
-			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
-			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import number from '@/filters/number';
-import * as sound from '@/scripts/sound';
-import * as os from '@/os';
-import { deepClone } from '@/scripts/clone';
-
-const name = 'jobQueue';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	sound: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const connection = stream.useChannel('queueStats');
-const current = reactive({
-	inbox: {
-		activeSincePrevTick: 0,
-		active: 0,
-		waiting: 0,
-		delayed: 0,
-	},
-	deliver: {
-		activeSincePrevTick: 0,
-		active: 0,
-		waiting: 0,
-		delayed: 0,
-	},
-});
-const prev = reactive({} as typeof current);
-const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
-
-for (const domain of ['inbox', 'deliver']) {
-	prev[domain] = deepClone(current[domain]);
-}
-
-const onStats = (stats) => {
-	for (const domain of ['inbox', 'deliver']) {
-		prev[domain] = deepClone(current[domain]);
-		current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
-		current[domain].active = stats[domain].active;
-		current[domain].waiting = stats[domain].waiting;
-		current[domain].delayed = stats[domain].delayed;
-
-		if (current[domain].waiting > 0 && widgetProps.sound && jammedSound.paused) {
-			jammedSound.play();
-		}
-	}
-};
-
-const onStatsLog = (statsLog) => {
-	for (const stats of [...statsLog].reverse()) {
-		onStats(stats);
-	}
-};
-
-connection.on('stats', onStats);
-connection.on('statsLog', onStatsLog);
-
-connection.send('requestLog', {
-	id: Math.random().toString().substr(2, 8),
-	length: 1,
-});
-
-onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
-	connection.dispose();
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-@keyframes warnBlink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
-}
-
-.mkw-jobQueue {
-	font-size: 0.9em;
-
-	> div {
-		padding: 16px;
-
-		&:not(:first-child) {
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .label {
-			display: flex;
-
-			> .icon {
-				color: var(--warn);
-				margin-left: auto;
-				animation: warnBlink 1s infinite;
-			}
-		}
-
-		> .values {
-			display: flex;
-
-			> div {
-				flex: 1;
-
-				> div:first-child {
-					opacity: 0.7;
-				}
-
-				> div:last-child {
-					&.inc {
-						color: var(--warn);
-					}
-
-					&.dec {
-						color: var(--success);
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/memo.vue b/packages/frontend/src/widgets/memo.vue
deleted file mode 100644
index 1cc0e10bba..0000000000
--- a/packages/frontend/src/widgets/memo.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
-	<template #header><i class="ti ti-note"></i>{{ i18n.ts._widgets.memo }}</template>
-
-	<div class="otgbylcu">
-		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
-		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-
-const name = 'memo';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const text = ref<string | null>(defaultStore.state.memo);
-const changed = ref(false);
-let timeoutId;
-
-const saveMemo = () => {
-	defaultStore.set('memo', text.value);
-	changed.value = false;
-};
-
-const onChange = () => {
-	changed.value = true;
-	window.clearTimeout(timeoutId);
-	timeoutId = window.setTimeout(saveMemo, 1000);
-};
-
-watch(() => defaultStore.reactiveState.memo, newText => {
-	text.value = newText.value;
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.otgbylcu {
-	padding-bottom: 28px + 16px;
-
-	> textarea {
-		display: block;
-		width: 100%;
-		max-width: 100%;
-		min-width: 100%;
-		padding: 16px;
-		color: var(--fg);
-		background: transparent;
-		border: none;
-		border-bottom: solid 0.5px var(--divider);
-		border-radius: 0;
-		box-sizing: border-box;
-		font: inherit;
-		font-size: 0.9em;
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	> button {
-		display: block;
-		position: absolute;
-		bottom: 8px;
-		right: 8px;
-		margin: 0;
-		padding: 0 10px;
-		height: 28px;
-		outline: none;
-		border-radius: 4px;
-
-		&:disabled {
-			opacity: 0.7;
-			cursor: default;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/notifications.vue b/packages/frontend/src/widgets/notifications.vue
deleted file mode 100644
index e697209444..0000000000
--- a/packages/frontend/src/widgets/notifications.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
-
-	<div>
-		<XNotifications :include-types="widgetProps.includingTypes"/>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import XNotifications from '@/components/MkNotifications.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const name = 'notifications';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	height: {
-		type: 'number' as const,
-		default: 300,
-	},
-	includingTypes: {
-		type: 'array' as const,
-		hidden: true,
-		default: null,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const configureNotification = () => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: widgetProps.includingTypes,
-	}, {
-		done: async (res) => {
-			const { includingTypes } = res;
-			widgetProps.includingTypes = includingTypes;
-			save();
-		},
-	}, 'closed');
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/frontend/src/widgets/online-users.vue b/packages/frontend/src/widgets/online-users.vue
deleted file mode 100644
index e9ab79b111..0000000000
--- a/packages/frontend/src/widgets/online-users.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-<div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
-	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
-		<template #n><b>{{ onlineUsersCount }}</b></template>
-	</I18n>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const name = 'onlineUsers';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const onlineUsersCount = ref(0);
-
-const tick = () => {
-	os.api('get-online-users-count').then(res => {
-		onlineUsersCount.value = res.count;
-	});
-};
-
-useInterval(tick, 1000 * 15, {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-onlineUsers {
-	text-align: center;
-
-	&.pad {
-		padding: 16px 0;
-	}
-
-	> .text {
-		::v-deep(b) {
-			color: #41b781;
-		}
-
-		::v-deep(span) {
-			opacity: 0.7;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/photos.vue b/packages/frontend/src/widgets/photos.vue
deleted file mode 100644
index 65d1de1385..0000000000
--- a/packages/frontend/src/widgets/photos.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
-	<template #header><i class="ti ti-camera"></i>{{ i18n.ts._widgets.photos }}</template>
-
-	<div class="">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.stream">
-			<div
-				v-for="(image, i) in images" :key="i"
-				:class="$style.img"
-				:style="`background-image: url(${thumbnail(image)})`"
-			></div>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import { getStaticImageUrl } from '@/scripts/media-proxy';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-
-const name = 'photos';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const connection = stream.useChannel('main');
-const images = ref([]);
-const fetching = ref(true);
-
-const onDriveFileCreated = (file) => {
-	if (/^image\/.+$/.test(file.type)) {
-		images.value.unshift(file);
-		if (images.value.length > 9) images.value.pop();
-	}
-};
-
-const thumbnail = (image: any): string => {
-	return defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(image.thumbnailUrl)
-		: image.thumbnailUrl;
-};
-
-os.api('drive/stream', {
-	type: 'image/*',
-	limit: 9,
-}).then(res => {
-	images.value = res;
-	fetching.value = false;
-});
-
-connection.on('driveFileCreated', onDriveFileCreated);
-onUnmounted(() => {
-	connection.dispose();
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.root[data-transparent] {
-	.stream {
-		padding: 0;
-	}
-
-	.img {
-		border: solid 4px transparent;
-		border-radius: 8px;
-	}
-}
-
-.stream {
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-	padding: 8px;
-
-	.img {
-		flex: 1 1 33%;
-		width: 33%;
-		height: 80px;
-		box-sizing: border-box;
-		background-position: center center;
-		background-size: cover;
-		background-clip: content-box;
-		border: solid 2px transparent;
-		border-radius: 4px;
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/post-form.vue b/packages/frontend/src/widgets/post-form.vue
deleted file mode 100644
index f1708775ba..0000000000
--- a/packages/frontend/src/widgets/post-form.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XPostForm from '@/components/MkPostForm.vue';
-
-const name = 'postForm';
-
-const widgetPropsDef = {
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/frontend/src/widgets/profile.vue b/packages/frontend/src/widgets/profile.vue
deleted file mode 100644
index c6e66c1df2..0000000000
--- a/packages/frontend/src/widgets/profile.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-<div class="_panel">
-	<div :class="$style.container" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
-		<div :class="$style.avatarContainer">
-			<MkAvatar :class="$style.avatar" :user="$i" :disable-link="true" :disable-preview="true"/>
-		</div>
-		<div :class="$style.bodyContainer">
-			<div :class="$style.body">
-				<MkA :class="$style.name" :to="userPage($i)">
-					<MkUserName :user="$i"/>
-				</MkA>
-				<div :class="$style.username"><MkAcct :user="$i" detail/></div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { $i } from '@/account';
-import { userPage } from '@/filters/user';
-
-const name = 'profile';
-
-const widgetPropsDef = {
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.container {
-	position: relative;
-	background-size: cover;
-	background-position: center;
-	display: flex;
-}
-
-.avatarContainer {
-	display: inline-block;
-	text-align: center;
-	padding: 16px;
-}
-
-.avatar {
-	display: inline-block;
-	width: 60px;
-	height: 60px;
-	box-sizing: border-box;
-	border: solid 3px #fff;
-}
-
-.bodyContainer {
-	display: flex;
-	align-items: center;
-	min-width: 0;
-	padding: 0 16px 0 0;
-}
-
-.body {
-	text-overflow: ellipsis;
-	overflow: clip;
-}
-
-.name {
-	color: #fff;
-	filter: drop-shadow(0 0 4px #000);
-	font-weight: bold;
-}
-
-.username {
-	color: #fff;
-	filter: drop-shadow(0 0 4px #000);
-}
-</style>
diff --git a/packages/frontend/src/widgets/rss-ticker.vue b/packages/frontend/src/widgets/rss-ticker.vue
deleted file mode 100644
index 2620ff4eb0..0000000000
--- a/packages/frontend/src/widgets/rss-ticker.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
-	<template #header><i class="ti ti-rss"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
-
-	<div :class="$style.feed">
-		<div v-if="fetching" :class="$style.loading">
-			<MkEllipsis/>
-		</div>
-		<div v-else>
-			<Transition :name="$style.change" mode="default" appear>
-				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
-					<span v-for="item in items" :class="$style.item" :key="item.link">
-						<a :class="$style.link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
-					</span>
-				</MarqueeText>
-			</Transition>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, computed } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import MarqueeText from '@/components/MkMarquee.vue';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import { shuffle } from '@/scripts/shuffle';
-import { url as base } from '@/config';
-import { useInterval } from '@/scripts/use-interval';
-
-const name = 'rssTicker';
-
-const widgetPropsDef = {
-	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
-	},
-	shuffle: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	refreshIntervalSec: {
-		type: 'number' as const,
-		default: 60,
-	},
-	maxEntries: {
-		type: 'number' as const,
-		default: 15,
-	},
-	duration: {
-		type: 'range' as const,
-		default: 70,
-		step: 1,
-		min: 5,
-		max: 200,
-	},
-	reverse: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	showHeader: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const rawItems = ref([]);
-const items = computed(() => {
-	const newItems = rawItems.value.slice(0, widgetProps.maxEntries)
-	if (widgetProps.shuffle) {
-		shuffle(newItems);
-	}
-	return newItems;
-});
-const fetching = ref(true);
-const fetchEndpoint = computed(() => {
-	const url = new URL('/api/fetch-rss', base);
-	url.searchParams.set('url', widgetProps.url);
-	return url;
-});
-let intervalClear = $ref<(() => void) | undefined>();
-
-let key = $ref(0);
-
-const tick = () => {
-	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
-
-	window.fetch(fetchEndpoint.value, {})
-	.then(res => res.json())
-	.then(feed => {
-		rawItems.value = feed.items ?? [];
-		fetching.value = false;
-		key++;
-	});
-};
-
-watch(() => fetchEndpoint, tick);
-watch(() => widgetProps.refreshIntervalSec, () => {
-	if (intervalClear) {
-		intervalClear();
-	}
-	intervalClear = useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
-		immediate: true,
-		afterMounted: true,
-	});
-}, { immediate: true });
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.change {
-	&:global(-enter-active),
-	&:global(-leave-active) {
-		position: absolute;
-		top: 0;
-		transition: all 1s ease;
-	}
-	&:global(-enter-from) {
-		opacity: 0;
-		transform: translateY(-100%);
-	}
-	&:global(-leave-to) {
-		opacity: 0;
-		transform: translateY(100%);
-	}
-}
-
-.feed {
-	--height: 42px;
-	padding: 0;
-	font-size: 0.9em;
-	line-height: var(--height);
-	height: var(--height);
-	contain: strict;
-}
-
-.loading {
-	text-align: center;
-}
-
-.item {
-	display: inline-flex;
-	align-items: center;
-	vertical-align: bottom;
-	color: var(--fg);
-}
-
-.divider {
-	display: inline-block;
-	width: 0.5px;
-	height: 16px;
-	margin: 0 1em;
-	background: var(--divider);
-}
-</style>
diff --git a/packages/frontend/src/widgets/rss.vue b/packages/frontend/src/widgets/rss.vue
deleted file mode 100644
index 554413cd1e..0000000000
--- a/packages/frontend/src/widgets/rss.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
-	<template #header><i class="ti ti-rss"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
-
-	<div class="ekmkgxbj">
-		<MkLoading v-if="fetching"/>
-		<div class="_fullinfo" v-else-if="(!items || items.length === 0) && widgetProps.showHeader">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ i18n.ts.nothing }}</div>
-		</div>
-		<div v-else :class="$style.feed">
-			<a v-for="item in items" :class="$style.item" :href="item.link" :key="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, computed } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import { url as base } from '@/config';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
-
-const name = 'rss';
-
-const widgetPropsDef = {
-	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
-	},
-	refreshIntervalSec: {
-		type: 'number' as const,
-		default: 60,
-	},
-	maxEntries: {
-		type: 'number' as const,
-		default: 15,
-	},
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const rawItems = ref([]);
-const items = computed(() => rawItems.value.slice(0, widgetProps.maxEntries));
-const fetching = ref(true);
-const fetchEndpoint = computed(() => {
-	const url = new URL('/api/fetch-rss', base);
-	url.searchParams.set('url', widgetProps.url);
-	return url;
-});
-let intervalClear = $ref<(() => void) | undefined>();
-
-const tick = () => {
-	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
-
-	window.fetch(fetchEndpoint.value, {})
-	.then(res => res.json())
-	.then(feed => {
-		rawItems.value = feed.items ?? [];
-		fetching.value = false;
-	});
-};
-
-watch(() => fetchEndpoint, tick);
-watch(() => widgetProps.refreshIntervalSec, () => {
-	if (intervalClear) {
-		intervalClear();
-	}
-	intervalClear = useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
-		immediate: true,
-		afterMounted: true,
-	});
-}, { immediate: true });
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.feed {
-	padding: 0;
-	font-size: 0.9em;
-}
-
-.item {
-	display: block;
-	padding: 8px 16px;
-	color: var(--fg);
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-
-	&:nth-child(even) {
-		background: rgba(#000, 0.05);
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/slideshow.vue b/packages/frontend/src/widgets/slideshow.vue
deleted file mode 100644
index 2c937d85c5..0000000000
--- a/packages/frontend/src/widgets/slideshow.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-<div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
-	<div @click="choose">
-		<p v-if="widgetProps.folderId == null">
-			{{ i18n.ts.folder }}
-		</p>
-		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ $t('no-image') }}</p>
-		<div ref="slideA" class="slide a"></div>
-		<div ref="slideB" class="slide b"></div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const name = 'slideshow';
-
-const widgetPropsDef = {
-	height: {
-		type: 'number' as const,
-		default: 300,
-	},
-	folderId: {
-		type: 'string' as const,
-		default: null,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const images = ref([]);
-const fetching = ref(true);
-const slideA = shallowRef<HTMLElement>();
-const slideB = shallowRef<HTMLElement>();
-
-const change = () => {
-	if (images.value.length === 0) return;
-
-	const index = Math.floor(Math.random() * images.value.length);
-	const img = `url(${ images.value[index].url })`;
-
-	slideB.value.style.backgroundImage = img;
-
-	slideB.value.classList.add('anime');
-	window.setTimeout(() => {
-		// 既にこのウィジェットがunmountされていたら要素がない
-		if (slideA.value == null) return;
-
-		slideA.value.style.backgroundImage = img;
-
-		slideB.value.classList.remove('anime');
-	}, 1000);
-};
-
-const fetch = () => {
-	fetching.value = true;
-
-	os.api('drive/files', {
-		folderId: widgetProps.folderId,
-		type: 'image/*',
-		limit: 100,
-	}).then(res => {
-		images.value = res;
-		fetching.value = false;
-		slideA.value.style.backgroundImage = '';
-		slideB.value.style.backgroundImage = '';
-		change();
-	});
-};
-
-const choose = () => {
-	os.selectDriveFolder(false).then(folder => {
-		if (folder == null) {
-			return;
-		}
-		widgetProps.folderId = folder.id;
-		save();
-		fetch();
-	});
-};
-
-useInterval(change, 10000, {
-	immediate: false,
-	afterMounted: true,
-});
-
-onMounted(() => {
-	if (widgetProps.folderId != null) {
-		fetch();
-	}
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.kvausudm {
-	position: relative;
-
-	> div {
-		width: 100%;
-		height: 100%;
-		cursor: pointer;
-
-		> p {
-			display: block;
-			margin: 1em;
-			text-align: center;
-			color: #888;
-		}
-
-		> * {
-			pointer-events: none;
-		}
-
-		> .slide {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background-size: cover;
-			background-position: center;
-
-			&.b {
-				opacity: 0;
-			}
-
-			&.anime {
-				transition: opacity 1s;
-				opacity: 1;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/timeline.vue b/packages/frontend/src/widgets/timeline.vue
deleted file mode 100644
index 5bd626cd0e..0000000000
--- a/packages/frontend/src/widgets/timeline.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
-	<template #header>
-		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="ti ti-rocket"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i>
-			<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
-			<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
-			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
-			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
-		</button>
-	</template>
-
-	<div>
-		<XTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const name = 'timeline';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	height: {
-		type: 'number' as const,
-		default: 300,
-	},
-	src: {
-		type: 'string' as const,
-		default: 'home',
-		hidden: true,
-	},
-	antenna: {
-		type: 'object' as const,
-		default: null,
-		hidden: true,
-	},
-	list: {
-		type: 'object' as const,
-		default: null,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const menuOpened = ref(false);
-
-const setSrc = (src) => {
-	widgetProps.src = src;
-	save();
-};
-
-const choose = async (ev) => {
-	menuOpened.value = true;
-	const [antennas, lists] = await Promise.all([
-		os.api('antennas/list'),
-		os.api('users/lists/list'),
-	]);
-	const antennaItems = antennas.map(antenna => ({
-		text: antenna.name,
-		icon: 'ti ti-antenna',
-		action: () => {
-			widgetProps.antenna = antenna;
-			setSrc('antenna');
-		},
-	}));
-	const listItems = lists.map(list => ({
-		text: list.name,
-		icon: 'ti ti-list',
-		action: () => {
-			widgetProps.list = list;
-			setSrc('list');
-		},
-	}));
-	os.popupMenu([{
-		text: i18n.ts._timelines.home,
-		icon: 'ti ti-home',
-		action: () => { setSrc('home'); },
-	}, {
-		text: i18n.ts._timelines.local,
-		icon: 'ti ti-planet',
-		action: () => { setSrc('local'); },
-	}, {
-		text: i18n.ts._timelines.social,
-		icon: 'ti ti-rocket',
-		action: () => { setSrc('social'); },
-	}, {
-		text: i18n.ts._timelines.global,
-		icon: 'ti ti-whirl',
-		action: () => { setSrc('global'); },
-	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
-		menuOpened.value = false;
-	});
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/frontend/src/widgets/trends.vue b/packages/frontend/src/widgets/trends.vue
deleted file mode 100644
index e500448167..0000000000
--- a/packages/frontend/src/widgets/trends.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
-
-	<div class="wbrkwala">
-		<MkLoading v-if="fetching"/>
-		<TransitionGroup v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
-			<div v-for="stat in stats" :key="stat.tag">
-				<div class="tag">
-					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
-					<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
-				</div>
-				<MkMiniChart class="chart" :src="stat.chart"/>
-			</div>
-		</TransitionGroup>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const name = 'hashtags';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const stats = ref([]);
-const fetching = ref(true);
-
-const fetch = () => {
-	os.api('hashtags/trend').then(res => {
-		stats.value = res;
-		fetching.value = false;
-	});
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.wbrkwala {
-	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
-
-	> .tags {
-		.chart-move {
-			transition: transform 1s ease;
-		}
-
-		> div {
-			display: flex;
-			align-items: center;
-			padding: 14px 16px;
-			border-bottom: solid 0.5px var(--divider);
-
-			> .tag {
-				flex: 1;
-				overflow: hidden;
-				font-size: 0.9em;
-				color: var(--fg);
-
-				> .a {
-					display: block;
-					width: 100%;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					line-height: 18px;
-				}
-
-				> p {
-					margin: 0;
-					font-size: 75%;
-					opacity: 0.7;
-					line-height: 16px;
-				}
-			}
-
-			> .chart {
-				height: 30px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/unix-clock.vue b/packages/frontend/src/widgets/unix-clock.vue
deleted file mode 100644
index cf85ac782c..0000000000
--- a/packages/frontend/src/widgets/unix-clock.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
-	<div class="time">
-		<span v-text="ss"></span>
-		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
-		<span v-if="widgetProps.showMs" v-text="ms"></span>
-	</div>
-	<div v-if="widgetProps.showLabel" class="label">UTC</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-
-const name = 'unixClock';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	fontSize: {
-		type: 'number' as const,
-		default: 1.5,
-		step: 0.1,
-	},
-	showMs: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	showLabel: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-let intervalId;
-const ss = ref('');
-const ms = ref('');
-const showColon = ref(false);
-let prevSec: string | null = null;
-
-watch(showColon, (v) => {
-	if (v) {
-		window.setTimeout(() => {
-			showColon.value = false;
-		}, 30);
-	}
-});
-
-const tick = () => {
-	const now = new Date();
-	ss.value = Math.floor(now.getTime() / 1000).toString();
-	ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
-	if (ss.value !== prevSec) showColon.value = true;
-	prevSec = ss.value;
-};
-
-tick();
-
-watch(() => widgetProps.showMs, () => {
-	if (intervalId) window.clearInterval(intervalId);
-	intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
-}, { immediate: true });
-
-onUnmounted(() => {
-	window.clearInterval(intervalId);
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-unixClock {
-	padding: 16px 0;
-	text-align: center;
-
-	> .label {
-		font-size: 65%;
-		opacity: 0.7;
-	}
-
-	> .time {
-		> .colon {
-			opacity: 0;
-			transition: opacity 1s ease;
-
-			&.showColon {
-				opacity: 1;
-				transition: opacity 0s;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/user-list.vue b/packages/frontend/src/widgets/user-list.vue
deleted file mode 100644
index 9ffbf0d8e3..0000000000
--- a/packages/frontend/src/widgets/user-list.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
-	<template #header><i class="ti ti-users"></i>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
-	<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></template>
-
-	<div :class="$style.root">
-		<div v-if="widgetProps.listId == null" class="init">
-			<MkButton primary @click="chooseList">{{ i18n.ts._widgets._userList.chooseList }}</MkButton>
-		</div>
-		<MkLoading v-else-if="fetching"/>
-		<div v-else class="users">
-			<MkA v-for="user in users" :key="user.id" class="user">
-				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-			</MkA>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import MkButton from '@/components/MkButton.vue';
-
-const name = 'userList';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	listId: {
-		type: 'string' as const,
-		default: null,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-let list = $ref();
-let users = $ref([]);
-let fetching = $ref(true);
-
-async function chooseList() {
-	const lists = await os.api('users/lists/list');
-	const { canceled, result: list } = await os.select({
-		title: i18n.ts.selectList,
-		items: lists.map(x => ({
-			value: x, text: x.name,
-		})),
-		default: widgetProps.listId,
-	});
-	if (canceled) return;
-
-	widgetProps.listId = list.id;
-	save();
-	fetch();
-}
-
-const fetch = () => {
-	if (widgetProps.listId == null) {
-		fetching = false;
-		return;
-	}
-
-	os.api('users/lists/show', {
-		listId: widgetProps.listId,
-	}).then(_list => {
-		list = _list;
-		os.api('users/show', {
-			userIds: list.userIds,
-		}).then(_users => {
-			users = _users;
-			fetching = false;
-		});
-	});
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	&:global {
-		> .init {
-			padding: 16px;
-		}
-
-		> .users {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
-			grid-gap: 12px;
-			place-content: center;
-			padding: 16px;
-
-			> .user {
-				width: 100%;
-				height: 100%;
-				aspect-ratio: 1;
-
-				> .avatar {
-					width: 100%;
-					height: 100%;
-				}
-			}
-		}
-	}
-}
-</style>
-- 
cgit v1.2.3-freya