feat(frontend)!: sveltekit 3 on the v0.7.0 template, typescript 6, adapter-auto dropped; backend base moves to trixie

frontend/src/lib/api/avatars.ts

@@ -1,7 +1,8 @@
-import { accounts } from "$lib/stores/accounts.svelte";
-import { auth } from "$lib/stores/auth.svelte";
+import { accounts } from "#lib/stores/accounts.svelte.js";
+import { auth } from "#lib/stores/auth.svelte.js";
+import { PUBLIC_API_BASE_URL } from "$app/env/public";
 
-const BASE = import.meta.env.VITE_API_BASE ?? "/api";
+const BASE = PUBLIC_API_BASE_URL;
 const RETRY_DELAY = 2500;
 
 export type AvatarKind = "peer" | "chat";

frontend/src/lib/api/client.ts

@@ -1,8 +1,9 @@
+import { accounts } from "#lib/stores/accounts.svelte.js";
+import { auth } from "#lib/stores/auth.svelte.js";
+import { PUBLIC_API_BASE_URL } from "$app/env/public";
 import { goto } from "$app/navigation";
-import { accounts } from "$lib/stores/accounts.svelte";
-import { auth } from "$lib/stores/auth.svelte";
 
-const BASE = import.meta.env.VITE_API_BASE ?? "/api";
+const BASE = PUBLIC_API_BASE_URL;
 const MAX_LIMIT = 500;
 
 export class ApiError extends Error {

frontend/src/lib/api/custom-emoji.ts

@@ -1,7 +1,8 @@
-import { accounts } from "$lib/stores/accounts.svelte";
-import { auth } from "$lib/stores/auth.svelte";
+import { accounts } from "#lib/stores/accounts.svelte.js";
+import { auth } from "#lib/stores/auth.svelte.js";
+import { PUBLIC_API_BASE_URL } from "$app/env/public";
 
-const BASE = import.meta.env.VITE_API_BASE ?? "/api";
+const BASE = PUBLIC_API_BASE_URL;
 const RETRY_DELAY = 2500;
 
 export interface CustomEmojiAsset {

frontend/src/lib/api/download.ts

@@ -1,7 +1,8 @@
-import { accounts } from "$lib/stores/accounts.svelte";
-import { auth } from "$lib/stores/auth.svelte";
+import { accounts } from "#lib/stores/accounts.svelte.js";
+import { auth } from "#lib/stores/auth.svelte.js";
+import { PUBLIC_API_BASE_URL } from "$app/env/public";
 
-const BASE = import.meta.env.VITE_API_BASE ?? "/api";
+const BASE = PUBLIC_API_BASE_URL;
 const FILENAME_STAR = /filename\*=UTF-8''([^;]+)/i;
 const FILENAME_PLAIN = /filename="?([^";]+)"?/i;
 

frontend/src/lib/api/endpoints.ts

@@ -1,4 +1,4 @@
-import { request } from "$lib/api/client";
+import { request } from "#lib/api/client.js";
 import type {
   Account,
   Alert,
@@ -35,8 +35,8 @@ import type {
   VolumeBucket,
   Watch,
   WatchedBot,
-} from "$lib/api/types";
-import { accounts } from "$lib/stores/accounts.svelte";
+} from "#lib/api/types.js";
+import { accounts } from "#lib/stores/accounts.svelte.js";
 
 interface Page {
   limit?: number;

frontend/src/lib/api/media.ts

@@ -1,7 +1,7 @@
-import { requestMedia } from "$lib/api/client";
-import { getMessageMedia, transcribeMedia } from "$lib/api/endpoints";
-import type { MediaRef } from "$lib/api/types";
-import { accounts } from "$lib/stores/accounts.svelte";
+import { requestMedia } from "#lib/api/client.js";
+import { getMessageMedia, transcribeMedia } from "#lib/api/endpoints.js";
+import type { MediaRef } from "#lib/api/types.js";
+import { accounts } from "#lib/stores/accounts.svelte.js";
 
 const TRANSCRIBE_TRIES = 10;
 const TRANSCRIBE_DELAY = 2000;

frontend/src/lib/api/shares.ts

@@ -1,6 +1,6 @@
-import { request } from "$lib/api/client";
-import type { FileShare, FileShareHit, ShareSubject } from "$lib/api/types";
-import { accounts } from "$lib/stores/accounts.svelte";
+import { request } from "#lib/api/client.js";
+import type { FileShare, FileShareHit, ShareSubject } from "#lib/api/types.js";
+import { accounts } from "#lib/stores/accounts.svelte.js";
 
 export interface ShareSettings {
   expiresInSeconds: number | null;

frontend/src/lib/api/stories.ts

@@ -1,7 +1,8 @@
-import { accounts } from "$lib/stores/accounts.svelte";
-import { auth } from "$lib/stores/auth.svelte";
+import { accounts } from "#lib/stores/accounts.svelte.js";
+import { auth } from "#lib/stores/auth.svelte.js";
+import { PUBLIC_API_BASE_URL } from "$app/env/public";
 
-const BASE = import.meta.env.VITE_API_BASE ?? "/api";
+const BASE = PUBLIC_API_BASE_URL;
 
 const MAX_CACHED = 100;
 

frontend/src/lib/components/ActionMessage.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { MessageView } from "$lib/api/types";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { accountName, peerName } from "$lib/format/peer";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { peers } from "$lib/stores/peers.svelte";
+  import type { MessageView } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { accountName, peerName } from "#lib/format/peer.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
 
   interface Props {
     message: MessageView;

frontend/src/lib/components/ChatHeader.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import {
     enqueueBackfill,
     getCurrentPresence,
     getPeer,
-  } from "$lib/api/endpoints";
-  import type { PeerView, PresenceSample } from "$lib/api/types";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { peerName } from "$lib/format/peer";
-  import { formatPresence, isOnline } from "$lib/format/presence";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
-  import { discover } from "$lib/stores/discover.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  } from "#lib/api/endpoints.js";
+  import type { PeerView, PresenceSample } from "#lib/api/types.js";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { peerName } from "#lib/format/peer.js";
+  import { formatPresence, isOnline } from "#lib/format/presence.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { chats } from "#lib/stores/chats.svelte.js";
+  import { discover } from "#lib/stores/discover.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
+  import { goto } from "$app/navigation";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/ChatList.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { untrack } from "svelte";
+  import ChatListItem from "#lib/components/ChatListItem.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Skeleton from "#lib/components/ui/Skeleton.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { chats } from "#lib/stores/chats.svelte.js";
+  import { folders } from "#lib/stores/folders.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import ChatListItem from "$lib/components/ChatListItem.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Skeleton from "$lib/components/ui/Skeleton.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
-  import { folders } from "$lib/stores/folders.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
 
   const skeletonRows = Array.from({ length: 9 }, (_, index) => index);
 

frontend/src/lib/components/ChatListItem.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
+  import { ripple } from "#lib/actions/ripple.js";
+  import type { Chat } from "#lib/api/types.js";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import { formatListDate } from "#lib/format/datetime.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
+  import { type RightPanel, ui } from "#lib/stores/ui.svelte.js";
   import { goto } from "$app/navigation";
-  import { ripple } from "$lib/actions/ripple";
-  import type { Chat } from "$lib/api/types";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import { formatListDate } from "$lib/format/datetime";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { peers } from "$lib/stores/peers.svelte";
-  import { type RightPanel, ui } from "$lib/stores/ui.svelte";
 
   interface Props {
     chat: Chat;

frontend/src/lib/components/Contact.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { ContactView } from "$lib/api/types";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
+  import type { ContactView } from "#lib/api/types.js";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
 
   interface Props {
     contact: ContactView;

frontend/src/lib/components/CustomEmoji.svelte

@@ -2,7 +2,7 @@
   import {
     type CustomEmojiAsset,
     loadCustomEmoji,
-  } from "$lib/api/custom-emoji";
+  } from "#lib/api/custom-emoji.js";
 
   interface Props {
     id: string;

frontend/src/lib/components/EntityText.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { SvelteSet } from "svelte/reactivity";
-  import type { EntityView } from "$lib/api/types";
+  import type { EntityView } from "#lib/api/types.js";
   import {
     buildEntityTree,
     type EntityNode,
     type EntityTreeNode,
     jumboEmojiCount,
     linkHref,
-  } from "$lib/format/entities";
+  } from "#lib/format/entities.js";
 
   interface Props {
     entities: EntityView[];

frontend/src/lib/components/FolderTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { folders } from "$lib/stores/folders.svelte";
+  import { folders } from "#lib/stores/folders.svelte.js";
 
   interface Tab {
     id: number | null;

frontend/src/lib/components/ForwardHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { ForwardView } from "$lib/api/types";
-  import { peerName } from "$lib/format/peer";
-  import { peers } from "$lib/stores/peers.svelte";
+  import type { ForwardView } from "#lib/api/types.js";
+  import { peerName } from "#lib/format/peer.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
 
   interface Props {
     forward: ForwardView;

frontend/src/lib/components/InlineButtons.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { InlineButton } from "$lib/api/types";
-  import { safeHref } from "$lib/format/url";
+  import type { InlineButton } from "#lib/api/types.js";
+  import { safeHref } from "#lib/format/url.js";
 
   interface Props {
     rows: InlineButton[][];

frontend/src/lib/components/Location.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { LocationView } from "$lib/api/types";
+  import type { LocationView } from "#lib/api/types.js";
 
   interface Props {
     location: LocationView;

frontend/src/lib/components/LoginScreen.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { auth } from "#lib/stores/auth.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
   import { goto } from "$app/navigation";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { auth } from "$lib/stores/auth.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
 
   let value = $state("");
   let busy = $state(false);

frontend/src/lib/components/MediaAlbum.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { isPreviewable } from "$lib/api/media";
-  import type { MediaRef } from "$lib/api/types";
-  import AlbumTile from "$lib/components/media/AlbumTile.svelte";
-  import FileChip from "$lib/components/media/FileChip.svelte";
+  import { isPreviewable } from "#lib/api/media.js";
+  import type { MediaRef } from "#lib/api/types.js";
+  import AlbumTile from "#lib/components/media/AlbumTile.svelte";
+  import FileChip from "#lib/components/media/FileChip.svelte";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/MediaVersionThumb.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { type MediaResult, requestMediaVersion } from "$lib/api/client";
-  import { isActiveContent, visualKind } from "$lib/api/media";
-  import type { MediaVersion } from "$lib/api/types";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { poster } from "$lib/media/poster";
+  import { type MediaResult, requestMediaVersion } from "#lib/api/client.js";
+  import { isActiveContent, visualKind } from "#lib/api/media.js";
+  import type { MediaVersion } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { poster } from "#lib/media/poster.js";
 
   interface Props {
     version: MediaVersion;

frontend/src/lib/components/MediaViewer.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
   import { untrack } from "svelte";
-  import { type MediaResult, requestMedia } from "$lib/api/client";
-  import { downloadMedia } from "$lib/api/download";
-  import { fetchMedia, getMessageMedia } from "$lib/api/endpoints";
-  import { isPreviewable, type ViewerItem } from "$lib/api/media";
-  import Button from "$lib/components/ui/Button.svelte";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatBytes, mediaKindLabel } from "$lib/format/media";
-  import { poster } from "$lib/media/poster";
-  import { shareUi } from "$lib/stores/shares.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { type MediaResult, requestMedia } from "#lib/api/client.js";
+  import { downloadMedia } from "#lib/api/download.js";
+  import { fetchMedia, getMessageMedia } from "#lib/api/endpoints.js";
+  import { isPreviewable, type ViewerItem } from "#lib/api/media.js";
+  import Button from "#lib/components/ui/Button.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatBytes, mediaKindLabel } from "#lib/format/media.js";
+  import { poster } from "#lib/media/poster.js";
+  import { shareUi } from "#lib/stores/shares.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/MessageBubble.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
+  import type { MessageView } from "#lib/api/types.js";
+  import Contact from "#lib/components/Contact.svelte";
+  import EntityText from "#lib/components/EntityText.svelte";
+  import ForwardHeader from "#lib/components/ForwardHeader.svelte";
+  import InlineButtons from "#lib/components/InlineButtons.svelte";
+  import Location from "#lib/components/Location.svelte";
+  import MediaAlbum from "#lib/components/MediaAlbum.svelte";
+  import MessageMedia from "#lib/components/MessageMedia.svelte";
+  import MessageMeta from "#lib/components/MessageMeta.svelte";
+  import Poll from "#lib/components/Poll.svelte";
+  import Reactions from "#lib/components/Reactions.svelte";
+  import ReplyHeader from "#lib/components/ReplyHeader.svelte";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import WebPage from "#lib/components/WebPage.svelte";
+  import { accountName, peerColorIndex, peerName } from "#lib/format/peer.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
+  import { appear } from "#lib/transitions/appear.js";
   import { goto } from "$app/navigation";
-  import type { MessageView } from "$lib/api/types";
-  import Contact from "$lib/components/Contact.svelte";
-  import EntityText from "$lib/components/EntityText.svelte";
-  import ForwardHeader from "$lib/components/ForwardHeader.svelte";
-  import InlineButtons from "$lib/components/InlineButtons.svelte";
-  import Location from "$lib/components/Location.svelte";
-  import MediaAlbum from "$lib/components/MediaAlbum.svelte";
-  import MessageMedia from "$lib/components/MessageMedia.svelte";
-  import MessageMeta from "$lib/components/MessageMeta.svelte";
-  import Poll from "$lib/components/Poll.svelte";
-  import Reactions from "$lib/components/Reactions.svelte";
-  import ReplyHeader from "$lib/components/ReplyHeader.svelte";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import WebPage from "$lib/components/WebPage.svelte";
-  import { accountName, peerColorIndex, peerName } from "$lib/format/peer";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { peers } from "$lib/stores/peers.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
-  import { appear } from "$lib/transitions/appear";
 
   interface Props {
     animate: boolean;

frontend/src/lib/components/MessageList.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import { tick, untrack } from "svelte";
-  import { listMessages } from "$lib/api/endpoints";
-  import { type ViewerItem, viewerItemsFrom } from "$lib/api/media";
-  import type { LiveEvent, MessageView } from "$lib/api/types";
-  import ActionMessage from "$lib/components/ActionMessage.svelte";
-  import MediaViewer from "$lib/components/MediaViewer.svelte";
-  import MessageBubble from "$lib/components/MessageBubble.svelte";
-  import MessageVersions from "$lib/components/MessageVersions.svelte";
-  import PinnedBar from "$lib/components/PinnedBar.svelte";
-  import TrackChat from "$lib/components/TrackChat.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatDay } from "$lib/format/datetime";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { events } from "$lib/stores/events.svelte";
-  import { peers } from "$lib/stores/peers.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  import { listMessages } from "#lib/api/endpoints.js";
+  import { type ViewerItem, viewerItemsFrom } from "#lib/api/media.js";
+  import type { LiveEvent, MessageView } from "#lib/api/types.js";
+  import ActionMessage from "#lib/components/ActionMessage.svelte";
+  import MediaViewer from "#lib/components/MediaViewer.svelte";
+  import MessageBubble from "#lib/components/MessageBubble.svelte";
+  import MessageVersions from "#lib/components/MessageVersions.svelte";
+  import PinnedBar from "#lib/components/PinnedBar.svelte";
+  import TrackChat from "#lib/components/TrackChat.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatDay } from "#lib/format/datetime.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { events } from "#lib/stores/events.svelte.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/MessageMedia.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-  import { visible } from "$lib/actions/visible";
-  import { downloadMedia } from "$lib/api/download";
-  import { fetchMedia } from "$lib/api/endpoints";
+  import { visible } from "#lib/actions/visible.js";
+  import { downloadMedia } from "#lib/api/download.js";
+  import { fetchMedia } from "#lib/api/endpoints.js";
   import {
     type InlineMedia,
     isPreviewable,
     loadInlineMedia,
     visualKind,
-  } from "$lib/api/media";
-  import type { MessageView } from "$lib/api/types";
-  import AudioFile from "$lib/components/media/AudioFile.svelte";
-  import FileChip from "$lib/components/media/FileChip.svelte";
-  import TgsSticker from "$lib/components/media/TgsSticker.svelte";
-  import VideoNote from "$lib/components/media/VideoNote.svelte";
-  import VoiceMessage from "$lib/components/media/VoiceMessage.svelte";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatBytes, mediaKindLabel } from "$lib/format/media";
-  import { poster } from "$lib/media/poster";
-  import { shareUi } from "$lib/stores/shares.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  } from "#lib/api/media.js";
+  import type { MessageView } from "#lib/api/types.js";
+  import AudioFile from "#lib/components/media/AudioFile.svelte";
+  import FileChip from "#lib/components/media/FileChip.svelte";
+  import TgsSticker from "#lib/components/media/TgsSticker.svelte";
+  import VideoNote from "#lib/components/media/VideoNote.svelte";
+  import VoiceMessage from "#lib/components/media/VoiceMessage.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatBytes, mediaKindLabel } from "#lib/format/media.js";
+  import { poster } from "#lib/media/poster.js";
+  import { shareUi } from "#lib/stores/shares.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
 
   interface Props {
     message: MessageView;

frontend/src/lib/components/MessageMeta.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { MessageView } from "$lib/api/types";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { formatTime } from "$lib/format/datetime";
+  import type { MessageView } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { formatTime } from "#lib/format/datetime.js";
 
   interface Props {
     message: MessageView;

frontend/src/lib/components/MessageVersions.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
-  import { getMediaVersions, listMessageVersions } from "$lib/api/endpoints";
-  import type { MediaVersion, MessageVersion } from "$lib/api/types";
-  import MediaVersionThumb from "$lib/components/MediaVersionThumb.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { getMediaVersions, listMessageVersions } from "#lib/api/endpoints.js";
+  import type { MediaVersion, MessageVersion } from "#lib/api/types.js";
+  import MediaVersionThumb from "#lib/components/MediaVersionThumb.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/PinnedBar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { getPinned } from "$lib/api/endpoints";
-  import type { PinnedView } from "$lib/api/types";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { mediaKindLabel } from "$lib/format/media";
-  import { accounts } from "$lib/stores/accounts.svelte";
+  import { getPinned } from "#lib/api/endpoints.js";
+  import type { PinnedView } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { mediaKindLabel } from "#lib/format/media.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/Poll.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PollView } from "$lib/api/types";
+  import type { PollView } from "#lib/api/types.js";
 
   interface Props {
     poll: PollView;

frontend/src/lib/components/Reactions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { ReactionCount } from "$lib/api/types";
-  import CustomEmoji from "$lib/components/CustomEmoji.svelte";
+  import type { ReactionCount } from "#lib/api/types.js";
+  import CustomEmoji from "#lib/components/CustomEmoji.svelte";
 
   interface Props {
     onclick?: () => void;

frontend/src/lib/components/ReplyHeader.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { ReplyView } from "$lib/api/types";
-  import { mediaKindLabel } from "$lib/format/media";
-  import { peerColorIndex, peerName } from "$lib/format/peer";
-  import { peers } from "$lib/stores/peers.svelte";
+  import type { ReplyView } from "#lib/api/types.js";
+  import { mediaKindLabel } from "#lib/format/media.js";
+  import { peerColorIndex, peerName } from "#lib/format/peer.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
 
   interface Props {
     onjump?: (messageId: number) => void;

frontend/src/lib/components/RightColumn.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import AlertsPanel from "$lib/components/alerts/AlertsPanel.svelte";
-  import AnnotationsPanel from "$lib/components/annotations/AnnotationsPanel.svelte";
-  import BotsPanel from "$lib/components/bots/BotsPanel.svelte";
-  import JobsPanel from "$lib/components/jobs/JobsPanel.svelte";
-  import PolicyEditor from "$lib/components/policy/PolicyEditor.svelte";
-  import AnalyticsPanel from "$lib/components/presence/AnalyticsPanel.svelte";
-  import ProfilePanel from "$lib/components/profile/ProfilePanel.svelte";
-  import ChatSearchPanel from "$lib/components/search/ChatSearchPanel.svelte";
-  import SharesPanel from "$lib/components/shares/SharesPanel.svelte";
-  import CallbacksPanel from "$lib/components/social/CallbacksPanel.svelte";
-  import LinksPanel from "$lib/components/social/LinksPanel.svelte";
-  import ReactionsPanel from "$lib/components/social/ReactionsPanel.svelte";
-  import AllStoriesArchive from "$lib/components/stories/AllStoriesArchive.svelte";
-  import StoriesArchive from "$lib/components/stories/StoriesArchive.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import WatchesPanel from "$lib/components/watches/WatchesPanel.svelte";
-  import { type RightPanel, ui } from "$lib/stores/ui.svelte";
+  import AlertsPanel from "#lib/components/alerts/AlertsPanel.svelte";
+  import AnnotationsPanel from "#lib/components/annotations/AnnotationsPanel.svelte";
+  import BotsPanel from "#lib/components/bots/BotsPanel.svelte";
+  import JobsPanel from "#lib/components/jobs/JobsPanel.svelte";
+  import PolicyEditor from "#lib/components/policy/PolicyEditor.svelte";
+  import AnalyticsPanel from "#lib/components/presence/AnalyticsPanel.svelte";
+  import ProfilePanel from "#lib/components/profile/ProfilePanel.svelte";
+  import ChatSearchPanel from "#lib/components/search/ChatSearchPanel.svelte";
+  import SharesPanel from "#lib/components/shares/SharesPanel.svelte";
+  import CallbacksPanel from "#lib/components/social/CallbacksPanel.svelte";
+  import LinksPanel from "#lib/components/social/LinksPanel.svelte";
+  import ReactionsPanel from "#lib/components/social/ReactionsPanel.svelte";
+  import AllStoriesArchive from "#lib/components/stories/AllStoriesArchive.svelte";
+  import StoriesArchive from "#lib/components/stories/StoriesArchive.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import WatchesPanel from "#lib/components/watches/WatchesPanel.svelte";
+  import { type RightPanel, ui } from "#lib/stores/ui.svelte.js";
 
   const titles: Record<RightPanel, string> = {
     alerts: "Алерты",

frontend/src/lib/components/TrackChat.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { enqueueBackfill, trackChat } from "$lib/api/endpoints";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
-  import { discover } from "$lib/stores/discover.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { enqueueBackfill, trackChat } from "#lib/api/endpoints.js";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { chats } from "#lib/stores/chats.svelte.js";
+  import { discover } from "#lib/stores/discover.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/WebPage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { MessageView } from "$lib/api/types";
-  import MessageMedia from "$lib/components/MessageMedia.svelte";
-  import { safeHref } from "$lib/format/url";
+  import type { MessageView } from "#lib/api/types.js";
+  import MessageMedia from "#lib/components/MessageMedia.svelte";
+  import { safeHref } from "#lib/format/url.js";
 
   interface Props {
     message: MessageView;

frontend/src/lib/components/alerts/AlertList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Alert } from "$lib/api/types";
+  import type { Alert } from "#lib/api/types.js";
   import Button from "../ui/Button.svelte";
   import Icon from "../ui/Icon.svelte";
 

frontend/src/lib/components/alerts/AlertsPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { listAlerts, markAlertSeen } from "$lib/api/endpoints";
-  import type { Alert } from "$lib/api/types";
-  import { accounts } from "$lib/stores/accounts.svelte";
+  import { listAlerts, markAlertSeen } from "#lib/api/endpoints.js";
+  import type { Alert } from "#lib/api/types.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
   import Spinner from "../ui/Spinner.svelte";
   import AlertList from "./AlertList.svelte";
 

frontend/src/lib/components/annotations/AnnotationList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { Annotation } from "$lib/api/types";
-  import { formatFull } from "$lib/format/datetime";
+  import type { Annotation } from "#lib/api/types.js";
+  import { formatFull } from "#lib/format/datetime.js";
   import Icon from "../ui/Icon.svelte";
   import AnnotationEditor from "./AnnotationEditor.svelte";
 

frontend/src/lib/components/annotations/AnnotationsPanel.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
   import { untrack } from "svelte";
-  import { page } from "$app/state";
   import {
     createAnnotation,
     deleteAnnotation,
     listAnnotations,
     updateAnnotation,
-  } from "$lib/api/endpoints";
-  import type { Annotation } from "$lib/api/types";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  } from "#lib/api/endpoints.js";
+  import type { Annotation } from "#lib/api/types.js";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
+  import { page } from "$app/state";
   import AnnotationEditor from "./AnnotationEditor.svelte";
   import AnnotationList from "./AnnotationList.svelte";
 

frontend/src/lib/components/bots/BotsPanel.svelte

@@ -3,14 +3,14 @@
     addWatchedBot,
     listWatchedBots,
     removeWatchedBot,
-  } from "$lib/api/endpoints";
-  import type { WatchedBot } from "$lib/api/types";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  } from "#lib/api/endpoints.js";
+  import type { WatchedBot } from "#lib/api/types.js";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
 
   let bots = $state<WatchedBot[]>([]);
   let loading = $state(true);

frontend/src/lib/components/jobs/JobList.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { cancelJob, listJobs } from "$lib/api/endpoints";
-  import type { JobStatus, JobView } from "$lib/api/types";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { cancelJob, listJobs } from "#lib/api/endpoints.js";
+  import type { JobStatus, JobView } from "#lib/api/types.js";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     version?: number;

frontend/src/lib/components/jobs/JobsPanel.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { page } from "$app/state";
   import {
     enqueueBackfill,
     syncContacts,
     syncDialogs,
-  } from "$lib/api/endpoints";
-  import JobList from "$lib/components/jobs/JobList.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { createChatPicker } from "$lib/stores/chat-picker.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  } from "#lib/api/endpoints.js";
+  import JobList from "#lib/components/jobs/JobList.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { createChatPicker } from "#lib/stores/chat-picker.svelte.js";
+  import { chats } from "#lib/stores/chats.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { page } from "$app/state";
 
   let version = $state(0);
   let selected = $state<number | null>(

frontend/src/lib/components/media/AlbumTile.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { visible } from "$lib/actions/visible";
-  import { fetchMedia } from "$lib/api/endpoints";
-  import { type InlineMedia, loadMediaItem, visualKind } from "$lib/api/media";
-  import type { MediaRef } from "$lib/api/types";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { poster } from "$lib/media/poster";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { visible } from "#lib/actions/visible.js";
+  import { fetchMedia } from "#lib/api/endpoints.js";
+  import {
+    type InlineMedia,
+    loadMediaItem,
+    visualKind,
+  } from "#lib/api/media.js";
+  import type { MediaRef } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { poster } from "#lib/media/poster.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/media/AudioFile.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { formatDuration } from "$lib/format/duration";
-  import { claimPlayback, releasePlayback } from "$lib/media/playback";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { formatDuration } from "#lib/format/duration.js";
+  import { claimPlayback, releasePlayback } from "#lib/media/playback.js";
 
   interface Props {
     own: boolean;

frontend/src/lib/components/media/FileChip.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { downloadMedia } from "$lib/api/download";
-  import type { MediaRef } from "$lib/api/types";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { formatBytes, mediaKindLabel } from "$lib/format/media";
-  import { shareUi } from "$lib/stores/shares.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { downloadMedia } from "#lib/api/download.js";
+  import type { MediaRef } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { formatBytes, mediaKindLabel } from "#lib/format/media.js";
+  import { shareUi } from "#lib/stores/shares.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     media: MediaRef;

frontend/src/lib/components/media/VideoNote.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { formatDuration } from "$lib/format/duration";
-  import { claimPlayback, releasePlayback } from "$lib/media/playback";
-  import { POSTER_TIME, poster } from "$lib/media/poster";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { formatDuration } from "#lib/format/duration.js";
+  import { claimPlayback, releasePlayback } from "#lib/media/playback.js";
+  import { POSTER_TIME, poster } from "#lib/media/poster.js";
 
   interface Props {
     transcript?: string | null;

frontend/src/lib/components/media/VoiceMessage.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { requestTranscription } from "$lib/api/media";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatDuration } from "$lib/format/duration";
-  import { claimPlayback, releasePlayback } from "$lib/media/playback";
-  import { computeWaveform, flatWaveform } from "$lib/media/waveform";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { requestTranscription } from "#lib/api/media.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatDuration } from "#lib/format/duration.js";
+  import { claimPlayback, releasePlayback } from "#lib/media/playback.js";
+  import { computeWaveform, flatWaveform } from "#lib/media/waveform.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/policy/CaptureToggleList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CaptureToggles } from "$lib/api/types";
+  import type { CaptureToggles } from "#lib/api/types.js";
 
   interface Props {
     disabled?: boolean;

frontend/src/lib/components/policy/PolicyEditor.svelte

@@ -5,20 +5,20 @@
     listFolders,
     listPolicies,
     updatePolicy,
-  } from "$lib/api/endpoints";
+  } from "#lib/api/endpoints.js";
   import type {
     CaptureToggles,
     Folder,
     PolicyRecord,
     PolicyScopeType,
-  } from "$lib/api/types";
-  import CaptureToggleList from "$lib/components/policy/CaptureToggleList.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { createChatPicker } from "$lib/stores/chat-picker.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  } from "#lib/api/types.js";
+  import CaptureToggleList from "#lib/components/policy/CaptureToggleList.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { createChatPicker } from "#lib/stores/chat-picker.svelte.js";
+  import { chats } from "#lib/stores/chats.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   let policies = $state<PolicyRecord[]>([]);
   let folders = $state<Folder[]>([]);

frontend/src/lib/components/presence/AnalyticsPanel.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-  import { page } from "$app/state";
   import {
     getCurrentPresence,
     getMessageVolume,
     getPresenceHistory,
     getPresenceHourly,
     getResponseStats,
-  } from "$lib/api/endpoints";
+  } from "#lib/api/endpoints.js";
   import type {
     PresenceHourly,
     PresenceSample,
     ResponseStats,
     VolumeBucket,
-  } from "$lib/api/types";
-  import PresenceHeatmap from "$lib/components/presence/PresenceHeatmap.svelte";
-  import VolumeChart from "$lib/components/presence/VolumeChart.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { formatPresence } from "$lib/format/presence";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { events } from "$lib/stores/events.svelte";
+  } from "#lib/api/types.js";
+  import PresenceHeatmap from "#lib/components/presence/PresenceHeatmap.svelte";
+  import VolumeChart from "#lib/components/presence/VolumeChart.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { formatPresence } from "#lib/format/presence.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { events } from "#lib/stores/events.svelte.js";
+  import { page } from "$app/state";
 
   const HISTORY_LIMIT = 200;
   const SECONDS_IN_MINUTE = 60;

frontend/src/lib/components/presence/PresenceHeatmap.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PresenceHourly } from "$lib/api/types";
+  import type { PresenceHourly } from "#lib/api/types.js";
 
   interface Props {
     hourly: PresenceHourly[];

frontend/src/lib/components/presence/VolumeChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { VolumeBucket } from "$lib/api/types";
+  import type { VolumeBucket } from "#lib/api/types.js";
 
   interface Props {
     volume: VolumeBucket[];

frontend/src/lib/components/profile/AvatarHistory.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { untrack } from "svelte";
-  import { type AvatarKind, loadAvatarVariant } from "$lib/api/avatars";
-  import { getAvatarHistory } from "$lib/api/endpoints";
-  import type { AvatarHistoryView } from "$lib/api/types";
-  import { formatFull } from "$lib/format/datetime";
-  import { accounts } from "$lib/stores/accounts.svelte";
+  import { type AvatarKind, loadAvatarVariant } from "#lib/api/avatars.js";
+  import { getAvatarHistory } from "#lib/api/endpoints.js";
+  import type { AvatarHistoryView } from "#lib/api/types.js";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
 
   interface Props {
     id: number;

frontend/src/lib/components/profile/ChatCalendar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+  import { getChatCalendar, getMessageAt } from "#lib/api/endpoints.js";
+  import type { DayCount } from "#lib/api/types.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { goto } from "$app/navigation";
-  import { getChatCalendar, getMessageAt } from "$lib/api/endpoints";
-  import type { DayCount } from "$lib/api/types";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/profile/ProfileInfo.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { AvatarKind } from "$lib/api/avatars";
-  import { getPeerHistory, getStories } from "$lib/api/endpoints";
-  import type { PeerHistoryView, PeerView } from "$lib/api/types";
-  import AvatarHistory from "$lib/components/profile/AvatarHistory.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  import type { AvatarKind } from "#lib/api/avatars.js";
+  import { getPeerHistory, getStories } from "#lib/api/endpoints.js";
+  import type { PeerHistoryView, PeerView } from "#lib/api/types.js";
+  import AvatarHistory from "#lib/components/profile/AvatarHistory.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
 
   interface Props {
     avatarKind: AvatarKind;

frontend/src/lib/components/profile/ProfilePanel.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
+  import { getPeer } from "#lib/api/endpoints.js";
+  import type { PeerView } from "#lib/api/types.js";
+  import ChatCalendar from "#lib/components/profile/ChatCalendar.svelte";
+  import ProfileInfo from "#lib/components/profile/ProfileInfo.svelte";
+  import SharedLinks from "#lib/components/profile/SharedLinks.svelte";
+  import SharedMedia from "#lib/components/profile/SharedMedia.svelte";
+  import StoriesArchive from "#lib/components/stories/StoriesArchive.svelte";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { peerName } from "#lib/format/peer.js";
+  import { chats } from "#lib/stores/chats.svelte.js";
   import { page } from "$app/state";
-  import { getPeer } from "$lib/api/endpoints";
-  import type { PeerView } from "$lib/api/types";
-  import ChatCalendar from "$lib/components/profile/ChatCalendar.svelte";
-  import ProfileInfo from "$lib/components/profile/ProfileInfo.svelte";
-  import SharedLinks from "$lib/components/profile/SharedLinks.svelte";
-  import SharedMedia from "$lib/components/profile/SharedMedia.svelte";
-  import StoriesArchive from "$lib/components/stories/StoriesArchive.svelte";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { peerName } from "$lib/format/peer";
-  import { chats } from "$lib/stores/chats.svelte";
 
   type Tab = "info" | "media" | "files" | "links" | "stories" | "calendar";
 

frontend/src/lib/components/profile/SharedLinks.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { untrack } from "svelte";
+  import { getChatLinks } from "#lib/api/endpoints.js";
+  import type { ChatLinkView } from "#lib/api/types.js";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatListDate } from "#lib/format/datetime.js";
+  import { safeHref } from "#lib/format/url.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { goto } from "$app/navigation";
-  import { getChatLinks } from "$lib/api/endpoints";
-  import type { ChatLinkView } from "$lib/api/types";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatListDate } from "$lib/format/datetime";
-  import { safeHref } from "$lib/format/url";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   const WWW_PREFIX = /^www\./;
 

frontend/src/lib/components/profile/SharedMedia.svelte

@@ -1,29 +1,29 @@
 <script lang="ts">
   import { untrack } from "svelte";
-  import { goto } from "$app/navigation";
-  import { downloadMedia } from "$lib/api/download";
-  import { getChatMedia } from "$lib/api/endpoints";
+  import { downloadMedia } from "#lib/api/download.js";
+  import { getChatMedia } from "#lib/api/endpoints.js";
   import {
     type InlineMedia,
     loadMediaItem,
     type ViewerItem,
     visualKind,
-  } from "$lib/api/media";
-  import type { MediaView } from "$lib/api/types";
-  import MediaViewer from "$lib/components/MediaViewer.svelte";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatListDate } from "$lib/format/datetime";
-  import { formatBytes, mediaKindLabel } from "$lib/format/media";
-  import { poster } from "$lib/media/poster";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { shareUi } from "$lib/stores/shares.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
-  import { isMobile } from "$lib/viewport";
+  } from "#lib/api/media.js";
+  import type { MediaView } from "#lib/api/types.js";
+  import MediaViewer from "#lib/components/MediaViewer.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatListDate } from "#lib/format/datetime.js";
+  import { formatBytes, mediaKindLabel } from "#lib/format/media.js";
+  import { poster } from "#lib/media/poster.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { shareUi } from "#lib/stores/shares.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
+  import { isMobile } from "#lib/viewport.js";
+  import { goto } from "$app/navigation";
 
   interface Props {
     chatId: number;

frontend/src/lib/components/search/ChatSearchPanel.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import { searchMessages } from "#lib/api/endpoints.js";
+  import type { SearchHit } from "#lib/api/types.js";
+  import SearchMessageItem from "#lib/components/search/SearchMessageItem.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import { searchMessages } from "$lib/api/endpoints";
-  import type { SearchHit } from "$lib/api/types";
-  import SearchMessageItem from "$lib/components/search/SearchMessageItem.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   const DEBOUNCE_MS = 250;
 

frontend/src/lib/components/search/DiscoverResultItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { ripple } from "$lib/actions/ripple";
-  import type { DiscoverItem } from "$lib/api/types";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
+  import { ripple } from "#lib/actions/ripple.js";
+  import type { DiscoverItem } from "#lib/api/types.js";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
 
   interface Props {
     item: DiscoverItem;

frontend/src/lib/components/search/SearchInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { search } from "$lib/stores/search.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { search } from "#lib/stores/search.svelte.js";
 
   let input = $state<HTMLInputElement | null>(null);
 

frontend/src/lib/components/search/SearchMessageItem.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { ripple } from "$lib/actions/ripple";
-  import type { SearchHit } from "$lib/api/types";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import { formatListDate } from "$lib/format/datetime";
-  import { peerName } from "$lib/format/peer";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
-  import { peers } from "$lib/stores/peers.svelte";
+  import { ripple } from "#lib/actions/ripple.js";
+  import type { SearchHit } from "#lib/api/types.js";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import { formatListDate } from "#lib/format/datetime.js";
+  import { peerName } from "#lib/format/peer.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { chats } from "#lib/stores/chats.svelte.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
 
   interface Props {
     hit: SearchHit;

frontend/src/lib/components/search/SearchResults.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import ChatListItem from "#lib/components/ChatListItem.svelte";
+  import DiscoverResultItem from "#lib/components/search/DiscoverResultItem.svelte";
+  import SearchMessageItem from "#lib/components/search/SearchMessageItem.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { search } from "#lib/stores/search.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import ChatListItem from "$lib/components/ChatListItem.svelte";
-  import DiscoverResultItem from "$lib/components/search/DiscoverResultItem.svelte";
-  import SearchMessageItem from "$lib/components/search/SearchMessageItem.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { search } from "$lib/stores/search.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   const activeChatId = $derived(
     page.params.chatId ? Number(page.params.chatId) : null

frontend/src/lib/components/settings/AddAccountDialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
   import { untrack } from "svelte";
-  import { ApiError } from "$lib/api/client";
+  import { ApiError } from "#lib/api/client.js";
   import {
     cancelLogin,
     pollQrLogin,
@@ -9,13 +9,13 @@
     startQrLogin,
     submitLoginCode,
     submitLoginPassword,
-  } from "$lib/api/endpoints";
-  import type { LoginState } from "$lib/api/types";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import QrCode from "$lib/components/ui/QrCode.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  } from "#lib/api/endpoints.js";
+  import type { LoginState } from "#lib/api/types.js";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import QrCode from "#lib/components/ui/QrCode.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   type Step = "qr" | "phone" | "code" | "password";
 

frontend/src/lib/components/settings/Appearance.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ripple } from "$lib/actions/ripple";
-  import { theme } from "$lib/stores/theme.svelte";
+  import { ripple } from "#lib/actions/ripple.js";
+  import { theme } from "#lib/stores/theme.svelte.js";
 
   const options = [
     { label: "Светлая", value: "light" },

frontend/src/lib/components/settings/MyAccount.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
-  import { ripple } from "$lib/actions/ripple";
-  import { ApiError } from "$lib/api/client";
-  import AddAccountDialog from "$lib/components/settings/AddAccountDialog.svelte";
-  import SettingsItem from "$lib/components/settings/SettingsItem.svelte";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { accountName } from "$lib/format/peer";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { ripple } from "#lib/actions/ripple.js";
+  import { ApiError } from "#lib/api/client.js";
+  import AddAccountDialog from "#lib/components/settings/AddAccountDialog.svelte";
+  import SettingsItem from "#lib/components/settings/SettingsItem.svelte";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { accountName } from "#lib/format/peer.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   const current = $derived(accounts.selected);
   const others = $derived(

frontend/src/lib/components/settings/Settings.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import About from "$lib/components/settings/About.svelte";
-  import Appearance from "$lib/components/settings/Appearance.svelte";
-  import MyAccount from "$lib/components/settings/MyAccount.svelte";
-  import SettingsItem from "$lib/components/settings/SettingsItem.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  import About from "#lib/components/settings/About.svelte";
+  import Appearance from "#lib/components/settings/Appearance.svelte";
+  import MyAccount from "#lib/components/settings/MyAccount.svelte";
+  import SettingsItem from "#lib/components/settings/SettingsItem.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { ui } from "#lib/stores/ui.svelte.js";
 
   const features = [
     { icon: "search", label: "Поиск" },

frontend/src/lib/components/settings/SettingsItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ripple } from "$lib/actions/ripple";
-  import Icon from "$lib/components/ui/Icon.svelte";
+  import { ripple } from "#lib/actions/ripple.js";
+  import Icon from "#lib/components/ui/Icon.svelte";
 
   interface Props {
     icon: string;

frontend/src/lib/components/shares/ShareDialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
   import { untrack } from "svelte";
-  import { ApiError } from "$lib/api/client";
+  import { ApiError } from "#lib/api/client.js";
   import {
     createShare,
     lookupShare,
@@ -9,15 +9,15 @@
     type ShareSettings,
     shareUrl,
     updateShare,
-  } from "$lib/api/shares";
-  import type { FileShare, ShareSubject } from "$lib/api/types";
-  import ShareLinkField from "$lib/components/shares/ShareLinkField.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import QrCode from "$lib/components/ui/QrCode.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatShareLimits } from "$lib/format/shares";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  } from "#lib/api/shares.js";
+  import type { FileShare, ShareSubject } from "#lib/api/types.js";
+  import ShareLinkField from "#lib/components/shares/ShareLinkField.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import QrCode from "#lib/components/ui/QrCode.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatShareLimits } from "#lib/format/shares.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     label?: string;

frontend/src/lib/components/shares/ShareLinkField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     url: string;

frontend/src/lib/components/shares/SharesPanel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import {
     deleteShare,
     listShares,
@@ -7,21 +6,22 @@
     revokeShare,
     shareState,
     shareUrl,
-  } from "$lib/api/shares";
-  import type { FileShare } from "$lib/api/types";
-  import ShareLinkField from "$lib/components/shares/ShareLinkField.svelte";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { formatBytes } from "$lib/format/media";
-  import { formatDownloads, formatExpiry, plural } from "$lib/format/shares";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { shareUi } from "$lib/stores/shares.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
+  } from "#lib/api/shares.js";
+  import type { FileShare } from "#lib/api/types.js";
+  import ShareLinkField from "#lib/components/shares/ShareLinkField.svelte";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { formatBytes } from "#lib/format/media.js";
+  import { formatDownloads, formatExpiry, plural } from "#lib/format/shares.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { shareUi } from "#lib/stores/shares.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
+  import { goto } from "$app/navigation";
 
   type Filter = "active" | "all";
 

frontend/src/lib/components/social/CallbacksPanel.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { untrack } from "svelte";
+  import { getMessageCallbacks } from "#lib/api/endpoints.js";
+  import type { CallbackView } from "#lib/api/types.js";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { page } from "$app/state";
-  import { getMessageCallbacks } from "$lib/api/endpoints";
-  import type { CallbackView } from "$lib/api/types";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   const HEX_PAIR = /.{1,2}/g;
   const MIN_PRINTABLE = 32;

frontend/src/lib/components/social/LinksPanel.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { untrack } from "svelte";
+  import { getMessageLinks } from "#lib/api/endpoints.js";
+  import type { LinkView } from "#lib/api/types.js";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { safeHref } from "#lib/format/url.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { page } from "$app/state";
-  import { getMessageLinks } from "$lib/api/endpoints";
-  import type { LinkView } from "$lib/api/types";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { safeHref } from "$lib/format/url";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   const WWW_PREFIX = /^www\./;
 

frontend/src/lib/components/social/ReactionsPanel.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
   import { untrack } from "svelte";
+  import { getMessageReactions } from "#lib/api/endpoints.js";
+  import type { ReactionView } from "#lib/api/types.js";
+  import CustomEmoji from "#lib/components/CustomEmoji.svelte";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { peerColorIndex, peerName } from "#lib/format/peer.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { page } from "$app/state";
-  import { getMessageReactions } from "$lib/api/endpoints";
-  import type { ReactionView } from "$lib/api/types";
-  import CustomEmoji from "$lib/components/CustomEmoji.svelte";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { peerColorIndex, peerName } from "$lib/format/peer";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { peers } from "$lib/stores/peers.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   const CUSTOM_PREFIX = "custom:";
 

frontend/src/lib/components/stories/AllStoriesArchive.svelte

@@ -5,20 +5,20 @@
     getChatsBatch,
     getPeers,
     getStories,
-  } from "$lib/api/endpoints";
-  import { loadStoryMedia } from "$lib/api/stories";
-  import type { StoryView } from "$lib/api/types";
-  import StoryTile from "$lib/components/stories/StoryTile.svelte";
-  import StoryViewer from "$lib/components/stories/StoryViewer.svelte";
-  import Avatar from "$lib/components/ui/Avatar.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { peerName } from "$lib/format/peer";
-  import { poster } from "$lib/media/poster";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  } from "#lib/api/endpoints.js";
+  import { loadStoryMedia } from "#lib/api/stories.js";
+  import type { StoryView } from "#lib/api/types.js";
+  import StoryTile from "#lib/components/stories/StoryTile.svelte";
+  import StoryViewer from "#lib/components/stories/StoryViewer.svelte";
+  import Avatar from "#lib/components/ui/Avatar.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { peerName } from "#lib/format/peer.js";
+  import { poster } from "#lib/media/poster.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Group {
     hasAvatar: boolean;

frontend/src/lib/components/stories/StoriesArchive.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
   import { untrack } from "svelte";
+  import { enqueueStoriesBackfill, getStories } from "#lib/api/endpoints.js";
+  import { loadStoryMedia } from "#lib/api/stories.js";
+  import type { StoryView } from "#lib/api/types.js";
+  import StoryTile from "#lib/components/stories/StoryTile.svelte";
+  import StoryViewer from "#lib/components/stories/StoryViewer.svelte";
+  import Button from "#lib/components/ui/Button.svelte";
+  import EmptyState from "#lib/components/ui/EmptyState.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { poster } from "#lib/media/poster.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
   import { page } from "$app/state";
-  import { enqueueStoriesBackfill, getStories } from "$lib/api/endpoints";
-  import { loadStoryMedia } from "$lib/api/stories";
-  import type { StoryView } from "$lib/api/types";
-  import StoryTile from "$lib/components/stories/StoryTile.svelte";
-  import StoryViewer from "$lib/components/stories/StoryViewer.svelte";
-  import Button from "$lib/components/ui/Button.svelte";
-  import EmptyState from "$lib/components/ui/EmptyState.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { poster } from "$lib/media/poster";
-  import { accounts } from "$lib/stores/accounts.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
 
   interface Props {
     chatId?: number | null;

frontend/src/lib/components/stories/StoryTile.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
+  import { downloadStory } from "#lib/api/download.js";
+  import type { StoryView } from "#lib/api/types.js";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { poster } from "#lib/media/poster.js";
+  import { shareUi } from "#lib/stores/shares.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
+  import { ui } from "#lib/stores/ui.svelte.js";
   import { goto } from "$app/navigation";
-  import { downloadStory } from "$lib/api/download";
-  import type { StoryView } from "$lib/api/types";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { poster } from "$lib/media/poster";
-  import { shareUi } from "$lib/stores/shares.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
-  import { ui } from "$lib/stores/ui.svelte";
 
   interface Props {
     onopen: () => void;

frontend/src/lib/components/stories/StoryViewer.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
   import { untrack } from "svelte";
-  import { downloadStory } from "$lib/api/download";
-  import { loadStoryMedia } from "$lib/api/stories";
-  import type { StoryView } from "$lib/api/types";
-  import ContextMenu from "$lib/components/ui/ContextMenu.svelte";
-  import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
-  import Icon from "$lib/components/ui/Icon.svelte";
-  import Spinner from "$lib/components/ui/Spinner.svelte";
-  import { formatFull } from "$lib/format/datetime";
-  import { shareUi } from "$lib/stores/shares.svelte";
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { downloadStory } from "#lib/api/download.js";
+  import { loadStoryMedia } from "#lib/api/stories.js";
+  import type { StoryView } from "#lib/api/types.js";
+  import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
+  import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import Icon from "#lib/components/ui/Icon.svelte";
+  import Spinner from "#lib/components/ui/Spinner.svelte";
+  import { formatFull } from "#lib/format/datetime.js";
+  import { shareUi } from "#lib/stores/shares.svelte.js";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
     index: number;

frontend/src/lib/components/ui/Avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { type AvatarKind, loadAvatar } from "$lib/api/avatars";
-  import { initials as toInitials } from "$lib/format/peer";
+  import { type AvatarKind, loadAvatar } from "#lib/api/avatars.js";
+  import { initials as toInitials } from "#lib/format/peer.js";
 
   interface Props {
     avatar?: { kind: AvatarKind; id: number } | null;

frontend/src/lib/components/ui/Button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { HTMLButtonAttributes } from "svelte/elements";
-  import { ripple } from "$lib/actions/ripple";
+  import { ripple } from "#lib/actions/ripple.js";
 
   type Variant =
     | "primary"

frontend/src/lib/components/ui/ListItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import { ripple } from "$lib/actions/ripple";
+  import { ripple } from "#lib/actions/ripple.js";
 
   interface Props {
     children: Snippet;

frontend/src/lib/components/ui/ToastHost.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { toasts } from "$lib/stores/toasts.svelte";
+  import { toasts } from "#lib/stores/toasts.svelte.js";
 </script>
 
 <div class="Notification-container">

frontend/src/lib/components/watches/WatchList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Watch } from "$lib/api/types";
-  import { peerName } from "$lib/format/peer";
-  import { peers } from "$lib/stores/peers.svelte";
+  import type { Watch } from "#lib/api/types.js";
+  import { peerName } from "#lib/format/peer.js";
+  import { peers } from "#lib/stores/peers.svelte.js";
   import Button from "../ui/Button.svelte";
   import Icon from "../ui/Icon.svelte";
 

frontend/src/lib/components/watches/WatchesPanel.svelte

@@ -4,9 +4,9 @@
     deleteWatch,
     listWatches,
     updateWatch,
-  } from "$lib/api/endpoints";
-  import type { Watch } from "$lib/api/types";
-  import { accounts } from "$lib/stores/accounts.svelte";
+  } from "#lib/api/endpoints.js";
+  import type { Watch } from "#lib/api/types.js";
+  import { accounts } from "#lib/stores/accounts.svelte.js";
   import Spinner from "../ui/Spinner.svelte";
   import WatchEditor from "./WatchEditor.svelte";
   import WatchList from "./WatchList.svelte";

frontend/src/lib/format/entities.ts

@@ -1,5 +1,5 @@
-import type { EntityView } from "$lib/api/types";
-import { safeHref } from "$lib/format/url";
+import type { EntityView } from "#lib/api/types.js";
+import { safeHref } from "#lib/format/url.js";
 
 export interface TextNode {
   kind: "text";

frontend/src/lib/format/folders.ts

@@ -1,4 +1,4 @@
-import type { Chat, Folder } from "$lib/api/types";
+import type { Chat, Folder } from "#lib/api/types.js";
 
 function categoryMatch(folder: Folder, chat: Chat): boolean {
   if (chat.is_broadcast) {

frontend/src/lib/format/peer.ts

@@ -1,4 +1,4 @@
-import type { Account, PeerView } from "$lib/api/types";
+import type { Account, PeerView } from "#lib/api/types.js";
 
 const PEER_COLOR_COUNT = 7;
 

frontend/src/lib/format/presence.ts

@@ -1,5 +1,5 @@
-import type { PresenceSample } from "$lib/api/types";
-import { formatListDate } from "$lib/format/datetime";
+import type { PresenceSample } from "#lib/api/types.js";
+import { formatListDate } from "#lib/format/datetime.js";
 
 export function isOnline(sample: PresenceSample | null): boolean {
   if (sample === null || sample.status !== "online") {

frontend/src/lib/format/shares.ts

@@ -1,5 +1,5 @@
-import type { FileShare } from "$lib/api/types";
-import { formatFull } from "$lib/format/datetime";
+import type { FileShare } from "#lib/api/types.js";
+import { formatFull } from "#lib/format/datetime.js";
 
 const TEEN_START = 11;
 const TEEN_END = 14;

frontend/src/lib/index.ts

@@ -1,2 +1,2 @@
-// place files you want to import through the `$lib` alias in this folder.
+// place files you want to import through the `#lib` alias in this folder.
 // biome-ignore-all lint/suspicious/noEmptySource: temporary

frontend/src/lib/stores/accounts.svelte.ts

@@ -1,10 +1,10 @@
-import { browser } from "$app/environment";
 import {
   listAccounts,
   logoutAccount,
   renameAccountDevice,
-} from "$lib/api/endpoints";
-import type { Account } from "$lib/api/types";
+} from "#lib/api/endpoints.js";
+import type { Account } from "#lib/api/types.js";
+import { browser } from "$app/env";
 
 const STORAGE_KEY = "bg.account";
 

frontend/src/lib/stores/auth.svelte.ts

@@ -1,4 +1,4 @@
-import { browser } from "$app/environment";
+import { browser } from "$app/env";
 
 const STORAGE_KEY = "bg.token";
 

frontend/src/lib/stores/chat-picker.svelte.ts

@@ -1,5 +1,5 @@
-import { listChats } from "$lib/api/endpoints";
-import type { Chat } from "$lib/api/types";
+import { listChats } from "#lib/api/endpoints.js";
+import type { Chat } from "#lib/api/types.js";
 
 const DEBOUNCE_MS = 250;
 const LIMIT = 40;

frontend/src/lib/stores/chats.svelte.ts

@@ -4,12 +4,12 @@ import {
   getChatsBatch,
   getJob,
   listChats,
-} from "$lib/api/endpoints";
-import type { Chat, LiveEvent } from "$lib/api/types";
-import { folderContains } from "$lib/format/folders";
-import { accounts } from "$lib/stores/accounts.svelte";
-import { events } from "$lib/stores/events.svelte";
-import { folders } from "$lib/stores/folders.svelte";
+} from "#lib/api/endpoints.js";
+import type { Chat, LiveEvent } from "#lib/api/types.js";
+import { folderContains } from "#lib/format/folders.js";
+import { accounts } from "#lib/stores/accounts.svelte.js";
+import { events } from "#lib/stores/events.svelte.js";
+import { folders } from "#lib/stores/folders.svelte.js";
 
 const POLL_INTERVAL = 1500;
 const POLL_MAX = 12;

frontend/src/lib/stores/discover.svelte.ts

@@ -1,6 +1,6 @@
-import { getDiscoverItem } from "$lib/api/endpoints";
-import type { DiscoverItem } from "$lib/api/types";
-import { accounts } from "$lib/stores/accounts.svelte";
+import { getDiscoverItem } from "#lib/api/endpoints.js";
+import type { DiscoverItem } from "#lib/api/types.js";
+import { accounts } from "#lib/stores/accounts.svelte.js";
 
 function createDiscover() {
   let items = $state<Record<number, DiscoverItem>>({});

frontend/src/lib/stores/events.svelte.ts

@@ -1,8 +1,9 @@
-import { browser } from "$app/environment";
-import type { LiveEvent } from "$lib/api/types";
-import { auth } from "$lib/stores/auth.svelte";
+import type { LiveEvent } from "#lib/api/types.js";
+import { auth } from "#lib/stores/auth.svelte.js";
+import { browser } from "$app/env";
+import { PUBLIC_API_BASE_URL } from "$app/env/public";
 
-const BASE = import.meta.env.VITE_API_BASE ?? "/api";
+const BASE = PUBLIC_API_BASE_URL;
 const RECONNECT_DELAY = 2000;
 const STALL_TIMEOUT = 45_000;
 

frontend/src/lib/stores/folders.svelte.ts

@@ -1,6 +1,6 @@
-import { listFolders } from "$lib/api/endpoints";
-import type { Folder } from "$lib/api/types";
-import { accounts } from "$lib/stores/accounts.svelte";
+import { listFolders } from "#lib/api/endpoints.js";
+import type { Folder } from "#lib/api/types.js";
+import { accounts } from "#lib/stores/accounts.svelte.js";
 
 function createFolders() {
   let list = $state<Folder[]>([]);

frontend/src/lib/stores/peers.svelte.ts

@@ -1,6 +1,6 @@
-import { getPeers } from "$lib/api/endpoints";
-import type { PeerView } from "$lib/api/types";
-import { accounts } from "$lib/stores/accounts.svelte";
+import { getPeers } from "#lib/api/endpoints.js";
+import type { PeerView } from "#lib/api/types.js";
+import { accounts } from "#lib/stores/accounts.svelte.js";
 
 const BATCH_DELAY = 40;
 

frontend/src/lib/stores/search.svelte.ts

@@ -1,5 +1,9 @@
-import { discoverPeers, listChats, searchMessages } from "$lib/api/endpoints";
-import type { Chat, DiscoverItem, SearchHit } from "$lib/api/types";
+import {
+  discoverPeers,
+  listChats,
+  searchMessages,
+} from "#lib/api/endpoints.js";
+import type { Chat, DiscoverItem, SearchHit } from "#lib/api/types.js";
 
 const DEBOUNCE_MS = 250;
 const REMOTE_DEBOUNCE_MS = 700;

frontend/src/lib/stores/shares.svelte.ts

@@ -1,4 +1,4 @@
-import type { ShareSubject } from "$lib/api/types";
+import type { ShareSubject } from "#lib/api/types.js";
 
 function createShareUi() {
   let open = $state(false);