feat: player stats, prev/next

fix: import order

eslint.config.js

@@ -1,5 +1,6 @@
 import config from 'eslint-config-standard-universal'
 import tseslint from 'typescript-eslint'
+
 import svelteConfig from './svelte.config.js'
 
 export default tseslint.config(
@@ -12,7 +13,11 @@ export default tseslint.config(
       }
     },
     rules: {
-      'svelte/html-self-closing': 'off'
+      'svelte/html-self-closing': 'off',
+      'import/order': ['error', {
+        'newlines-between': 'always',
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type']
+      }]
     }
   }
 )

package.json

@@ -4,12 +4,13 @@
 	"license": "BUSL-1.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --open",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "eslint --print-config eslint.config.js",
+		"lint": "eslint -c eslint.config.js",
+		"lint:fix": "eslint -c eslint.config.js --fix",
 		"gql:turbo": "node ./node_modules/gql.tada/bin/cli.js turbo"
 	},
 	"devDependencies": {

src/lib/components/EpisodesList.svelte

@@ -7,18 +7,21 @@
 </script>
 
 <script lang='ts'>
-  import { episodes as _episodes, dedupeAiring, episodeByAirDate, notes, type Media } from '$lib/modules/anilist'
-  import type { EpisodesResponse } from '$lib/modules/anizip/types'
-  import { cn, isMobile, since } from '$lib/utils'
   import { ChevronLeft, Play } from 'lucide-svelte'
+  import { ChevronRight } from 'svelte-radix'
+
   import Pagination from './Pagination.svelte'
   import { Button } from './ui/button'
-  import { ChevronRight } from 'svelte-radix'
-  import { list, progress } from '$lib/modules/auth'
-  import { click } from '$lib/modules/navigate'
   import { searchStore } from './SearchModal.svelte'
   import { Load } from './ui/img'
 
+  import type { EpisodesResponse } from '$lib/modules/anizip/types'
+
+  import { episodes as _episodes, dedupeAiring, episodeByAirDate, notes, type Media } from '$lib/modules/anilist'
+  import { cn, isMobile, since } from '$lib/utils'
+  import { list, progress } from '$lib/modules/auth'
+  import { click } from '$lib/modules/navigate'
+
   export let eps: EpisodesResponse | null
   export let media: Media
 

src/lib/components/Online.svelte

@@ -1,7 +1,8 @@
 <script lang='ts'>
-  import online from '$lib/modules/online.ts'
   import { CloudOff } from 'lucide-svelte'
 
+  import online from '$lib/modules/online.ts'
+
   let hideFirst = false
   $: if (!$online && !hideFirst) {
     hideFirst = true

src/lib/components/SearchModal.svelte

@@ -1,17 +1,20 @@
 <script lang='ts' context='module'>
-  import { extensions } from '$lib/modules/extensions/extensions'
   import { writable } from 'simple-store-svelte'
-  import * as Dialog from '$lib/components/ui/dialog'
-  import { Input } from './ui/input'
   import { MagnifyingGlass } from 'svelte-radix'
-  import { settings, videoResolutions } from '$lib/modules/settings'
+  import { BadgeCheck, Database } from 'lucide-svelte'
+
+  import { Input } from './ui/input'
   import { SingleCombo } from './ui/combobox'
-  import { title, type Media } from '$lib/modules/anilist'
+
   import type { AnitomyResult } from 'anitomyscript'
+  import type { TorrentResult } from 'hayase-extensions'
+
+  import { extensions } from '$lib/modules/extensions/extensions'
+  import * as Dialog from '$lib/components/ui/dialog'
+  import { settings, videoResolutions } from '$lib/modules/settings'
+  import { title, type Media } from '$lib/modules/anilist'
   import { click } from '$lib/modules/navigate'
   import { fastPrettyBytes, since } from '$lib/utils'
-  import { BadgeCheck, Database } from 'lucide-svelte'
-  import type { TorrentResult } from 'hayase-extensions'
 
   const termMapping: Record<string, {text: string, color: string}> = {}
   termMapping['5.1'] = termMapping['5.1CH'] = { text: '5.1', color: '#f67255' }
@@ -61,6 +64,7 @@
 <script lang='ts'>
   import ProgressButton from './ui/button/progress-button.svelte'
   import { Banner } from './ui/img'
+
   import { saved } from '$lib/modules/extensions'
 
   $: open = !!$searchStore.media

src/lib/components/SettingsNav.svelte

@@ -1,9 +1,11 @@
 <script lang='ts'>
   import { cubicInOut } from 'svelte/easing'
   import { crossfade } from 'svelte/transition'
+
+  import { Button } from './ui/button'
+
   import { cn } from '$lib/utils.js'
   import { page } from '$app/stores'
-  import { Button } from './ui/button'
 
   let className: string | undefined | null = ''
   export let items: Array<{ href: string, title: string }>

src/lib/components/StatusDot.svelte

@@ -1,8 +1,10 @@
 <script lang='ts'>
-  import { cn } from '$lib/utils'
-  import type { HTMLAttributes } from 'svelte/elements'
   import { tv, type VariantProps } from 'tailwind-variants'
 
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import { cn } from '$lib/utils'
+
   const dotvariants = tv({
     base: 'inline-flex w-[0.55rem] h-[0.55rem] me-1 bg-blue-600 rounded-full',
     variants: {

src/lib/components/icons/Hub.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Icon, type Attrs } from 'lucide-svelte'
+
   import type { SvelteHTMLElements } from 'svelte/elements'
 
   const iconNode: Array<[elementName: keyof SvelteHTMLElements, attrs: Attrs]> = [['path', { d: 'M240-44q-48.5 0-82.25-33.75T124-160q0-48.5 33.75-82.25T240-276q14 0 24.25 2.25t21.25 7.25L353-351q-25.5-29-34.25-63.25T314-482.5L216-515q-17 23.5-41 37.25T120-464q-48.5 0-82.25-33.75T4-580q0-48.5 33.75-82.25T120-696q48.5 0 82.25 33.75T236-580v5.5l97.5 34q16.5-31 47.25-54t68.25-30V-728q-39.5-12.5-62.25-43T364-840q0-48.5 33.75-82.25T480-956q48.5 0 82.25 33.75T596-840q0 38.5-23.25 69T511-728v103.5q37.5 7 68 30t47.5 54l97.5-34v-5.5q0-48.5 33.75-82.25T840-696q48.5 0 82.25 33.75T956-580q0 48.5-33.75 82.25T840-464q-31 0-55.5-13.75T744-515l-98 32.5q4 34.5-5 68.25T607-351l67.5 84q11-5 21.25-7t24.25-2q48.5 0 82.25 33.75T836-160q0 48.5-33.75 82.25T720-44q-48.5 0-82.25-33.75T604-160q0-19.5 5.75-36.25T626-228l-67-84.5q-36.5 20-79.25 20.25T400.5-312.5L334-228q10.5 15 16.25 31.75T356-160q0 48.5-33.75 82.25T240-44ZM120-539q17 0 29-12t12-29q0-17-12-29t-29-12q-17 0-29 12t-12 29q0 17 12 29t29 12Zm120 420q17 0 29-12t12-29q0-17-12-29t-29-12q-17 0-29 12t-12 29q0 17 12 29t29 12Zm240-680q17 0 29-12t12-29q0-17-12-29t-29-12q-17 0-29 12t-12 29q0 17 12 29t29 12Zm0 431.5q38.5 0 65.5-27t27-65.5q0-38.5-27-65.5t-65.5-27q-38.5 0-65.5 27t-27 65.5q0 38.5 27 65.5t65.5 27ZM720-119q17 0 29-12t12-29q0-17-12-29t-29-12q-17 0-29 12t-12 29q0 17 12 29t29 12Zm120-420q17 0 29-12t12-29q0-17-12-29t-29-12q-17 0-29 12t-12 29q0 17 12 29t29 12ZM480-840ZM120-580Zm360 120Zm360-120ZM240-160Zm480 0Z' }]]

src/lib/components/icons/Logo.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Icon, type Attrs } from 'lucide-svelte'
+
   import type { SvelteHTMLElements } from 'svelte/elements'
 
   const iconNode: Array<[elementName: keyof SvelteHTMLElements, attrs: Attrs]> = [

src/lib/components/icons/MyAnimeList.svelte

@@ -1,8 +1,10 @@
 <script lang='ts'>
-  import { cn } from '$lib/utils'
   import { Icon, type Attrs } from 'lucide-svelte'
+
   import type { SvelteHTMLElements } from 'svelte/elements'
 
+  import { cn } from '$lib/utils'
+
   const iconNode: Array<[elementName: keyof SvelteHTMLElements, attrs: Attrs]> = [['path', { fill: 'currentColor', d: 'M8.273 7.247v8.423l-2.103-.003v-5.216l-2.03 2.404l-1.989-2.458l-.02 5.285H.001L0 7.247h2.203l1.865 2.545l2.015-2.546zm8.628 2.069l.025 6.335h-2.365l-.008-2.871h-2.8c.07.499.21 1.266.417 1.779c.155.381.298.751.583 1.128l-1.705 1.125c-.349-.636-.622-1.337-.878-2.082a9.3 9.3 0 0 1-.507-2.179c-.085-.75-.097-1.471.107-2.212a3.9 3.9 0 0 1 1.161-1.866c.313-.293.749-.5 1.1-.687s.743-.264 1.107-.359a7.4 7.4 0 0 1 1.191-.183c.398-.034 1.107-.066 2.39-.028l.545 1.749H14.51c-.593.008-.878.001-1.341.209a2.24 2.24 0 0 0-1.278 1.92l2.663.033l.038-1.81zm3.992-2.099v6.627l3.107.032l-.43 1.775h-4.807V7.187z' }]]
 
   let className = ''

src/lib/components/icons/PictureInPicture.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Icon, type Attrs } from 'lucide-svelte'
+
   import type { SvelteHTMLElements } from 'svelte/elements'
   const iconNode: Array<[elementName: keyof SvelteHTMLElements, attrs: Attrs]> = [['path', { d: 'M8 4.5v5H3m-1-6 6 6m13 0v-3c0-1.16-.84-2-2-2h-7m-9 9v2c0 1.05.95 2 2 2h3' }], ['rect', { width: '10', height: '7', x: '12', y: '13', rx: '2', fill: 'currentColor' }]]
 </script>

src/lib/components/icons/PictureInPictureExit.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Icon, type Attrs } from 'lucide-svelte'
+
   import type { SvelteHTMLElements } from 'svelte/elements'
   const iconNode: Array<[elementName: keyof SvelteHTMLElements, attrs: Attrs]> = [['path', { d: 'M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4' }], ['rect', { width: '10', height: '7', x: '12', y: '13', rx: '2', fill: 'currentColor' }]]
 </script>

src/lib/components/icons/Play.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Icon, type Attrs } from 'lucide-svelte'
+
   import type { SvelteHTMLElements } from 'svelte/elements'
 
   const iconNode: Array<[elementName: keyof SvelteHTMLElements, attrs: Attrs]> = [

src/lib/components/icons/Subtitles.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Icon, type Attrs } from 'lucide-svelte'
+
   import type { SvelteHTMLElements } from 'svelte/elements'
 
   const iconNode: Array<[elementName: keyof SvelteHTMLElements, attrs: Attrs]> = [

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -1,16 +1,17 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import { Avatar as AvatarPrimitive } from 'bits-ui'
 
-	type $$Props = AvatarPrimitive.FallbackProps;
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  type $$Props = AvatarPrimitive.FallbackProps
+
+  let className: $$Props['class']
+  export { className as class }
 </script>
 
 <AvatarPrimitive.Fallback
-	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
-	{...$$restProps}
+  class={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </AvatarPrimitive.Fallback>

src/lib/components/ui/avatar/avatar-image.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Avatar as AvatarPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = AvatarPrimitive.ImageProps

src/lib/components/ui/avatar/avatar.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Avatar as AvatarPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = AvatarPrimitive.Props

src/lib/components/ui/badge/badge.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { type Variant, badgeVariants } from './index.js'
+
   import { cn } from '$lib/utils.js'
 
   let className: string | undefined | null = ''

src/lib/components/ui/banner/banner-image.svelte

@@ -1,7 +1,8 @@
 <script lang='ts' context='module'>
+  import { writable } from 'simple-store-svelte'
+
   import { safeBanner, type Media } from '$lib/modules/anilist'
   import { cn } from '$lib/utils'
-  import { writable } from 'simple-store-svelte'
 
   export const bannerSrc = writable<Media | null>(null)
 

src/lib/components/ui/banner/banner.svelte

@@ -6,9 +6,10 @@
 </script>
 
 <script lang='ts'>
+  import { get } from 'svelte/store'
+
   import FullBanner from './full-banner.svelte'
   import SkeletonBanner from './skeleton-banner.svelte'
-  import { get } from 'svelte/store'
 
   if (get(query.isPaused$)) query.resume()
 </script>

src/lib/components/ui/banner/full-banner.svelte

@@ -1,9 +1,12 @@
 <script lang='ts'>
-  import { desc, duration, format, season, title, type Media } from '$lib/modules/anilist'
-  import { click } from '$lib/modules/navigate'
   import { onDestroy } from 'svelte'
+
   import { BookmarkButton, FavoriteButton, PlayButton } from '../button'
+
   import { bannerSrc } from './banner-image.svelte'
+
+  import { click } from '$lib/modules/navigate'
+  import { desc, duration, format, season, title, type Media } from '$lib/modules/anilist'
   import { of } from '$lib/modules/auth'
   export let mediaList: Array<Media | null>
 

src/lib/components/ui/button/bookmark.svelte

@@ -1,7 +1,9 @@
 <script lang='ts'>
   import { Bookmark } from 'lucide-svelte'
-  import { Button, iconSizes, type Props } from '$lib/components/ui/button'
+
   import type { Media } from '$lib/modules/anilist'
+
+  import { Button, iconSizes, type Props } from '$lib/components/ui/button'
   import { list, authAggregator, lists } from '$lib/modules/auth'
   import { clickwrap, keywrap } from '$lib/modules/navigate'
 

src/lib/components/ui/button/button.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
   import { Button as ButtonPrimitive } from 'bits-ui'
+
   import { type Props, buttonVariants } from './index.js'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = Props

src/lib/components/ui/button/favorite.svelte

@@ -1,8 +1,10 @@
 <script lang='ts'>
   import { Heart } from 'lucide-svelte'
+
+  import type { Media } from '$lib/modules/anilist'
+
   import { Button, iconSizes, type Props } from '$lib/components/ui/button'
   import { authAggregator, fav } from '$lib/modules/auth'
-  import type { Media } from '$lib/modules/anilist'
   import { clickwrap, keywrap } from '$lib/modules/navigate'
 
   type $$Props = Props & { media: Media }

src/lib/components/ui/button/index.ts

@@ -1,10 +1,12 @@
-import type { Button as ButtonPrimitive } from 'bits-ui'
 import { type VariantProps, tv } from 'tailwind-variants'
+
 import Root from './button.svelte'
 import Play from './play.svelte'
 import Favorite from './favorite.svelte'
 import Bookmark from './bookmark.svelte'
 
+import type { Button as ButtonPrimitive } from 'bits-ui'
+
 const buttonVariants = tv({
   base: 'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
   variants: {

src/lib/components/ui/button/play.svelte

@@ -1,9 +1,11 @@
 <script lang='ts'>
   import { Play } from 'lucide-svelte'
+
+  import type { Media } from '$lib/modules/anilist'
+
   import { Button, iconSizes, type Props } from '$lib/components/ui/button'
   import { cn } from '$lib/utils'
   import { list, progress } from '$lib/modules/auth'
-  import type { Media } from '$lib/modules/anilist'
   import { clickwrap, keywrap } from '$lib/modules/navigate'
   import { searchStore } from '$lib/components/SearchModal.svelte'
 

src/lib/components/ui/button/progress-button.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
   import { Button as ButtonPrimitive } from 'bits-ui'
+
   import { type Props, buttonVariants } from './index.js'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = Props & { duration?: number, autoStart?: boolean, onclick: () => void, animating?: boolean }

src/lib/components/ui/cards/YoutubeIframe.svelte

@@ -1,8 +1,9 @@
 <script lang='ts'>
-  import { click } from '$lib/modules/navigate'
   import { VolumeX, Volume2 } from 'lucide-svelte'
   import { createEventDispatcher, onDestroy } from 'svelte'
 
+  import { click } from '$lib/modules/navigate'
+
   export let id: string
 
   const dispatch = createEventDispatcher<{hide: boolean}>()

src/lib/components/ui/cards/preview.svelte

@@ -1,10 +1,12 @@
 <script lang='ts'>
   import { BookmarkButton, FavoriteButton, PlayButton } from '../button'
-  import { desc, duration, format, season, title, type Media } from '$lib/modules/anilist'
+  import { Banner } from '../img'
+
   import YoutubeIframe from './YoutubeIframe.svelte'
+
+  import { desc, duration, format, season, title, type Media } from '$lib/modules/anilist'
   import { cn } from '$lib/utils'
   import { of } from '$lib/modules/auth'
-  import { Banner } from '../img'
 
   export let media: Media
 

src/lib/components/ui/cards/query.svelte

@@ -1,7 +1,8 @@
 <script lang='ts'>
-  import { SkeletonCard, SmallCard } from '$lib/components/ui/cards'
   import type { client } from '$lib/modules/anilist'
 
+  import { SkeletonCard, SmallCard } from '$lib/components/ui/cards'
+
   export let query: ReturnType<typeof client.search>
 
   $: paused = query.isPaused$

src/lib/components/ui/cards/small.svelte

@@ -1,13 +1,17 @@
 <script lang='ts'>
   import { CalendarDays, Tv } from 'lucide-svelte'
-  import PreviewCard from './preview.svelte'
-  import { coverMedium, format, title } from '$lib/modules/anilist/util'
-  import type { Media } from '$lib/modules/anilist/types'
-  import { hover } from '$lib/modules/navigate'
-  import { goto } from '$app/navigation'
+
   import StatusDot from '../../StatusDot.svelte'
   import { Load } from '../img'
 
+  import PreviewCard from './preview.svelte'
+
+  import type { Media } from '$lib/modules/anilist/types'
+
+  import { coverMedium, format, title } from '$lib/modules/anilist/util'
+  import { hover } from '$lib/modules/navigate'
+  import { goto } from '$app/navigation'
+
   export let media: Media
 
   let hidden = true

src/lib/components/ui/chat/Messages.svelte

@@ -1,7 +1,8 @@
 <script lang='ts'>
-  import type { Writable } from 'simple-store-svelte'
   import { getPFP, type ChatMessage } from '.'
 
+  import type { Writable } from 'simple-store-svelte'
+
   export let messages: Writable<ChatMessage[]>
 
   function groupMessages (messages: ChatMessage[]) {

src/lib/components/ui/chat/UserList.svelte

@@ -1,7 +1,10 @@
 <script lang='ts'>
-  import type { Writable } from 'svelte/store'
-  import { getPFP, type ChatUser } from '.'
   import { ExternalLink } from 'lucide-svelte'
+
+  import { getPFP, type ChatUser } from '.'
+
+  import type { Writable } from 'svelte/store'
+
   import { click } from '$lib/modules/navigate'
   import native from '$lib/modules/native'
 

src/lib/components/ui/checkbox/checkbox.svelte

@@ -2,6 +2,7 @@
   import { Checkbox as CheckboxPrimitive } from 'bits-ui'
   import Check from 'svelte-radix/Check.svelte'
   import Minus from 'svelte-radix/Minus.svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = CheckboxPrimitive.Props

src/lib/components/ui/checkbox/index.ts

@@ -1,6 +1,6 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte'
 export {
-	Root,
-	//
-	Root as Checkbox,
-};
+  Root,
+  //
+  Root as Checkbox
+}

src/lib/components/ui/combobox/combobox.svelte

@@ -10,11 +10,12 @@
 <script lang='ts'>
   import { CaretSort, Check } from 'svelte-radix'
   import { tick } from 'svelte'
+  import { X } from 'lucide-svelte'
+
   import * as Command from '$lib/components/ui/command'
   import * as Popover from '$lib/components/ui/popover'
   import { Button } from '$lib/components/ui/button'
   import { cn } from '$lib/utils.js'
-  import { X } from 'lucide-svelte'
   import { intputType } from '$lib/modules/navigate'
 
   interface value {

src/lib/components/ui/command/command-dialog.svelte

@@ -1,7 +1,9 @@
 <script lang='ts'>
+  import Command from './command.svelte'
+
   import type { Dialog as DialogPrimitive } from 'bits-ui'
   import type { Command as CommandPrimitive } from 'cmdk-sv'
-  import Command from './command.svelte'
+
   import * as Dialog from '$lib/components/ui/dialog/index.js'
 
   type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps

src/lib/components/ui/command/command-empty.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Command as CommandPrimitive } from 'cmdk-sv'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = CommandPrimitive.EmptyProps

src/lib/components/ui/command/command-group.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Command as CommandPrimitive } from 'cmdk-sv'
+
   import { cn } from '$lib/utils.js'
   type $$Props = CommandPrimitive.GroupProps
 

src/lib/components/ui/command/command-input.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
   import { Command as CommandPrimitive } from 'cmdk-sv'
   import MagnifyingGlass from 'svelte-radix/MagnifyingGlass.svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = CommandPrimitive.InputProps

src/lib/components/ui/command/command-item.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Command as CommandPrimitive } from 'cmdk-sv'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = CommandPrimitive.ItemProps

src/lib/components/ui/command/command-list.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Command as CommandPrimitive } from 'cmdk-sv'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = CommandPrimitive.ListProps

src/lib/components/ui/command/command-separator.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Command as CommandPrimitive } from 'cmdk-sv'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = CommandPrimitive.SeparatorProps

src/lib/components/ui/command/command-shortcut.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import type { HTMLAttributes } from 'svelte/elements'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLAttributes<HTMLSpanElement>

src/lib/components/ui/command/command.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Command as CommandPrimitive } from 'cmdk-sv'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = CommandPrimitive.CommandProps

src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,35 +1,36 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import Check from "svelte-radix/Check.svelte";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
+  import Check from 'svelte-radix/Check.svelte'
 
-	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
-	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let checked: $$Props["checked"] = undefined;
+  type $$Props = ContextMenuPrimitive.CheckboxItemProps
+  type $$Events = ContextMenuPrimitive.CheckboxItemEvents
+
+  let className: $$Props['class']
+  export { className as class }
+  export let checked: $$Props['checked']
 </script>
 
 <ContextMenuPrimitive.CheckboxItem
-	bind:checked
-	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+  bind:checked
+  class={cn(
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerdown
+  on:pointerleave
+  on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.CheckboxIndicator>
-			<Check class="h-4 w-4" />
-		</ContextMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
+  <span class='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+    <ContextMenuPrimitive.CheckboxIndicator>
+      <Check class='h-4 w-4' />
+    </ContextMenuPrimitive.CheckboxIndicator>
+  </span>
+  <slot />
 </ContextMenuPrimitive.CheckboxItem>

src/lib/components/ui/context-menu/context-menu-content.svelte

@@ -1,24 +1,25 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
 
-	type $$Props = ContextMenuPrimitive.ContentProps;
+  import { cn, flyAndScale } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export { className as class };
+  type $$Props = ContextMenuPrimitive.ContentProps
+
+  let className: $$Props['class']
+  export let transition: $$Props['transition'] = flyAndScale
+  export let transitionConfig: $$Props['transitionConfig']
+  export { className as class }
 </script>
 
 <ContextMenuPrimitive.Content
-	{transition}
-	{transitionConfig}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
+  {transition}
+  {transitionConfig}
+  class={cn(
+    'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none',
+    className
+  )}
+  {...$$restProps}
+  on:keydown
 >
-	<slot />
+  <slot />
 </ContextMenuPrimitive.Content>

src/lib/components/ui/context-menu/context-menu-item.svelte

@@ -1,31 +1,32 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
 
-	type $$Props = ContextMenuPrimitive.ItemProps & {
-		inset?: boolean;
-	};
-	type $$Events = ContextMenuPrimitive.ItemEvents;
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+  type $$Props = ContextMenuPrimitive.ItemProps & {
+    inset?: boolean
+  }
+  type $$Events = ContextMenuPrimitive.ItemEvents
+
+  let className: $$Props['class']
+  export let inset: $$Props['inset']
+  export { className as class }
 </script>
 
 <ContextMenuPrimitive.Item
-	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+  class={cn(
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    inset && 'pl-8',
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerdown
+  on:pointerleave
+  on:pointermove
 >
-	<slot />
+  <slot />
 </ContextMenuPrimitive.Item>

src/lib/components/ui/context-menu/context-menu-label.svelte

@@ -1,19 +1,20 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
 
-	type $$Props = ContextMenuPrimitive.LabelProps & {
-		inset?: boolean;
-	};
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+  type $$Props = ContextMenuPrimitive.LabelProps & {
+    inset?: boolean
+  }
+
+  let className: $$Props['class']
+  export let inset: $$Props['inset']
+  export { className as class }
 </script>
 
 <ContextMenuPrimitive.Label
-	class={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...$$restProps}
+  class={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </ContextMenuPrimitive.Label>

src/lib/components/ui/context-menu/context-menu-radio-group.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
 
-	type $$Props = ContextMenuPrimitive.RadioGroupProps;
+  type $$Props = ContextMenuPrimitive.RadioGroupProps
 
-	export let value: $$Props["value"] = undefined;
+  export let value: $$Props['value']
 </script>
 
 <ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
+  <slot />
 </ContextMenuPrimitive.RadioGroup>

src/lib/components/ui/context-menu/context-menu-radio-item.svelte

@@ -1,35 +1,36 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import DotFilled from "svelte-radix/DotFilled.svelte";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
+  import DotFilled from 'svelte-radix/DotFilled.svelte'
 
-	type $$Props = ContextMenuPrimitive.RadioItemProps;
-	type $$Events = ContextMenuPrimitive.RadioItemEvents;
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+  type $$Props = ContextMenuPrimitive.RadioItemProps
+  type $$Events = ContextMenuPrimitive.RadioItemEvents
+
+  let className: $$Props['class']
+  export let value: $$Props['value']
+  export { className as class }
 </script>
 
 <ContextMenuPrimitive.RadioItem
-	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
-	{value}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+  class={cn(
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    className
+  )}
+  {value}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerdown
+  on:pointerleave
+  on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.RadioIndicator>
-			<DotFilled class="h-4 w-4 fill-current" />
-		</ContextMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
+  <span class='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+    <ContextMenuPrimitive.RadioIndicator>
+      <DotFilled class='h-4 w-4 fill-current' />
+    </ContextMenuPrimitive.RadioIndicator>
+  </span>
+  <slot />
 </ContextMenuPrimitive.RadioItem>

src/lib/components/ui/context-menu/context-menu-separator.svelte

@@ -1,14 +1,15 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
 
-	type $$Props = ContextMenuPrimitive.SeparatorProps;
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  type $$Props = ContextMenuPrimitive.SeparatorProps
+
+  let className: $$Props['class']
+  export { className as class }
 </script>
 
 <ContextMenuPrimitive.Separator
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
-	{...$$restProps}
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...$$restProps}
 />

src/lib/components/ui/context-menu/context-menu-shortcut.svelte

@@ -1,16 +1,17 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import type { HTMLAttributes } from 'svelte/elements'
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  type $$Props = HTMLAttributes<HTMLSpanElement>
+
+  let className: $$Props['class']
+  export { className as class }
 </script>
 
 <span
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-	{...$$restProps}
+  class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </span>

src/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -1,26 +1,27 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
 
-	type $$Props = ContextMenuPrimitive.SubContentProps;
+  import { cn, flyAndScale } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export { className as class };
+  type $$Props = ContextMenuPrimitive.SubContentProps
+
+  let className: $$Props['class']
+  export let transition: $$Props['transition'] = flyAndScale
+  export let transitionConfig: $$Props['transitionConfig']
+  export { className as class }
 </script>
 
 <ContextMenuPrimitive.SubContent
-	{transition}
-	{transitionConfig}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
-	on:focusout
-	on:pointermove
+  {transition}
+  {transitionConfig}
+  class={cn(
+    'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none',
+    className
+  )}
+  {...$$restProps}
+  on:keydown
+  on:focusout
+  on:pointermove
 >
-	<slot />
+  <slot />
 </ContextMenuPrimitive.SubContent>

src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,32 +1,33 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import ChevronRight from "svelte-radix/ChevronRight.svelte";
-	import { cn } from "$lib/utils.js";
+<script lang='ts'>
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
+  import ChevronRight from 'svelte-radix/ChevronRight.svelte'
 
-	type $$Props = ContextMenuPrimitive.SubTriggerProps & {
-		inset?: boolean;
-	};
-	type $$Events = ContextMenuPrimitive.SubTriggerEvents;
+  import { cn } from '$lib/utils.js'
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+  type $$Props = ContextMenuPrimitive.SubTriggerProps & {
+    inset?: boolean
+  }
+  type $$Events = ContextMenuPrimitive.SubTriggerEvents
+
+  let className: $$Props['class']
+  export let inset: $$Props['inset']
+  export { className as class }
 </script>
 
 <ContextMenuPrimitive.SubTrigger
-	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
+  class={cn(
+    'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+    inset && 'pl-8',
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerleave
+  on:pointermove
 >
-	<slot />
-	<ChevronRight class="ml-auto h-4 w-4" />
+  <slot />
+  <ChevronRight class='ml-auto h-4 w-4' />
 </ContextMenuPrimitive.SubTrigger>

src/lib/components/ui/context-menu/index.ts

@@ -1,49 +1,49 @@
-import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { ContextMenu as ContextMenuPrimitive } from 'bits-ui'
 
-import Item from "./context-menu-item.svelte";
-import Label from "./context-menu-label.svelte";
-import Content from "./context-menu-content.svelte";
-import Shortcut from "./context-menu-shortcut.svelte";
-import RadioItem from "./context-menu-radio-item.svelte";
-import Separator from "./context-menu-separator.svelte";
-import RadioGroup from "./context-menu-radio-group.svelte";
-import SubContent from "./context-menu-sub-content.svelte";
-import SubTrigger from "./context-menu-sub-trigger.svelte";
-import CheckboxItem from "./context-menu-checkbox-item.svelte";
+import Item from './context-menu-item.svelte'
+import Label from './context-menu-label.svelte'
+import Content from './context-menu-content.svelte'
+import Shortcut from './context-menu-shortcut.svelte'
+import RadioItem from './context-menu-radio-item.svelte'
+import Separator from './context-menu-separator.svelte'
+import RadioGroup from './context-menu-radio-group.svelte'
+import SubContent from './context-menu-sub-content.svelte'
+import SubTrigger from './context-menu-sub-trigger.svelte'
+import CheckboxItem from './context-menu-checkbox-item.svelte'
 
-const Sub = ContextMenuPrimitive.Sub;
-const Root = ContextMenuPrimitive.Root;
-const Trigger = ContextMenuPrimitive.Trigger;
-const Group = ContextMenuPrimitive.Group;
+const Sub = ContextMenuPrimitive.Sub
+const Root = ContextMenuPrimitive.Root
+const Trigger = ContextMenuPrimitive.Trigger
+const Group = ContextMenuPrimitive.Group
 
 export {
-	Sub,
-	Root,
-	Item,
-	Label,
-	Group,
-	Trigger,
-	Content,
-	Shortcut,
-	Separator,
-	RadioItem,
-	SubContent,
-	SubTrigger,
-	RadioGroup,
-	CheckboxItem,
-	//
-	Root as ContextMenu,
-	Sub as ContextMenuSub,
-	Item as ContextMenuItem,
-	Label as ContextMenuLabel,
-	Group as ContextMenuGroup,
-	Content as ContextMenuContent,
-	Trigger as ContextMenuTrigger,
-	Shortcut as ContextMenuShortcut,
-	RadioItem as ContextMenuRadioItem,
-	Separator as ContextMenuSeparator,
-	RadioGroup as ContextMenuRadioGroup,
-	SubContent as ContextMenuSubContent,
-	SubTrigger as ContextMenuSubTrigger,
-	CheckboxItem as ContextMenuCheckboxItem,
-};
+  Sub,
+  Root,
+  Item,
+  Label,
+  Group,
+  Trigger,
+  Content,
+  Shortcut,
+  Separator,
+  RadioItem,
+  SubContent,
+  SubTrigger,
+  RadioGroup,
+  CheckboxItem,
+  //
+  Root as ContextMenu,
+  Sub as ContextMenuSub,
+  Item as ContextMenuItem,
+  Label as ContextMenuLabel,
+  Group as ContextMenuGroup,
+  Content as ContextMenuContent,
+  Trigger as ContextMenuTrigger,
+  Shortcut as ContextMenuShortcut,
+  RadioItem as ContextMenuRadioItem,
+  Separator as ContextMenuSeparator,
+  RadioGroup as ContextMenuRadioGroup,
+  SubContent as ContextMenuSubContent,
+  SubTrigger as ContextMenuSubTrigger,
+  CheckboxItem as ContextMenuCheckboxItem
+}

src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,7 +1,9 @@
 <script lang='ts'>
   import { Dialog as DialogPrimitive } from 'bits-ui'
   import Cross2 from 'svelte-radix/Cross2.svelte'
+
   import * as Dialog from './index.js'
+
   import { cn, flyAndScale } from '$lib/utils.js'
 
   type $$Props = DialogPrimitive.ContentProps

src/lib/components/ui/dialog/dialog-description.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Dialog as DialogPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = DialogPrimitive.DescriptionProps

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import type { HTMLAttributes } from 'svelte/elements'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLAttributes<HTMLDivElement>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import type { HTMLAttributes } from 'svelte/elements'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLAttributes<HTMLDivElement>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
   import { Dialog as DialogPrimitive } from 'bits-ui'
   import { fade } from 'svelte/transition'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = DialogPrimitive.OverlayProps

src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Dialog as DialogPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = DialogPrimitive.TitleProps

src/lib/components/ui/drawer/drawer-content.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
   import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
   import DrawerOverlay from './drawer-overlay.svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = DrawerPrimitive.ContentProps

src/lib/components/ui/drawer/drawer-description.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = DrawerPrimitive.DescriptionProps

src/lib/components/ui/drawer/drawer-footer.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import type { HTMLAttributes } from 'svelte/elements'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLAttributes<HTMLDivElement> & {

src/lib/components/ui/drawer/drawer-header.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import type { HTMLAttributes } from 'svelte/elements'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLAttributes<HTMLDivElement> & {

src/lib/components/ui/drawer/drawer-overlay.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = DrawerPrimitive.OverlayProps

src/lib/components/ui/drawer/drawer-title.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = DrawerPrimitive.TitleProps

src/lib/components/ui/extensions/ExtensionSettings.svelte

@@ -1,8 +1,10 @@
 <script lang='ts'>
-  import { Button } from '$lib/components/ui/button'
   import { Settings } from 'lucide-svelte'
-  import * as Dialog from '$lib/components/ui/dialog'
+
   import type { ExtensionConfig } from 'hayase-extensions'
+
+  import { Button } from '$lib/components/ui/button'
+  import * as Dialog from '$lib/components/ui/dialog'
   import { storage, options as exopts } from '$lib/modules/extensions'
   import { Input } from '$lib/components/ui/input'
   import { Label } from '$lib/components/ui/label'

src/lib/components/ui/extensions/extensions.svelte

@@ -1,13 +1,16 @@
 <script lang='ts'>
+  import { Github, Globe, Plus } from 'lucide-svelte'
+  import { MagnifyingGlass } from 'svelte-radix'
+  import { toast } from 'svelte-sonner'
+
+  import { Button, iconSizes } from '../button'
+
+  import ExtensionSettings from './ExtensionSettings.svelte'
+
   import * as Tabs from '$lib/components/ui/tabs'
   import { Input } from '$lib/components/ui/input'
   import { saved, storage } from '$lib/modules/extensions'
-  import ExtensionSettings from './ExtensionSettings.svelte'
   import * as Tooltip from '$lib/components/ui/tooltip'
-  import { Github, Globe, Plus } from 'lucide-svelte'
-  import { Button, iconSizes } from '../button'
-  import { MagnifyingGlass } from 'svelte-radix'
-  import { toast } from 'svelte-sonner'
 
   const typeMap = {
     nzb: 'NZB',

src/lib/components/ui/img/banner.svelte

@@ -1,8 +1,10 @@
 <script lang='ts'>
-  import { banner, type Media } from '$lib/modules/anilist'
-  import type { HTMLAttributes } from 'svelte/elements'
   import { Load } from '.'
 
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import { banner, type Media } from '$lib/modules/anilist'
+
   export let media: Media
 
   type $$Props = HTMLAttributes<HTMLImageElement> & { media: Media }

src/lib/components/ui/img/load.svelte

@@ -1,7 +1,8 @@
 <script lang='ts'>
-  import { cn } from '$lib/utils'
   import type { HTMLImgAttributes } from 'svelte/elements'
 
+  import { cn } from '$lib/utils'
+
   type $$Props = HTMLImgAttributes & { color?: string | null | undefined }
 
   export let src: $$Props['src'] = ''

src/lib/components/ui/input/input.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
   import type { HTMLInputAttributes } from 'svelte/elements'
   import type { InputEvents } from './index.js'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLInputAttributes

src/lib/components/ui/irc/irc.svelte

@@ -1,9 +1,11 @@
 <script lang='ts' context='module'>
+  import { writable, type Writable } from 'simple-store-svelte'
+  import { SendHorizontal } from 'lucide-svelte'
+
+  import { Messages, UserList } from '../chat'
+
   import MessageClient from '$lib/modules/irc'
   import { client } from '$lib/modules/anilist'
-  import { writable, type Writable } from 'simple-store-svelte'
-  import { Messages, UserList } from '../chat'
-  import { SendHorizontal } from 'lucide-svelte'
   import { Textarea } from '$lib/components/ui/textarea'
 
   const irc: Writable<Promise<MessageClient> | null> = writable(null)

src/lib/components/ui/label/index.ts

@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from './label.svelte'
 
 export {
-	Root,
-	//
-	Root as Label,
-};
+  Root,
+  //
+  Root as Label
+}

src/lib/components/ui/label/label.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Label as LabelPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = LabelPrimitive.Props

src/lib/components/ui/menubar/menubar.svelte

@@ -1,7 +1,8 @@
 <script lang='ts'>
+  import { persisted } from 'svelte-persisted-store'
+
   import native from '$lib/modules/native'
   import { click } from '$lib/modules/navigate'
-  import { persisted } from 'svelte-persisted-store'
 
   const debug = persisted('debug', '')
 </script>

src/lib/components/ui/player/options.svelte

@@ -1,14 +1,17 @@
 <script lang='ts'>
+  import { EllipsisVertical } from 'lucide-svelte'
+  import { tick } from 'svelte'
+  import Keybinds from 'svelte-keybinds'
+
+  import { normalizeTracks, type Chapter } from './util'
+
+  import type { Writable } from 'simple-store-svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
   import * as Dialog from '$lib/components/ui/dialog'
   import * as Tree from '$lib/components/ui/tree'
   import { Button } from '$lib/components/ui/button'
-  import { EllipsisVertical } from 'lucide-svelte'
-  import { normalizeTracks, type Chapter } from './util'
-  import type { Writable } from 'simple-store-svelte'
-  import { tick } from 'svelte'
-  import type { HTMLAttributes } from 'svelte/elements'
   import { cn, toTS } from '$lib/utils'
-  import Keybinds from 'svelte-keybinds'
 
   export let wrapper: HTMLDivElement
 

src/lib/components/ui/player/player.svelte

@@ -1,4 +1,20 @@
 <script lang='ts'>
+  import { Cast, FastForward, Maximize, Minimize, Pause, Rewind, SkipBack, SkipForward, Captions, Contrast, List, PictureInPicture2, Proportions, RefreshCcw, RotateCcw, RotateCw, ScreenShare, Volume1, Volume2, VolumeX } from 'lucide-svelte'
+  import { writable, type Writable } from 'simple-store-svelte'
+  import { persisted } from 'svelte-persisted-store'
+  import { toast } from 'svelte-sonner'
+  import { fade } from 'svelte/transition'
+  import { onMount } from 'svelte'
+  import { loadWithDefaults } from 'svelte-keybinds'
+
+  import Seekbar from './seekbar.svelte'
+  import { autoPiP, getChapterTitle, sanitizeChapters, type Chapter, type MediaInfo } from './util'
+  import Thumbnailer from './thumbnailer'
+  import Options from './options.svelte'
+  import Volume from './volume.svelte'
+
+  import type { SvelteMediaTimeRange } from 'svelte/elements'
+
   import PictureInPictureExit from '$lib/components/icons/PictureInPictureExit.svelte'
   import * as Sheet from '$lib/components/ui/sheet'
   import PictureInPicture from '$lib/components/icons/PictureInPicture.svelte'
@@ -7,26 +23,15 @@
   import { Button } from '$lib/components/ui/button'
   import { settings } from '$lib/modules/settings'
   import { bindPiP, toTS } from '$lib/utils'
-  import { Cast, FastForward, Maximize, Minimize, Pause, Rewind, SkipBack, SkipForward, Captions, Contrast, List, PictureInPicture2, Proportions, RefreshCcw, RotateCcw, RotateCw, ScreenShare, Volume1, Volume2, VolumeX } from 'lucide-svelte'
-  import { writable, type Writable } from 'simple-store-svelte'
-  import { persisted } from 'svelte-persisted-store'
-  import { toast } from 'svelte-sonner'
-  import Seekbar from './seekbar.svelte'
-  import type { SvelteMediaTimeRange } from 'svelte/elements'
-  import { fade } from 'svelte/transition'
-  import { autoPiP, getChapterTitle, sanitizeChapters, type Chapter, type MediaInfo } from './util'
-  import Thumbnailer from './thumbnailer'
-  import { onMount } from 'svelte'
   import native from '$lib/modules/native'
   import { click } from '$lib/modules/navigate'
   import { goto } from '$app/navigation'
-  import Options from './options.svelte'
   import EpisodesList from '$lib/components/EpisodesList.svelte'
   import { episodes } from '$lib/modules/anizip'
-  import Volume from './volume.svelte'
-  import { loadWithDefaults } from 'svelte-keybinds'
 
   export let mediaInfo: MediaInfo
+  export let prev: null | (() => void)
+  export let next: null | (() => void)
   // bindings
   // values
   let videoHeight = 9
@@ -107,12 +112,6 @@
       }
     }
   }
-  function prev () {
-  // TODO
-  }
-  function next () {
-  // TODO
-  }
   function seek (time: number) {
     video.currentTime = currentTime = currentTime + time
     playAnimation(time > 0 ? 'seekforw' : 'seekback')
@@ -203,7 +202,7 @@
         currentTime = currentTime + 85
       } else {
         const endtime = current.end
-        if ((safeduration - endtime | 0) === 0) return next()
+        if ((safeduration - endtime | 0) === 0) return next?.()
         currentTime = endtime
         currentSkippable = null
       }
@@ -217,7 +216,16 @@
     video.currentTime = currentTime
   }
 
-  let stats: any | null = null
+  let stats: {
+    fps?: string
+    presented?: number
+    dropped?: number
+    processing?: string
+    viewport?: string
+    resolution?: string
+    buffer?: string
+    speed?: number
+  } | null = null
   let requestCallback: number | null = null
   function toggleStats () {
     if (requestCallback) {
@@ -313,14 +321,14 @@
       desc: 'Play/Pause'
     },
     KeyN: {
-      fn: () => next(),
+      fn: () => next?.(),
       id: 'skip_next',
       icon: SkipForward,
       type: 'icon',
       desc: 'Next Episode'
     },
     KeyB: {
-      fn: () => prev(),
+      fn: () => prev?.(),
       id: 'skip_previous',
       icon: SkipBack,
       type: 'icon',
@@ -471,9 +479,22 @@
         <img {src} alt='thumbnail' class='w-full h-full bg-black absolute top-0 right-0' loading='lazy' decoding='async' />
       {/await}
     {/if}
+    {#if stats}
+      <div class='absolute top-10 left-10 backdrop-blur-lg border-white/15 border bg-black/20 pointer-events-auto select:opacity-100 cursor-default px-3 py-2 rounded'>
+        <button class='absolute right-3 top-1' type='button' use:click={toggleStats}>×</button>
+        FPS: {stats.fps}<br />
+        Presented frames: {stats.presented}<br />
+        Dropped frames: {stats.dropped}<br />
+        Frame time: {stats.processing}<br />
+        Viewport: {stats.viewport}<br />
+        Resolution: {stats.resolution}<br />
+        Buffer health: {stats.buffer}<br />
+        Playback speed: x{stats.speed?.toFixed(1)}<br />
+      </div>
+    {/if}
     <Options {wrapper} bind:openSubs {video} {seekTo} {selectAudio} {selectVideo} {fullscreen} {chapters} bind:playbackRate class='mobile:inline-flex hidden p-3 w-12 h-12 absolute top-10 right-10 backdrop-blur-lg border-white/15 border bg-black/20 pointer-events-auto select:opacity-100 cursor-default {immersed && 'opacity-0'}' />
     <div class='mobile:flex hidden gap-4 absolute items-center select:opacity-100 cursor-default' class:opacity-0={immersed}>
-      <Button class='p-3 w-16 h-16 pointer-events-auto rounded-[50%] backdrop-blur-lg border-white/15 border bg-black/20' variant='ghost'>
+      <Button class='p-3 w-16 h-16 pointer-events-auto rounded-[50%] backdrop-blur-lg border-white/15 border bg-black/20' variant='ghost' disabled={!prev}>
         <SkipBack size='24px' fill='currentColor' strokeWidth='1' />
       </Button>
       <Button class='p-3 w-24 h-24 pointer-events-auto rounded-[50%] backdrop-blur-lg border-white/15 border bg-black/20' variant='ghost' on:click={playPause}>
@@ -483,7 +504,7 @@
           <Pause size='42px' fill='currentColor' strokeWidth='1' />
         {/if}
       </Button>
-      <Button class='p-3 w-16 h-16 pointer-events-auto rounded-[50%] backdrop-blur-lg border-white/15 border bg-black/20' variant='ghost'>
+      <Button class='p-3 w-16 h-16 pointer-events-auto rounded-[50%] backdrop-blur-lg border-white/15 border bg-black/20' variant='ghost' disabled={!next}>
         <SkipForward size='24px' fill='currentColor' strokeWidth='1' />
       </Button>
     </div>
@@ -539,12 +560,16 @@
             <Pause size='24px' fill='currentColor' strokeWidth='1' />
           {/if}
         </Button>
-        <Button class='p-3 w-12 h-12' variant='ghost' on:click={prev}>
-          <SkipBack size='24px' fill='currentColor' strokeWidth='1' />
-        </Button>
-        <Button class='p-3 w-12 h-12' variant='ghost' on:click={next}>
-          <SkipForward size='24px' fill='currentColor' strokeWidth='1' />
-        </Button>
+        {#if prev}
+          <Button class='p-3 w-12 h-12' variant='ghost' on:click={prev}>
+            <SkipBack size='24px' fill='currentColor' strokeWidth='1' />
+          </Button>
+        {/if}
+        {#if next}
+          <Button class='p-3 w-12 h-12' variant='ghost' on:click={next}>
+            <SkipForward size='24px' fill='currentColor' strokeWidth='1' />
+          </Button>
+        {/if}
         <Volume bind:volume={$volume} bind:muted />
       </div>
       <div class='flex gap-2'>

src/lib/components/ui/player/seekbar.svelte

@@ -27,12 +27,15 @@
 </script>
 
 <script lang='ts'>
-  import { toTS } from '$lib/utils'
 
   import { createEventDispatcher } from 'svelte'
+
   import { getChapterTitle } from './util'
+
   import type Thumbnailer from './thumbnailer'
 
+  import { toTS } from '$lib/utils'
+
   const dispatch = createEventDispatcher<{
     seeking: null
     seeked: null

src/lib/components/ui/player/util.ts

@@ -1,8 +1,10 @@
-import type { Media } from '$lib/modules/anilist'
-import { settings } from '$lib/modules/settings'
 import { get } from 'svelte/store'
+
+import type { Media } from '$lib/modules/anilist'
 import type { Track } from '../../../../app'
 
+import { settings } from '$lib/modules/settings'
+
 export interface Chapter {
   start: number
   end: number

src/lib/components/ui/player/volume.svelte

@@ -1,7 +1,8 @@
 <script lang='ts'>
-  import { Button } from '$lib/components/ui/button'
   import { Volume, Volume1, Volume2, VolumeOff, VolumeX } from 'lucide-svelte'
 
+  import { Button } from '$lib/components/ui/button'
+
   function clamp (value: number) {
     return Math.min(Math.max(value, 0), 1)
   }

src/lib/components/ui/popover/index.ts

@@ -1,4 +1,5 @@
 import { Popover as PopoverPrimitive } from 'bits-ui'
+
 import Content from './popover-content.svelte'
 const Root = PopoverPrimitive.Root
 const Trigger = PopoverPrimitive.Trigger

src/lib/components/ui/popover/popover-content.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Popover as PopoverPrimitive } from 'bits-ui'
+
   import { cn, flyAndScale } from '$lib/utils.js'
 
   type $$Props = PopoverPrimitive.ContentProps

src/lib/components/ui/select/select-content.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
   import { Select as SelectPrimitive } from 'bits-ui'
   import { scale } from 'svelte/transition'
+
   import { cn, flyAndScale } from '$lib/utils.js'
 
   type $$Props = SelectPrimitive.ContentProps

src/lib/components/ui/select/select-item.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
   import { Select as SelectPrimitive } from 'bits-ui'
   import Check from 'svelte-radix/Check.svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SelectPrimitive.ItemProps

src/lib/components/ui/select/select-label.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Select as SelectPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SelectPrimitive.LabelProps

src/lib/components/ui/select/select-separator.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Select as SelectPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SelectPrimitive.SeparatorProps

src/lib/components/ui/select/select-trigger.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
   import { Select as SelectPrimitive } from 'bits-ui'
   import CaretSort from 'svelte-radix/CaretSort.svelte'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SelectPrimitive.TriggerProps

src/lib/components/ui/separator/separator.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Separator as SeparatorPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SeparatorPrimitive.Props

src/lib/components/ui/sheet/sheet-content.svelte

@@ -2,6 +2,7 @@
   import { Dialog as SheetPrimitive } from 'bits-ui'
   import Cross2 from 'svelte-radix/Cross2.svelte'
   import { fly } from 'svelte/transition'
+
   import {
     SheetOverlay,
     SheetPortal,
@@ -9,6 +10,7 @@
     sheetTransitions,
     sheetVariants
   } from './index.js'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SheetPrimitive.ContentProps & {

src/lib/components/ui/sheet/sheet-description.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Dialog as SheetPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SheetPrimitive.DescriptionProps

src/lib/components/ui/sheet/sheet-footer.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import type { HTMLAttributes } from 'svelte/elements'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLAttributes<HTMLDivElement>

src/lib/components/ui/sheet/sheet-header.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import type { HTMLAttributes } from 'svelte/elements'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = HTMLAttributes<HTMLDivElement>

src/lib/components/ui/sheet/sheet-overlay.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
   import { Dialog as SheetPrimitive } from 'bits-ui'
   import { fade } from 'svelte/transition'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SheetPrimitive.OverlayProps

src/lib/components/ui/sheet/sheet-portal.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Dialog as SheetPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SheetPrimitive.PortalProps

src/lib/components/ui/sheet/sheet-title.svelte

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import { Dialog as SheetPrimitive } from 'bits-ui'
+
   import { cn } from '$lib/utils.js'
 
   type $$Props = SheetPrimitive.TitleProps

src/lib/components/ui/sidebar/sidebar.svelte

@@ -1,8 +1,10 @@
 <script lang='ts'>
-  import { isMobile } from '$lib/utils'
   import { Menu, X } from 'lucide-svelte'
+
   import { Button } from '../button'
 
+  import { isMobile } from '$lib/utils'
+
   let open = false // 152 x 140
 </script>
 

src/lib/components/ui/sidebar/sidebarlist.svelte

@@ -1,10 +1,13 @@
 <script lang='ts'>
   import { Home, Search, Calendar, Users, MessagesSquare, Heart, Settings, LogIn } from 'lucide-svelte'
-  import Hub from '$lib/components/icons/Hub.svelte'
-  import SidebarButton from './SidebarButton.svelte'
+
   import { BannerImage } from '../banner'
-  import native from '$lib/modules/native'
   import { Button } from '../button'
+
+  import SidebarButton from './SidebarButton.svelte'
+
+  import Hub from '$lib/components/icons/Hub.svelte'
+  import native from '$lib/modules/native'
   import client from '$lib/modules/auth/client'
   import * as Avatar from '$lib/components/ui/avatar'
 

src/lib/components/ui/switch/index.ts

@@ -1,7 +1,7 @@
-import Root from "./switch.svelte";
+import Root from './switch.svelte'
 
 export {
-	Root,
-	//
-	Root as Switch,
-};
+  Root,
+  //
+  Root as Switch
+}