From 9fdd78e73704feb0431b4b42e580321dca1285a8 Mon Sep 17 00:00:00 2001
From: Bintang Murtifandy <21844@student.stembayo.sch.id>
Date: Tue, 26 May 2026 12:11:14 +0700
Subject: [PATCH] Initial commit

---
 .env                              |    2 +
 .env.example                      |    2 +
 .gitignore                        |   15 +
 components/theme-provider.tsx     |   11 +
 components/ui/accordion.tsx       |   66 ++
 components/ui/alert-dialog.tsx    |  157 +++
 components/ui/alert.tsx           |   66 ++
 components/ui/aspect-ratio.tsx    |   11 +
 components/ui/avatar.tsx          |   53 +
 components/ui/badge.tsx           |   46 +
 components/ui/breadcrumb.tsx      |  109 ++
 components/ui/button-group.tsx    |   83 ++
 components/ui/button.tsx          |   60 ++
 components/ui/calendar.tsx        |  213 ++++
 components/ui/card.tsx            |   92 ++
 components/ui/carousel.tsx        |  241 +++++
 components/ui/chart.tsx           |  351 +++++++
 components/ui/checkbox.tsx        |   32 +
 components/ui/collapsible.tsx     |   33 +
 components/ui/command.tsx         |  184 ++++
 components/ui/context-menu.tsx    |  252 +++++
 components/ui/dialog.tsx          |  143 +++
 components/ui/drawer.tsx          |  135 +++
 components/ui/dropdown-menu.tsx   |  257 +++++
 components/ui/empty.tsx           |  104 ++
 components/ui/field.tsx           |  244 +++++
 components/ui/form.tsx            |  167 +++
 components/ui/hover-card.tsx      |   44 +
 components/ui/input-group.tsx     |  169 +++
 components/ui/input-otp.tsx       |   77 ++
 components/ui/input.tsx           |   21 +
 components/ui/item.tsx            |  193 ++++
 components/ui/kbd.tsx             |   28 +
 components/ui/label.tsx           |   24 +
 components/ui/menubar.tsx         |  276 +++++
 components/ui/navigation-menu.tsx |  166 +++
 components/ui/pagination.tsx      |  127 +++
 components/ui/popover.tsx         |   48 +
 components/ui/progress.tsx        |   31 +
 components/ui/radio-group.tsx     |   45 +
 components/ui/resizable.tsx       |   56 +
 components/ui/scroll-area.tsx     |   58 +
 components/ui/select.tsx          |  185 ++++
 components/ui/separator.tsx       |   28 +
 components/ui/sheet.tsx           |  139 +++
 components/ui/sidebar.tsx         |  726 +++++++++++++
 components/ui/skeleton.tsx        |   13 +
 components/ui/slider.tsx          |   59 ++
 components/ui/sonner.tsx          |   25 +
 components/ui/spinner.tsx         |   16 +
 components/ui/switch.tsx          |   29 +
 components/ui/table.tsx           |  116 ++
 components/ui/tabs.tsx            |   66 ++
 components/ui/textarea.tsx        |   18 +
 components/ui/toast.tsx           |  129 +++
 components/ui/toaster.tsx         |   35 +
 components/ui/toggle-group.tsx    |   73 ++
 components/ui/toggle.tsx          |   47 +
 components/ui/tooltip.tsx         |   61 ++
 components/ui/use-mobile.tsx      |   19 +
 components/ui/use-toast.ts        |  191 ++++
 dist/apple-icon.png               |  Bin 0 -> 2626 bytes
 dist/assets/index-BO7gh51n.js     |    9 +
 dist/assets/index-mUm8ch4i.css    |    1 +
 dist/icon-dark-32x32.png          |  Bin 0 -> 585 bytes
 dist/icon-light-32x32.png         |  Bin 0 -> 566 bytes
 dist/icon.svg                     |   26 +
 dist/index.html                   |   15 +
 dist/placeholder-logo.png         |  Bin 0 -> 568 bytes
 dist/placeholder-logo.svg         |    1 +
 dist/placeholder-user.jpg         |  Bin 0 -> 1635 bytes
 dist/placeholder.jpg              |  Bin 0 -> 1064 bytes
 dist/placeholder.svg              |    1 +
 hooks/use-mobile.ts               |   19 +
 hooks/use-toast.ts                |  191 ++++
 index.html                        |   14 +
 lib/utils.ts                      |    6 +
 next-env.d.ts                     |    6 +
 package.json                      |   25 +
 pnpm-lock.yaml                    | 1634 +++++++++++++++++++++++++++++
 postcss.config.js                 |    6 +
 public/apple-icon.png             |  Bin 0 -> 2626 bytes
 public/icon-dark-32x32.png        |  Bin 0 -> 585 bytes
 public/icon-light-32x32.png       |  Bin 0 -> 566 bytes
 public/icon.svg                   |   26 +
 public/placeholder-logo.png       |  Bin 0 -> 568 bytes
 public/placeholder-logo.svg       |    1 +
 public/placeholder-user.jpg       |  Bin 0 -> 1635 bytes
 public/placeholder.jpg            |  Bin 0 -> 1064 bytes
 public/placeholder.svg            |    1 +
 src/App.vue                       |   70 ++
 src/components/AppHeader.vue      |  109 ++
 src/components/MusicPlayer.vue    |   80 ++
 src/components/PlayerBar.vue      |  147 +++
 src/components/SettingsItem.vue   |   62 ++
 src/components/Sidebar.vue        |   94 ++
 src/composables/useAuthGate.js    |   30 +
 src/composables/usePlayer.js      |   39 +
 src/lib/api.js                    |   30 +
 src/lib/audioEngine.js            |   56 +
 src/main.js                       |   10 +
 src/router/index.js               |   46 +
 src/stores/authStore.js           |   75 ++
 src/stores/playerStore.js         |  103 ++
 src/stores/queueStore.js          |   86 ++
 src/stores/uiStore.js             |   21 +
 src/style.css                     |   40 +
 src/views/AdminPage.vue           |  132 +++
 src/views/LandingPage.vue         |   89 ++
 src/views/LibraryPage.vue         |  134 +++
 src/views/LoginPage.vue           |  130 +++
 src/views/PlaylistPage.vue        |  147 +++
 src/views/ProfilePage.vue         |  158 +++
 src/views/RegisterPage.vue        |   83 ++
 styles/globals.css                |  125 +++
 tailwind.config.js                |   23 +
 vite.config.js                    |   11 +
 117 files changed, 10579 insertions(+)
 create mode 100644 .env
 create mode 100644 .env.example
 create mode 100644 .gitignore
 create mode 100644 components/theme-provider.tsx
 create mode 100644 components/ui/accordion.tsx
 create mode 100644 components/ui/alert-dialog.tsx
 create mode 100644 components/ui/alert.tsx
 create mode 100644 components/ui/aspect-ratio.tsx
 create mode 100644 components/ui/avatar.tsx
 create mode 100644 components/ui/badge.tsx
 create mode 100644 components/ui/breadcrumb.tsx
 create mode 100644 components/ui/button-group.tsx
 create mode 100644 components/ui/button.tsx
 create mode 100644 components/ui/calendar.tsx
 create mode 100644 components/ui/card.tsx
 create mode 100644 components/ui/carousel.tsx
 create mode 100644 components/ui/chart.tsx
 create mode 100644 components/ui/checkbox.tsx
 create mode 100644 components/ui/collapsible.tsx
 create mode 100644 components/ui/command.tsx
 create mode 100644 components/ui/context-menu.tsx
 create mode 100644 components/ui/dialog.tsx
 create mode 100644 components/ui/drawer.tsx
 create mode 100644 components/ui/dropdown-menu.tsx
 create mode 100644 components/ui/empty.tsx
 create mode 100644 components/ui/field.tsx
 create mode 100644 components/ui/form.tsx
 create mode 100644 components/ui/hover-card.tsx
 create mode 100644 components/ui/input-group.tsx
 create mode 100644 components/ui/input-otp.tsx
 create mode 100644 components/ui/input.tsx
 create mode 100644 components/ui/item.tsx
 create mode 100644 components/ui/kbd.tsx
 create mode 100644 components/ui/label.tsx
 create mode 100644 components/ui/menubar.tsx
 create mode 100644 components/ui/navigation-menu.tsx
 create mode 100644 components/ui/pagination.tsx
 create mode 100644 components/ui/popover.tsx
 create mode 100644 components/ui/progress.tsx
 create mode 100644 components/ui/radio-group.tsx
 create mode 100644 components/ui/resizable.tsx
 create mode 100644 components/ui/scroll-area.tsx
 create mode 100644 components/ui/select.tsx
 create mode 100644 components/ui/separator.tsx
 create mode 100644 components/ui/sheet.tsx
 create mode 100644 components/ui/sidebar.tsx
 create mode 100644 components/ui/skeleton.tsx
 create mode 100644 components/ui/slider.tsx
 create mode 100644 components/ui/sonner.tsx
 create mode 100644 components/ui/spinner.tsx
 create mode 100644 components/ui/switch.tsx
 create mode 100644 components/ui/table.tsx
 create mode 100644 components/ui/tabs.tsx
 create mode 100644 components/ui/textarea.tsx
 create mode 100644 components/ui/toast.tsx
 create mode 100644 components/ui/toaster.tsx
 create mode 100644 components/ui/toggle-group.tsx
 create mode 100644 components/ui/toggle.tsx
 create mode 100644 components/ui/tooltip.tsx
 create mode 100644 components/ui/use-mobile.tsx
 create mode 100644 components/ui/use-toast.ts
 create mode 100644 dist/apple-icon.png
 create mode 100644 dist/assets/index-BO7gh51n.js
 create mode 100644 dist/assets/index-mUm8ch4i.css
 create mode 100644 dist/icon-dark-32x32.png
 create mode 100644 dist/icon-light-32x32.png
 create mode 100644 dist/icon.svg
 create mode 100644 dist/index.html
 create mode 100644 dist/placeholder-logo.png
 create mode 100644 dist/placeholder-logo.svg
 create mode 100644 dist/placeholder-user.jpg
 create mode 100644 dist/placeholder.jpg
 create mode 100644 dist/placeholder.svg
 create mode 100644 hooks/use-mobile.ts
 create mode 100644 hooks/use-toast.ts
 create mode 100644 index.html
 create mode 100644 lib/utils.ts
 create mode 100644 next-env.d.ts
 create mode 100644 package.json
 create mode 100644 pnpm-lock.yaml
 create mode 100644 postcss.config.js
 create mode 100644 public/apple-icon.png
 create mode 100644 public/icon-dark-32x32.png
 create mode 100644 public/icon-light-32x32.png
 create mode 100644 public/icon.svg
 create mode 100644 public/placeholder-logo.png
 create mode 100644 public/placeholder-logo.svg
 create mode 100644 public/placeholder-user.jpg
 create mode 100644 public/placeholder.jpg
 create mode 100644 public/placeholder.svg
 create mode 100644 src/App.vue
 create mode 100644 src/components/AppHeader.vue
 create mode 100644 src/components/MusicPlayer.vue
 create mode 100644 src/components/PlayerBar.vue
 create mode 100644 src/components/SettingsItem.vue
 create mode 100644 src/components/Sidebar.vue
 create mode 100644 src/composables/useAuthGate.js
 create mode 100644 src/composables/usePlayer.js
 create mode 100644 src/lib/api.js
 create mode 100644 src/lib/audioEngine.js
 create mode 100644 src/main.js
 create mode 100644 src/router/index.js
 create mode 100644 src/stores/authStore.js
 create mode 100644 src/stores/playerStore.js
 create mode 100644 src/stores/queueStore.js
 create mode 100644 src/stores/uiStore.js
 create mode 100644 src/style.css
 create mode 100644 src/views/AdminPage.vue
 create mode 100644 src/views/LandingPage.vue
 create mode 100644 src/views/LibraryPage.vue
 create mode 100644 src/views/LoginPage.vue
 create mode 100644 src/views/PlaylistPage.vue
 create mode 100644 src/views/ProfilePage.vue
 create mode 100644 src/views/RegisterPage.vue
 create mode 100644 styles/globals.css
 create mode 100644 tailwind.config.js
 create mode 100644 vite.config.js

diff --git a/.env b/.env
new file mode 100644
index 0000000..e67e847
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://localhost:3002/api
+VITE_APP_NAME=NOCTUNE
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..0344b5a
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://localhost:3001/api
+VITE_APP_NAME=NOCTUNE
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..97eb8c0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,15 @@
+# v0 sandbox internal files
+__v0_runtime_loader.js
+__v0_devtools.tsx
+__v0_jsx-dev-runtime.ts
+.snowflake/
+.v0-trash/
+.vercel/
+
+# Environment variables
+.env*.local
+
+# Common ignores
+node_modules
+.next/
+.DS_Store
\ No newline at end of file
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..55c2f6e
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..e538a33
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..9704452
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
new file mode 100644
index 0000000..e6751ab
--- /dev/null
+++ b/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..40bb120
--- /dev/null
+++ b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..aa98465
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..fc4126b
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..1750ff2
--- /dev/null
+++ b/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
new file mode 100644
index 0000000..09d4430
--- /dev/null
+++ b/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+        vertical:
+          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..f64632d
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..eaa373e
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'absolute bg-popover inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            )
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..db7dd3c
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
new file mode 100644
index 0000000..d4a768e
--- /dev/null
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext],
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on('reInit', onSelect)
+    api.on('select', onSelect)
+
+    return () => {
+      api?.off('select', onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
new file mode 100644
index 0000000..56225f8
--- /dev/null
+++ b/components/ui/chart.tsx
@@ -0,0 +1,351 @@
+'use client'
+
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />')
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children']
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: 'line' | 'dot' | 'dashed'
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === 'string'
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot'
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center',
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                          {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                              indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          },
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      'flex flex-1 justify-between leading-none',
+                      nestLabel ? 'items-end' : 'items-center',
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className="[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..37d340f
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 0000000..3cbdff6
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 0000000..4833ca8
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
new file mode 100644
index 0000000..9e536f2
--- /dev/null
+++ b/components/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+'use client'
+
+import * as React from 'react'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..243fb19
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
new file mode 100644
index 0000000..307bdce
--- /dev/null
+++ b/components/ui/drawer.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/lib/utils'
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..a2096fa
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/components/ui/empty.tsx b/components/ui/empty.tsx
new file mode 100644
index 0000000..2c57e94
--- /dev/null
+++ b/components/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+function Empty({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        'flex max-w-sm flex-col items-center gap-2 text-center',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function EmptyMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn('text-lg font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
new file mode 100644
index 0000000..f4c2f21
--- /dev/null
+++ b/components/ui/field.tsx
@@ -0,0 +1,244 @@
+'use client'
+
+import { useMemo } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        'flex flex-col gap-6',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        'mb-3 font-medium',
+        'data-[variant=legend]:text-base',
+        'data-[variant=label]:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+        horizontal: [
+          'flex-row items-center',
+          '[&>[data-slot=field-label]]:flex-auto',
+          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+        responsive: [
+          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  },
+)
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors) {
+      return null
+    }
+
+    if (errors.length === 1 && errors[0]?.message) {
+      return errors[0].message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('text-destructive text-sm font-normal', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 0000000..6233f94
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,167 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn('grid gap-2', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? '') : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 0000000..55d6f76
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import { cn } from '@/lib/utils'
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/components/ui/input-group.tsx b/components/ui/input-group.tsx
new file mode 100644
index 0000000..183d297
--- /dev/null
+++ b/components/ui/input-group.tsx
@@ -0,0 +1,169 @@
+'use client'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+        'h-9 has-[>textarea]:h-auto',
+
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+        // Focus state.
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        'inline-start':
+          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+        'inline-end':
+          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
+        'block-start':
+          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+        'block-end':
+          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+)
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  'text-sm shadow-none flex gap-2 items-center',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+)
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
new file mode 100644
index 0000000..3f6c477
--- /dev/null
+++ b/components/ui/input-otp.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { MinusIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..f199a06
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/components/ui/item.tsx b/components/ui/item.tsx
new file mode 100644
index 0000000..efdf58c
--- /dev/null
+++ b/components/ui/item.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn('group/item-group flex flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn('my-0', className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
+      },
+      size: {
+        default: 'p-4 gap-4 ',
+        sm: 'py-3 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/components/ui/kbd.tsx b/components/ui/kbd.tsx
new file mode 100644
index 0000000..9897f35
--- /dev/null
+++ b/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils'
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+        "[&_svg:not([class*='size-'])]:size-3",
+        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..5d66da2
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
new file mode 100644
index 0000000..791360c
--- /dev/null
+++ b/components/ui/menubar.tsx
@@ -0,0 +1,276 @@
+'use client'
+
+import * as React from 'react'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..78936fe
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className="absolute top-full left-0 isolate z-50 flex justify-center"
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
new file mode 100644
index 0000000..ce8f25d
--- /dev/null
+++ b/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>
+
+function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 0000000..b4fc827
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..ab38305
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e9af867
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
new file mode 100644
index 0000000..5c2f91d
--- /dev/null
+++ b/components/ui/resizable.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react'
+import { GripVerticalIcon } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '@/lib/utils'
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..dc98eb0
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..5db0bca
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,185 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..f43aaf5
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..51041fa
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 0000000..ee74343
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+'use client'
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, VariantProps } from 'class-variance-authority'
+import { PanelLeftIcon } from 'lucide-react'
+
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open],
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? 'expanded' : 'collapsed'
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : 'button'
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+  size?: 'sm' | 'md'
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e3beb90
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..4447450
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
new file mode 100644
index 0000000..0626caf
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
new file mode 100644
index 0000000..e51fc6d
--- /dev/null
+++ b/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..7517ab0
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 0000000..fcdd10c
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..ff67104
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { cn } from '@/lib/utils'
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..3809775
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
new file mode 100644
index 0000000..40eedf5
--- /dev/null
+++ b/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import * as React from 'react'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
new file mode 100644
index 0000000..3b91885
--- /dev/null
+++ b/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useToast } from '@/hooks/use-toast'
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast'
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..0ab9971
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
new file mode 100644
index 0000000..ad6b286
--- /dev/null
+++ b/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..877239c
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/components/ui/use-mobile.tsx b/components/ui/use-mobile.tsx
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/components/ui/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/components/ui/use-toast.ts b/components/ui/use-toast.ts
new file mode 100644
index 0000000..8932bc5
--- /dev/null
+++ b/components/ui/use-toast.ts
@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/dist/apple-icon.png b/dist/apple-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9418b406bdb93a28dfc30c2ea61bef97b9d7c22
GIT binary patch
literal 2626
zcmds3`8(A67av!MNqJJEvb0h5uF-O3Z6YCVcEd!Gv2&Xd#xj)%6+*}|q-+m{Fl4Nu
z(QIZWVk}d{Fr%?_2Z=H6_tX6czQ5o1^Ss~Zc|XrN=Q-zf&g(oU?Ye`tyxb8v5C|l1
zbJfxbkc3}%w>0pY4oX7-A^X==I2w?@jsz$PqXc|p*K8~=xx^GNea58PC#Xn&51D#<
zxMOkrmHL2MMG`sN(rMKEnP$@Mv;$N%Tk4VhzD+AyUgK|fkNX#03S3-`OJIhqb^9&j
z(90`v4D>R670)b1GYxxI>A1KRc)0rhv_r2<cB$RJs%QerIu!#tVgDUuSvW0`dbU?m
zAt+Ji*wC(h7Ui=4HHEE;t63*1!zNoR(L6?_bCtsbTN@h#dFAtG{i)9%G(7w*2DDXS
zo2z}w)b#VQQ-+4a@mp&Y6YTbwiaC};FS@{tTpatjdGd0DoyxQXKcAYbQ>1jp+d@t?
zES%GJtMXcbZ+1@3SHY}=3COAs&acDlY!jUqeMygd*%YZ5(Bq^I7973)&6Ri8EEbQF
z*k_UTUXws)H~0*`Fz}le9Fzp?_E)jshSAH2pM_TcD(DdC#YX69L7pVwKpk1;Kaimc
z_UQ<nme9;@OWyghRJ6b<lZ+SdNUGh(W-()Zx?+=;0}yEO)?MeO+crOs>_9jJk0E-&
z!6P;PHLkUg{BI+*MW{LIW{IJe7G*qd5@Dnoqj~-1eJ!unIxU~>_<GxX{jhKBhKS`a
zT_I-J?Z7WxalDR=m8qf&5no=sjhL!=9y?kG=bw=A2{d}%?oWfPibWf3QGF@<j?!OS
zXI^^((Tg7>1~AoD=V(gq1yCrIo~C&ET5qD%KO2XHDbWi<73QQgE8Dv~hU##+jiPfI
zOv<^@*UHDW#)Y!!R|{{h%(>w=G&EFv`a!&F;Bm0_QPw2AD{iAWAhrh@`<aq|#%HIN
zC8Uei7M$6c$CIDEl4?0Br=%b1<m}v~pFo$TRH^kwxRe}LGl{v`6618D#~Z6+97T7|
z11srsJ@`PN?btmSF`^}S#A4LPdu4g5XKMB_&rE2kn8+S_ArB<V>BNdBf+hB;neb_w
zQWzo&^|-p&k;je{jOyKkct$P^kv7LZAkT+QyoYtDN0^Cqo9WpacEX4<(tQcZI;A^6
zmb#I<sk-QSdcpRMKm+V{j3Bw#1Oo-j>o?PB`Dbt!b~f8tFo&o{T-oK6Ce}DvIRKwI
z&w1LJ6golB0_y=F`*pqOie2|DyO+Zx%xPG#POhYT@X0;aZ0^fPgX9NK^YpytMX-?E
z%^k65esR3H1bb!HM&r)|o@7DSaMhn)OGyFD5+ip59vjB4cI-!V#(bQu5u2iJR$qE3
zjU1_QEx~3aGp;Z)+Y&^rBaF7FB~Om^m;FSR(>ze^SOmVunxT`mYR5HT<Gpwb0dT$w
z+3;bfUuyxto`M<D6J8OFwgB?<ulIVpT>8PkESHRFMZvNM7bjY1n6MHy_(p@bX;o?~
z8h{Nj!Tn=;9*nP!UimW5W0txZ2hCA)G3_i*|2)xOWV^h@OeRc6*(|<oogqY>@;GsD
zVg=gFGAl6fd$jJLY#JL`q8+K=k1R_dgpNZ6I5yCXCXRuaVHL{)cwi|&?7?6es=e&o
z-qJJ#e;{4i*nN2{1K~J3udN7~utx2yQgTk?qspIK>qpzZhuIa(>6f*hl=0?Z9hflD
zwY>swB8n88LLE8yacAUF3k&brf(kDVGzLPA4lkOH>Voq@WJle}dmTImj`laS{&z_G
zUBM_rs-^X0RTfpM$$PXgd2cF0tmp1M`4r)mFMek?Cil5JA+7~VBSO8|1<8A_v+HjR
z0uJ#}Yg_Ar%U*$-)ZIo8Sy9|Anp1@>sbxSn^4+67hkd*H0i~nuKyBeWU=rE^43<B8
zt8bS;)%?zkC9g3<&Gg#>Z(B3cgGz@<>LJ=#?I3`K7eqgnR@V$Cl1H_hx7At!sCv(b
zj@@+q&8UMZuvbKD6XIiMDp;tRy3Si*F95XPiKG#L-+1s>f0TA)+J22<(FjqMn7dr<
z_`1%#B`eDrc`o8zKkOleSLf99@>CTJd`9LTcKheoH#nSe^u>Fh3I!Bc%KhTkFYgF5
ziqhQpk}`XDHHquSyAwKM3*dZ(AfSzpMUyh!_@pOFqVA<Sct;dILO_P4q{fpPmLBAD
zPI;Ee$RFVfqM8SoK)H{9YVa`^(As?M2`~Vx$*n>%=SsN2^u|^r>$tiPWPxp|L-+&5
zO^ukm0Zff!As=8VpMc&^&~mGTWgar<%MX)wMM5re-5R{{-t`{IdCE^|M0R2G&E7-{
zcIfOtdWmp-VK^mu@6ht+4p%UwmgUQ7yAwQ_tz+LFy|T>F>H$d8owKCtNg%73#g7?n
z9ePrH;Y7fCMS1xf)}`#%F|GM`#L*}nf=Xhm_*Hq`$3K3~+<hdkEIk#V8>!FTubw`M
zq;TB=k1Ne1k;t0RGyE*ktCt%};H5+kyN~AHV5NK^8Dbc~aH)3x-VZzd445Jwr3&0u
zmakwGZ+i|L?!n(R{Mve7ExXcNPLJogIM#T%F??qq7<Zp5g3qX8Qda!EoW5DcRwBz3
zKM{h4XC}S^>`D)b14zHI{;YHK4NLZ#8G0QmB(0vGGX7G3!<ZLR(r=<0nK;>rX%^s?
zeq>ZOl1DU9^)}ae5pk-Ji@gW6T{PMKUBUukxlNACTOIZR>ZLuz^hAyeRM!y2z53Ja
zZ;;wCLODVxd*#ZNfl^#iNl7>`adG)_*l@4z+1uZzdy$*Mxp`LEWrn+z2}byy_!bvW
zb62?S6%-VNoPPJ<d%{-<6N_p}Sl^Lz!CXYTo<<Z}1UDz&lP9`CwY0RZQz(=gC5|-c
hzqWb&{{`#ZKcE8)<`V-Q1>vtv(8kKavL1Fb@qaK!^mG6K

literal 0
HcmV?d00001

diff --git a/dist/assets/index-BO7gh51n.js b/dist/assets/index-BO7gh51n.js
new file mode 100644
index 0000000..4657ebc
--- /dev/null
+++ b/dist/assets/index-BO7gh51n.js
@@ -0,0 +1,9 @@
+var e=Object.defineProperty,t=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),n=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();function r(e){let t=Object.create(null);for(let n of e.split(`,`))t[n]=1;return e=>e in t}var i={},a=[],o=()=>{},s=()=>!1,c=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),l=e=>e.startsWith(`onUpdate:`),u=Object.assign,d=(e,t)=>{let n=e.indexOf(t);n>-1&&e.splice(n,1)},f=Object.prototype.hasOwnProperty,p=(e,t)=>f.call(e,t),m=Array.isArray,h=e=>w(e)===`[object Map]`,g=e=>w(e)===`[object Set]`,_=e=>w(e)===`[object Date]`,v=e=>typeof e==`function`,y=e=>typeof e==`string`,b=e=>typeof e==`symbol`,x=e=>typeof e==`object`&&!!e,S=e=>(x(e)||v(e))&&v(e.then)&&v(e.catch),C=Object.prototype.toString,w=e=>C.call(e),ee=e=>w(e).slice(8,-1),te=e=>w(e)===`[object Object]`,T=e=>y(e)&&e!==`NaN`&&e[0]!==`-`&&``+parseInt(e,10)===e,E=r(`,key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted`),D=e=>{let t=Object.create(null);return(n=>t[n]||(t[n]=e(n)))},ne=/-\w/g,O=D(e=>e.replace(ne,e=>e.slice(1).toUpperCase())),re=/\B([A-Z])/g,ie=D(e=>e.replace(re,`-$1`).toLowerCase()),ae=D(e=>e.charAt(0).toUpperCase()+e.slice(1)),k=D(e=>e?`on${ae(e)}`:``),oe=(e,t)=>!Object.is(e,t),se=(e,...t)=>{for(let n=0;n<e.length;n++)e[n](...t)},ce=(e,t,n,r=!1)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:r,value:n})},le=e=>{let t=parseFloat(e);return isNaN(t)?e:t},ue,de=()=>ue||=typeof globalThis<`u`?globalThis:typeof self<`u`?self:typeof window<`u`?window:typeof global<`u`?global:{};function fe(e){if(m(e)){let t={};for(let n=0;n<e.length;n++){let r=e[n],i=y(r)?ge(r):fe(r);if(i)for(let e in i)t[e]=i[e]}return t}else if(y(e)||x(e))return e}var pe=/;(?![^(]*\))/g,me=/:([^]+)/,he=/\/\*[^]*?\*\//g;function ge(e){let t={};return e.replace(he,``).split(pe).forEach(e=>{if(e){let n=e.split(me);n.length>1&&(t[n[0].trim()]=n[1].trim())}}),t}function _e(e){let t=``;if(y(e))t=e;else if(m(e))for(let n=0;n<e.length;n++){let r=_e(e[n]);r&&(t+=r+` `)}else if(x(e))for(let n in e)e[n]&&(t+=n+` `);return t.trim()}var ve=`itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`,ye=r(ve);ve+``;function be(e){return!!e||e===``}function xe(e,t){if(e.length!==t.length)return!1;let n=!0;for(let r=0;n&&r<e.length;r++)n=Se(e[r],t[r]);return n}function Se(e,t){if(e===t)return!0;let n=_(e),r=_(t);if(n||r)return n&&r?e.getTime()===t.getTime():!1;if(n=b(e),r=b(t),n||r)return e===t;if(n=m(e),r=m(t),n||r)return n&&r?xe(e,t):!1;if(n=x(e),r=x(t),n||r){if(!n||!r||Object.keys(e).length!==Object.keys(t).length)return!1;for(let n in e){let r=e.hasOwnProperty(n),i=t.hasOwnProperty(n);if(r&&!i||!r&&i||!Se(e[n],t[n]))return!1}}return String(e)===String(t)}function Ce(e,t){return e.findIndex(e=>Se(e,t))}var we=e=>!!(e&&e.__v_isRef===!0),A=e=>y(e)?e:e==null?``:m(e)||x(e)&&(e.toString===C||!v(e.toString))?we(e)?A(e.value):JSON.stringify(e,Te,2):String(e),Te=(e,t)=>we(t)?Te(e,t.value):h(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((e,[t,n],r)=>(e[Ee(t,r)+` =>`]=n,e),{})}:g(t)?{[`Set(${t.size})`]:[...t.values()].map(e=>Ee(e))}:b(t)?Ee(t):x(t)&&!m(t)&&!te(t)?String(t):t,Ee=(e,t=``)=>b(e)?`Symbol(${e.description??t})`:e,j,De=class{constructor(e=!1){this.detached=e,this._active=!0,this._on=0,this.effects=[],this.cleanups=[],this._isPaused=!1,this._warnOnRun=!0,this.__v_skip=!0,!e&&j&&(j.active?(this.parent=j,this.index=(j.scopes||=[]).push(this)-1):(this._active=!1,this._warnOnRun=!1))}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let e,t;if(this.scopes)for(e=0,t=this.scopes.length;e<t;e++)this.scopes[e].pause();for(e=0,t=this.effects.length;e<t;e++)this.effects[e].pause()}}resume(){if(this._active&&this._isPaused){this._isPaused=!1;let e,t;if(this.scopes)for(e=0,t=this.scopes.length;e<t;e++)this.scopes[e].resume();for(e=0,t=this.effects.length;e<t;e++)this.effects[e].resume()}}run(e){if(this._active){let t=j;try{return j=this,e()}finally{j=t}}}on(){++this._on===1&&(this.prevScope=j,j=this)}off(){if(this._on>0&&--this._on===0){if(j===this)j=this.prevScope;else{let e=j;for(;e;){if(e.prevScope===this){e.prevScope=this.prevScope;break}e=e.prevScope}}this.prevScope=void 0}}stop(e){if(this._active){this._active=!1;let t,n;for(t=0,n=this.effects.length;t<n;t++)this.effects[t].stop();for(this.effects.length=0,t=0,n=this.cleanups.length;t<n;t++)this.cleanups[t]();if(this.cleanups.length=0,this.scopes){for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].stop(!0);this.scopes.length=0}if(!this.detached&&this.parent&&!e){let e=this.parent.scopes.pop();e&&e!==this&&(this.parent.scopes[this.index]=e,e.index=this.index)}this.parent=void 0}}};function Oe(e){return new De(e)}function ke(){return j}function Ae(e,t=!1){j&&j.cleanups.push(e)}var M,je=new WeakSet,Me=class{constructor(e){this.fn=e,this.deps=void 0,this.depsTail=void 0,this.flags=5,this.next=void 0,this.cleanup=void 0,this.scheduler=void 0,j&&(j.active?j.effects.push(this):this.flags&=-2)}pause(){this.flags|=64}resume(){this.flags&64&&(this.flags&=-65,je.has(this)&&(je.delete(this),this.trigger()))}notify(){this.flags&2&&!(this.flags&32)||this.flags&8||Ie(this)}run(){if(!(this.flags&1))return this.fn();this.flags|=2,Ye(this),ze(this);let e=M,t=Ge;M=this,Ge=!0;try{return this.fn()}finally{Be(this),M=e,Ge=t,this.flags&=-3}}stop(){if(this.flags&1){for(let e=this.deps;e;e=e.nextDep)Ue(e);this.deps=this.depsTail=void 0,Ye(this),this.onStop&&this.onStop(),this.flags&=-2}}trigger(){this.flags&64?je.add(this):this.scheduler?this.scheduler():this.runIfDirty()}runIfDirty(){Ve(this)&&this.run()}get dirty(){return Ve(this)}},Ne=0,Pe,Fe;function Ie(e,t=!1){if(e.flags|=8,t){e.next=Fe,Fe=e;return}e.next=Pe,Pe=e}function Le(){Ne++}function Re(){if(--Ne>0)return;if(Fe){let e=Fe;for(Fe=void 0;e;){let t=e.next;e.next=void 0,e.flags&=-9,e=t}}let e;for(;Pe;){let t=Pe;for(Pe=void 0;t;){let n=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(t){e||=t}t=n}}if(e)throw e}function ze(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function Be(e){let t,n=e.depsTail,r=n;for(;r;){let e=r.prevDep;r.version===-1?(r===n&&(n=e),Ue(r),We(r)):t=r,r.dep.activeLink=r.prevActiveLink,r.prevActiveLink=void 0,r=e}e.deps=t,e.depsTail=n}function Ve(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(He(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function He(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===Xe)||(e.globalVersion=Xe,!e.isSSR&&e.flags&128&&(!e.deps&&!e._dirty||!Ve(e))))return;e.flags|=2;let t=e.dep,n=M,r=Ge;M=e,Ge=!0;try{ze(e);let n=e.fn(e._value);(t.version===0||oe(n,e._value))&&(e.flags|=128,e._value=n,t.version++)}catch(e){throw t.version++,e}finally{M=n,Ge=r,Be(e),e.flags&=-3}}function Ue(e,t=!1){let{dep:n,prevSub:r,nextSub:i}=e;if(r&&(r.nextSub=i,e.prevSub=void 0),i&&(i.prevSub=r,e.nextSub=void 0),n.subs===e&&(n.subs=r,!r&&n.computed)){n.computed.flags&=-5;for(let e=n.computed.deps;e;e=e.nextDep)Ue(e,!0)}!t&&!--n.sc&&n.map&&n.map.delete(n.key)}function We(e){let{prevDep:t,nextDep:n}=e;t&&(t.nextDep=n,e.prevDep=void 0),n&&(n.prevDep=t,e.nextDep=void 0)}var Ge=!0,Ke=[];function qe(){Ke.push(Ge),Ge=!1}function Je(){let e=Ke.pop();Ge=e===void 0?!0:e}function Ye(e){let{cleanup:t}=e;if(e.cleanup=void 0,t){let e=M;M=void 0;try{t()}finally{M=e}}}var Xe=0,Ze=class{constructor(e,t){this.sub=e,this.dep=t,this.version=t.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}},Qe=class{constructor(e){this.computed=e,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0,this.__v_skip=!0}track(e){if(!M||!Ge||M===this.computed)return;let t=this.activeLink;if(t===void 0||t.sub!==M)t=this.activeLink=new Ze(M,this),M.deps?(t.prevDep=M.depsTail,M.depsTail.nextDep=t,M.depsTail=t):M.deps=M.depsTail=t,$e(t);else if(t.version===-1&&(t.version=this.version,t.nextDep)){let e=t.nextDep;e.prevDep=t.prevDep,t.prevDep&&(t.prevDep.nextDep=e),t.prevDep=M.depsTail,t.nextDep=void 0,M.depsTail.nextDep=t,M.depsTail=t,M.deps===t&&(M.deps=e)}return t}trigger(e){this.version++,Xe++,this.notify(e)}notify(e){Le();try{for(let e=this.subs;e;e=e.prevSub)e.sub.notify()&&e.sub.dep.notify()}finally{Re()}}};function $e(e){if(e.dep.sc++,e.sub.flags&4){let t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let e=t.deps;e;e=e.nextDep)$e(e)}let n=e.dep.subs;n!==e&&(e.prevSub=n,n&&(n.nextSub=e)),e.dep.subs=e}}var et=new WeakMap,tt=Symbol(``),nt=Symbol(``),rt=Symbol(``);function it(e,t,n){if(Ge&&M){let t=et.get(e);t||et.set(e,t=new Map);let r=t.get(n);r||(t.set(n,r=new Qe),r.map=t,r.key=n),r.track()}}function at(e,t,n,r,i,a){let o=et.get(e);if(!o){Xe++;return}let s=e=>{e&&e.trigger()};if(Le(),t===`clear`)o.forEach(s);else{let i=m(e),a=i&&T(n);if(i&&n===`length`){let e=Number(r);o.forEach((t,n)=>{(n===`length`||n===rt||!b(n)&&n>=e)&&s(t)})}else switch((n!==void 0||o.has(void 0))&&s(o.get(n)),a&&s(o.get(rt)),t){case`add`:i?a&&s(o.get(`length`)):(s(o.get(tt)),h(e)&&s(o.get(nt)));break;case`delete`:i||(s(o.get(tt)),h(e)&&s(o.get(nt)));break;case`set`:h(e)&&s(o.get(tt));break}}Re()}function ot(e,t){let n=et.get(e);return n&&n.get(t)}function st(e){let t=N(e);return t===e?t:(it(t,`iterate`,rt),qt(e)?t:t.map(Xt))}function ct(e){return it(e=N(e),`iterate`,rt),e}function lt(e,t){return Kt(e)?Zt(Gt(e)?Xt(t):t):Xt(t)}var ut={__proto__:null,[Symbol.iterator](){return dt(this,Symbol.iterator,e=>lt(this,e))},concat(...e){return st(this).concat(...e.map(e=>m(e)?st(e):e))},entries(){return dt(this,`entries`,e=>(e[1]=lt(this,e[1]),e))},every(e,t){return pt(this,`every`,e,t,void 0,arguments)},filter(e,t){return pt(this,`filter`,e,t,e=>e.map(e=>lt(this,e)),arguments)},find(e,t){return pt(this,`find`,e,t,e=>lt(this,e),arguments)},findIndex(e,t){return pt(this,`findIndex`,e,t,void 0,arguments)},findLast(e,t){return pt(this,`findLast`,e,t,e=>lt(this,e),arguments)},findLastIndex(e,t){return pt(this,`findLastIndex`,e,t,void 0,arguments)},forEach(e,t){return pt(this,`forEach`,e,t,void 0,arguments)},includes(...e){return ht(this,`includes`,e)},indexOf(...e){return ht(this,`indexOf`,e)},join(e){return st(this).join(e)},lastIndexOf(...e){return ht(this,`lastIndexOf`,e)},map(e,t){return pt(this,`map`,e,t,void 0,arguments)},pop(){return gt(this,`pop`)},push(...e){return gt(this,`push`,e)},reduce(e,...t){return mt(this,`reduce`,e,t)},reduceRight(e,...t){return mt(this,`reduceRight`,e,t)},shift(){return gt(this,`shift`)},some(e,t){return pt(this,`some`,e,t,void 0,arguments)},splice(...e){return gt(this,`splice`,e)},toReversed(){return st(this).toReversed()},toSorted(e){return st(this).toSorted(e)},toSpliced(...e){return st(this).toSpliced(...e)},unshift(...e){return gt(this,`unshift`,e)},values(){return dt(this,`values`,e=>lt(this,e))}};function dt(e,t,n){let r=ct(e),i=r[t]();return r!==e&&!qt(e)&&(i._next=i.next,i.next=()=>{let e=i._next();return e.done||(e.value=n(e.value)),e}),i}var ft=Array.prototype;function pt(e,t,n,r,i,a){let o=ct(e),s=o!==e&&!qt(e),c=o[t];if(c!==ft[t]){let t=c.apply(e,a);return s?Xt(t):t}let l=n;o!==e&&(s?l=function(t,r){return n.call(this,lt(e,t),r,e)}:n.length>2&&(l=function(t,r){return n.call(this,t,r,e)}));let u=c.call(o,l,r);return s&&i?i(u):u}function mt(e,t,n,r){let i=ct(e),a=i!==e&&!qt(e),o=n,s=!1;i!==e&&(a?(s=r.length===0,o=function(t,r,i){return s&&(s=!1,t=lt(e,t)),n.call(this,t,lt(e,r),i,e)}):n.length>3&&(o=function(t,r,i){return n.call(this,t,r,i,e)}));let c=i[t](o,...r);return s?lt(e,c):c}function ht(e,t,n){let r=N(e);it(r,`iterate`,rt);let i=r[t](...n);return(i===-1||i===!1)&&Jt(n[0])?(n[0]=N(n[0]),r[t](...n)):i}function gt(e,t,n=[]){qe(),Le();let r=N(e)[t].apply(e,n);return Re(),Je(),r}var _t=r(`__proto__,__v_isRef,__isVue`),vt=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!==`arguments`&&e!==`caller`).map(e=>Symbol[e]).filter(b));function yt(e){b(e)||(e=String(e));let t=N(this);return it(t,`has`,e),t.hasOwnProperty(e)}var bt=class{constructor(e=!1,t=!1){this._isReadonly=e,this._isShallow=t}get(e,t,n){if(t===`__v_skip`)return e.__v_skip;let r=this._isReadonly,i=this._isShallow;if(t===`__v_isReactive`)return!r;if(t===`__v_isReadonly`)return r;if(t===`__v_isShallow`)return i;if(t===`__v_raw`)return n===(r?i?Rt:Lt:i?It:Ft).get(e)||Object.getPrototypeOf(e)===Object.getPrototypeOf(n)?e:void 0;let a=m(e);if(!r){let e;if(a&&(e=ut[t]))return e;if(t===`hasOwnProperty`)return yt}let o=Reflect.get(e,t,P(e)?e:n);if((b(t)?vt.has(t):_t(t))||(r||it(e,`get`,t),i))return o;if(P(o)){let e=a&&T(t)?o:o.value;return r&&x(e)?Ut(e):e}return x(o)?r?Ut(o):Vt(o):o}},xt=class extends bt{constructor(e=!1){super(!1,e)}set(e,t,n,r){let i=e[t],a=m(e)&&T(t);if(!this._isShallow){let e=Kt(i);if(!qt(n)&&!Kt(n)&&(i=N(i),n=N(n)),!a&&P(i)&&!P(n))return e||(i.value=n),!0}let o=a?Number(t)<e.length:p(e,t),s=Reflect.set(e,t,n,P(e)?e:r);return e===N(r)&&(o?oe(n,i)&&at(e,`set`,t,n,i):at(e,`add`,t,n)),s}deleteProperty(e,t){let n=p(e,t),r=e[t],i=Reflect.deleteProperty(e,t);return i&&n&&at(e,`delete`,t,void 0,r),i}has(e,t){let n=Reflect.has(e,t);return(!b(t)||!vt.has(t))&&it(e,`has`,t),n}ownKeys(e){return it(e,`iterate`,m(e)?`length`:tt),Reflect.ownKeys(e)}},St=class extends bt{constructor(e=!1){super(!0,e)}set(e,t){return!0}deleteProperty(e,t){return!0}},Ct=new xt,wt=new St,Tt=new xt(!0),Et=e=>e,Dt=e=>Reflect.getPrototypeOf(e);function Ot(e,t,n){return function(...r){let i=this.__v_raw,a=N(i),o=h(a),s=e===`entries`||e===Symbol.iterator&&o,c=e===`keys`&&o,l=i[e](...r),d=n?Et:t?Zt:Xt;return!t&&it(a,`iterate`,c?nt:tt),u(Object.create(l),{next(){let{value:e,done:t}=l.next();return t?{value:e,done:t}:{value:s?[d(e[0]),d(e[1])]:d(e),done:t}}})}}function kt(e){return function(...t){return e===`delete`?!1:e===`clear`?void 0:this}}function At(e,t){let n={get(n){let r=this.__v_raw,i=N(r),a=N(n);e||(oe(n,a)&&it(i,`get`,n),it(i,`get`,a));let{has:o}=Dt(i),s=t?Et:e?Zt:Xt;if(o.call(i,n))return s(r.get(n));if(o.call(i,a))return s(r.get(a));r!==i&&r.get(n)},get size(){let t=this.__v_raw;return!e&&it(N(t),`iterate`,tt),t.size},has(t){let n=this.__v_raw,r=N(n),i=N(t);return e||(oe(t,i)&&it(r,`has`,t),it(r,`has`,i)),t===i?n.has(t):n.has(t)||n.has(i)},forEach(n,r){let i=this,a=i.__v_raw,o=N(a),s=t?Et:e?Zt:Xt;return!e&&it(o,`iterate`,tt),a.forEach((e,t)=>n.call(r,s(e),s(t),i))}};return u(n,e?{add:kt(`add`),set:kt(`set`),delete:kt(`delete`),clear:kt(`clear`)}:{add(e){let n=N(this),r=Dt(n),i=N(e),a=!t&&!qt(e)&&!Kt(e)?i:e;return r.has.call(n,a)||oe(e,a)&&r.has.call(n,e)||oe(i,a)&&r.has.call(n,i)||(n.add(a),at(n,`add`,a,a)),this},set(e,n){!t&&!qt(n)&&!Kt(n)&&(n=N(n));let r=N(this),{has:i,get:a}=Dt(r),o=i.call(r,e);o||=(e=N(e),i.call(r,e));let s=a.call(r,e);return r.set(e,n),o?oe(n,s)&&at(r,`set`,e,n,s):at(r,`add`,e,n),this},delete(e){let t=N(this),{has:n,get:r}=Dt(t),i=n.call(t,e);i||=(e=N(e),n.call(t,e));let a=r?r.call(t,e):void 0,o=t.delete(e);return i&&at(t,`delete`,e,void 0,a),o},clear(){let e=N(this),t=e.size!==0,n=e.clear();return t&&at(e,`clear`,void 0,void 0,void 0),n}}),[`keys`,`values`,`entries`,Symbol.iterator].forEach(r=>{n[r]=Ot(r,e,t)}),n}function jt(e,t){let n=At(e,t);return(t,r,i)=>r===`__v_isReactive`?!e:r===`__v_isReadonly`?e:r===`__v_raw`?t:Reflect.get(p(n,r)&&r in t?n:t,r,i)}var Mt={get:jt(!1,!1)},Nt={get:jt(!1,!0)},Pt={get:jt(!0,!1)},Ft=new WeakMap,It=new WeakMap,Lt=new WeakMap,Rt=new WeakMap;function zt(e){switch(e){case`Object`:case`Array`:return 1;case`Map`:case`Set`:case`WeakMap`:case`WeakSet`:return 2;default:return 0}}function Bt(e){return e.__v_skip||!Object.isExtensible(e)?0:zt(ee(e))}function Vt(e){return Kt(e)?e:Wt(e,!1,Ct,Mt,Ft)}function Ht(e){return Wt(e,!1,Tt,Nt,It)}function Ut(e){return Wt(e,!0,wt,Pt,Lt)}function Wt(e,t,n,r,i){if(!x(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;let a=Bt(e);if(a===0)return e;let o=i.get(e);if(o)return o;let s=new Proxy(e,a===2?r:n);return i.set(e,s),s}function Gt(e){return Kt(e)?Gt(e.__v_raw):!!(e&&e.__v_isReactive)}function Kt(e){return!!(e&&e.__v_isReadonly)}function qt(e){return!!(e&&e.__v_isShallow)}function Jt(e){return e?!!e.__v_raw:!1}function N(e){let t=e&&e.__v_raw;return t?N(t):e}function Yt(e){return!p(e,`__v_skip`)&&Object.isExtensible(e)&&ce(e,`__v_skip`,!0),e}var Xt=e=>x(e)?Vt(e):e,Zt=e=>x(e)?Ut(e):e;function P(e){return e?e.__v_isRef===!0:!1}function F(e){return $t(e,!1)}function Qt(e){return $t(e,!0)}function $t(e,t){return P(e)?e:new en(e,t)}var en=class{constructor(e,t){this.dep=new Qe,this.__v_isRef=!0,this.__v_isShallow=!1,this._rawValue=t?e:N(e),this._value=t?e:Xt(e),this.__v_isShallow=t}get value(){return this.dep.track(),this._value}set value(e){let t=this._rawValue,n=this.__v_isShallow||qt(e)||Kt(e);e=n?e:N(e),oe(e,t)&&(this._rawValue=e,this._value=n?e:Xt(e),this.dep.trigger())}};function I(e){return P(e)?e.value:e}var tn={get:(e,t,n)=>t===`__v_raw`?e:I(Reflect.get(e,t,n)),set:(e,t,n,r)=>{let i=e[t];return P(i)&&!P(n)?(i.value=n,!0):Reflect.set(e,t,n,r)}};function nn(e){return Gt(e)?e:new Proxy(e,tn)}function rn(e){let t=m(e)?Array(e.length):{};for(let n in e)t[n]=on(e,n);return t}var an=class{constructor(e,t,n){this._object=e,this._defaultValue=n,this.__v_isRef=!0,this._value=void 0,this._key=b(t)?t:String(t),this._raw=N(e);let r=!0,i=e;if(!m(e)||b(this._key)||!T(this._key))do r=!Jt(i)||qt(i);while(r&&(i=i.__v_raw));this._shallow=r}get value(){let e=this._object[this._key];return this._shallow&&(e=I(e)),this._value=e===void 0?this._defaultValue:e}set value(e){if(this._shallow&&P(this._raw[this._key])){let t=this._object[this._key];if(P(t)){t.value=e;return}}this._object[this._key]=e}get dep(){return ot(this._raw,this._key)}};function on(e,t,n){return new an(e,t,n)}var sn=class{constructor(e,t,n){this.fn=e,this.setter=t,this._value=void 0,this.dep=new Qe(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=Xe-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!t,this.isSSR=n}notify(){if(this.flags|=16,!(this.flags&8)&&M!==this)return Ie(this,!0),!0}get value(){let e=this.dep.track();return He(this),e&&(e.version=this.dep.version),this._value}set value(e){this.setter&&this.setter(e)}};function cn(e,t,n=!1){let r,i;return v(e)?r=e:(r=e.get,i=e.set),new sn(r,i,n)}var ln={},un=new WeakMap,dn=void 0;function fn(e,t=!1,n=dn){if(n){let t=un.get(n);t||un.set(n,t=[]),t.push(e)}}function pn(e,t,n=i){let{immediate:r,deep:a,once:s,scheduler:c,augmentJob:l,call:u}=n,f=e=>a?e:qt(e)||a===!1||a===0?mn(e,1):mn(e),p,h,g,_,y=!1,b=!1;if(P(e)?(h=()=>e.value,y=qt(e)):Gt(e)?(h=()=>f(e),y=!0):m(e)?(b=!0,y=e.some(e=>Gt(e)||qt(e)),h=()=>e.map(e=>{if(P(e))return e.value;if(Gt(e))return f(e);if(v(e))return u?u(e,2):e()})):h=v(e)?t?u?()=>u(e,2):e:()=>{if(g){qe();try{g()}finally{Je()}}let t=dn;dn=p;try{return u?u(e,3,[_]):e(_)}finally{dn=t}}:o,t&&a){let e=h,t=a===!0?1/0:a;h=()=>mn(e(),t)}let x=ke(),S=()=>{p.stop(),x&&x.active&&d(x.effects,p)};if(s&&t){let e=t;t=(...t)=>{e(...t),S()}}let C=b?Array(e.length).fill(ln):ln,w=e=>{if(!(!(p.flags&1)||!p.dirty&&!e))if(t){let e=p.run();if(a||y||(b?e.some((e,t)=>oe(e,C[t])):oe(e,C))){g&&g();let n=dn;dn=p;try{let n=[e,C===ln?void 0:b&&C[0]===ln?[]:C,_];C=e,u?u(t,3,n):t(...n)}finally{dn=n}}}else p.run()};return l&&l(w),p=new Me(h),p.scheduler=c?()=>c(w,!1):w,_=e=>fn(e,!1,p),g=p.onStop=()=>{let e=un.get(p);if(e){if(u)u(e,4);else for(let t of e)t();un.delete(p)}},t?r?w(!0):C=p.run():c?c(w.bind(null,!0),!0):p.run(),S.pause=p.pause.bind(p),S.resume=p.resume.bind(p),S.stop=S,S}function mn(e,t=1/0,n){if(t<=0||!x(e)||e.__v_skip||(n||=new Map,(n.get(e)||0)>=t))return e;if(n.set(e,t),t--,P(e))mn(e.value,t,n);else if(m(e))for(let r=0;r<e.length;r++)mn(e[r],t,n);else if(g(e)||h(e))e.forEach(e=>{mn(e,t,n)});else if(te(e)){for(let r in e)mn(e[r],t,n);for(let r of Object.getOwnPropertySymbols(e))Object.prototype.propertyIsEnumerable.call(e,r)&&mn(e[r],t,n)}return e}function hn(e,t,n,r){try{return r?e(...r):e()}catch(e){_n(e,t,n)}}function gn(e,t,n,r){if(v(e)){let i=hn(e,t,n,r);return i&&S(i)&&i.catch(e=>{_n(e,t,n)}),i}if(m(e)){let i=[];for(let a=0;a<e.length;a++)i.push(gn(e[a],t,n,r));return i}}function _n(e,t,n,r=!0){let a=t?t.vnode:null,{errorHandler:o,throwUnhandledErrorInProduction:s}=t&&t.appContext.config||i;if(t){let r=t.parent,i=t.proxy,a=`https://vuejs.org/error-reference/#runtime-${n}`;for(;r;){let t=r.ec;if(t){for(let n=0;n<t.length;n++)if(t[n](e,i,a)===!1)return}r=r.parent}if(o){qe(),hn(o,null,10,[e,i,a]),Je();return}}vn(e,n,a,r,s)}function vn(e,t,n,r=!0,i=!1){if(i)throw e;console.error(e)}var yn=[],bn=-1,xn=[],Sn=null,Cn=0,wn=Promise.resolve(),Tn=null;function En(e){let t=Tn||wn;return e?t.then(this?e.bind(this):e):t}function Dn(e){let t=bn+1,n=yn.length;for(;t<n;){let r=t+n>>>1,i=yn[r],a=Nn(i);a<e||a===e&&i.flags&2?t=r+1:n=r}return t}function On(e){if(!(e.flags&1)){let t=Nn(e),n=yn[yn.length-1];!n||!(e.flags&2)&&t>=Nn(n)?yn.push(e):yn.splice(Dn(t),0,e),e.flags|=1,kn()}}function kn(){Tn||=wn.then(Pn)}function An(e){m(e)?xn.push(...e):Sn&&e.id===-1?Sn.splice(Cn+1,0,e):e.flags&1||(xn.push(e),e.flags|=1),kn()}function jn(e,t,n=bn+1){for(;n<yn.length;n++){let t=yn[n];if(t&&t.flags&2){if(e&&t.id!==e.uid)continue;yn.splice(n,1),n--,t.flags&4&&(t.flags&=-2),t(),t.flags&4||(t.flags&=-2)}}}function Mn(e){if(xn.length){let e=[...new Set(xn)].sort((e,t)=>Nn(e)-Nn(t));if(xn.length=0,Sn){Sn.push(...e);return}for(Sn=e,Cn=0;Cn<Sn.length;Cn++){let e=Sn[Cn];e.flags&4&&(e.flags&=-2),e.flags&8||e(),e.flags&=-2}Sn=null,Cn=0}}var Nn=e=>e.id==null?e.flags&2?-1:1/0:e.id;function Pn(e){try{for(bn=0;bn<yn.length;bn++){let e=yn[bn];e&&!(e.flags&8)&&(e.flags&4&&(e.flags&=-2),hn(e,e.i,e.i?15:14),e.flags&4||(e.flags&=-2))}}finally{for(;bn<yn.length;bn++){let e=yn[bn];e&&(e.flags&=-2)}bn=-1,yn.length=0,Mn(e),Tn=null,(yn.length||xn.length)&&Pn(e)}}var Fn=null,In=null;function Ln(e){let t=Fn;return Fn=e,In=e&&e.type.__scopeId||null,t}function Rn(e,t=Fn,n){if(!t||e._n)return e;let r=(...n)=>{r._d&&Xi(-1);let i=Ln(t),a;try{a=e(...n)}finally{Ln(i),r._d&&Xi(1)}return a};return r._n=!0,r._c=!0,r._d=!0,r}function zn(e,t){if(Fn===null)return e;let n=Aa(Fn),r=e.dirs||=[];for(let e=0;e<t.length;e++){let[a,o,s,c=i]=t[e];a&&(v(a)&&(a={mounted:a,updated:a}),a.deep&&mn(o),r.push({dir:a,instance:n,value:o,oldValue:void 0,arg:s,modifiers:c}))}return e}function Bn(e,t,n,r){let i=e.dirs,a=t&&t.dirs;for(let o=0;o<i.length;o++){let s=i[o];a&&(s.oldValue=a[o].value);let c=s.dir[r];c&&(qe(),gn(c,n,8,[e.el,s,e,t]),Je())}}function Vn(e,t){if(W){let n=W.provides,r=W.parent&&W.parent.provides;r===n&&(n=W.provides=Object.create(r)),n[e]=t}}function Hn(e,t,n=!1){let r=ha();if(r||$r){let i=$r?$r._context.provides:r?r.parent==null||r.ce?r.vnode.appContext&&r.vnode.appContext.provides:r.parent.provides:void 0;if(i&&e in i)return i[e];if(arguments.length>1)return n&&v(t)?t.call(r&&r.proxy):t}}function Un(){return!!(ha()||$r)}var Wn=Symbol.for(`v-scx`),Gn=()=>Hn(Wn);function Kn(e,t,n){return qn(e,t,n)}function qn(e,t,n=i){let{immediate:r,deep:a,flush:s,once:c}=n,l=u({},n),d=t&&r||!t&&s!==`post`,f;if(xa){if(s===`sync`){let e=Gn();f=e.__watcherHandles||=[]}else if(!d){let e=()=>{};return e.stop=o,e.resume=o,e.pause=o,e}}let p=W;l.call=(e,t,n)=>gn(e,p,t,n);let m=!1;s===`post`?l.scheduler=e=>{Ai(e,p&&p.suspense)}:s!==`sync`&&(m=!0,l.scheduler=(e,t)=>{t?e():On(e)}),l.augmentJob=e=>{t&&(e.flags|=4),m&&(e.flags|=2,p&&(e.id=p.uid,e.i=p))};let h=pn(e,t,l);return xa&&(f?f.push(h):d&&h()),h}function Jn(e,t,n){let r=this.proxy,i=y(e)?e.includes(`.`)?Yn(r,e):()=>r[e]:e.bind(r,r),a;v(t)?a=t:(a=t.handler,n=t);let o=va(this),s=qn(i,a.bind(r),n);return o(),s}function Yn(e,t){let n=t.split(`.`);return()=>{let t=e;for(let e=0;e<n.length&&t;e++)t=t[n[e]];return t}}var Xn=Symbol(`_vte`),Zn=e=>e.__isTeleport,Qn=Symbol(`_leaveCb`);function $n(e,t){e.shapeFlag&6&&e.component?(e.transition=t,$n(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function er(e,t){return v(e)?u({name:e.name},t,{setup:e}):e}function tr(e){e.ids=[e.ids[0]+ e.ids[2]+++`-`,0,0]}function nr(e,t){let n;return!!((n=Object.getOwnPropertyDescriptor(e,t))&&!n.configurable)}var rr=new WeakMap;function ir(e,t,n,r,a=!1){if(m(e)){e.forEach((e,i)=>ir(e,t&&(m(t)?t[i]:t),n,r,a));return}if(or(r)&&!a){r.shapeFlag&512&&r.type.__asyncResolved&&r.component.subTree.component&&ir(e,t,n,r.component.subTree);return}let o=r.shapeFlag&4?Aa(r.component):r.el,c=a?null:o,{i:l,r:u}=e,f=t&&t.r,h=l.refs===i?l.refs={}:l.refs,g=l.setupState,_=N(g),b=g===i?s:e=>nr(h,e)?!1:p(_,e),x=(e,t)=>!(t&&nr(h,t));if(f!=null&&f!==u){if(ar(t),y(f))h[f]=null,b(f)&&(g[f]=null);else if(P(f)){let e=t;x(f,e.k)&&(f.value=null),e.k&&(h[e.k]=null)}}if(v(u))hn(u,l,12,[c,h]);else{let t=y(u),r=P(u);if(t||r){let i=()=>{if(e.f){let n=t?b(u)?g[u]:h[u]:x(u)||!e.k?u.value:h[e.k];if(a)m(n)&&d(n,o);else if(m(n))n.includes(o)||n.push(o);else if(t)h[u]=[o],b(u)&&(g[u]=h[u]);else{let t=[o];x(u,e.k)&&(u.value=t),e.k&&(h[e.k]=t)}}else t?(h[u]=c,b(u)&&(g[u]=c)):r&&(x(u,e.k)&&(u.value=c),e.k&&(h[e.k]=c))};if(c){let t=()=>{i(),rr.delete(e)};t.id=-1,rr.set(e,t),Ai(t,n)}else ar(e),i()}}}function ar(e){let t=rr.get(e);t&&(t.flags|=8,rr.delete(e))}de().requestIdleCallback,de().cancelIdleCallback;var or=e=>!!e.type.__asyncLoader,sr=e=>e.type.__isKeepAlive;function cr(e,t){ur(e,`a`,t)}function lr(e,t){ur(e,`da`,t)}function ur(e,t,n=W){let r=e.__wdc||=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}return e()};if(fr(t,r,n),n){let e=n.parent;for(;e&&e.parent;)sr(e.parent.vnode)&&dr(r,t,n,e),e=e.parent}}function dr(e,t,n,r){let i=fr(t,e,r,!0);yr(()=>{d(r[t],i)},n)}function fr(e,t,n=W,r=!1){if(n){let i=n[e]||(n[e]=[]),a=t.__weh||=(...r)=>{qe();let i=va(n),a=gn(t,n,e,r);return i(),Je(),a};return r?i.unshift(a):i.push(a),a}}var pr=e=>(t,n=W)=>{(!xa||e===`sp`)&&fr(e,(...e)=>t(...e),n)},mr=pr(`bm`),hr=pr(`m`),gr=pr(`bu`),_r=pr(`u`),vr=pr(`bum`),yr=pr(`um`),br=pr(`sp`),xr=pr(`rtg`),Sr=pr(`rtc`);function Cr(e,t=W){fr(`ec`,e,t)}var wr=`components`;function Tr(e,t){return Dr(wr,e,!0,t)||e}var Er=Symbol.for(`v-ndc`);function Dr(e,t,n=!0,r=!1){let i=Fn||W;if(i){let n=i.type;if(e===wr){let e=ja(n,!1);if(e&&(e===t||e===O(t)||e===ae(O(t))))return n}let a=Or(i[e]||n[e],t)||Or(i.appContext[e],t);return!a&&r?n:a}}function Or(e,t){return e&&(e[t]||e[O(t)]||e[ae(O(t))])}function kr(e,t,n,r){let i,a=n&&n[r],o=m(e);if(o||y(e)){let n=o&&Gt(e),r=!1,s=!1;n&&(r=!qt(e),s=Kt(e),e=ct(e)),i=Array(e.length);for(let n=0,o=e.length;n<o;n++)i[n]=t(r?s?Zt(Xt(e[n])):Xt(e[n]):e[n],n,void 0,a&&a[n])}else if(typeof e==`number`){i=Array(e);for(let n=0;n<e;n++)i[n]=t(n+1,n,void 0,a&&a[n])}else if(x(e))if(e[Symbol.iterator])i=Array.from(e,(e,n)=>t(e,n,void 0,a&&a[n]));else{let n=Object.keys(e);i=Array(n.length);for(let r=0,o=n.length;r<o;r++){let o=n[r];i[r]=t(e[o],o,r,a&&a[r])}}else i=[];return n&&(n[r]=i),i}var Ar=e=>e?ba(e)?Aa(e):Ar(e.parent):null,jr=u(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Ar(e.parent),$root:e=>Ar(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>Br(e),$forceUpdate:e=>e.f||=()=>{On(e.update)},$nextTick:e=>e.n||=En.bind(e.proxy),$watch:e=>Jn.bind(e)}),Mr=(e,t)=>e!==i&&!e.__isScriptSetup&&p(e,t),Nr={get({_:e},t){if(t===`__v_skip`)return!0;let{ctx:n,setupState:r,data:a,props:o,accessCache:s,type:c,appContext:l}=e;if(t[0]!==`$`){let e=s[t];if(e!==void 0)switch(e){case 1:return r[t];case 2:return a[t];case 4:return n[t];case 3:return o[t]}else if(Mr(r,t))return s[t]=1,r[t];else if(a!==i&&p(a,t))return s[t]=2,a[t];else if(p(o,t))return s[t]=3,o[t];else if(n!==i&&p(n,t))return s[t]=4,n[t];else Fr&&(s[t]=0)}let u=jr[t],d,f;if(u)return t===`$attrs`&&it(e.attrs,`get`,``),u(e);if((d=c.__cssModules)&&(d=d[t]))return d;if(n!==i&&p(n,t))return s[t]=4,n[t];if(f=l.config.globalProperties,p(f,t))return f[t]},set({_:e},t,n){let{data:r,setupState:a,ctx:o}=e;return Mr(a,t)?(a[t]=n,!0):r!==i&&p(r,t)?(r[t]=n,!0):p(e.props,t)||t[0]===`$`&&t.slice(1)in e?!1:(o[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:a,props:o,type:s}},c){let l;return!!(n[c]||e!==i&&c[0]!==`$`&&p(e,c)||Mr(t,c)||p(o,c)||p(r,c)||p(jr,c)||p(a.config.globalProperties,c)||(l=s.__cssModules)&&l[c])},defineProperty(e,t,n){return n.get==null?p(n,`value`)&&this.set(e,t,n.value,null):e._.accessCache[t]=0,Reflect.defineProperty(e,t,n)}};function Pr(e){return m(e)?e.reduce((e,t)=>(e[t]=null,e),{}):e}var Fr=!0;function Ir(e){let t=Br(e),n=e.proxy,r=e.ctx;Fr=!1,t.beforeCreate&&Rr(t.beforeCreate,e,`bc`);let{data:i,computed:a,methods:s,watch:c,provide:l,inject:u,created:d,beforeMount:f,mounted:p,beforeUpdate:h,updated:g,activated:_,deactivated:y,beforeDestroy:b,beforeUnmount:S,destroyed:C,unmounted:w,render:ee,renderTracked:te,renderTriggered:T,errorCaptured:E,serverPrefetch:D,expose:ne,inheritAttrs:O,components:re,directives:ie,filters:ae}=t;if(u&&Lr(u,r,null),s)for(let e in s){let t=s[e];v(t)&&(r[e]=t.bind(n))}if(i){let t=i.call(n,n);x(t)&&(e.data=Vt(t))}if(Fr=!0,a)for(let e in a){let t=a[e],i=G({get:v(t)?t.bind(n,n):v(t.get)?t.get.bind(n,n):o,set:!v(t)&&v(t.set)?t.set.bind(n):o});Object.defineProperty(r,e,{enumerable:!0,configurable:!0,get:()=>i.value,set:e=>i.value=e})}if(c)for(let e in c)zr(c[e],r,n,e);if(l){let e=v(l)?l.call(n):l;Reflect.ownKeys(e).forEach(t=>{Vn(t,e[t])})}d&&Rr(d,e,`c`);function k(e,t){m(t)?t.forEach(t=>e(t.bind(n))):t&&e(t.bind(n))}if(k(mr,f),k(hr,p),k(gr,h),k(_r,g),k(cr,_),k(lr,y),k(Cr,E),k(Sr,te),k(xr,T),k(vr,S),k(yr,w),k(br,D),m(ne))if(ne.length){let t=e.exposed||={};ne.forEach(e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t,enumerable:!0})})}else e.exposed||={};ee&&e.render===o&&(e.render=ee),O!=null&&(e.inheritAttrs=O),re&&(e.components=re),ie&&(e.directives=ie),D&&tr(e)}function Lr(e,t,n=o){m(e)&&(e=Gr(e));for(let n in e){let r=e[n],i;i=x(r)?`default`in r?Hn(r.from||n,r.default,!0):Hn(r.from||n):Hn(r),P(i)?Object.defineProperty(t,n,{enumerable:!0,configurable:!0,get:()=>i.value,set:e=>i.value=e}):t[n]=i}}function Rr(e,t,n){gn(m(e)?e.map(e=>e.bind(t.proxy)):e.bind(t.proxy),t,n)}function zr(e,t,n,r){let i=r.includes(`.`)?Yn(n,r):()=>n[r];if(y(e)){let n=t[e];v(n)&&Kn(i,n)}else if(v(e))Kn(i,e.bind(n));else if(x(e))if(m(e))e.forEach(e=>zr(e,t,n,r));else{let r=v(e.handler)?e.handler.bind(n):t[e.handler];v(r)&&Kn(i,r,e)}}function Br(e){let t=e.type,{mixins:n,extends:r}=t,{mixins:i,optionsCache:a,config:{optionMergeStrategies:o}}=e.appContext,s=a.get(t),c;return s?c=s:!i.length&&!n&&!r?c=t:(c={},i.length&&i.forEach(e=>Vr(c,e,o,!0)),Vr(c,t,o)),x(t)&&a.set(t,c),c}function Vr(e,t,n,r=!1){let{mixins:i,extends:a}=t;a&&Vr(e,a,n,!0),i&&i.forEach(t=>Vr(e,t,n,!0));for(let i in t)if(!(r&&i===`expose`)){let r=Hr[i]||n&&n[i];e[i]=r?r(e[i],t[i]):t[i]}return e}var Hr={data:Ur,props:Jr,emits:Jr,methods:qr,computed:qr,beforeCreate:Kr,created:Kr,beforeMount:Kr,mounted:Kr,beforeUpdate:Kr,updated:Kr,beforeDestroy:Kr,beforeUnmount:Kr,destroyed:Kr,unmounted:Kr,activated:Kr,deactivated:Kr,errorCaptured:Kr,serverPrefetch:Kr,components:qr,directives:qr,watch:Yr,provide:Ur,inject:Wr};function Ur(e,t){return t?e?function(){return u(v(e)?e.call(this,this):e,v(t)?t.call(this,this):t)}:t:e}function Wr(e,t){return qr(Gr(e),Gr(t))}function Gr(e){if(m(e)){let t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function Kr(e,t){return e?[...new Set([].concat(e,t))]:t}function qr(e,t){return e?u(Object.create(null),e,t):t}function Jr(e,t){return e?m(e)&&m(t)?[...new Set([...e,...t])]:u(Object.create(null),Pr(e),Pr(t??{})):t}function Yr(e,t){if(!e)return t;if(!t)return e;let n=u(Object.create(null),e);for(let r in t)n[r]=Kr(e[r],t[r]);return n}function Xr(){return{app:null,config:{isNativeTag:s,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}var Zr=0;function Qr(e,t){return function(n,r=null){v(n)||(n=u({},n)),r!=null&&!x(r)&&(r=null);let i=Xr(),a=new WeakSet,o=[],s=!1,c=i.app={_uid:Zr++,_component:n,_props:r,_container:null,_context:i,_instance:null,version:Pa,get config(){return i.config},set config(e){},use(e,...t){return a.has(e)||(e&&v(e.install)?(a.add(e),e.install(c,...t)):v(e)&&(a.add(e),e(c,...t))),c},mixin(e){return i.mixins.includes(e)||i.mixins.push(e),c},component(e,t){return t?(i.components[e]=t,c):i.components[e]},directive(e,t){return t?(i.directives[e]=t,c):i.directives[e]},mount(a,o,l){if(!s){let u=c._ceVNode||V(n,r);return u.appContext=i,l===!0?l=`svg`:l===!1&&(l=void 0),o&&t?t(u,a):e(u,a,l),s=!0,c._container=a,a.__vue_app__=c,Aa(u.component)}},onUnmount(e){o.push(e)},unmount(){s&&(gn(o,c._instance,16),e(null,c._container),delete c._container.__vue_app__)},provide(e,t){return i.provides[e]=t,c},runWithContext(e){let t=$r;$r=c;try{return e()}finally{$r=t}}};return c}}var $r=null,ei=(e,t)=>t===`modelValue`||t===`model-value`?e.modelModifiers:e[`${t}Modifiers`]||e[`${O(t)}Modifiers`]||e[`${ie(t)}Modifiers`];function ti(e,t,...n){if(e.isUnmounted)return;let r=e.vnode.props||i,a=n,o=t.startsWith(`update:`),s=o&&ei(r,t.slice(7));s&&(s.trim&&(a=n.map(e=>y(e)?e.trim():e)),s.number&&(a=n.map(le)));let c,l=r[c=k(t)]||r[c=k(O(t))];!l&&o&&(l=r[c=k(ie(t))]),l&&gn(l,e,6,a);let u=r[c+`Once`];if(u){if(!e.emitted)e.emitted={};else if(e.emitted[c])return;e.emitted[c]=!0,gn(u,e,6,a)}}var ni=new WeakMap;function ri(e,t,n=!1){let r=n?ni:t.emitsCache,i=r.get(e);if(i!==void 0)return i;let a=e.emits,o={},s=!1;if(!v(e)){let r=e=>{let n=ri(e,t,!0);n&&(s=!0,u(o,n))};!n&&t.mixins.length&&t.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}return!a&&!s?(x(e)&&r.set(e,null),null):(m(a)?a.forEach(e=>o[e]=null):u(o,a),x(e)&&r.set(e,o),o)}function ii(e,t){return!e||!c(t)?!1:(t=t.slice(2).replace(/Once$/,``),p(e,t[0].toLowerCase()+t.slice(1))||p(e,ie(t))||p(e,t))}function ai(e){let{type:t,vnode:n,proxy:r,withProxy:i,propsOptions:[a],slots:o,attrs:s,emit:c,render:u,renderCache:d,props:f,data:p,setupState:m,ctx:h,inheritAttrs:g}=e,_=Ln(e),v,y;try{if(n.shapeFlag&4){let e=i||r,t=e;v=sa(u.call(t,e,d,f,m,p,h)),y=s}else{let e=t;v=sa(e.length>1?e(f,{attrs:s,slots:o,emit:c}):e(f,null)),y=t.props?s:oi(s)}}catch(t){Ki.length=0,_n(t,e,1),v=V(Wi)}let b=v;if(y&&g!==!1){let e=Object.keys(y),{shapeFlag:t}=b;e.length&&t&7&&(a&&e.some(l)&&(y=si(y,a)),b=aa(b,y,!1,!0))}return n.dirs&&(b=aa(b,null,!1,!0),b.dirs=b.dirs?b.dirs.concat(n.dirs):n.dirs),n.transition&&$n(b,n.transition),v=b,Ln(_),v}var oi=e=>{let t;for(let n in e)(n===`class`||n===`style`||c(n))&&((t||={})[n]=e[n]);return t},si=(e,t)=>{let n={};for(let r in e)(!l(r)||!(r.slice(9)in t))&&(n[r]=e[r]);return n};function ci(e,t,n){let{props:r,children:i,component:a}=e,{props:o,children:s,patchFlag:c}=t,l=a.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return r?li(r,o,l):!!o;if(c&8){let e=t.dynamicProps;for(let t=0;t<e.length;t++){let n=e[t];if(ui(o,r,n)&&!ii(l,n))return!0}}}else return(i||s)&&(!s||!s.$stable)?!0:r===o?!1:r?o?li(r,o,l):!0:!!o;return!1}function li(e,t,n){let r=Object.keys(t);if(r.length!==Object.keys(e).length)return!0;for(let i=0;i<r.length;i++){let a=r[i];if(ui(t,e,a)&&!ii(n,a))return!0}return!1}function ui(e,t,n){let r=e[n],i=t[n];return n===`style`&&x(r)&&x(i)?!Se(r,i):r!==i}function di({vnode:e,parent:t,suspense:n},r){for(;t;){let n=t.subTree;if(n.suspense&&n.suspense.activeBranch===e&&(n.suspense.vnode.el=n.el=r,e=n),n===e)(e=t.vnode).el=r,t=t.parent;else break}n&&n.activeBranch===e&&(n.vnode.el=r)}var fi={},pi=()=>Object.create(fi),mi=e=>Object.getPrototypeOf(e)===fi;function hi(e,t,n,r=!1){let i={},a=pi();e.propsDefaults=Object.create(null),_i(e,t,i,a);for(let t in e.propsOptions[0])t in i||(i[t]=void 0);n?e.props=r?i:Ht(i):e.type.props?e.props=i:e.props=a,e.attrs=a}function gi(e,t,n,r){let{props:i,attrs:a,vnode:{patchFlag:o}}=e,s=N(i),[c]=e.propsOptions,l=!1;if((r||o>0)&&!(o&16)){if(o&8){let n=e.vnode.dynamicProps;for(let r=0;r<n.length;r++){let o=n[r];if(ii(e.emitsOptions,o))continue;let u=t[o];if(c)if(p(a,o))u!==a[o]&&(a[o]=u,l=!0);else{let t=O(o);i[t]=vi(c,s,t,u,e,!1)}else u!==a[o]&&(a[o]=u,l=!0)}}}else{_i(e,t,i,a)&&(l=!0);let r;for(let a in s)(!t||!p(t,a)&&((r=ie(a))===a||!p(t,r)))&&(c?n&&(n[a]!==void 0||n[r]!==void 0)&&(i[a]=vi(c,s,a,void 0,e,!0)):delete i[a]);if(a!==s)for(let e in a)(!t||!p(t,e))&&(delete a[e],l=!0)}l&&at(e.attrs,`set`,``)}function _i(e,t,n,r){let[a,o]=e.propsOptions,s=!1,c;if(t)for(let i in t){if(E(i))continue;let l=t[i],u;a&&p(a,u=O(i))?!o||!o.includes(u)?n[u]=l:(c||={})[u]=l:ii(e.emitsOptions,i)||(!(i in r)||l!==r[i])&&(r[i]=l,s=!0)}if(o){let t=N(n),r=c||i;for(let i=0;i<o.length;i++){let s=o[i];n[s]=vi(a,t,s,r[s],e,!p(r,s))}}return s}function vi(e,t,n,r,i,a){let o=e[n];if(o!=null){let e=p(o,`default`);if(e&&r===void 0){let e=o.default;if(o.type!==Function&&!o.skipFactory&&v(e)){let{propsDefaults:a}=i;if(n in a)r=a[n];else{let o=va(i);r=a[n]=e.call(null,t),o()}}else r=e;i.ce&&i.ce._setProp(n,r)}o[0]&&(a&&!e?r=!1:o[1]&&(r===``||r===ie(n))&&(r=!0))}return r}var yi=new WeakMap;function bi(e,t,n=!1){let r=n?yi:t.propsCache,o=r.get(e);if(o)return o;let s=e.props,c={},l=[],d=!1;if(!v(e)){let r=e=>{d=!0;let[n,r]=bi(e,t,!0);u(c,n),r&&l.push(...r)};!n&&t.mixins.length&&t.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}if(!s&&!d)return x(e)&&r.set(e,a),a;if(m(s))for(let e=0;e<s.length;e++){let t=O(s[e]);xi(t)&&(c[t]=i)}else if(s)for(let e in s){let t=O(e);if(xi(t)){let n=s[e],r=c[t]=m(n)||v(n)?{type:n}:u({},n),i=r.type,a=!1,o=!0;if(m(i))for(let e=0;e<i.length;++e){let t=i[e],n=v(t)&&t.name;if(n===`Boolean`){a=!0;break}else n===`String`&&(o=!1)}else a=v(i)&&i.name===`Boolean`;r[0]=a,r[1]=o,(a||p(r,`default`))&&l.push(t)}}let f=[c,l];return x(e)&&r.set(e,f),f}function xi(e){return e[0]!==`$`&&!E(e)}var Si=e=>e===`_`||e===`_ctx`||e===`$stable`,Ci=e=>m(e)?e.map(sa):[sa(e)],wi=(e,t,n)=>{if(t._n)return t;let r=Rn((...e)=>Ci(t(...e)),n);return r._c=!1,r},Ti=(e,t,n)=>{let r=e._ctx;for(let n in e){if(Si(n))continue;let i=e[n];if(v(i))t[n]=wi(n,i,r);else if(i!=null){let e=Ci(i);t[n]=()=>e}}},Ei=(e,t)=>{let n=Ci(t);e.slots.default=()=>n},Di=(e,t,n)=>{for(let r in t)(n||!Si(r))&&(e[r]=t[r])},Oi=(e,t,n)=>{let r=e.slots=pi();if(e.vnode.shapeFlag&32){let e=t._;e?(Di(r,t,n),n&&ce(r,`_`,e,!0)):Ti(t,r)}else t&&Ei(e,t)},ki=(e,t,n)=>{let{vnode:r,slots:a}=e,o=!0,s=i;if(r.shapeFlag&32){let e=t._;e?n&&e===1?o=!1:Di(a,t,n):(o=!t.$stable,Ti(t,a)),s=t}else t&&(Ei(e,t),s={default:1});if(o)for(let e in a)!Si(e)&&s[e]==null&&delete a[e]},Ai=Hi;function ji(e){return Mi(e)}function Mi(e,t){let n=de();n.__VUE__=!0;let{insert:r,remove:s,patchProp:c,createElement:l,createText:u,createComment:d,setText:f,setElementText:p,parentNode:m,nextSibling:h,setScopeId:g=o,insertStaticContent:_}=e,v=(e,t,n,r=null,i=null,a=null,o=void 0,s=null,c=!!t.dynamicChildren)=>{if(e===t)return;e&&!ea(e,t)&&(r=ye(e),me(e,i,a,!0),e=null),t.patchFlag===-2&&(c=!1,t.dynamicChildren=null);let{type:l,ref:u,shapeFlag:d}=t;switch(l){case Ui:y(e,t,n,r);break;case Wi:b(e,t,n,r);break;case Gi:e??x(t,n,r,o);break;case L:re(e,t,n,r,i,a,o,s,c);break;default:d&1?w(e,t,n,r,i,a,o,s,c):d&6?ie(e,t,n,r,i,a,o,s,c):(d&64||d&128)&&l.process(e,t,n,r,i,a,o,s,c,Se)}u!=null&&i?ir(u,e&&e.ref,a,t||e,!t):u==null&&e&&e.ref!=null&&ir(e.ref,null,a,e,!0)},y=(e,t,n,i)=>{if(e==null)r(t.el=u(t.children),n,i);else{let n=t.el=e.el;t.children!==e.children&&f(n,t.children)}},b=(e,t,n,i)=>{e==null?r(t.el=d(t.children||``),n,i):t.el=e.el},x=(e,t,n,r)=>{[e.el,e.anchor]=_(e.children,t,n,r,e.el,e.anchor)},S=({el:e,anchor:t},n,i)=>{let a;for(;e&&e!==t;)a=h(e),r(e,n,i),e=a;r(t,n,i)},C=({el:e,anchor:t})=>{let n;for(;e&&e!==t;)n=h(e),s(e),e=n;s(t)},w=(e,t,n,r,i,a,o,s,c)=>{if(t.type===`svg`?o=`svg`:t.type===`math`&&(o=`mathml`),e==null)ee(t,n,r,i,a,o,s,c);else{let n=e.el&&e.el._isVueCE?e.el:null;try{n&&n._beginPatch(),D(e,t,i,a,o,s,c)}finally{n&&n._endPatch()}}},ee=(e,t,n,i,a,o,s,u)=>{let d,f,{props:m,shapeFlag:h,transition:g,dirs:_}=e;if(d=e.el=l(e.type,o,m&&m.is,m),h&8?p(d,e.children):h&16&&T(e.children,d,null,i,a,Ni(e,o),s,u),_&&Bn(e,null,i,`created`),te(d,e,e.scopeId,s,i),m){for(let e in m)e!==`value`&&!E(e)&&c(d,e,null,m[e],o,i);`value`in m&&c(d,`value`,null,m.value,o),(f=m.onVnodeBeforeMount)&&da(f,i,e)}_&&Bn(e,null,i,`beforeMount`);let v=Fi(a,g);v&&g.beforeEnter(d),r(d,t,n),((f=m&&m.onVnodeMounted)||v||_)&&Ai(()=>{try{f&&da(f,i,e),v&&g.enter(d),_&&Bn(e,null,i,`mounted`)}finally{}},a)},te=(e,t,n,r,i)=>{if(n&&g(e,n),r)for(let t=0;t<r.length;t++)g(e,r[t]);if(i){let n=i.subTree;if(t===n||Vi(n.type)&&(n.ssContent===t||n.ssFallback===t)){let t=i.vnode;te(e,t,t.scopeId,t.slotScopeIds,i.parent)}}},T=(e,t,n,r,i,a,o,s,c=0)=>{for(let l=c;l<e.length;l++)v(null,e[l]=s?ca(e[l]):sa(e[l]),t,n,r,i,a,o,s)},D=(e,t,n,r,a,o,s)=>{let l=t.el=e.el,{patchFlag:u,dynamicChildren:d,dirs:f}=t;u|=e.patchFlag&16;let m=e.props||i,h=t.props||i,g;if(n&&Pi(n,!1),(g=h.onVnodeBeforeUpdate)&&da(g,n,t,e),f&&Bn(t,e,n,`beforeUpdate`),n&&Pi(n,!0),(m.innerHTML&&h.innerHTML==null||m.textContent&&h.textContent==null)&&p(l,``),d?ne(e.dynamicChildren,d,l,n,r,Ni(t,a),o):s||le(e,t,l,null,n,r,Ni(t,a),o,!1),u>0){if(u&16)O(l,m,h,n,a);else if(u&2&&m.class!==h.class&&c(l,`class`,null,h.class,a),u&4&&c(l,`style`,m.style,h.style,a),u&8){let e=t.dynamicProps;for(let t=0;t<e.length;t++){let r=e[t],i=m[r],o=h[r];(o!==i||r===`value`)&&c(l,r,i,o,a,n)}}u&1&&e.children!==t.children&&p(l,t.children)}else !s&&d==null&&O(l,m,h,n,a);((g=h.onVnodeUpdated)||f)&&Ai(()=>{g&&da(g,n,t,e),f&&Bn(t,e,n,`updated`)},r)},ne=(e,t,n,r,i,a,o)=>{for(let s=0;s<t.length;s++){let c=e[s],l=t[s];v(c,l,c.el&&(c.type===L||!ea(c,l)||c.shapeFlag&198)?m(c.el):n,null,r,i,a,o,!0)}},O=(e,t,n,r,a)=>{if(t!==n){if(t!==i)for(let i in t)!E(i)&&!(i in n)&&c(e,i,t[i],null,a,r);for(let i in n){if(E(i))continue;let o=n[i],s=t[i];o!==s&&i!==`value`&&c(e,i,s,o,a,r)}`value`in n&&c(e,`value`,t.value,n.value,a)}},re=(e,t,n,i,a,o,s,c,l)=>{let d=t.el=e?e.el:u(``),f=t.anchor=e?e.anchor:u(``),{patchFlag:p,dynamicChildren:m,slotScopeIds:h}=t;h&&(c=c?c.concat(h):h),e==null?(r(d,n,i),r(f,n,i),T(t.children||[],n,f,a,o,s,c,l)):p>0&&p&64&&m&&e.dynamicChildren&&e.dynamicChildren.length===m.length?(ne(e.dynamicChildren,m,n,a,o,s,c),(t.key!=null||a&&t===a.subTree)&&Ii(e,t,!0)):le(e,t,n,f,a,o,s,c,l)},ie=(e,t,n,r,i,a,o,s,c)=>{t.slotScopeIds=s,e==null?t.shapeFlag&512?i.ctx.activate(t,n,r,o,c):ae(t,n,r,i,a,o,c):k(e,t,c)},ae=(e,t,n,r,i,a,o)=>{let s=e.component=ma(e,r,i);if(sr(e)&&(s.ctx.renderer=Se),Sa(s,!1,o),s.asyncDep){if(i&&i.registerDep(s,oe,o),!e.el){let r=s.subTree=V(Wi);b(null,r,t,n),e.placeholder=r.el}}else oe(s,e,t,n,i,a,o)},k=(e,t,n)=>{let r=t.component=e.component;if(ci(e,t,n))if(r.asyncDep&&!r.asyncResolved){ce(r,t,n);return}else r.next=t,r.update();else t.el=e.el,r.vnode=t},oe=(e,t,n,r,i,a,o)=>{let s=()=>{if(e.isMounted){let{next:t,bu:n,u:r,parent:s,vnode:c}=e;{let n=Ri(e);if(n){t&&(t.el=c.el,ce(e,t,o)),n.asyncDep.then(()=>{Ai(()=>{e.isUnmounted||l()},i)});return}}let u=t,d;Pi(e,!1),t?(t.el=c.el,ce(e,t,o)):t=c,n&&se(n),(d=t.props&&t.props.onVnodeBeforeUpdate)&&da(d,s,t,c),Pi(e,!0);let f=ai(e),p=e.subTree;e.subTree=f,v(p,f,m(p.el),ye(p),e,i,a),t.el=f.el,u===null&&di(e,f.el),r&&Ai(r,i),(d=t.props&&t.props.onVnodeUpdated)&&Ai(()=>da(d,s,t,c),i)}else{let o,{el:s,props:c}=t,{bm:l,m:u,parent:d,root:f,type:p}=e,m=or(t);if(Pi(e,!1),l&&se(l),!m&&(o=c&&c.onVnodeBeforeMount)&&da(o,d,t),Pi(e,!0),s&&we){let t=()=>{e.subTree=ai(e),we(s,e.subTree,e,i,null)};m&&p.__asyncHydrate?p.__asyncHydrate(s,e,t):t()}else{f.ce&&f.ce._hasShadowRoot()&&f.ce._injectChildStyle(p,e.parent?e.parent.type:void 0);let o=e.subTree=ai(e);v(null,o,n,r,e,i,a),t.el=o.el}if(u&&Ai(u,i),!m&&(o=c&&c.onVnodeMounted)){let e=t;Ai(()=>da(o,d,e),i)}(t.shapeFlag&256||d&&or(d.vnode)&&d.vnode.shapeFlag&256)&&e.a&&Ai(e.a,i),e.isMounted=!0,t=n=r=null}};e.scope.on();let c=e.effect=new Me(s);e.scope.off();let l=e.update=c.run.bind(c),u=e.job=c.runIfDirty.bind(c);u.i=e,u.id=e.uid,c.scheduler=()=>On(u),Pi(e,!0),l()},ce=(e,t,n)=>{t.component=e;let r=e.vnode.props;e.vnode=t,e.next=null,gi(e,t.props,r,n),ki(e,t.children,n),qe(),jn(e),Je()},le=(e,t,n,r,i,a,o,s,c=!1)=>{let l=e&&e.children,u=e?e.shapeFlag:0,d=t.children,{patchFlag:f,shapeFlag:m}=t;if(f>0){if(f&128){fe(l,d,n,r,i,a,o,s,c);return}else if(f&256){ue(l,d,n,r,i,a,o,s,c);return}}m&8?(u&16&&ve(l,i,a),d!==l&&p(n,d)):u&16?m&16?fe(l,d,n,r,i,a,o,s,c):ve(l,i,a,!0):(u&8&&p(n,``),m&16&&T(d,n,r,i,a,o,s,c))},ue=(e,t,n,r,i,o,s,c,l)=>{e||=a,t||=a;let u=e.length,d=t.length,f=Math.min(u,d),p;for(p=0;p<f;p++){let r=t[p]=l?ca(t[p]):sa(t[p]);v(e[p],r,n,null,i,o,s,c,l)}u>d?ve(e,i,o,!0,!1,f):T(t,n,r,i,o,s,c,l,f)},fe=(e,t,n,r,i,o,s,c,l)=>{let u=0,d=t.length,f=e.length-1,p=d-1;for(;u<=f&&u<=p;){let r=e[u],a=t[u]=l?ca(t[u]):sa(t[u]);if(ea(r,a))v(r,a,n,null,i,o,s,c,l);else break;u++}for(;u<=f&&u<=p;){let r=e[f],a=t[p]=l?ca(t[p]):sa(t[p]);if(ea(r,a))v(r,a,n,null,i,o,s,c,l);else break;f--,p--}if(u>f){if(u<=p){let e=p+1,a=e<d?t[e].el:r;for(;u<=p;)v(null,t[u]=l?ca(t[u]):sa(t[u]),n,a,i,o,s,c,l),u++}}else if(u>p)for(;u<=f;)me(e[u],i,o,!0),u++;else{let m=u,h=u,g=new Map;for(u=h;u<=p;u++){let e=t[u]=l?ca(t[u]):sa(t[u]);e.key!=null&&g.set(e.key,u)}let _,y=0,b=p-h+1,x=!1,S=0,C=Array(b);for(u=0;u<b;u++)C[u]=0;for(u=m;u<=f;u++){let r=e[u];if(y>=b){me(r,i,o,!0);continue}let a;if(r.key!=null)a=g.get(r.key);else for(_=h;_<=p;_++)if(C[_-h]===0&&ea(r,t[_])){a=_;break}a===void 0?me(r,i,o,!0):(C[a-h]=u+1,a>=S?S=a:x=!0,v(r,t[a],n,null,i,o,s,c,l),y++)}let w=x?Li(C):a;for(_=w.length-1,u=b-1;u>=0;u--){let e=h+u,a=t[e],f=t[e+1],p=e+1<d?f.el||Bi(f):r;C[u]===0?v(null,a,n,p,i,o,s,c,l):x&&(_<0||u!==w[_]?pe(a,n,p,2):_--)}}},pe=(e,t,n,i,a=null)=>{let{el:o,type:c,transition:l,children:u,shapeFlag:d}=e;if(d&6){pe(e.component.subTree,t,n,i);return}if(d&128){e.suspense.move(t,n,i);return}if(d&64){c.move(e,t,n,Se);return}if(c===L){r(o,t,n);for(let e=0;e<u.length;e++)pe(u[e],t,n,i);r(e.anchor,t,n);return}if(c===Gi){S(e,t,n);return}if(i!==2&&d&1&&l)if(i===0)l.beforeEnter(o),r(o,t,n),Ai(()=>l.enter(o),a);else{let{leave:i,delayLeave:a,afterLeave:c}=l,u=()=>{e.ctx.isUnmounted?s(o):r(o,t,n)},d=()=>{o._isLeaving&&o[Qn](!0),i(o,()=>{u(),c&&c()})};a?a(o,u,d):d()}else r(o,t,n)},me=(e,t,n,r=!1,i=!1)=>{let{type:a,props:o,ref:s,children:c,dynamicChildren:l,shapeFlag:u,patchFlag:d,dirs:f,cacheIndex:p,memo:m}=e;if(d===-2&&(i=!1),s!=null&&(qe(),ir(s,null,n,e,!0),Je()),p!=null&&(t.renderCache[p]=void 0),u&256){t.ctx.deactivate(e);return}let h=u&1&&f,g=!or(e),_;if(g&&(_=o&&o.onVnodeBeforeUnmount)&&da(_,t,e),u&6)_e(e.component,n,r);else{if(u&128){e.suspense.unmount(n,r);return}h&&Bn(e,null,t,`beforeUnmount`),u&64?e.type.remove(e,t,n,Se,r):l&&!l.hasOnce&&(a!==L||d>0&&d&64)?ve(l,t,n,!1,!0):(a===L&&d&384||!i&&u&16)&&ve(c,t,n),r&&he(e)}let v=m!=null&&p==null;(g&&(_=o&&o.onVnodeUnmounted)||h||v)&&Ai(()=>{_&&da(_,t,e),h&&Bn(e,null,t,`unmounted`),v&&(e.el=null)},n)},he=e=>{let{type:t,el:n,anchor:r,transition:i}=e;if(t===L){ge(n,r);return}if(t===Gi){C(e);return}let a=()=>{s(n),i&&!i.persisted&&i.afterLeave&&i.afterLeave()};if(e.shapeFlag&1&&i&&!i.persisted){let{leave:t,delayLeave:r}=i,o=()=>t(n,a);r?r(e.el,a,o):o()}else a()},ge=(e,t)=>{let n;for(;e!==t;)n=h(e),s(e),e=n;s(t)},_e=(e,t,n)=>{let{bum:r,scope:i,job:a,subTree:o,um:s,m:c,a:l}=e;zi(c),zi(l),r&&se(r),i.stop(),a&&(a.flags|=8,me(o,e,t,n)),s&&Ai(s,t),Ai(()=>{e.isUnmounted=!0},t)},ve=(e,t,n,r=!1,i=!1,a=0)=>{for(let o=a;o<e.length;o++)me(e[o],t,n,r,i)},ye=e=>{if(e.shapeFlag&6)return ye(e.component.subTree);if(e.shapeFlag&128)return e.suspense.next();let t=h(e.anchor||e.el),n=t&&t[Xn];return n?h(n):t},be=!1,xe=(e,t,n)=>{let r;e==null?t._vnode&&(me(t._vnode,null,null,!0),r=t._vnode.component):v(t._vnode||null,e,t,null,null,null,n),t._vnode=e,be||=(be=!0,jn(r),Mn(),!1)},Se={p:v,um:me,m:pe,r:he,mt:ae,mc:T,pc:le,pbc:ne,n:ye,o:e},Ce,we;return t&&([Ce,we]=t(Se)),{render:xe,hydrate:Ce,createApp:Qr(xe,Ce)}}function Ni({type:e,props:t},n){return n===`svg`&&e===`foreignObject`||n===`mathml`&&e===`annotation-xml`&&t&&t.encoding&&t.encoding.includes(`html`)?void 0:n}function Pi({effect:e,job:t},n){n?(e.flags|=32,t.flags|=4):(e.flags&=-33,t.flags&=-5)}function Fi(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function Ii(e,t,n=!1){let r=e.children,i=t.children;if(m(r)&&m(i))for(let e=0;e<r.length;e++){let t=r[e],a=i[e];a.shapeFlag&1&&!a.dynamicChildren&&((a.patchFlag<=0||a.patchFlag===32)&&(a=i[e]=ca(i[e]),a.el=t.el),!n&&a.patchFlag!==-2&&Ii(t,a)),a.type===Ui&&(a.patchFlag===-1&&(a=i[e]=ca(a)),a.el=t.el),a.type===Wi&&!a.el&&(a.el=t.el)}}function Li(e){let t=e.slice(),n=[0],r,i,a,o,s,c=e.length;for(r=0;r<c;r++){let c=e[r];if(c!==0){if(i=n[n.length-1],e[i]<c){t[r]=i,n.push(r);continue}for(a=0,o=n.length-1;a<o;)s=a+o>>1,e[n[s]]<c?a=s+1:o=s;c<e[n[a]]&&(a>0&&(t[r]=n[a-1]),n[a]=r)}}for(a=n.length,o=n[a-1];a-- >0;)n[a]=o,o=t[o];return n}function Ri(e){let t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:Ri(t)}function zi(e){if(e)for(let t=0;t<e.length;t++)e[t].flags|=8}function Bi(e){if(e.placeholder)return e.placeholder;let t=e.component;return t?Bi(t.subTree):null}var Vi=e=>e.__isSuspense;function Hi(e,t){t&&t.pendingBranch?m(e)?t.effects.push(...e):t.effects.push(e):An(e)}var L=Symbol.for(`v-fgt`),Ui=Symbol.for(`v-txt`),Wi=Symbol.for(`v-cmt`),Gi=Symbol.for(`v-stc`),Ki=[],qi=null;function R(e=!1){Ki.push(qi=e?null:[])}function Ji(){Ki.pop(),qi=Ki[Ki.length-1]||null}var Yi=1;function Xi(e,t=!1){Yi+=e,e<0&&qi&&t&&(qi.hasOnce=!0)}function Zi(e){return e.dynamicChildren=Yi>0?qi||a:null,Ji(),Yi>0&&qi&&qi.push(e),e}function z(e,t,n,r,i,a){return Zi(B(e,t,n,r,i,a,!0))}function Qi(e,t,n,r,i){return Zi(V(e,t,n,r,i,!0))}function $i(e){return e?e.__v_isVNode===!0:!1}function ea(e,t){return e.type===t.type&&e.key===t.key}var ta=({key:e})=>e??null,na=({ref:e,ref_key:t,ref_for:n})=>(typeof e==`number`&&(e=``+e),e==null?null:y(e)||P(e)||v(e)?{i:Fn,r:e,k:t,f:!!n}:e);function B(e,t=null,n=null,r=0,i=null,a=e===L?0:1,o=!1,s=!1){let c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&ta(t),ref:t&&na(t),scopeId:In,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:a,patchFlag:r,dynamicProps:i,dynamicChildren:null,appContext:null,ctx:Fn};return s?(la(c,n),a&128&&e.normalize(c)):n&&(c.shapeFlag|=y(n)?8:16),Yi>0&&!o&&qi&&(c.patchFlag>0||a&6)&&c.patchFlag!==32&&qi.push(c),c}var V=ra;function ra(e,t=null,n=null,r=0,i=null,a=!1){if((!e||e===Er)&&(e=Wi),$i(e)){let r=aa(e,t,!0);return n&&la(r,n),Yi>0&&!a&&qi&&(r.shapeFlag&6?qi[qi.indexOf(e)]=r:qi.push(r)),r.patchFlag=-2,r}if(Ma(e)&&(e=e.__vccOpts),t){t=ia(t);let{class:e,style:n}=t;e&&!y(e)&&(t.class=_e(e)),x(n)&&(Jt(n)&&!m(n)&&(n=u({},n)),t.style=fe(n))}let o=y(e)?1:Vi(e)?128:Zn(e)?64:x(e)?4:v(e)?2:0;return B(e,t,n,r,i,o,a,!0)}function ia(e){return e?Jt(e)||mi(e)?u({},e):e:null}function aa(e,t,n=!1,r=!1){let{props:i,ref:a,patchFlag:o,children:s,transition:c}=e,l=t?ua(i||{},t):i,u={__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&ta(l),ref:t&&t.ref?n&&a?m(a)?a.concat(na(t)):[a,na(t)]:na(t):a,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:s,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==L?o===-1?16:o|16:o,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:c,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&aa(e.ssContent),ssFallback:e.ssFallback&&aa(e.ssFallback),placeholder:e.placeholder,el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return c&&r&&$n(u,c.clone(u)),u}function H(e=` `,t=0){return V(Ui,null,e,t)}function oa(e,t){let n=V(Gi,null,e);return n.staticCount=t,n}function U(e=``,t=!1){return t?(R(),Qi(Wi,null,e)):V(Wi,null,e)}function sa(e){return e==null||typeof e==`boolean`?V(Wi):m(e)?V(L,null,e.slice()):$i(e)?ca(e):V(Ui,null,String(e))}function ca(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:aa(e)}function la(e,t){let n=0,{shapeFlag:r}=e;if(t==null)t=null;else if(m(t))n=16;else if(typeof t==`object`)if(r&65){let n=t.default;n&&(n._c&&(n._d=!1),la(e,n()),n._c&&(n._d=!0));return}else{n=32;let r=t._;!r&&!mi(t)?t._ctx=Fn:r===3&&Fn&&(Fn.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else v(t)?(t={default:t,_ctx:Fn},n=32):(t=String(t),r&64?(n=16,t=[H(t)]):n=8);e.children=t,e.shapeFlag|=n}function ua(...e){let t={};for(let n=0;n<e.length;n++){let r=e[n];for(let e in r)if(e===`class`)t.class!==r.class&&(t.class=_e([t.class,r.class]));else if(e===`style`)t.style=fe([t.style,r.style]);else if(c(e)){let n=t[e],i=r[e];i&&n!==i&&!(m(n)&&n.includes(i))?t[e]=n?[].concat(n,i):i:i==null&&n==null&&!l(e)&&(t[e]=i)}else e!==``&&(t[e]=r[e])}return t}function da(e,t,n,r=null){gn(e,t,7,[n,r])}var fa=Xr(),pa=0;function ma(e,t,n){let r=e.type,a=(t?t.appContext:e.appContext)||fa,o={uid:pa++,vnode:e,type:r,parent:t,appContext:a,root:null,next:null,subTree:null,effect:null,update:null,job:null,scope:new De(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(a.provides),ids:t?t.ids:[``,0,0],accessCache:null,renderCache:[],components:null,directives:null,propsOptions:bi(r,a),emitsOptions:ri(r,a),emit:null,emitted:null,propsDefaults:i,inheritAttrs:r.inheritAttrs,ctx:i,data:i,props:i,attrs:i,slots:i,refs:i,setupState:i,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return o.ctx={_:o},o.root=t?t.root:o,o.emit=ti.bind(null,o),e.ce&&e.ce(o),o}var W=null,ha=()=>W||Fn,ga,_a;{let e=de(),t=(t,n)=>{let r;return(r=e[t])||(r=e[t]=[]),r.push(n),e=>{r.length>1?r.forEach(t=>t(e)):r[0](e)}};ga=t(`__VUE_INSTANCE_SETTERS__`,e=>W=e),_a=t(`__VUE_SSR_SETTERS__`,e=>xa=e)}var va=e=>{let t=W;return ga(e),e.scope.on(),()=>{e.scope.off(),ga(t)}},ya=()=>{W&&W.scope.off(),ga(null)};function ba(e){return e.vnode.shapeFlag&4}var xa=!1;function Sa(e,t=!1,n=!1){t&&_a(t);let{props:r,children:i}=e.vnode,a=ba(e);hi(e,r,a,t),Oi(e,i,n||t);let o=a?Ca(e,t):void 0;return t&&_a(!1),o}function Ca(e,t){let n=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,Nr);let{setup:r}=n;if(r){qe();let n=e.setupContext=r.length>1?ka(e):null,i=va(e),a=hn(r,e,0,[e.props,n]),o=S(a);if(Je(),i(),(o||e.sp)&&!or(e)&&tr(e),o){if(a.then(ya,ya),t)return a.then(n=>{wa(e,n,t)}).catch(t=>{_n(t,e,0)});e.asyncDep=a}else wa(e,a,t)}else Da(e,t)}function wa(e,t,n){v(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:x(t)&&(e.setupState=nn(t)),Da(e,n)}var Ta,Ea;function Da(e,t,n){let r=e.type;if(!e.render){if(!t&&Ta&&!r.render){let t=r.template||Br(e).template;if(t){let{isCustomElement:n,compilerOptions:i}=e.appContext.config,{delimiters:a,compilerOptions:o}=r;r.render=Ta(t,u(u({isCustomElement:n,delimiters:a},i),o))}}e.render=r.render||o,Ea&&Ea(e)}{let t=va(e);qe();try{Ir(e)}finally{Je(),t()}}}var Oa={get(e,t){return it(e,`get`,``),e[t]}};function ka(e){return{attrs:new Proxy(e.attrs,Oa),slots:e.slots,emit:e.emit,expose:t=>{e.exposed=t||{}}}}function Aa(e){return e.exposed?e.exposeProxy||=new Proxy(nn(Yt(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in jr)return jr[n](e)},has(e,t){return t in e||t in jr}}):e.proxy}function ja(e,t=!0){return v(e)?e.displayName||e.name:e.name||t&&e.__name}function Ma(e){return v(e)&&`__vccOpts`in e}var G=(e,t)=>cn(e,t,xa);function Na(e,t,n){try{Xi(-1);let r=arguments.length;return r===2?x(t)&&!m(t)?$i(t)?V(e,null,[t]):V(e,t):V(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):r===3&&$i(n)&&(n=[n]),V(e,t,n))}finally{Xi(1)}}var Pa=`3.5.34`,Fa=void 0,Ia=typeof window<`u`&&window.trustedTypes;if(Ia)try{Fa=Ia.createPolicy(`vue`,{createHTML:e=>e})}catch{}var La=Fa?e=>Fa.createHTML(e):e=>e,Ra=`http://www.w3.org/2000/svg`,za=`http://www.w3.org/1998/Math/MathML`,Ba=typeof document<`u`?document:null,Va=Ba&&Ba.createElement(`template`),Ha={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{let t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{let i=t===`svg`?Ba.createElementNS(Ra,e):t===`mathml`?Ba.createElementNS(za,e):n?Ba.createElement(e,{is:n}):Ba.createElement(e);return e===`select`&&r&&r.multiple!=null&&i.setAttribute(`multiple`,r.multiple),i},createText:e=>Ba.createTextNode(e),createComment:e=>Ba.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Ba.querySelector(e),setScopeId(e,t){e.setAttribute(t,``)},insertStaticContent(e,t,n,r,i,a){let o=n?n.previousSibling:t.lastChild;if(i&&(i===a||i.nextSibling))for(;t.insertBefore(i.cloneNode(!0),n),!(i===a||!(i=i.nextSibling)););else{Va.innerHTML=La(r===`svg`?`<svg>${e}</svg>`:r===`mathml`?`<math>${e}</math>`:e);let i=Va.content;if(r===`svg`||r===`mathml`){let e=i.firstChild;for(;e.firstChild;)i.appendChild(e.firstChild);i.removeChild(e)}t.insertBefore(i,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ua=Symbol(`_vtc`);function Wa(e,t,n){let r=e[Ua];r&&(t=(t?[t,...r]:[...r]).join(` `)),t==null?e.removeAttribute(`class`):n?e.setAttribute(`class`,t):e.className=t}var Ga=Symbol(`_vod`),Ka=Symbol(`_vsh`),qa=Symbol(``),Ja=/(?:^|;)\s*display\s*:/;function Ya(e,t,n){let r=e.style,i=y(n),a=!1;if(n&&!i){if(t)if(y(t))for(let e of t.split(`;`)){let t=e.slice(0,e.indexOf(`:`)).trim();n[t]??Za(r,t,``)}else for(let e in t)n[e]??Za(r,e,``);for(let i in n){i===`display`&&(a=!0);let o=n[i];o==null?Za(r,i,``):to(e,i,!y(t)&&t?t[i]:void 0,o)||Za(r,i,o)}}else if(i){if(t!==n){let e=r[qa];e&&(n+=`;`+e),r.cssText=n,a=Ja.test(n)}}else t&&e.removeAttribute(`style`);Ga in e&&(e[Ga]=a?r.display:``,e[Ka]&&(r.display=`none`))}var Xa=/\s*!important$/;function Za(e,t,n){if(m(n))n.forEach(n=>Za(e,t,n));else if(n??=``,t.startsWith(`--`))e.setProperty(t,n);else{let r=eo(e,t);Xa.test(n)?e.setProperty(ie(r),n.replace(Xa,``),`important`):e[r]=n}}var Qa=[`Webkit`,`Moz`,`ms`],$a={};function eo(e,t){let n=$a[t];if(n)return n;let r=O(t);if(r!==`filter`&&r in e)return $a[t]=r;r=ae(r);for(let n=0;n<Qa.length;n++){let i=Qa[n]+r;if(i in e)return $a[t]=i}return t}function to(e,t,n,r){return e.tagName===`TEXTAREA`&&(t===`width`||t===`height`)&&y(r)&&n===r}var no=`http://www.w3.org/1999/xlink`;function ro(e,t,n,r,i,a=ye(t)){r&&t.startsWith(`xlink:`)?n==null?e.removeAttributeNS(no,t.slice(6,t.length)):e.setAttributeNS(no,t,n):n==null||a&&!be(n)?e.removeAttribute(t):e.setAttribute(t,a?``:b(n)?String(n):n)}function io(e,t,n,r,i){if(t===`innerHTML`||t===`textContent`){n!=null&&(e[t]=t===`innerHTML`?La(n):n);return}let a=e.tagName;if(t===`value`&&a!==`PROGRESS`&&!a.includes(`-`)){let r=a===`OPTION`?e.getAttribute(`value`)||``:e.value,i=n==null?e.type===`checkbox`?`on`:``:String(n);(r!==i||!(`_value`in e))&&(e.value=i),n??e.removeAttribute(t),e._value=n;return}let o=!1;if(n===``||n==null){let r=typeof e[t];r===`boolean`?n=be(n):n==null&&r===`string`?(n=``,o=!0):r===`number`&&(n=0,o=!0)}try{e[t]=n}catch{}o&&e.removeAttribute(i||t)}function ao(e,t,n,r){e.addEventListener(t,n,r)}function oo(e,t,n,r){e.removeEventListener(t,n,r)}var so=Symbol(`_vei`);function co(e,t,n,r,i=null){let a=e[so]||(e[so]={}),o=a[t];if(r&&o)o.value=r;else{let[n,s]=uo(t);r?ao(e,n,a[t]=ho(r,i),s):o&&(oo(e,n,o,s),a[t]=void 0)}}var lo=/(?:Once|Passive|Capture)$/;function uo(e){let t;if(lo.test(e)){t={};let n;for(;n=e.match(lo);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[e[2]===`:`?e.slice(3):ie(e.slice(2)),t]}var fo=0,po=Promise.resolve(),mo=()=>fo||=(po.then(()=>fo=0),Date.now());function ho(e,t){let n=e=>{if(!e._vts)e._vts=Date.now();else if(e._vts<=n.attached)return;gn(go(e,n.value),t,5,[e])};return n.value=e,n.attached=mo(),n}function go(e,t){if(m(t)){let n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(e=>t=>!t._stopped&&e&&e(t))}else return t}var _o=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,vo=(e,t,n,r,i,a)=>{let o=i===`svg`;t===`class`?Wa(e,r,o):t===`style`?Ya(e,n,r):c(t)?l(t)||co(e,t,n,r,a):(t[0]===`.`?(t=t.slice(1),!0):t[0]===`^`?(t=t.slice(1),!1):yo(e,t,r,o))?(io(e,t,r),!e.tagName.includes(`-`)&&(t===`value`||t===`checked`||t===`selected`)&&ro(e,t,r,o,a,t!==`value`)):e._isVueCE&&(bo(e,t)||e._def.__asyncLoader&&(/[A-Z]/.test(t)||!y(r)))?io(e,O(t),r,a,t):(t===`true-value`?e._trueValue=r:t===`false-value`&&(e._falseValue=r),ro(e,t,r,o))};function yo(e,t,n,r){if(r)return!!(t===`innerHTML`||t===`textContent`||t in e&&_o(t)&&v(n));if(t===`spellcheck`||t===`draggable`||t===`translate`||t===`autocorrect`||t===`sandbox`&&e.tagName===`IFRAME`||t===`form`||t===`list`&&e.tagName===`INPUT`||t===`type`&&e.tagName===`TEXTAREA`)return!1;if(t===`width`||t===`height`){let t=e.tagName;if(t===`IMG`||t===`VIDEO`||t===`CANVAS`||t===`SOURCE`)return!1}return _o(t)&&y(n)?!1:t in e}function bo(e,t){let n=e._def.props;if(!n)return!1;let r=O(t);return Array.isArray(n)?n.some(e=>O(e)===r):Object.keys(n).some(e=>O(e)===r)}var xo=e=>{let t=e.props[`onUpdate:modelValue`]||!1;return m(t)?e=>se(t,e):t};function So(e){e.target.composing=!0}function Co(e){let t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event(`input`)))}var wo=Symbol(`_assign`);function To(e,t,n){return t&&(e=e.trim()),n&&(e=le(e)),e}var Eo={created(e,{modifiers:{lazy:t,trim:n,number:r}},i){e[wo]=xo(i);let a=r||i.props&&i.props.type===`number`;ao(e,t?`change`:`input`,t=>{t.target.composing||e[wo](To(e.value,n,a))}),(n||a)&&ao(e,`change`,()=>{e.value=To(e.value,n,a)}),t||(ao(e,`compositionstart`,So),ao(e,`compositionend`,Co),ao(e,`change`,Co))},mounted(e,{value:t}){e.value=t??``},beforeUpdate(e,{value:t,oldValue:n,modifiers:{lazy:r,trim:i,number:a}},o){if(e[wo]=xo(o),e.composing)return;let s=(a||e.type===`number`)&&!/^0\d/.test(e.value)?le(e.value):e.value,c=t??``;if(s===c)return;let l=e.getRootNode();(l instanceof Document||l instanceof ShadowRoot)&&l.activeElement===e&&e.type!==`range`&&(r&&t===n||i&&e.value.trim()===c)||(e.value=c)}},Do={deep:!0,created(e,t,n){e[wo]=xo(n),ao(e,`change`,()=>{let t=e._modelValue,n=Mo(e),r=e.checked,i=e[wo];if(m(t)){let e=Ce(t,n),a=e!==-1;if(r&&!a)i(t.concat(n));else if(!r&&a){let n=[...t];n.splice(e,1),i(n)}}else if(g(t)){let e=new Set(t);r?e.add(n):e.delete(n),i(e)}else i(No(e,r))})},mounted:Oo,beforeUpdate(e,t,n){e[wo]=xo(n),Oo(e,t,n)}};function Oo(e,{value:t,oldValue:n},r){e._modelValue=t;let i;if(m(t))i=Ce(t,r.props.value)>-1;else if(g(t))i=t.has(r.props.value);else{if(t===n)return;i=Se(t,No(e,!0))}e.checked!==i&&(e.checked=i)}var ko={created(e,{value:t},n){e.checked=Se(t,n.props.value),e[wo]=xo(n),ao(e,`change`,()=>{e[wo](Mo(e))})},beforeUpdate(e,{value:t,oldValue:n},r){e[wo]=xo(r),t!==n&&(e.checked=Se(t,r.props.value))}},Ao={deep:!0,created(e,{value:t,modifiers:{number:n}},r){let i=g(t);ao(e,`change`,()=>{let t=Array.prototype.filter.call(e.options,e=>e.selected).map(e=>n?le(Mo(e)):Mo(e));e[wo](e.multiple?i?new Set(t):t:t[0]),e._assigning=!0,En(()=>{e._assigning=!1})}),e[wo]=xo(r)},mounted(e,{value:t}){jo(e,t)},beforeUpdate(e,t,n){e[wo]=xo(n)},updated(e,{value:t}){e._assigning||jo(e,t)}};function jo(e,t){let n=e.multiple,r=m(t);if(!(n&&!r&&!g(t))){for(let i=0,a=e.options.length;i<a;i++){let a=e.options[i],o=Mo(a);if(n)if(r){let e=typeof o;e===`string`||e===`number`?a.selected=t.some(e=>String(e)===String(o)):a.selected=Ce(t,o)>-1}else a.selected=t.has(o);else if(Se(Mo(a),t)){e.selectedIndex!==i&&(e.selectedIndex=i);return}}!n&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function Mo(e){return`_value`in e?e._value:e.value}function No(e,t){let n=t?`_trueValue`:`_falseValue`;return n in e?e[n]:t}var Po={created(e,t,n){Io(e,t,n,null,`created`)},mounted(e,t,n){Io(e,t,n,null,`mounted`)},beforeUpdate(e,t,n,r){Io(e,t,n,r,`beforeUpdate`)},updated(e,t,n,r){Io(e,t,n,r,`updated`)}};function Fo(e,t){switch(e){case`SELECT`:return Ao;case`TEXTAREA`:return Eo;default:switch(t){case`checkbox`:return Do;case`radio`:return ko;default:return Eo}}}function Io(e,t,n,r,i){let a=Fo(e.tagName,n.props&&n.props.type)[i];a&&a(e,t,n,r)}var Lo=[`ctrl`,`shift`,`alt`,`meta`],Ro={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>`button`in e&&e.button!==0,middle:e=>`button`in e&&e.button!==1,right:e=>`button`in e&&e.button!==2,exact:(e,t)=>Lo.some(n=>e[`${n}Key`]&&!t.includes(n))},zo=(e,t)=>{if(!e)return e;let n=e._withMods||={},r=t.join(`.`);return n[r]||(n[r]=((n,...r)=>{for(let e=0;e<t.length;e++){let r=Ro[t[e]];if(r&&r(n,t))return}return e(n,...r)}))},Bo={esc:`escape`,space:` `,up:`arrow-up`,left:`arrow-left`,right:`arrow-right`,down:`arrow-down`,delete:`backspace`},Vo=(e,t)=>{let n=e._withKeys||={},r=t.join(`.`);return n[r]||(n[r]=(n=>{if(!(`key`in n))return;let r=ie(n.key);if(t.some(e=>e===r||Bo[e]===r))return e(n)}))},Ho=u({patchProp:vo},Ha),Uo;function Wo(){return Uo||=ji(Ho)}var Go=((...e)=>{let t=Wo().createApp(...e),{mount:n}=t;return t.mount=e=>{let r=qo(e);if(!r)return;let i=t._component;!v(i)&&!i.render&&!i.template&&(i.template=r.innerHTML),r.nodeType===1&&(r.textContent=``);let a=n(r,!1,Ko(r));return r instanceof Element&&(r.removeAttribute(`v-cloak`),r.setAttribute(`data-v-app`,``)),a},t});function Ko(e){if(e instanceof SVGElement)return`svg`;if(typeof MathMLElement==`function`&&e instanceof MathMLElement)return`mathml`}function qo(e){return y(e)?document.querySelector(e):e}var Jo=typeof window<`u`,Yo,Xo=e=>Yo=e,Zo=Symbol();function Qo(e){return e&&typeof e==`object`&&Object.prototype.toString.call(e)===`[object Object]`&&typeof e.toJSON!=`function`}var $o;(function(e){e.direct=`direct`,e.patchObject=`patch object`,e.patchFunction=`patch function`})($o||={});var es=typeof window==`object`&&window.window===window?window:typeof self==`object`&&self.self===self?self:typeof global==`object`&&global.global===global?global:typeof globalThis==`object`?globalThis:{HTMLElement:null};function ts(e,{autoBom:t=!1}={}){return t&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)?new Blob([``,e],{type:e.type}):e}function ns(e,t,n){let r=new XMLHttpRequest;r.open(`GET`,e),r.responseType=`blob`,r.onload=function(){ss(r.response,t,n)},r.onerror=function(){console.error(`could not download file`)},r.send()}function rs(e){let t=new XMLHttpRequest;t.open(`HEAD`,e,!1);try{t.send()}catch{}return t.status>=200&&t.status<=299}function is(e){try{e.dispatchEvent(new MouseEvent(`click`))}catch{let t=new MouseEvent(`click`,{bubbles:!0,cancelable:!0,view:window,detail:0,screenX:80,screenY:20,clientX:80,clientY:20,ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1,button:0,relatedTarget:null});e.dispatchEvent(t)}}var as=typeof navigator==`object`?navigator:{userAgent:``},os=/Macintosh/.test(as.userAgent)&&/AppleWebKit/.test(as.userAgent)&&!/Safari/.test(as.userAgent),ss=Jo?typeof HTMLAnchorElement<`u`&&`download`in HTMLAnchorElement.prototype&&!os?cs:`msSaveOrOpenBlob`in as?ls:us:()=>{};function cs(e,t=`download`,n){let r=document.createElement(`a`);r.download=t,r.rel=`noopener`,typeof e==`string`?(r.href=e,r.origin===location.origin?is(r):rs(r.href)?ns(e,t,n):(r.target=`_blank`,is(r))):(r.href=URL.createObjectURL(e),setTimeout(function(){URL.revokeObjectURL(r.href)},4e4),setTimeout(function(){is(r)},0))}function ls(e,t=`download`,n){if(typeof e==`string`)if(rs(e))ns(e,t,n);else{let t=document.createElement(`a`);t.href=e,t.target=`_blank`,setTimeout(function(){is(t)})}else navigator.msSaveOrOpenBlob(ts(e,n),t)}function us(e,t,n,r){if(r||=open(``,`_blank`),r&&(r.document.title=r.document.body.innerText=`downloading...`),typeof e==`string`)return ns(e,t,n);let i=e.type===`application/octet-stream`,a=/constructor/i.test(String(es.HTMLElement))||`safari`in es,o=/CriOS\/[\d]+/.test(navigator.userAgent);if((o||i&&a||os)&&typeof FileReader<`u`){let t=new FileReader;t.onloadend=function(){let e=t.result;if(typeof e!=`string`)throw r=null,Error(`Wrong reader.result type`);e=o?e:e.replace(/^data:[^;]*;/,`data:attachment/file;`),r?r.location.href=e:location.assign(e),r=null},t.readAsDataURL(e)}else{let t=URL.createObjectURL(e);r?r.location.assign(t):location.href=t,r=null,setTimeout(function(){URL.revokeObjectURL(t)},4e4)}}var{assign:ds}=Object;function fs(){let e=Oe(!0),t=e.run(()=>F({})),n=[],r=[],i=Yt({install(e){Xo(i),i._a=e,e.provide(Zo,i),e.config.globalProperties.$pinia=i,r.forEach(e=>n.push(e)),r=[]},use(e){return this._a?n.push(e):r.push(e),this},_p:n,_a:null,_e:e,_s:new Map,state:t});return i}var ps=()=>{};function ms(e,t,n,r=ps){e.add(t);let i=()=>{e.delete(t)&&r()};return!n&&ke()&&Ae(i),i}function hs(e,...t){e.forEach(e=>{e(...t)})}var gs=e=>e(),_s=Symbol(),vs=Symbol();function ys(e,t){e instanceof Map&&t instanceof Map?t.forEach((t,n)=>e.set(n,t)):e instanceof Set&&t instanceof Set&&t.forEach(e.add,e);for(let n in t){if(!t.hasOwnProperty(n))continue;let r=t[n],i=e[n];Qo(i)&&Qo(r)&&e.hasOwnProperty(n)&&!P(r)&&!Gt(r)?e[n]=ys(i,r):e[n]=r}return e}var bs=Symbol();function xs(e){return!Qo(e)||!Object.prototype.hasOwnProperty.call(e,bs)}var{assign:Ss}=Object;function Cs(e){return!!(P(e)&&e.effect)}function ws(e,t,n,r){let{state:i,actions:a,getters:o}=t,s=n.state.value[e],c;function l(){return s||(n.state.value[e]=i?i():{}),Ss(rn(n.state.value[e]),a,Object.keys(o||{}).reduce((t,r)=>(t[r]=Yt(G(()=>{Xo(n);let t=n._s.get(e);return o[r].call(t,t)})),t),{}))}return c=Ts(e,l,t,n,r,!0),c}function Ts(e,t,n={},r,i,a){let o,s=Ss({actions:{}},n),c={deep:!0},l,u,d=new Set,f=new Set,p=r.state.value[e];!a&&!p&&(r.state.value[e]={});let m;function h(t){let n;l=u=!1,typeof t==`function`?(t(r.state.value[e]),n={type:$o.patchFunction,storeId:e,events:void 0}):(ys(r.state.value[e],t),n={type:$o.patchObject,payload:t,storeId:e,events:void 0});let i=m=Symbol();En().then(()=>{m===i&&(l=!0)}),u=!0,hs(d,n,r.state.value[e])}let g=a?function(){let{state:e}=n,t=e?e():{};this.$patch(e=>{Ss(e,t)})}:ps;function _(){o.stop(),d.clear(),f.clear(),r._s.delete(e)}let v=(t,n=``)=>{if(_s in t)return t[vs]=n,t;let i=function(){Xo(r);let n=Array.from(arguments),a=new Set,o=new Set;function s(e){a.add(e)}function c(e){o.add(e)}hs(f,{args:n,name:i[vs],store:y,after:s,onError:c});let l;try{l=t.apply(this&&this.$id===e?this:y,n)}catch(e){throw hs(o,e),e}return l instanceof Promise?l.then(e=>(hs(a,e),e)).catch(e=>(hs(o,e),Promise.reject(e))):(hs(a,l),l)};return i[_s]=!0,i[vs]=n,i},y=Vt({_p:r,$id:e,$onAction:ms.bind(null,f),$patch:h,$reset:g,$subscribe(t,n={}){let i=ms(d,t,n.detached,()=>a()),a=o.run(()=>Kn(()=>r.state.value[e],r=>{(n.flush===`sync`?u:l)&&t({storeId:e,type:$o.direct,events:void 0},r)},Ss({},c,n)));return i},$dispose:_});r._s.set(e,y);let b=(r._a&&r._a.runWithContext||gs)(()=>r._e.run(()=>(o=Oe()).run(()=>t({action:v}))));for(let t in b){let n=b[t];P(n)&&!Cs(n)||Gt(n)?a||(p&&xs(n)&&(P(n)?n.value=p[t]:ys(n,p[t])),r.state.value[e][t]=n):typeof n==`function`&&(b[t]=v(n,t),s.actions[t]=n)}return Ss(y,b),Ss(N(y),b),Object.defineProperty(y,"$state",{get:()=>r.state.value[e],set:e=>{h(t=>{Ss(t,e)})}}),r._p.forEach(e=>{Ss(y,o.run(()=>e({store:y,app:r._a,pinia:r,options:s})))}),p&&a&&n.hydrate&&n.hydrate(y.$state,p),l=!0,u=!0,y}function Es(e,t,n){let r,i=typeof t==`function`;r=i?n:t;function a(n,a){let o=Un();return n||=o?Hn(Zo,null):null,n&&Xo(n),n=Yo,n._s.has(e)||(i?Ts(e,t,r,n):ws(e,r,n)),n._s.get(e)}return a.$id=e,a}var Ds=typeof document<`u`;function Os(e){return typeof e==`object`||`displayName`in e||`props`in e||`__vccOpts`in e}function ks(e){return e.__esModule||e[Symbol.toStringTag]===`Module`||e.default&&Os(e.default)}var K=Object.assign;function As(e,t){let n={};for(let r in t){let i=t[r];n[r]=Ms(i)?i.map(e):e(i)}return n}var js=()=>{},Ms=Array.isArray;function Ns(e,t){let n={};for(let r in e)n[r]=r in t?t[r]:e[r];return n}var Ps=/#/g,Fs=/&/g,Is=/\//g,Ls=/=/g,Rs=/\?/g,zs=/\+/g,Bs=/%5B/g,Vs=/%5D/g,Hs=/%5E/g,Us=/%60/g,Ws=/%7B/g,Gs=/%7C/g,Ks=/%7D/g,qs=/%20/g;function Js(e){return e==null?``:encodeURI(``+e).replace(Gs,`|`).replace(Bs,`[`).replace(Vs,`]`)}function Ys(e){return Js(e).replace(Ws,`{`).replace(Ks,`}`).replace(Hs,`^`)}function Xs(e){return Js(e).replace(zs,`%2B`).replace(qs,`+`).replace(Ps,`%23`).replace(Fs,`%26`).replace(Us,"`").replace(Ws,`{`).replace(Ks,`}`).replace(Hs,`^`)}function Zs(e){return Xs(e).replace(Ls,`%3D`)}function Qs(e){return Js(e).replace(Ps,`%23`).replace(Rs,`%3F`)}function $s(e){return Qs(e).replace(Is,`%2F`)}function ec(e){if(e==null)return null;try{return decodeURIComponent(``+e)}catch{}return``+e}var tc=/\/$/,nc=e=>e.replace(tc,``);function rc(e,t,n=`/`){let r,i={},a=``,o=``,s=t.indexOf(`#`),c=t.indexOf(`?`);return c=s>=0&&c>s?-1:c,c>=0&&(r=t.slice(0,c),a=t.slice(c,s>0?s:t.length),i=e(a.slice(1))),s>=0&&(r||=t.slice(0,s),o=t.slice(s,t.length)),r=dc(r??t,n),{fullPath:r+a+o,path:r,query:i,hash:ec(o)}}function ic(e,t){let n=t.query?e(t.query):``;return t.path+(n&&`?`)+n+(t.hash||``)}function ac(e,t){return!t||!e.toLowerCase().startsWith(t.toLowerCase())?e:e.slice(t.length)||`/`}function oc(e,t,n){let r=t.matched.length-1,i=n.matched.length-1;return r>-1&&r===i&&sc(t.matched[r],n.matched[i])&&cc(t.params,n.params)&&e(t.query)===e(n.query)&&t.hash===n.hash}function sc(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function cc(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(var n in e)if(!lc(e[n],t[n]))return!1;return!0}function lc(e,t){return Ms(e)?uc(e,t):Ms(t)?uc(t,e):e?.valueOf()===t?.valueOf()}function uc(e,t){return Ms(t)?e.length===t.length&&e.every((e,n)=>e===t[n]):e.length===1&&e[0]===t}function dc(e,t){if(e.startsWith(`/`))return e;if(!e)return t;let n=t.split(`/`),r=e.split(`/`),i=r[r.length-1];(i===`..`||i===`.`)&&r.push(``);let a=n.length-1,o,s;for(o=0;o<r.length;o++)if(s=r[o],s!==`.`)if(s===`..`)a>1&&a--;else break;return n.slice(0,a).join(`/`)+`/`+r.slice(o).join(`/`)}var fc={path:`/`,name:void 0,params:{},query:{},hash:``,fullPath:`/`,matched:[],meta:{},redirectedFrom:void 0},pc=function(e){return e.pop=`pop`,e.push=`push`,e}({}),mc=function(e){return e.back=`back`,e.forward=`forward`,e.unknown=``,e}({});function hc(e){if(!e)if(Ds){let t=document.querySelector(`base`);e=t&&t.getAttribute(`href`)||`/`,e=e.replace(/^\w+:\/\/[^\/]+/,``)}else e=`/`;return e[0]!==`/`&&e[0]!==`#`&&(e=`/`+e),nc(e)}var gc=/^[^#]+#/;function _c(e,t){return e.replace(gc,`#`)+t}function vc(e,t){let n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{behavior:t.behavior,left:r.left-n.left-(t.left||0),top:r.top-n.top-(t.top||0)}}var yc=()=>({left:window.scrollX,top:window.scrollY});function bc(e){let t;if(`el`in e){let n=e.el,r=typeof n==`string`&&n.startsWith(`#`),i=typeof n==`string`?r?document.getElementById(n.slice(1)):document.querySelector(n):n;if(!i)return;t=vc(i,e)}else t=e;`scrollBehavior`in document.documentElement.style?window.scrollTo(t):window.scrollTo(t.left==null?window.scrollX:t.left,t.top==null?window.scrollY:t.top)}function xc(e,t){return(history.state?history.state.position-t:-1)+e}var Sc=new Map;function Cc(e,t){Sc.set(e,t)}function wc(e){let t=Sc.get(e);return Sc.delete(e),t}function Tc(e){return typeof e==`string`||e&&typeof e==`object`}function Ec(e){return typeof e==`string`||typeof e==`symbol`}var q=function(e){return e[e.MATCHER_NOT_FOUND=1]=`MATCHER_NOT_FOUND`,e[e.NAVIGATION_GUARD_REDIRECT=2]=`NAVIGATION_GUARD_REDIRECT`,e[e.NAVIGATION_ABORTED=4]=`NAVIGATION_ABORTED`,e[e.NAVIGATION_CANCELLED=8]=`NAVIGATION_CANCELLED`,e[e.NAVIGATION_DUPLICATED=16]=`NAVIGATION_DUPLICATED`,e}({}),Dc=Symbol(``);q.MATCHER_NOT_FOUND,q.NAVIGATION_GUARD_REDIRECT,q.NAVIGATION_ABORTED,q.NAVIGATION_CANCELLED,q.NAVIGATION_DUPLICATED;function Oc(e,t){return K(Error(),{type:e,[Dc]:!0},t)}function kc(e,t){return e instanceof Error&&Dc in e&&(t==null||!!(e.type&t))}function Ac(e){let t={};if(e===``||e===`?`)return t;let n=(e[0]===`?`?e.slice(1):e).split(`&`);for(let e=0;e<n.length;++e){let r=n[e].replace(zs,` `),i=r.indexOf(`=`),a=ec(i<0?r:r.slice(0,i)),o=i<0?null:ec(r.slice(i+1));if(a in t){let e=t[a];Ms(e)||(e=t[a]=[e]),e.push(o)}else t[a]=o}return t}function jc(e){let t=``;for(let n in e){let r=e[n];if(n=Zs(n),r==null){r!==void 0&&(t+=(t.length?`&`:``)+n);continue}(Ms(r)?r.map(e=>e&&Xs(e)):[r&&Xs(r)]).forEach(e=>{e!==void 0&&(t+=(t.length?`&`:``)+n,e!=null&&(t+=`=`+e))})}return t}function Mc(e){let t={};for(let n in e){let r=e[n];r!==void 0&&(t[n]=Ms(r)?r.map(e=>e==null?null:``+e):r==null?r:``+r)}return t}var Nc=Symbol(``),Pc=Symbol(``),Fc=Symbol(``),Ic=Symbol(``),Lc=Symbol(``);function Rc(){let e=[];function t(t){return e.push(t),()=>{let n=e.indexOf(t);n>-1&&e.splice(n,1)}}function n(){e=[]}return{add:t,list:()=>e.slice(),reset:n}}function zc(e,t,n,r,i,a=e=>e()){let o=r&&(r.enterCallbacks[i]=r.enterCallbacks[i]||[]);return()=>new Promise((s,c)=>{let l=e=>{e===!1?c(Oc(q.NAVIGATION_ABORTED,{from:n,to:t})):e instanceof Error?c(e):Tc(e)?c(Oc(q.NAVIGATION_GUARD_REDIRECT,{from:t,to:e})):(o&&r.enterCallbacks[i]===o&&typeof e==`function`&&o.push(e),s())},u=a(()=>e.call(r&&r.instances[i],t,n,l)),d=Promise.resolve(u);e.length<3&&(d=d.then(l)),d.catch(e=>c(e))})}function Bc(e,t,n,r,i=e=>e()){let a=[];for(let o of e)for(let e in o.components){let s=o.components[e];if(!(t!==`beforeRouteEnter`&&!o.instances[e]))if(Os(s)){let c=(s.__vccOpts||s)[t];c&&a.push(zc(c,n,r,o,e,i))}else{let c=s();a.push(()=>c.then(a=>{if(!a)throw Error(`Couldn't resolve component "${e}" at "${o.path}"`);let s=ks(a)?a.default:a;o.mods[e]=a,o.components[e]=s;let c=(s.__vccOpts||s)[t];return c&&zc(c,n,r,o,e,i)()}))}}return a}function Vc(e,t){let n=[],r=[],i=[],a=Math.max(t.matched.length,e.matched.length);for(let o=0;o<a;o++){let a=t.matched[o];a&&(e.matched.find(e=>sc(e,a))?r.push(a):n.push(a));let s=e.matched[o];s&&(t.matched.find(e=>sc(e,s))||i.push(s))}return[n,r,i]}var Hc=()=>location.protocol+`//`+location.host;function Uc(e,t){let{pathname:n,search:r,hash:i}=t,a=e.indexOf(`#`);if(a>-1){let t=i.includes(e.slice(a))?e.slice(a).length:1,n=i.slice(t);return n[0]!==`/`&&(n=`/`+n),ac(n,``)}return ac(n,e)+r+i}function Wc(e,t,n,r){let i=[],a=[],o=null,s=({state:a})=>{let s=Uc(e,location),c=n.value,l=t.value,u=0;if(a){if(n.value=s,t.value=a,o&&o===c){o=null;return}u=l?a.position-l.position:0}else r(s);i.forEach(e=>{e(n.value,c,{delta:u,type:pc.pop,direction:u?u>0?mc.forward:mc.back:mc.unknown})})};function c(){o=n.value}function l(e){i.push(e);let t=()=>{let t=i.indexOf(e);t>-1&&i.splice(t,1)};return a.push(t),t}function u(){if(document.visibilityState===`hidden`){let{history:e}=window;if(!e.state)return;e.replaceState(K({},e.state,{scroll:yc()}),``)}}function d(){for(let e of a)e();a=[],window.removeEventListener(`popstate`,s),window.removeEventListener(`pagehide`,u),document.removeEventListener(`visibilitychange`,u)}return window.addEventListener(`popstate`,s),window.addEventListener(`pagehide`,u),document.addEventListener(`visibilitychange`,u),{pauseListeners:c,listen:l,destroy:d}}function Gc(e,t,n,r=!1,i=!1){return{back:e,current:t,forward:n,replaced:r,position:window.history.length,scroll:i?yc():null}}function Kc(e){let{history:t,location:n}=window,r={value:Uc(e,n)},i={value:t.state};i.value||a(r.value,{back:null,current:r.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0);function a(r,a,o){let s=e.indexOf(`#`),c=s>-1?(n.host&&document.querySelector(`base`)?e:e.slice(s))+r:Hc()+e+r;try{t[o?`replaceState`:`pushState`](a,``,c),i.value=a}catch(e){console.error(e),n[o?`replace`:`assign`](c)}}function o(e,n){a(e,K({},t.state,Gc(i.value.back,e,i.value.forward,!0),n,{position:i.value.position}),!0),r.value=e}function s(e,n){let o=K({},i.value,t.state,{forward:e,scroll:yc()});a(o.current,o,!0),a(e,K({},Gc(r.value,e,null),{position:o.position+1},n),!1),r.value=e}return{location:r,state:i,push:s,replace:o}}function qc(e){e=hc(e);let t=Kc(e),n=Wc(e,t.state,t.location,t.replace);function r(e,t=!0){t||n.pauseListeners(),history.go(e)}let i=K({location:``,base:e,go:r,createHref:_c.bind(null,e)},t,n);return Object.defineProperty(i,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(i,"state",{enumerable:!0,get:()=>t.state.value}),i}var Jc=function(e){return e[e.Static=0]=`Static`,e[e.Param=1]=`Param`,e[e.Group=2]=`Group`,e}({}),J=function(e){return e[e.Static=0]=`Static`,e[e.Param=1]=`Param`,e[e.ParamRegExp=2]=`ParamRegExp`,e[e.ParamRegExpEnd=3]=`ParamRegExpEnd`,e[e.EscapeNext=4]=`EscapeNext`,e}(J||{}),Yc={type:Jc.Static,value:``},Xc=/[a-zA-Z0-9_]/;function Zc(e){if(!e)return[[]];if(e===`/`)return[[Yc]];if(!e.startsWith(`/`))throw Error(`Invalid path "${e}"`);function t(e){throw Error(`ERR (${n})/"${l}": ${e}`)}let n=J.Static,r=n,i=[],a;function o(){a&&i.push(a),a=[]}let s=0,c,l=``,u=``;function d(){l&&=(n===J.Static?a.push({type:Jc.Static,value:l}):n===J.Param||n===J.ParamRegExp||n===J.ParamRegExpEnd?(a.length>1&&(c===`*`||c===`+`)&&t(`A repeatable param (${l}) must be alone in its segment. eg: '/:ids+.`),a.push({type:Jc.Param,value:l,regexp:u,repeatable:c===`*`||c===`+`,optional:c===`*`||c===`?`})):t(`Invalid state to consume buffer`),``)}function f(){l+=c}for(;s<e.length;){if(c=e[s++],c===`\\`&&n!==J.ParamRegExp){r=n,n=J.EscapeNext;continue}switch(n){case J.Static:c===`/`?(l&&d(),o()):c===`:`?(d(),n=J.Param):f();break;case J.EscapeNext:f(),n=r;break;case J.Param:c===`(`?n=J.ParamRegExp:Xc.test(c)?f():(d(),n=J.Static,c!==`*`&&c!==`?`&&c!==`+`&&s--);break;case J.ParamRegExp:c===`)`?u[u.length-1]==`\\`?u=u.slice(0,-1)+c:n=J.ParamRegExpEnd:u+=c;break;case J.ParamRegExpEnd:d(),n=J.Static,c!==`*`&&c!==`?`&&c!==`+`&&s--,u=``;break;default:t(`Unknown state`);break}}return n===J.ParamRegExp&&t(`Unfinished custom RegExp for param "${l}"`),d(),o(),i}var Qc=`[^/]+?`,$c={sensitive:!1,strict:!1,start:!0,end:!0},el=function(e){return e[e._multiplier=10]=`_multiplier`,e[e.Root=90]=`Root`,e[e.Segment=40]=`Segment`,e[e.SubSegment=30]=`SubSegment`,e[e.Static=40]=`Static`,e[e.Dynamic=20]=`Dynamic`,e[e.BonusCustomRegExp=10]=`BonusCustomRegExp`,e[e.BonusWildcard=-50]=`BonusWildcard`,e[e.BonusRepeatable=-20]=`BonusRepeatable`,e[e.BonusOptional=-8]=`BonusOptional`,e[e.BonusStrict=.7000000000000001]=`BonusStrict`,e[e.BonusCaseSensitive=.25]=`BonusCaseSensitive`,e}(el||{}),tl=/[.+*?^${}()[\]/\\]/g;function nl(e,t){let n=K({},$c,t),r=[],i=n.start?`^`:``,a=[];for(let t of e){let e=t.length?[]:[el.Root];n.strict&&!t.length&&(i+=`/`);for(let r=0;r<t.length;r++){let o=t[r],s=el.Segment+(n.sensitive?el.BonusCaseSensitive:0);if(o.type===Jc.Static)r||(i+=`/`),i+=o.value.replace(tl,`\\$&`),s+=el.Static;else if(o.type===Jc.Param){let{value:e,repeatable:n,optional:c,regexp:l}=o;a.push({name:e,repeatable:n,optional:c});let u=l||Qc;if(u!==Qc){s+=el.BonusCustomRegExp;try{`${u}`}catch(t){throw Error(`Invalid custom RegExp for param "${e}" (${u}): `+t.message)}}let d=n?`((?:${u})(?:/(?:${u}))*)`:`(${u})`;r||(d=c&&t.length<2?`(?:/${d})`:`/`+d),c&&(d+=`?`),i+=d,s+=el.Dynamic,c&&(s+=el.BonusOptional),n&&(s+=el.BonusRepeatable),u===`.*`&&(s+=el.BonusWildcard)}e.push(s)}r.push(e)}if(n.strict&&n.end){let e=r.length-1;r[e][r[e].length-1]+=el.BonusStrict}n.strict||(i+=`/?`),n.end?i+=`$`:n.strict&&!i.endsWith(`/`)&&(i+=`(?:/|$)`);let o=new RegExp(i,n.sensitive?``:`i`);function s(e){let t=e.match(o),n={};if(!t)return null;for(let e=1;e<t.length;e++){let r=t[e]||``,i=a[e-1];n[i.name]=r&&i.repeatable?r.split(`/`):r}return n}function c(t){let n=``,r=!1;for(let i of e){(!r||!n.endsWith(`/`))&&(n+=`/`),r=!1;for(let e of i)if(e.type===Jc.Static)n+=e.value;else if(e.type===Jc.Param){let{value:a,repeatable:o,optional:s}=e,c=a in t?t[a]:``;if(Ms(c)&&!o)throw Error(`Provided param "${a}" is an array but it is not repeatable (* or + modifiers)`);let l=Ms(c)?c.join(`/`):c;if(!l)if(s)i.length<2&&(n.endsWith(`/`)?n=n.slice(0,-1):r=!0);else throw Error(`Missing required param "${a}"`);n+=l}}return n||`/`}return{re:o,score:r,keys:a,parse:s,stringify:c}}function rl(e,t){let n=0;for(;n<e.length&&n<t.length;){let r=t[n]-e[n];if(r)return r;n++}return e.length<t.length?e.length===1&&e[0]===el.Static+el.Segment?-1:1:e.length>t.length?t.length===1&&t[0]===el.Static+el.Segment?1:-1:0}function il(e,t){let n=0,r=e.score,i=t.score;for(;n<r.length&&n<i.length;){let e=rl(r[n],i[n]);if(e)return e;n++}if(Math.abs(i.length-r.length)===1){if(al(r))return 1;if(al(i))return-1}return i.length-r.length}function al(e){let t=e[e.length-1];return e.length>0&&t[t.length-1]<0}var ol={strict:!1,end:!0,sensitive:!1};function sl(e,t,n){let r=K(nl(Zc(e.path),n),{record:e,parent:t,children:[],alias:[]});return t&&!r.record.aliasOf==!t.record.aliasOf&&t.children.push(r),r}function cl(e,t){let n=[],r=new Map;t=Ns(ol,t);function i(e){return r.get(e)}function a(e,n,r){let i=!r,s=ul(e);s.aliasOf=r&&r.record;let l=Ns(t,e),u=[s];if(`alias`in e){let t=typeof e.alias==`string`?[e.alias]:e.alias;for(let e of t)u.push(ul(K({},s,{components:r?r.record.components:s.components,path:e,aliasOf:r?r.record:s})))}let d,f;for(let t of u){let{path:u}=t;if(n&&u[0]!==`/`){let e=n.record.path,r=e[e.length-1]===`/`?``:`/`;t.path=n.record.path+(u&&r+u)}if(d=sl(t,n,l),r?r.alias.push(d):(f||=d,f!==d&&f.alias.push(d),i&&e.name&&!fl(d)&&o(e.name)),gl(d)&&c(d),s.children){let e=s.children;for(let t=0;t<e.length;t++)a(e[t],d,r&&r.children[t])}r||=d}return f?()=>{o(f)}:js}function o(e){if(Ec(e)){let t=r.get(e);t&&(r.delete(e),n.splice(n.indexOf(t),1),t.children.forEach(o),t.alias.forEach(o))}else{let t=n.indexOf(e);t>-1&&(n.splice(t,1),e.record.name&&r.delete(e.record.name),e.children.forEach(o),e.alias.forEach(o))}}function s(){return n}function c(e){let t=ml(e,n);n.splice(t,0,e),e.record.name&&!fl(e)&&r.set(e.record.name,e)}function l(e,t){let i,a={},o,s;if(`name`in e&&e.name){if(i=r.get(e.name),!i)throw Oc(q.MATCHER_NOT_FOUND,{location:e});s=i.record.name,a=K(ll(t.params,i.keys.filter(e=>!e.optional).concat(i.parent?i.parent.keys.filter(e=>e.optional):[]).map(e=>e.name)),e.params&&ll(e.params,i.keys.map(e=>e.name))),o=i.stringify(a)}else if(e.path!=null)o=e.path,i=n.find(e=>e.re.test(o)),i&&(a=i.parse(o),s=i.record.name);else{if(i=t.name?r.get(t.name):n.find(e=>e.re.test(t.path)),!i)throw Oc(q.MATCHER_NOT_FOUND,{location:e,currentLocation:t});s=i.record.name,a=K({},t.params,e.params),o=i.stringify(a)}let c=[],l=i;for(;l;)c.unshift(l.record),l=l.parent;return{name:s,path:o,params:a,matched:c,meta:pl(c)}}e.forEach(e=>a(e));function u(){n.length=0,r.clear()}return{addRoute:a,resolve:l,removeRoute:o,clearRoutes:u,getRoutes:s,getRecordMatcher:i}}function ll(e,t){let n={};for(let r of t)r in e&&(n[r]=e[r]);return n}function ul(e){let t={path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:e.aliasOf,beforeEnter:e.beforeEnter,props:dl(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:`components`in e?e.components||null:e.component&&{default:e.component}};return Object.defineProperty(t,"mods",{value:{}}),t}function dl(e){let t={},n=e.props||!1;if(`component`in e)t.default=n;else for(let r in e.components)t[r]=typeof n==`object`?n[r]:n;return t}function fl(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function pl(e){return e.reduce((e,t)=>K(e,t.meta),{})}function ml(e,t){let n=0,r=t.length;for(;n!==r;){let i=n+r>>1;il(e,t[i])<0?r=i:n=i+1}let i=hl(e);return i&&(r=t.lastIndexOf(i,r-1)),r}function hl(e){let t=e;for(;t=t.parent;)if(gl(t)&&il(e,t)===0)return t}function gl({record:e}){return!!(e.name||e.components&&Object.keys(e.components).length||e.redirect)}function _l(e){let t=Hn(Fc),n=Hn(Ic),r=G(()=>{let n=I(e.to);return t.resolve(n)}),i=G(()=>{let{matched:e}=r.value,{length:t}=e,i=e[t-1],a=n.matched;if(!i||!a.length)return-1;let o=a.findIndex(sc.bind(null,i));if(o>-1)return o;let s=Sl(e[t-2]);return t>1&&Sl(i)===s&&a[a.length-1].path!==s?a.findIndex(sc.bind(null,e[t-2])):o}),a=G(()=>i.value>-1&&xl(n.params,r.value.params)),o=G(()=>i.value>-1&&i.value===n.matched.length-1&&cc(n.params,r.value.params));function s(n={}){if(bl(n)){let n=t[I(e.replace)?`replace`:`push`](I(e.to)).catch(js);return e.viewTransition&&typeof document<`u`&&`startViewTransition`in document&&document.startViewTransition(()=>n),n}return Promise.resolve()}return{route:r,href:G(()=>r.value.href),isActive:a,isExactActive:o,navigate:s}}function vl(e){return e.length===1?e[0]:e}var yl=er({name:`RouterLink`,compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:`page`},viewTransition:Boolean},useLink:_l,setup(e,{slots:t}){let n=Vt(_l(e)),{options:r}=Hn(Fc),i=G(()=>({[Cl(e.activeClass,r.linkActiveClass,`router-link-active`)]:n.isActive,[Cl(e.exactActiveClass,r.linkExactActiveClass,`router-link-exact-active`)]:n.isExactActive}));return()=>{let r=t.default&&vl(t.default(n));return e.custom?r:Na(`a`,{"aria-current":n.isExactActive?e.ariaCurrentValue:null,href:n.href,onClick:n.navigate,class:i.value},r)}}});function bl(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget&&e.currentTarget.getAttribute){let t=e.currentTarget.getAttribute(`target`);if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}function xl(e,t){for(let n in t){let r=t[n],i=e[n];if(typeof r==`string`){if(r!==i)return!1}else if(!Ms(i)||i.length!==r.length||r.some((e,t)=>e.valueOf()!==i[t].valueOf()))return!1}return!0}function Sl(e){return e?e.aliasOf?e.aliasOf.path:e.path:``}var Cl=(e,t,n)=>e??t??n,wl=er({name:`RouterView`,inheritAttrs:!1,props:{name:{type:String,default:`default`},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:n}){let r=Hn(Lc),i=G(()=>e.route||r.value),a=Hn(Pc,0),o=G(()=>{let e=I(a),{matched:t}=i.value,n;for(;(n=t[e])&&!n.components;)e++;return e}),s=G(()=>i.value.matched[o.value]);Vn(Pc,G(()=>o.value+1)),Vn(Nc,s),Vn(Lc,i);let c=F();return Kn(()=>[c.value,s.value,e.name],([e,t,n],[r,i,a])=>{t&&(t.instances[n]=e,i&&i!==t&&e&&e===r&&(t.leaveGuards.size||(t.leaveGuards=i.leaveGuards),t.updateGuards.size||(t.updateGuards=i.updateGuards))),e&&t&&(!i||!sc(t,i)||!r)&&(t.enterCallbacks[n]||[]).forEach(t=>t(e))},{flush:`post`}),()=>{let r=i.value,a=e.name,o=s.value,l=o&&o.components[a];if(!l)return Tl(n.default,{Component:l,route:r});let u=o.props[a],d=Na(l,K({},u?u===!0?r.params:typeof u==`function`?u(r):u:null,t,{onVnodeUnmounted:e=>{e.component.isUnmounted&&(o.instances[a]=null)},ref:c}));return Tl(n.default,{Component:d,route:r})||d}}});function Tl(e,t){if(!e)return null;let n=e(t);return n.length===1?n[0]:n}var El=wl;function Dl(e){let t=cl(e.routes,e),n=e.parseQuery||Ac,r=e.stringifyQuery||jc,i=e.history,a=Rc(),o=Rc(),s=Rc(),c=Qt(fc),l=fc;Ds&&e.scrollBehavior&&`scrollRestoration`in history&&(history.scrollRestoration=`manual`);let u=As.bind(null,e=>``+e),d=As.bind(null,$s),f=As.bind(null,ec);function p(e,n){let r,i;return Ec(e)?(r=t.getRecordMatcher(e),i=n):i=e,t.addRoute(i,r)}function m(e){let n=t.getRecordMatcher(e);n&&t.removeRoute(n)}function h(){return t.getRoutes().map(e=>e.record)}function g(e){return!!t.getRecordMatcher(e)}function _(e,a){if(a=K({},a||c.value),typeof e==`string`){let r=rc(n,e,a.path),o=t.resolve({path:r.path},a),s=i.createHref(r.fullPath);return K(r,o,{params:f(o.params),hash:ec(r.hash),redirectedFrom:void 0,href:s})}let o;if(e.path!=null)o=K({},e,{path:rc(n,e.path,a.path).path});else{let t=K({},e.params);for(let e in t)t[e]??delete t[e];o=K({},e,{params:d(t)}),a.params=d(a.params)}let s=t.resolve(o,a),l=e.hash||``;s.params=u(f(s.params));let p=ic(r,K({},e,{hash:Ys(l),path:s.path})),m=i.createHref(p);return K({fullPath:p,hash:l,query:r===jc?Mc(e.query):e.query||{}},s,{redirectedFrom:void 0,href:m})}function v(e){return typeof e==`string`?rc(n,e,c.value.path):K({},e)}function y(e,t){if(l!==e)return Oc(q.NAVIGATION_CANCELLED,{from:t,to:e})}function b(e){return C(e)}function x(e){return b(K(v(e),{replace:!0}))}function S(e,t){let n=e.matched[e.matched.length-1];if(n&&n.redirect){let{redirect:r}=n,i=typeof r==`function`?r(e,t):r;return typeof i==`string`&&(i=i.includes(`?`)||i.includes(`#`)?i=v(i):{path:i},i.params={}),K({query:e.query,hash:e.hash,params:i.path==null?e.params:{}},i)}}function C(e,t){let n=l=_(e),i=c.value,a=e.state,o=e.force,s=e.replace===!0,u=S(n,i);if(u)return C(K(v(u),{state:typeof u==`object`?K({},a,u.state):a,force:o,replace:s}),t||n);let d=n;d.redirectedFrom=t;let f;return!o&&oc(r,i,n)&&(f=Oc(q.NAVIGATION_DUPLICATED,{to:d,from:i}),se(i,i,!0,!1)),(f?Promise.resolve(f):te(d,i)).catch(e=>kc(e)?kc(e,q.NAVIGATION_GUARD_REDIRECT)?e:oe(e):ae(e,d,i)).then(e=>{if(e){if(kc(e,q.NAVIGATION_GUARD_REDIRECT))return C(K({replace:s},v(e.to),{state:typeof e.to==`object`?K({},a,e.to.state):a,force:o}),t||d)}else e=E(d,i,!0,s,a);return T(d,i,e),e})}function w(e,t){let n=y(e,t);return n?Promise.reject(n):Promise.resolve()}function ee(e){let t=ue.values().next().value;return t&&typeof t.runWithContext==`function`?t.runWithContext(e):e()}function te(e,t){let n,[r,i,s]=Vc(e,t);n=Bc(r.reverse(),`beforeRouteLeave`,e,t);for(let i of r)i.leaveGuards.forEach(r=>{n.push(zc(r,e,t))});let c=w.bind(null,e,t);return n.push(c),fe(n).then(()=>{n=[];for(let r of a.list())n.push(zc(r,e,t));return n.push(c),fe(n)}).then(()=>{n=Bc(i,`beforeRouteUpdate`,e,t);for(let r of i)r.updateGuards.forEach(r=>{n.push(zc(r,e,t))});return n.push(c),fe(n)}).then(()=>{n=[];for(let r of s)if(r.beforeEnter)if(Ms(r.beforeEnter))for(let i of r.beforeEnter)n.push(zc(i,e,t));else n.push(zc(r.beforeEnter,e,t));return n.push(c),fe(n)}).then(()=>(e.matched.forEach(e=>e.enterCallbacks={}),n=Bc(s,`beforeRouteEnter`,e,t,ee),n.push(c),fe(n))).then(()=>{n=[];for(let r of o.list())n.push(zc(r,e,t));return n.push(c),fe(n)}).catch(e=>kc(e,q.NAVIGATION_CANCELLED)?e:Promise.reject(e))}function T(e,t,n){s.list().forEach(r=>ee(()=>r(e,t,n)))}function E(e,t,n,r,a){let o=y(e,t);if(o)return o;let s=t===fc,l=Ds?history.state:{};n&&(r||s?i.replace(e.fullPath,K({scroll:s&&l&&l.scroll},a)):i.push(e.fullPath,a)),c.value=e,se(e,t,n,s),oe()}let D;function ne(){D||=i.listen((e,t,n)=>{if(!de.listening)return;let r=_(e),a=S(r,de.currentRoute.value);if(a){C(K(a,{replace:!0,force:!0}),r).catch(js);return}l=r;let o=c.value;Ds&&Cc(xc(o.fullPath,n.delta),yc()),te(r,o).catch(e=>kc(e,q.NAVIGATION_ABORTED|q.NAVIGATION_CANCELLED)?e:kc(e,q.NAVIGATION_GUARD_REDIRECT)?(C(K(v(e.to),{force:!0}),r).then(e=>{kc(e,q.NAVIGATION_ABORTED|q.NAVIGATION_DUPLICATED)&&!n.delta&&n.type===pc.pop&&i.go(-1,!1)}).catch(js),Promise.reject()):(n.delta&&i.go(-n.delta,!1),ae(e,r,o))).then(e=>{e||=E(r,o,!1),e&&(n.delta&&!kc(e,q.NAVIGATION_CANCELLED)?i.go(-n.delta,!1):n.type===pc.pop&&kc(e,q.NAVIGATION_ABORTED|q.NAVIGATION_DUPLICATED)&&i.go(-1,!1)),T(r,o,e)}).catch(js)})}let O=Rc(),re=Rc(),ie;function ae(e,t,n){oe(e);let r=re.list();return r.length?r.forEach(r=>r(e,t,n)):console.error(e),Promise.reject(e)}function k(){return ie&&c.value!==fc?Promise.resolve():new Promise((e,t)=>{O.add([e,t])})}function oe(e){return ie||(ie=!e,ne(),O.list().forEach(([t,n])=>e?n(e):t()),O.reset()),e}function se(t,n,r,i){let{scrollBehavior:a}=e;if(!Ds||!a)return Promise.resolve();let o=!r&&wc(xc(t.fullPath,0))||(i||!r)&&history.state&&history.state.scroll||null;return En().then(()=>a(t,n,o)).then(e=>e&&bc(e)).catch(e=>ae(e,t,n))}let ce=e=>i.go(e),le,ue=new Set,de={currentRoute:c,listening:!0,addRoute:p,removeRoute:m,clearRoutes:t.clearRoutes,hasRoute:g,getRoutes:h,resolve:_,options:e,push:b,replace:x,go:ce,back:()=>ce(-1),forward:()=>ce(1),beforeEach:a.add,beforeResolve:o.add,afterEach:s.add,onError:re.add,isReady:k,install(e){e.component(`RouterLink`,yl),e.component(`RouterView`,El),e.config.globalProperties.$router=de,Object.defineProperty(e.config.globalProperties,"$route",{enumerable:!0,get:()=>I(c)}),Ds&&!le&&c.value===fc&&(le=!0,b(i.location).catch(e=>{}));let t={};for(let e in fc)Object.defineProperty(t,e,{get:()=>c.value[e],enumerable:!0});e.provide(Fc,de),e.provide(Ic,Ht(t)),e.provide(Lc,c);let n=e.unmount;ue.add(e),e.unmount=function(){ue.delete(e),ue.size<1&&(l=fc,D&&D(),D=null,c.value=fc,le=!1,ie=!1),n()}}};function fe(e){return e.reduce((e,t)=>e.then(()=>ee(t)),Promise.resolve())}return de}function Ol(){return Hn(Fc)}function kl(e){return Hn(Ic)}function Al(e,t){return function(){return e.apply(t,arguments)}}var{toString:jl}=Object.prototype,{getPrototypeOf:Ml}=Object,{iterator:Nl,toStringTag:Pl}=Symbol,Fl=(e=>t=>{let n=jl.call(t);return e[n]||(e[n]=n.slice(8,-1).toLowerCase())})(Object.create(null)),Il=e=>(e=e.toLowerCase(),t=>Fl(t)===e),Ll=e=>t=>typeof t===e,{isArray:Rl}=Array,zl=Ll(`undefined`);function Bl(e){return e!==null&&!zl(e)&&e.constructor!==null&&!zl(e.constructor)&&Wl(e.constructor.isBuffer)&&e.constructor.isBuffer(e)}var Vl=Il(`ArrayBuffer`);function Hl(e){let t;return t=typeof ArrayBuffer<`u`&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&Vl(e.buffer),t}var Ul=Ll(`string`),Wl=Ll(`function`),Gl=Ll(`number`),Kl=e=>typeof e==`object`&&!!e,ql=e=>e===!0||e===!1,Jl=e=>{if(Fl(e)!==`object`)return!1;let t=Ml(e);return(t===null||t===Object.prototype||Object.getPrototypeOf(t)===null)&&!(Pl in e)&&!(Nl in e)},Yl=e=>{if(!Kl(e)||Bl(e))return!1;try{return Object.keys(e).length===0&&Object.getPrototypeOf(e)===Object.prototype}catch{return!1}},Xl=Il(`Date`),Zl=Il(`File`),Ql=e=>!!(e&&e.uri!==void 0),$l=e=>e&&e.getParts!==void 0,eu=Il(`Blob`),tu=Il(`FileList`),nu=e=>Kl(e)&&Wl(e.pipe);function ru(){return typeof globalThis<`u`?globalThis:typeof self<`u`?self:typeof window<`u`?window:typeof global<`u`?global:{}}var iu=ru(),au=iu.FormData===void 0?void 0:iu.FormData,ou=e=>{if(!e)return!1;if(au&&e instanceof au)return!0;let t=Ml(e);if(!t||t===Object.prototype||!Wl(e.append))return!1;let n=Fl(e);return n===`formdata`||n===`object`&&Wl(e.toString)&&e.toString()===`[object FormData]`},su=Il(`URLSearchParams`),[cu,lu,uu,du]=[`ReadableStream`,`Request`,`Response`,`Headers`].map(Il),fu=e=>e.trim?e.trim():e.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,``);function pu(e,t,{allOwnKeys:n=!1}={}){if(e==null)return;let r,i;if(typeof e!=`object`&&(e=[e]),Rl(e))for(r=0,i=e.length;r<i;r++)t.call(null,e[r],r,e);else{if(Bl(e))return;let i=n?Object.getOwnPropertyNames(e):Object.keys(e),a=i.length,o;for(r=0;r<a;r++)o=i[r],t.call(null,e[o],o,e)}}function mu(e,t){if(Bl(e))return null;t=t.toLowerCase();let n=Object.keys(e),r=n.length,i;for(;r-- >0;)if(i=n[r],t===i.toLowerCase())return i;return null}var hu=typeof globalThis<`u`?globalThis:typeof self<`u`?self:typeof window<`u`?window:global,gu=e=>!zl(e)&&e!==hu;function _u(...e){let{caseless:t,skipUndefined:n}=gu(this)&&this||{},r={},i=(e,i)=>{if(i===`__proto__`||i===`constructor`||i===`prototype`)return;let a=t&&mu(r,i)||i,o=ku(r,a)?r[a]:void 0;Jl(o)&&Jl(e)?r[a]=_u(o,e):Jl(e)?r[a]=_u({},e):Rl(e)?r[a]=e.slice():(!n||!zl(e))&&(r[a]=e)};for(let t=0,n=e.length;t<n;t++)e[t]&&pu(e[t],i);return r}var vu=(e,t,n,{allOwnKeys:r}={})=>(pu(t,(t,r)=>{n&&Wl(t)?Object.defineProperty(e,r,{__proto__:null,value:Al(t,n),writable:!0,enumerable:!0,configurable:!0}):Object.defineProperty(e,r,{__proto__:null,value:t,writable:!0,enumerable:!0,configurable:!0})},{allOwnKeys:r}),e),yu=e=>(e.charCodeAt(0)===65279&&(e=e.slice(1)),e),bu=(e,t,n,r)=>{e.prototype=Object.create(t.prototype,r),Object.defineProperty(e.prototype,"constructor",{__proto__:null,value:e,writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(e,"super",{__proto__:null,value:t.prototype}),n&&Object.assign(e.prototype,n)},xu=(e,t,n,r)=>{let i,a,o,s={};if(t||={},e==null)return t;do{for(i=Object.getOwnPropertyNames(e),a=i.length;a-- >0;)o=i[a],(!r||r(o,e,t))&&!s[o]&&(t[o]=e[o],s[o]=!0);e=n!==!1&&Ml(e)}while(e&&(!n||n(e,t))&&e!==Object.prototype);return t},Su=(e,t,n)=>{e=String(e),(n===void 0||n>e.length)&&(n=e.length),n-=t.length;let r=e.indexOf(t,n);return r!==-1&&r===n},Cu=e=>{if(!e)return null;if(Rl(e))return e;let t=e.length;if(!Gl(t))return null;let n=Array(t);for(;t-- >0;)n[t]=e[t];return n},wu=(e=>t=>e&&t instanceof e)(typeof Uint8Array<`u`&&Ml(Uint8Array)),Tu=(e,t)=>{let n=(e&&e[Nl]).call(e),r;for(;(r=n.next())&&!r.done;){let n=r.value;t.call(e,n[0],n[1])}},Eu=(e,t)=>{let n,r=[];for(;(n=e.exec(t))!==null;)r.push(n);return r},Du=Il(`HTMLFormElement`),Ou=e=>e.toLowerCase().replace(/[-_\s]([a-z\d])(\w*)/g,function(e,t,n){return t.toUpperCase()+n}),ku=(({hasOwnProperty:e})=>(t,n)=>e.call(t,n))(Object.prototype),Au=Il(`RegExp`),ju=(e,t)=>{let n=Object.getOwnPropertyDescriptors(e),r={};pu(n,(n,i)=>{let a;(a=t(n,i,e))!==!1&&(r[i]=a||n)}),Object.defineProperties(e,r)},Mu=e=>{ju(e,(t,n)=>{if(Wl(e)&&[`arguments`,`caller`,`callee`].includes(n))return!1;let r=e[n];if(Wl(r)){if(t.enumerable=!1,`writable`in t){t.writable=!1;return}t.set||=()=>{throw Error(`Can not rewrite read-only method '`+n+`'`)}}})},Nu=(e,t)=>{let n={},r=e=>{e.forEach(e=>{n[e]=!0})};return Rl(e)?r(e):r(String(e).split(t)),n},Pu=()=>{},Fu=(e,t)=>e!=null&&Number.isFinite(e=+e)?e:t;function Iu(e){return!!(e&&Wl(e.append)&&e[Pl]===`FormData`&&e[Nl])}var Lu=e=>{let t=new WeakSet,n=e=>{if(Kl(e)){if(t.has(e))return;if(Bl(e))return e;if(!(`toJSON`in e)){t.add(e);let r=Rl(e)?[]:{};return pu(e,(e,t)=>{let i=n(e);!zl(i)&&(r[t]=i)}),t.delete(e),r}}return e};return n(e)},Ru=Il(`AsyncFunction`),zu=e=>e&&(Kl(e)||Wl(e))&&Wl(e.then)&&Wl(e.catch),Bu=((e,t)=>e?setImmediate:t?((e,t)=>(hu.addEventListener(`message`,({source:n,data:r})=>{n===hu&&r===e&&t.length&&t.shift()()},!1),n=>{t.push(n),hu.postMessage(e,`*`)}))(`axios@${Math.random()}`,[]):e=>setTimeout(e))(typeof setImmediate==`function`,Wl(hu.postMessage)),Y={isArray:Rl,isArrayBuffer:Vl,isBuffer:Bl,isFormData:ou,isArrayBufferView:Hl,isString:Ul,isNumber:Gl,isBoolean:ql,isObject:Kl,isPlainObject:Jl,isEmptyObject:Yl,isReadableStream:cu,isRequest:lu,isResponse:uu,isHeaders:du,isUndefined:zl,isDate:Xl,isFile:Zl,isReactNativeBlob:Ql,isReactNative:$l,isBlob:eu,isRegExp:Au,isFunction:Wl,isStream:nu,isURLSearchParams:su,isTypedArray:wu,isFileList:tu,forEach:pu,merge:_u,extend:vu,trim:fu,stripBOM:yu,inherits:bu,toFlatObject:xu,kindOf:Fl,kindOfTest:Il,endsWith:Su,toArray:Cu,forEachEntry:Tu,matchAll:Eu,isHTMLForm:Du,hasOwnProperty:ku,hasOwnProp:ku,reduceDescriptors:ju,freezeMethods:Mu,toObjectSet:Nu,toCamelCase:Ou,noop:Pu,toFiniteNumber:Fu,findKey:mu,global:hu,isContextDefined:gu,isSpecCompliantForm:Iu,toJSONObject:Lu,isAsyncFn:Ru,isThenable:zu,setImmediate:Bu,asap:typeof queueMicrotask<`u`?queueMicrotask.bind(hu):typeof process<`u`&&process.nextTick||Bu,isIterable:e=>e!=null&&Wl(e[Nl])},Vu=Y.toObjectSet([`age`,`authorization`,`content-length`,`content-type`,`etag`,`expires`,`from`,`host`,`if-modified-since`,`if-unmodified-since`,`last-modified`,`location`,`max-forwards`,`proxy-authorization`,`referer`,`retry-after`,`user-agent`]),Hu=e=>{let t={},n,r,i;return e&&e.split(`
+`).forEach(function(e){i=e.indexOf(`:`),n=e.substring(0,i).trim().toLowerCase(),r=e.substring(i+1).trim(),!(!n||t[n]&&Vu[n])&&(n===`set-cookie`?t[n]?t[n].push(r):t[n]=[r]:t[n]=t[n]?t[n]+`, `+r:r)}),t};function Uu(e){let t=0,n=e.length;for(;t<n;){let n=e.charCodeAt(t);if(n!==9&&n!==32)break;t+=1}for(;n>t;){let t=e.charCodeAt(n-1);if(t!==9&&t!==32)break;--n}return t===0&&n===e.length?e:e.slice(t,n)}var Wu=RegExp(`[\\u0000-\\u0008\\u000a-\\u001f\\u007f]+`,`g`),Gu=RegExp(`[^\\u0009\\u0020-\\u007e\\u0080-\\u00ff]+`,`g`);function Ku(e,t){return Y.isArray(e)?e.map(e=>Ku(e,t)):Uu(String(e).replace(t,``))}var qu=e=>Ku(e,Wu),Ju=e=>Ku(e,Gu);function Yu(e){let t=Object.create(null);return Y.forEach(e.toJSON(),(e,n)=>{t[n]=Ju(e)}),t}var Xu=Symbol(`internals`);function Zu(e){return e&&String(e).trim().toLowerCase()}function Qu(e){return e===!1||e==null?e:Y.isArray(e)?e.map(Qu):qu(String(e))}function $u(e){let t=Object.create(null),n=/([^\s,;=]+)\s*(?:=\s*([^,;]+))?/g,r;for(;r=n.exec(e);)t[r[1]]=r[2];return t}var ed=e=>/^[-_a-zA-Z0-9^`|~,!#$%&'*+.]+$/.test(e.trim());function td(e,t,n,r,i){if(Y.isFunction(r))return r.call(this,t,n);if(i&&(t=n),Y.isString(t)){if(Y.isString(r))return t.indexOf(r)!==-1;if(Y.isRegExp(r))return r.test(t)}}function nd(e){return e.trim().toLowerCase().replace(/([a-z\d])(\w*)/g,(e,t,n)=>t.toUpperCase()+n)}function rd(e,t){let n=Y.toCamelCase(` `+t);[`get`,`set`,`has`].forEach(r=>{Object.defineProperty(e,r+n,{__proto__:null,value:function(e,n,i){return this[r].call(this,t,e,n,i)},configurable:!0})})}var id=class{constructor(e){e&&this.set(e)}set(e,t,n){let r=this;function i(e,t,n){let i=Zu(t);if(!i)throw Error(`header name must be a non-empty string`);let a=Y.findKey(r,i);(!a||r[a]===void 0||n===!0||n===void 0&&r[a]!==!1)&&(r[a||t]=Qu(e))}let a=(e,t)=>Y.forEach(e,(e,n)=>i(e,n,t));if(Y.isPlainObject(e)||e instanceof this.constructor)a(e,t);else if(Y.isString(e)&&(e=e.trim())&&!ed(e))a(Hu(e),t);else if(Y.isObject(e)&&Y.isIterable(e)){let n={},r,i;for(let t of e){if(!Y.isArray(t))throw TypeError(`Object iterator must return a key-value pair`);n[i=t[0]]=(r=n[i])?Y.isArray(r)?[...r,t[1]]:[r,t[1]]:t[1]}a(n,t)}else e!=null&&i(t,e,n);return this}get(e,t){if(e=Zu(e),e){let n=Y.findKey(this,e);if(n){let e=this[n];if(!t)return e;if(t===!0)return $u(e);if(Y.isFunction(t))return t.call(this,e,n);if(Y.isRegExp(t))return t.exec(e);throw TypeError(`parser must be boolean|regexp|function`)}}}has(e,t){if(e=Zu(e),e){let n=Y.findKey(this,e);return!!(n&&this[n]!==void 0&&(!t||td(this,this[n],n,t)))}return!1}delete(e,t){let n=this,r=!1;function i(e){if(e=Zu(e),e){let i=Y.findKey(n,e);i&&(!t||td(n,n[i],i,t))&&(delete n[i],r=!0)}}return Y.isArray(e)?e.forEach(i):i(e),r}clear(e){let t=Object.keys(this),n=t.length,r=!1;for(;n--;){let i=t[n];(!e||td(this,this[i],i,e,!0))&&(delete this[i],r=!0)}return r}normalize(e){let t=this,n={};return Y.forEach(this,(r,i)=>{let a=Y.findKey(n,i);if(a){t[a]=Qu(r),delete t[i];return}let o=e?nd(i):String(i).trim();o!==i&&delete t[i],t[o]=Qu(r),n[o]=!0}),this}concat(...e){return this.constructor.concat(this,...e)}toJSON(e){let t=Object.create(null);return Y.forEach(this,(n,r)=>{n!=null&&n!==!1&&(t[r]=e&&Y.isArray(n)?n.join(`, `):n)}),t}[Symbol.iterator](){return Object.entries(this.toJSON())[Symbol.iterator]()}toString(){return Object.entries(this.toJSON()).map(([e,t])=>e+`: `+t).join(`
+`)}getSetCookie(){return this.get(`set-cookie`)||[]}get[Symbol.toStringTag](){return`AxiosHeaders`}static from(e){return e instanceof this?e:new this(e)}static concat(e,...t){let n=new this(e);return t.forEach(e=>n.set(e)),n}static accessor(e){let t=(this[Xu]=this[Xu]={accessors:{}}).accessors,n=this.prototype;function r(e){let r=Zu(e);t[r]||(rd(n,e),t[r]=!0)}return Y.isArray(e)?e.forEach(r):r(e),this}};id.accessor([`Content-Type`,`Content-Length`,`Accept`,`Accept-Encoding`,`User-Agent`,`Authorization`]),Y.reduceDescriptors(id.prototype,({value:e},t)=>{let n=t[0].toUpperCase()+t.slice(1);return{get:()=>e,set(e){this[n]=e}}}),Y.freezeMethods(id);var ad=`[REDACTED ****]`;function od(e){if(Y.hasOwnProp(e,`toJSON`))return!0;let t=Object.getPrototypeOf(e);for(;t&&t!==Object.prototype;){if(Y.hasOwnProp(t,`toJSON`))return!0;t=Object.getPrototypeOf(t)}return!1}function sd(e,t){let n=new Set(t.map(e=>String(e).toLowerCase())),r=[],i=e=>{if(typeof e!=`object`||!e||Y.isBuffer(e))return e;if(r.indexOf(e)!==-1)return;e instanceof id&&(e=e.toJSON()),r.push(e);let t;if(Y.isArray(e))t=[],e.forEach((e,n)=>{let r=i(e);Y.isUndefined(r)||(t[n]=r)});else{if(!Y.isPlainObject(e)&&od(e))return r.pop(),e;t=Object.create(null);for(let[r,a]of Object.entries(e)){let e=n.has(r.toLowerCase())?ad:i(a);Y.isUndefined(e)||(t[r]=e)}}return r.pop(),t};return i(e)}var X=class e extends Error{static from(t,n,r,i,a,o){let s=new e(t.message,n||t.code,r,i,a);return s.cause=t,s.name=t.name,t.status!=null&&s.status==null&&(s.status=t.status),o&&Object.assign(s,o),s}constructor(e,t,n,r,i){super(e),Object.defineProperty(this,"message",{__proto__:null,value:e,enumerable:!0,writable:!0,configurable:!0}),this.name=`AxiosError`,this.isAxiosError=!0,t&&(this.code=t),n&&(this.config=n),r&&(this.request=r),i&&(this.response=i,this.status=i.status)}toJSON(){let e=this.config,t=e&&Y.hasOwnProp(e,`redact`)?e.redact:void 0,n=Y.isArray(t)&&t.length>0?sd(e,t):Y.toJSONObject(e);return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:n,code:this.code,status:this.status}}};X.ERR_BAD_OPTION_VALUE=`ERR_BAD_OPTION_VALUE`,X.ERR_BAD_OPTION=`ERR_BAD_OPTION`,X.ECONNABORTED=`ECONNABORTED`,X.ETIMEDOUT=`ETIMEDOUT`,X.ECONNREFUSED=`ECONNREFUSED`,X.ERR_NETWORK=`ERR_NETWORK`,X.ERR_FR_TOO_MANY_REDIRECTS=`ERR_FR_TOO_MANY_REDIRECTS`,X.ERR_DEPRECATED=`ERR_DEPRECATED`,X.ERR_BAD_RESPONSE=`ERR_BAD_RESPONSE`,X.ERR_BAD_REQUEST=`ERR_BAD_REQUEST`,X.ERR_CANCELED=`ERR_CANCELED`,X.ERR_NOT_SUPPORT=`ERR_NOT_SUPPORT`,X.ERR_INVALID_URL=`ERR_INVALID_URL`,X.ERR_FORM_DATA_DEPTH_EXCEEDED=`ERR_FORM_DATA_DEPTH_EXCEEDED`;function cd(e){return Y.isPlainObject(e)||Y.isArray(e)}function ld(e){return Y.endsWith(e,`[]`)?e.slice(0,-2):e}function ud(e,t,n){return e?e.concat(t).map(function(e,t){return e=ld(e),!n&&t?`[`+e+`]`:e}).join(n?`.`:``):t}function dd(e){return Y.isArray(e)&&!e.some(cd)}var fd=Y.toFlatObject(Y,{},null,function(e){return/^is[A-Z]/.test(e)});function pd(e,t,n){if(!Y.isObject(e))throw TypeError(`target must be an object`);t||=new FormData,n=Y.toFlatObject(n,{metaTokens:!0,dots:!1,indexes:!1},!1,function(e,t){return!Y.isUndefined(t[e])});let r=n.metaTokens,i=n.visitor||d,a=n.dots,o=n.indexes,s=n.Blob||typeof Blob<`u`&&Blob,c=n.maxDepth===void 0?100:n.maxDepth,l=s&&Y.isSpecCompliantForm(t);if(!Y.isFunction(i))throw TypeError(`visitor must be a function`);function u(e){if(e===null)return``;if(Y.isDate(e))return e.toISOString();if(Y.isBoolean(e))return e.toString();if(!l&&Y.isBlob(e))throw new X(`Blob is not supported. Use a Buffer instead.`);return Y.isArrayBuffer(e)||Y.isTypedArray(e)?l&&typeof Blob==`function`?new Blob([e]):Buffer.from(e):e}function d(e,n,i){let s=e;if(Y.isReactNative(t)&&Y.isReactNativeBlob(e))return t.append(ud(i,n,a),u(e)),!1;if(e&&!i&&typeof e==`object`){if(Y.endsWith(n,`{}`))n=r?n:n.slice(0,-2),e=JSON.stringify(e);else if(Y.isArray(e)&&dd(e)||(Y.isFileList(e)||Y.endsWith(n,`[]`))&&(s=Y.toArray(e)))return n=ld(n),s.forEach(function(e,r){!(Y.isUndefined(e)||e===null)&&t.append(o===!0?ud([n],r,a):o===null?n:n+`[]`,u(e))}),!1}return cd(e)?!0:(t.append(ud(i,n,a),u(e)),!1)}let f=[],p=Object.assign(fd,{defaultVisitor:d,convertValue:u,isVisitable:cd});function m(e,n,r=0){if(!Y.isUndefined(e)){if(r>c)throw new X(`Object is too deeply nested (`+r+` levels). Max depth: `+c,X.ERR_FORM_DATA_DEPTH_EXCEEDED);if(f.indexOf(e)!==-1)throw Error(`Circular reference detected in `+n.join(`.`));f.push(e),Y.forEach(e,function(e,a){(!(Y.isUndefined(e)||e===null)&&i.call(t,e,Y.isString(a)?a.trim():a,n,p))===!0&&m(e,n?n.concat(a):[a],r+1)}),f.pop()}}if(!Y.isObject(e))throw TypeError(`data must be an object`);return m(e),t}function md(e){let t={"!":`%21`,"'":`%27`,"(":`%28`,")":`%29`,"~":`%7E`,"%20":`+`};return encodeURIComponent(e).replace(/[!'()~]|%20/g,function(e){return t[e]})}function hd(e,t){this._pairs=[],e&&pd(e,this,t)}var gd=hd.prototype;gd.append=function(e,t){this._pairs.push([e,t])},gd.toString=function(e){let t=e?function(t){return e.call(this,t,md)}:md;return this._pairs.map(function(e){return t(e[0])+`=`+t(e[1])},``).join(`&`)};function _d(e){return encodeURIComponent(e).replace(/%3A/gi,`:`).replace(/%24/g,`$`).replace(/%2C/gi,`,`).replace(/%20/g,`+`)}function vd(e,t,n){if(!t)return e;let r=n&&n.encode||_d,i=Y.isFunction(n)?{serialize:n}:n,a=i&&i.serialize,o;if(o=a?a(t,i):Y.isURLSearchParams(t)?t.toString():new hd(t,i).toString(r),o){let t=e.indexOf(`#`);t!==-1&&(e=e.slice(0,t)),e+=(e.indexOf(`?`)===-1?`?`:`&`)+o}return e}var yd=class{constructor(){this.handlers=[]}use(e,t,n){return this.handlers.push({fulfilled:e,rejected:t,synchronous:n?n.synchronous:!1,runWhen:n?n.runWhen:null}),this.handlers.length-1}eject(e){this.handlers[e]&&(this.handlers[e]=null)}clear(){this.handlers&&=[]}forEach(e){Y.forEach(this.handlers,function(t){t!==null&&e(t)})}},bd={silentJSONParsing:!0,forcedJSONParsing:!0,clarifyTimeoutError:!1,legacyInterceptorReqResOrdering:!0},xd={isBrowser:!0,classes:{URLSearchParams:typeof URLSearchParams<`u`?URLSearchParams:hd,FormData:typeof FormData<`u`?FormData:null,Blob:typeof Blob<`u`?Blob:null},protocols:[`http`,`https`,`file`,`blob`,`url`,`data`]},Sd=n({hasBrowserEnv:()=>Cd,hasStandardBrowserEnv:()=>Td,hasStandardBrowserWebWorkerEnv:()=>Ed,navigator:()=>wd,origin:()=>Dd}),Cd=typeof window<`u`&&typeof document<`u`,wd=typeof navigator==`object`&&navigator||void 0,Td=Cd&&(!wd||[`ReactNative`,`NativeScript`,`NS`].indexOf(wd.product)<0),Ed=typeof WorkerGlobalScope<`u`&&self instanceof WorkerGlobalScope&&typeof self.importScripts==`function`,Dd=Cd&&window.location.href||`http://localhost`,Od={...Sd,...xd};function kd(e,t){return pd(e,new Od.classes.URLSearchParams,{visitor:function(e,t,n,r){return Od.isNode&&Y.isBuffer(e)?(this.append(t,e.toString(`base64`)),!1):r.defaultVisitor.apply(this,arguments)},...t})}function Ad(e){return Y.matchAll(/\w+|\[(\w*)]/g,e).map(e=>e[0]===`[]`?``:e[1]||e[0])}function jd(e){let t={},n=Object.keys(e),r,i=n.length,a;for(r=0;r<i;r++)a=n[r],t[a]=e[a];return t}function Md(e){function t(e,n,r,i){let a=e[i++];if(a===`__proto__`)return!0;let o=Number.isFinite(+a),s=i>=e.length;return a=!a&&Y.isArray(r)?r.length:a,s?(Y.hasOwnProp(r,a)?r[a]=Y.isArray(r[a])?r[a].concat(n):[r[a],n]:r[a]=n,!o):((!Y.hasOwnProp(r,a)||!Y.isObject(r[a]))&&(r[a]=[]),t(e,n,r[a],i)&&Y.isArray(r[a])&&(r[a]=jd(r[a])),!o)}if(Y.isFormData(e)&&Y.isFunction(e.entries)){let n={};return Y.forEachEntry(e,(e,r)=>{t(Ad(e),r,n,0)}),n}return null}var Nd=(e,t)=>e!=null&&Y.hasOwnProp(e,t)?e[t]:void 0;function Pd(e,t,n){if(Y.isString(e))try{return(t||JSON.parse)(e),Y.trim(e)}catch(e){if(e.name!==`SyntaxError`)throw e}return(n||JSON.stringify)(e)}var Fd={transitional:bd,adapter:[`xhr`,`http`,`fetch`],transformRequest:[function(e,t){let n=t.getContentType()||``,r=n.indexOf(`application/json`)>-1,i=Y.isObject(e);if(i&&Y.isHTMLForm(e)&&(e=new FormData(e)),Y.isFormData(e))return r?JSON.stringify(Md(e)):e;if(Y.isArrayBuffer(e)||Y.isBuffer(e)||Y.isStream(e)||Y.isFile(e)||Y.isBlob(e)||Y.isReadableStream(e))return e;if(Y.isArrayBufferView(e))return e.buffer;if(Y.isURLSearchParams(e))return t.setContentType(`application/x-www-form-urlencoded;charset=utf-8`,!1),e.toString();let a;if(i){let t=Nd(this,`formSerializer`);if(n.indexOf(`application/x-www-form-urlencoded`)>-1)return kd(e,t).toString();if((a=Y.isFileList(e))||n.indexOf(`multipart/form-data`)>-1){let n=Nd(this,`env`),r=n&&n.FormData;return pd(a?{"files[]":e}:e,r&&new r,t)}}return i||r?(t.setContentType(`application/json`,!1),Pd(e)):e}],transformResponse:[function(e){let t=Nd(this,`transitional`)||Fd.transitional,n=t&&t.forcedJSONParsing,r=Nd(this,`responseType`),i=r===`json`;if(Y.isResponse(e)||Y.isReadableStream(e))return e;if(e&&Y.isString(e)&&(n&&!r||i)){let n=!(t&&t.silentJSONParsing)&&i;try{return JSON.parse(e,Nd(this,`parseReviver`))}catch(e){if(n)throw e.name===`SyntaxError`?X.from(e,X.ERR_BAD_RESPONSE,this,null,Nd(this,`response`)):e}}return e}],timeout:0,xsrfCookieName:`XSRF-TOKEN`,xsrfHeaderName:`X-XSRF-TOKEN`,maxContentLength:-1,maxBodyLength:-1,env:{FormData:Od.classes.FormData,Blob:Od.classes.Blob},validateStatus:function(e){return e>=200&&e<300},headers:{common:{Accept:`application/json, text/plain, */*`,"Content-Type":void 0}}};Y.forEach([`delete`,`get`,`head`,`post`,`put`,`patch`,`query`],e=>{Fd.headers[e]={}});function Id(e,t){let n=this||Fd,r=t||n,i=id.from(r.headers),a=r.data;return Y.forEach(e,function(e){a=e.call(n,a,i.normalize(),t?t.status:void 0)}),i.normalize(),a}function Ld(e){return!!(e&&e.__CANCEL__)}var Rd=class extends X{constructor(e,t,n){super(e??`canceled`,X.ERR_CANCELED,t,n),this.name=`CanceledError`,this.__CANCEL__=!0}};function zd(e,t,n){let r=n.config.validateStatus;!n.status||!r||r(n.status)?e(n):t(new X(`Request failed with status code `+n.status,n.status>=400&&n.status<500?X.ERR_BAD_REQUEST:X.ERR_BAD_RESPONSE,n.config,n.request,n))}function Bd(e){let t=/^([-+\w]{1,25}):(?:\/\/)?/.exec(e);return t&&t[1]||``}function Vd(e,t){e||=10;let n=Array(e),r=Array(e),i=0,a=0,o;return t=t===void 0?1e3:t,function(s){let c=Date.now(),l=r[a];o||=c,n[i]=s,r[i]=c;let u=a,d=0;for(;u!==i;)d+=n[u++],u%=e;if(i=(i+1)%e,i===a&&(a=(a+1)%e),c-o<t)return;let f=l&&c-l;return f?Math.round(d*1e3/f):void 0}}function Hd(e,t){let n=0,r=1e3/t,i,a,o=(t,r=Date.now())=>{n=r,i=null,a&&=(clearTimeout(a),null),e(...t)};return[(...e)=>{let t=Date.now(),s=t-n;s>=r?o(e,t):(i=e,a||=setTimeout(()=>{a=null,o(i)},r-s))},()=>i&&o(i)]}var Ud=(e,t,n=3)=>{let r=0,i=Vd(50,250);return Hd(n=>{if(!n||typeof n.loaded!=`number`)return;let a=n.loaded,o=n.lengthComputable?n.total:void 0,s=o==null?a:Math.min(a,o),c=Math.max(0,s-r),l=i(c);r=Math.max(r,s),e({loaded:s,total:o,progress:o?s/o:void 0,bytes:c,rate:l||void 0,estimated:l&&o?(o-s)/l:void 0,event:n,lengthComputable:o!=null,[t?`download`:`upload`]:!0})},n)},Wd=(e,t)=>{let n=e!=null;return[r=>t[0]({lengthComputable:n,total:e,loaded:r}),t[1]]},Gd=e=>(...t)=>Y.asap(()=>e(...t)),Kd=Od.hasStandardBrowserEnv?((e,t)=>n=>(n=new URL(n,Od.origin),e.protocol===n.protocol&&e.host===n.host&&(t||e.port===n.port)))(new URL(Od.origin),Od.navigator&&/(msie|trident)/i.test(Od.navigator.userAgent)):()=>!0,qd=Od.hasStandardBrowserEnv?{write(e,t,n,r,i,a,o){if(typeof document>`u`)return;let s=[`${e}=${encodeURIComponent(t)}`];Y.isNumber(n)&&s.push(`expires=${new Date(n).toUTCString()}`),Y.isString(r)&&s.push(`path=${r}`),Y.isString(i)&&s.push(`domain=${i}`),a===!0&&s.push(`secure`),Y.isString(o)&&s.push(`SameSite=${o}`),document.cookie=s.join(`; `)},read(e){if(typeof document>`u`)return null;let t=document.cookie.split(`;`);for(let n=0;n<t.length;n++){let r=t[n].replace(/^\s+/,``),i=r.indexOf(`=`);if(i!==-1&&r.slice(0,i)===e)return decodeURIComponent(r.slice(i+1))}return null},remove(e){this.write(e,``,Date.now()-864e5,`/`)}}:{write(){},read(){return null},remove(){}};function Jd(e){return typeof e==`string`?/^([a-z][a-z\d+\-.]*:)?\/\//i.test(e):!1}function Yd(e,t){return t?e.replace(/\/?\/$/,``)+`/`+t.replace(/^\/+/,``):e}function Xd(e,t,n){let r=!Jd(t);return e&&(r||n===!1)?Yd(e,t):t}var Zd=e=>e instanceof id?{...e}:e;function Qd(e,t){t||={};let n=Object.create(null);Object.defineProperty(n,"hasOwnProperty",{__proto__:null,value:Object.prototype.hasOwnProperty,enumerable:!1,writable:!0,configurable:!0});function r(e,t,n,r){return Y.isPlainObject(e)&&Y.isPlainObject(t)?Y.merge.call({caseless:r},e,t):Y.isPlainObject(t)?Y.merge({},t):Y.isArray(t)?t.slice():t}function i(e,t,n,i){if(!Y.isUndefined(t))return r(e,t,n,i);if(!Y.isUndefined(e))return r(void 0,e,n,i)}function a(e,t){if(!Y.isUndefined(t))return r(void 0,t)}function o(e,t){if(!Y.isUndefined(t))return r(void 0,t);if(!Y.isUndefined(e))return r(void 0,e)}function s(n,i,a){if(Y.hasOwnProp(t,a))return r(n,i);if(Y.hasOwnProp(e,a))return r(void 0,n)}let c={url:a,method:a,data:a,baseURL:o,transformRequest:o,transformResponse:o,paramsSerializer:o,timeout:o,timeoutMessage:o,withCredentials:o,withXSRFToken:o,adapter:o,responseType:o,xsrfCookieName:o,xsrfHeaderName:o,onUploadProgress:o,onDownloadProgress:o,decompress:o,maxContentLength:o,maxBodyLength:o,beforeRedirect:o,transport:o,httpAgent:o,httpsAgent:o,cancelToken:o,socketPath:o,allowedSocketPaths:o,responseEncoding:o,validateStatus:s,headers:(e,t,n)=>i(Zd(e),Zd(t),n,!0)};return Y.forEach(Object.keys({...e,...t}),function(r){if(r===`__proto__`||r===`constructor`||r===`prototype`)return;let a=Y.hasOwnProp(c,r)?c[r]:i,o=a(Y.hasOwnProp(e,r)?e[r]:void 0,Y.hasOwnProp(t,r)?t[r]:void 0,r);Y.isUndefined(o)&&a!==s||(n[r]=o)}),n}var $d=[`content-type`,`content-length`];function ef(e,t,n){if(n!==`content-only`){e.set(t);return}Object.entries(t).forEach(([t,n])=>{$d.includes(t.toLowerCase())&&e.set(t,n)})}var tf=e=>encodeURIComponent(e).replace(/%([0-9A-F]{2})/gi,(e,t)=>String.fromCharCode(parseInt(t,16))),nf=e=>{let t=Qd({},e),n=e=>Y.hasOwnProp(t,e)?t[e]:void 0,r=n(`data`),i=n(`withXSRFToken`),a=n(`xsrfHeaderName`),o=n(`xsrfCookieName`),s=n(`headers`),c=n(`auth`),l=n(`baseURL`),u=n(`allowAbsoluteUrls`),d=n(`url`);if(t.headers=s=id.from(s),t.url=vd(Xd(l,d,u),e.params,e.paramsSerializer),c&&s.set(`Authorization`,`Basic `+btoa((c.username||``)+`:`+(c.password?tf(c.password):``))),Y.isFormData(r)&&(Od.hasStandardBrowserEnv||Od.hasStandardBrowserWebWorkerEnv?s.setContentType(void 0):Y.isFunction(r.getHeaders)&&ef(s,r.getHeaders(),n(`formDataHeaderPolicy`))),Od.hasStandardBrowserEnv&&(Y.isFunction(i)&&(i=i(t)),i===!0||i==null&&Kd(t.url))){let e=a&&o&&qd.read(o);e&&s.set(a,e)}return t},rf=typeof XMLHttpRequest<`u`&&function(e){return new Promise(function(t,n){let r=nf(e),i=r.data,a=id.from(r.headers).normalize(),{responseType:o,onUploadProgress:s,onDownloadProgress:c}=r,l,u,d,f,p;function m(){f&&f(),p&&p(),r.cancelToken&&r.cancelToken.unsubscribe(l),r.signal&&r.signal.removeEventListener(`abort`,l)}let h=new XMLHttpRequest;h.open(r.method.toUpperCase(),r.url,!0),h.timeout=r.timeout;function g(){if(!h)return;let r=id.from(`getAllResponseHeaders`in h&&h.getAllResponseHeaders());zd(function(e){t(e),m()},function(e){n(e),m()},{data:!o||o===`text`||o===`json`?h.responseText:h.response,status:h.status,statusText:h.statusText,headers:r,config:e,request:h}),h=null}`onloadend`in h?h.onloadend=g:h.onreadystatechange=function(){!h||h.readyState!==4||h.status===0&&!(h.responseURL&&h.responseURL.startsWith(`file:`))||setTimeout(g)},h.onabort=function(){h&&=(n(new X(`Request aborted`,X.ECONNABORTED,e,h)),m(),null)},h.onerror=function(t){let r=new X(t&&t.message?t.message:`Network Error`,X.ERR_NETWORK,e,h);r.event=t||null,n(r),m(),h=null},h.ontimeout=function(){let t=r.timeout?`timeout of `+r.timeout+`ms exceeded`:`timeout exceeded`,i=r.transitional||bd;r.timeoutErrorMessage&&(t=r.timeoutErrorMessage),n(new X(t,i.clarifyTimeoutError?X.ETIMEDOUT:X.ECONNABORTED,e,h)),m(),h=null},i===void 0&&a.setContentType(null),`setRequestHeader`in h&&Y.forEach(Yu(a),function(e,t){h.setRequestHeader(t,e)}),Y.isUndefined(r.withCredentials)||(h.withCredentials=!!r.withCredentials),o&&o!==`json`&&(h.responseType=r.responseType),c&&([d,p]=Ud(c,!0),h.addEventListener(`progress`,d)),s&&h.upload&&([u,f]=Ud(s),h.upload.addEventListener(`progress`,u),h.upload.addEventListener(`loadend`,f)),(r.cancelToken||r.signal)&&(l=t=>{h&&=(n(!t||t.type?new Rd(null,e,h):t),h.abort(),m(),null)},r.cancelToken&&r.cancelToken.subscribe(l),r.signal&&(r.signal.aborted?l():r.signal.addEventListener(`abort`,l)));let _=Bd(r.url);if(_&&!Od.protocols.includes(_)){n(new X(`Unsupported protocol `+_+`:`,X.ERR_BAD_REQUEST,e));return}h.send(i||null)})},af=(e,t)=>{if(e=e?e.filter(Boolean):[],!t&&!e.length)return;let n=new AbortController,r=!1,i=function(e){if(!r){r=!0,o();let t=e instanceof Error?e:this.reason;n.abort(t instanceof X?t:new Rd(t instanceof Error?t.message:t))}},a=t&&setTimeout(()=>{a=null,i(new X(`timeout of ${t}ms exceeded`,X.ETIMEDOUT))},t),o=()=>{e&&=(a&&clearTimeout(a),a=null,e.forEach(e=>{e.unsubscribe?e.unsubscribe(i):e.removeEventListener(`abort`,i)}),null)};e.forEach(e=>e.addEventListener(`abort`,i));let{signal:s}=n;return s.unsubscribe=()=>Y.asap(o),s},of=function*(e,t){let n=e.byteLength;if(!t||n<t){yield e;return}let r=0,i;for(;r<n;)i=r+t,yield e.slice(r,i),r=i},sf=async function*(e,t){for await(let n of cf(e))yield*of(n,t)},cf=async function*(e){if(e[Symbol.asyncIterator]){yield*e;return}let t=e.getReader();try{for(;;){let{done:e,value:n}=await t.read();if(e)break;yield n}}finally{await t.cancel()}},lf=(e,t,n,r)=>{let i=sf(e,t),a=0,o,s=e=>{o||(o=!0,r&&r(e))};return new ReadableStream({async pull(e){try{let{done:t,value:r}=await i.next();if(t){s(),e.close();return}let o=r.byteLength;n&&n(a+=o),e.enqueue(new Uint8Array(r))}catch(e){throw s(e),e}},cancel(e){return s(e),i.return()}},{highWaterMark:2})};function uf(e){if(!e||typeof e!=`string`||!e.startsWith(`data:`))return 0;let t=e.indexOf(`,`);if(t<0)return 0;let n=e.slice(5,t),r=e.slice(t+1);if(/;base64/i.test(n)){let e=r.length,t=r.length;for(let n=0;n<t;n++)if(r.charCodeAt(n)===37&&n+2<t){let t=r.charCodeAt(n+1),i=r.charCodeAt(n+2);(t>=48&&t<=57||t>=65&&t<=70||t>=97&&t<=102)&&(i>=48&&i<=57||i>=65&&i<=70||i>=97&&i<=102)&&(e-=2,n+=2)}let n=0,i=t-1,a=e=>e>=2&&r.charCodeAt(e-2)===37&&r.charCodeAt(e-1)===51&&(r.charCodeAt(e)===68||r.charCodeAt(e)===100);i>=0&&(r.charCodeAt(i)===61?(n++,i--):a(i)&&(n++,i-=3)),n===1&&i>=0&&(r.charCodeAt(i)===61||a(i))&&n++;let o=Math.floor(e/4)*3-(n||0);return o>0?o:0}if(typeof Buffer<`u`&&typeof Buffer.byteLength==`function`)return Buffer.byteLength(r,`utf8`);let i=0;for(let e=0,t=r.length;e<t;e++){let n=r.charCodeAt(e);if(n<128)i+=1;else if(n<2048)i+=2;else if(n>=55296&&n<=56319&&e+1<t){let t=r.charCodeAt(e+1);t>=56320&&t<=57343?(i+=4,e++):i+=3}else i+=3}return i}var df=`1.16.1`,ff=64*1024,{isFunction:pf}=Y,mf=(e,...t)=>{try{return!!e(...t)}catch{return!1}},hf=e=>{let t=Y.global!==void 0&&Y.global!==null?Y.global:globalThis,{ReadableStream:n,TextEncoder:r}=t;e=Y.merge.call({skipUndefined:!0},{Request:t.Request,Response:t.Response},e);let{fetch:i,Request:a,Response:o}=e,s=i?pf(i):typeof fetch==`function`,c=pf(a),l=pf(o);if(!s)return!1;let u=s&&pf(n),d=s&&(typeof r==`function`?(e=>t=>e.encode(t))(new r):async e=>new Uint8Array(await new a(e).arrayBuffer())),f=c&&u&&mf(()=>{let e=!1,t=new a(Od.origin,{body:new n,method:`POST`,get duplex(){return e=!0,`half`}}),r=t.headers.has(`Content-Type`);return t.body!=null&&t.body.cancel(),e&&!r}),p=l&&u&&mf(()=>Y.isReadableStream(new o(``).body)),m={stream:p&&(e=>e.body)};s&&[`text`,`arrayBuffer`,`blob`,`formData`,`stream`].forEach(e=>{!m[e]&&(m[e]=(t,n)=>{let r=t&&t[e];if(r)return r.call(t);throw new X(`Response type '${e}' is not supported`,X.ERR_NOT_SUPPORT,n)})});let h=async e=>{if(e==null)return 0;if(Y.isBlob(e))return e.size;if(Y.isSpecCompliantForm(e))return(await new a(Od.origin,{method:`POST`,body:e}).arrayBuffer()).byteLength;if(Y.isArrayBufferView(e)||Y.isArrayBuffer(e))return e.byteLength;if(Y.isURLSearchParams(e)&&(e+=``),Y.isString(e))return(await d(e)).byteLength},g=async(e,t)=>Y.toFiniteNumber(e.getContentLength())??h(t);return async e=>{let{url:t,method:n,data:s,signal:l,cancelToken:u,timeout:d,onDownloadProgress:h,onUploadProgress:_,responseType:v,headers:y,withCredentials:b=`same-origin`,fetchOptions:x,maxContentLength:S,maxBodyLength:C}=nf(e),w=Y.isNumber(S)&&S>-1,ee=Y.isNumber(C)&&C>-1,te=i||fetch;v=v?(v+``).toLowerCase():`text`;let T=af([l,u&&u.toAbortSignal()],d),E=null,D=T&&T.unsubscribe&&(()=>{T.unsubscribe()}),ne;try{if(w&&typeof t==`string`&&t.startsWith(`data:`)&&uf(t)>S)throw new X(`maxContentLength size of `+S+` exceeded`,X.ERR_BAD_RESPONSE,e,E);if(ee&&n!==`get`&&n!==`head`){let t=await g(y,s);if(typeof t==`number`&&isFinite(t)&&t>C)throw new X(`Request body larger than maxBodyLength limit`,X.ERR_BAD_REQUEST,e,E)}if(_&&f&&n!==`get`&&n!==`head`&&(ne=await g(y,s))!==0){let e=new a(t,{method:`POST`,body:s,duplex:`half`}),n;if(Y.isFormData(s)&&(n=e.headers.get(`content-type`))&&y.setContentType(n),e.body){let[t,n]=Wd(ne,Ud(Gd(_)));s=lf(e.body,ff,t,n)}}Y.isString(b)||(b=b?`include`:`omit`);let i=c&&`credentials`in a.prototype;if(Y.isFormData(s)){let e=y.getContentType();e&&/^multipart\/form-data/i.test(e)&&!/boundary=/i.test(e)&&y.delete(`content-type`)}y.set(`User-Agent`,`axios/`+df,!1);let l={...x,signal:T,method:n.toUpperCase(),headers:Yu(y.normalize()),body:s,duplex:`half`,credentials:i?b:void 0};E=c&&new a(t,l);let u=await(c?te(E,x):te(t,l));if(w){let t=Y.toFiniteNumber(u.headers.get(`content-length`));if(t!=null&&t>S)throw new X(`maxContentLength size of `+S+` exceeded`,X.ERR_BAD_RESPONSE,e,E)}let d=p&&(v===`stream`||v===`response`);if(p&&u.body&&(h||w||d&&D)){let t={};[`status`,`statusText`,`headers`].forEach(e=>{t[e]=u[e]});let n=Y.toFiniteNumber(u.headers.get(`content-length`)),[r,i]=h&&Wd(n,Ud(Gd(h),!0))||[],a=0;u=new o(lf(u.body,ff,t=>{if(w&&(a=t,a>S))throw new X(`maxContentLength size of `+S+` exceeded`,X.ERR_BAD_RESPONSE,e,E);r&&r(t)},()=>{i&&i(),D&&D()}),t)}v||=`text`;let O=await m[Y.findKey(m,v)||`text`](u,e);if(w&&!p&&!d){let t;if(O!=null&&(typeof O.byteLength==`number`?t=O.byteLength:typeof O.size==`number`?t=O.size:typeof O==`string`&&(t=typeof r==`function`?new r().encode(O).byteLength:O.length)),typeof t==`number`&&t>S)throw new X(`maxContentLength size of `+S+` exceeded`,X.ERR_BAD_RESPONSE,e,E)}return!d&&D&&D(),await new Promise((t,n)=>{zd(t,n,{data:O,headers:id.from(u.headers),status:u.status,statusText:u.statusText,config:e,request:E})})}catch(t){if(D&&D(),T&&T.aborted&&T.reason instanceof X){let n=T.reason;throw n.config=e,E&&(n.request=E),t!==n&&(n.cause=t),n}throw t&&t.name===`TypeError`&&/Load failed|fetch/i.test(t.message)?Object.assign(new X(`Network Error`,X.ERR_NETWORK,e,E,t&&t.response),{cause:t.cause||t}):X.from(t,t&&t.code,e,E,t&&t.response)}}},gf=new Map,_f=e=>{let t=e&&e.env||{},{fetch:n,Request:r,Response:i}=t,a=[r,i,n],o=a.length,s,c,l=gf;for(;o--;)s=a[o],c=l.get(s),c===void 0&&l.set(s,c=o?new Map:hf(t)),l=c;return c};_f();var vf={http:null,xhr:rf,fetch:{get:_f}};Y.forEach(vf,(e,t)=>{if(e){try{Object.defineProperty(e,"name",{__proto__:null,value:t})}catch{}Object.defineProperty(e,"adapterName",{__proto__:null,value:t})}});var yf=e=>`- ${e}`,bf=e=>Y.isFunction(e)||e===null||e===!1;function xf(e,t){e=Y.isArray(e)?e:[e];let{length:n}=e,r,i,a={};for(let o=0;o<n;o++){r=e[o];let n;if(i=r,!bf(r)&&(i=vf[(n=String(r)).toLowerCase()],i===void 0))throw new X(`Unknown adapter '${n}'`);if(i&&(Y.isFunction(i)||(i=i.get(t))))break;a[n||`#`+o]=i}if(!i){let e=Object.entries(a).map(([e,t])=>`adapter ${e} `+(t===!1?`is not supported by the environment`:`is not available in the build`));throw new X(`There is no suitable adapter to dispatch the request `+(n?e.length>1?`since :
+`+e.map(yf).join(`
+`):` `+yf(e[0]):`as no adapter specified`),`ERR_NOT_SUPPORT`)}return i}var Sf={getAdapter:xf,adapters:vf};function Cf(e){if(e.cancelToken&&e.cancelToken.throwIfRequested(),e.signal&&e.signal.aborted)throw new Rd(null,e)}function wf(e){return Cf(e),e.headers=id.from(e.headers),e.data=Id.call(e,e.transformRequest),[`post`,`put`,`patch`].indexOf(e.method)!==-1&&e.headers.setContentType(`application/x-www-form-urlencoded`,!1),Sf.getAdapter(e.adapter||Fd.adapter,e)(e).then(function(t){Cf(e),e.response=t;try{t.data=Id.call(e,e.transformResponse,t)}finally{delete e.response}return t.headers=id.from(t.headers),t},function(t){if(!Ld(t)&&(Cf(e),t&&t.response)){e.response=t.response;try{t.response.data=Id.call(e,e.transformResponse,t.response)}finally{delete e.response}t.response.headers=id.from(t.response.headers)}return Promise.reject(t)})}var Tf={};[`object`,`boolean`,`number`,`function`,`string`,`symbol`].forEach((e,t)=>{Tf[e]=function(n){return typeof n===e||`a`+(t<1?`n `:` `)+e}});var Ef={};Tf.transitional=function(e,t,n){function r(e,t){return`[Axios v`+df+`] Transitional option '`+e+`'`+t+(n?`. `+n:``)}return(n,i,a)=>{if(e===!1)throw new X(r(i,` has been removed`+(t?` in `+t:``)),X.ERR_DEPRECATED);return t&&!Ef[i]&&(Ef[i]=!0,console.warn(r(i,` has been deprecated since v`+t+` and will be removed in the near future`))),e?e(n,i,a):!0}},Tf.spelling=function(e){return(t,n)=>(console.warn(`${n} is likely a misspelling of ${e}`),!0)};function Df(e,t,n){if(typeof e!=`object`)throw new X(`options must be an object`,X.ERR_BAD_OPTION_VALUE);let r=Object.keys(e),i=r.length;for(;i-- >0;){let a=r[i],o=Object.prototype.hasOwnProperty.call(t,a)?t[a]:void 0;if(o){let t=e[a],n=t===void 0||o(t,a,e);if(n!==!0)throw new X(`option `+a+` must be `+n,X.ERR_BAD_OPTION_VALUE);continue}if(n!==!0)throw new X(`Unknown option `+a,X.ERR_BAD_OPTION)}}var Of={assertOptions:Df,validators:Tf},kf=Of.validators,Af=class{constructor(e){this.defaults=e||{},this.interceptors={request:new yd,response:new yd}}async request(e,t){try{return await this._request(e,t)}catch(e){if(e instanceof Error){let t={};Error.captureStackTrace?Error.captureStackTrace(t):t=Error();let n=(()=>{if(!t.stack)return``;let e=t.stack.indexOf(`
+`);return e===-1?``:t.stack.slice(e+1)})();try{if(!e.stack)e.stack=n;else if(n){let t=n.indexOf(`
+`),r=t===-1?-1:n.indexOf(`
+`,t+1),i=r===-1?``:n.slice(r+1);String(e.stack).endsWith(i)||(e.stack+=`
+`+n)}}catch{}}throw e}}_request(e,t){typeof e==`string`?(t||={},t.url=e):t=e||{},t=Qd(this.defaults,t);let{transitional:n,paramsSerializer:r,headers:i}=t;n!==void 0&&Of.assertOptions(n,{silentJSONParsing:kf.transitional(kf.boolean),forcedJSONParsing:kf.transitional(kf.boolean),clarifyTimeoutError:kf.transitional(kf.boolean),legacyInterceptorReqResOrdering:kf.transitional(kf.boolean)},!1),r!=null&&(Y.isFunction(r)?t.paramsSerializer={serialize:r}:Of.assertOptions(r,{encode:kf.function,serialize:kf.function},!0)),t.allowAbsoluteUrls!==void 0||(this.defaults.allowAbsoluteUrls===void 0?t.allowAbsoluteUrls=!0:t.allowAbsoluteUrls=this.defaults.allowAbsoluteUrls),Of.assertOptions(t,{baseUrl:kf.spelling(`baseURL`),withXsrfToken:kf.spelling(`withXSRFToken`)},!0),t.method=(t.method||this.defaults.method||`get`).toLowerCase();let a=i&&Y.merge(i.common,i[t.method]);i&&Y.forEach([`delete`,`get`,`head`,`post`,`put`,`patch`,`query`,`common`],e=>{delete i[e]}),t.headers=id.concat(a,i);let o=[],s=!0;this.interceptors.request.forEach(function(e){if(typeof e.runWhen==`function`&&e.runWhen(t)===!1)return;s&&=e.synchronous;let n=t.transitional||bd;n&&n.legacyInterceptorReqResOrdering?o.unshift(e.fulfilled,e.rejected):o.push(e.fulfilled,e.rejected)});let c=[];this.interceptors.response.forEach(function(e){c.push(e.fulfilled,e.rejected)});let l,u=0,d;if(!s){let e=[wf.bind(this),void 0];for(e.unshift(...o),e.push(...c),d=e.length,l=Promise.resolve(t);u<d;)l=l.then(e[u++],e[u++]);return l}d=o.length;let f=t;for(;u<d;){let e=o[u++],t=o[u++];try{f=e(f)}catch(e){t.call(this,e);break}}try{l=wf.call(this,f)}catch(e){return Promise.reject(e)}for(u=0,d=c.length;u<d;)l=l.then(c[u++],c[u++]);return l}getUri(e){return e=Qd(this.defaults,e),vd(Xd(e.baseURL,e.url,e.allowAbsoluteUrls),e.params,e.paramsSerializer)}};Y.forEach([`delete`,`get`,`head`,`options`],function(e){Af.prototype[e]=function(t,n){return this.request(Qd(n||{},{method:e,url:t,data:(n||{}).data}))}}),Y.forEach([`post`,`put`,`patch`,`query`],function(e){function t(t){return function(n,r,i){return this.request(Qd(i||{},{method:e,headers:t?{"Content-Type":`multipart/form-data`}:{},url:n,data:r}))}}Af.prototype[e]=t(),e!==`query`&&(Af.prototype[e+`Form`]=t(!0))});var jf=class e{constructor(e){if(typeof e!=`function`)throw TypeError(`executor must be a function.`);let t;this.promise=new Promise(function(e){t=e});let n=this;this.promise.then(e=>{if(!n._listeners)return;let t=n._listeners.length;for(;t-- >0;)n._listeners[t](e);n._listeners=null}),this.promise.then=e=>{let t,r=new Promise(e=>{n.subscribe(e),t=e}).then(e);return r.cancel=function(){n.unsubscribe(t)},r},e(function(e,r,i){n.reason||(n.reason=new Rd(e,r,i),t(n.reason))})}throwIfRequested(){if(this.reason)throw this.reason}subscribe(e){if(this.reason){e(this.reason);return}this._listeners?this._listeners.push(e):this._listeners=[e]}unsubscribe(e){if(!this._listeners)return;let t=this._listeners.indexOf(e);t!==-1&&this._listeners.splice(t,1)}toAbortSignal(){let e=new AbortController,t=t=>{e.abort(t)};return this.subscribe(t),e.signal.unsubscribe=()=>this.unsubscribe(t),e.signal}static source(){let t;return{token:new e(function(e){t=e}),cancel:t}}};function Mf(e){return function(t){return e.apply(null,t)}}function Nf(e){return Y.isObject(e)&&e.isAxiosError===!0}var Pf={Continue:100,SwitchingProtocols:101,Processing:102,EarlyHints:103,Ok:200,Created:201,Accepted:202,NonAuthoritativeInformation:203,NoContent:204,ResetContent:205,PartialContent:206,MultiStatus:207,AlreadyReported:208,ImUsed:226,MultipleChoices:300,MovedPermanently:301,Found:302,SeeOther:303,NotModified:304,UseProxy:305,Unused:306,TemporaryRedirect:307,PermanentRedirect:308,BadRequest:400,Unauthorized:401,PaymentRequired:402,Forbidden:403,NotFound:404,MethodNotAllowed:405,NotAcceptable:406,ProxyAuthenticationRequired:407,RequestTimeout:408,Conflict:409,Gone:410,LengthRequired:411,PreconditionFailed:412,PayloadTooLarge:413,UriTooLong:414,UnsupportedMediaType:415,RangeNotSatisfiable:416,ExpectationFailed:417,ImATeapot:418,MisdirectedRequest:421,UnprocessableEntity:422,Locked:423,FailedDependency:424,TooEarly:425,UpgradeRequired:426,PreconditionRequired:428,TooManyRequests:429,RequestHeaderFieldsTooLarge:431,UnavailableForLegalReasons:451,InternalServerError:500,NotImplemented:501,BadGateway:502,ServiceUnavailable:503,GatewayTimeout:504,HttpVersionNotSupported:505,VariantAlsoNegotiates:506,InsufficientStorage:507,LoopDetected:508,NotExtended:510,NetworkAuthenticationRequired:511,WebServerIsDown:521,ConnectionTimedOut:522,OriginIsUnreachable:523,TimeoutOccurred:524,SslHandshakeFailed:525,InvalidSslCertificate:526};Object.entries(Pf).forEach(([e,t])=>{Pf[t]=e});function Ff(e){let t=new Af(e),n=Al(Af.prototype.request,t);return Y.extend(n,Af.prototype,t,{allOwnKeys:!0}),Y.extend(n,t,null,{allOwnKeys:!0}),n.create=function(t){return Ff(Qd(e,t))},n}var Z=Ff(Fd);Z.Axios=Af,Z.CanceledError=Rd,Z.CancelToken=jf,Z.isCancel=Ld,Z.VERSION=df,Z.toFormData=pd,Z.AxiosError=X,Z.Cancel=Z.CanceledError,Z.all=function(e){return Promise.all(e)},Z.spread=Mf,Z.isAxiosError=Nf,Z.mergeConfig=Qd,Z.AxiosHeaders=id,Z.formToJSON=e=>Md(Y.isHTMLForm(e)?new FormData(e):e),Z.getAdapter=Sf.getAdapter,Z.HttpStatusCode=Pf,Z.default=Z;var Q=Z.create({baseURL:`http://localhost:3001/api`,withCredentials:!0,headers:{"Content-Type":`application/json`}});Q.interceptors.response.use(e=>e,async e=>{let t=e.config;if(e.response?.status===401&&!t._retry){t._retry=!0;try{return await Z.post(`${Q.defaults.baseURL}/auth/refresh`,{},{withCredentials:!0}),Q(t)}catch{return Promise.reject(e)}}return Promise.reject(e)});var If=Es(`auth`,()=>{let e=F(null),t=F(!1),n=G(()=>!!e.value),r=G(()=>e.value?.role===`admin`),i=G(()=>e.value?.role===`artist`);async function a(){try{let{data:t}=await Q.get(`/auth/me`);t.success&&(e.value=t.data)}catch{e.value=null}}async function o(n,r){t.value=!0;try{let{data:t}=await Q.post(`/auth/login`,{identifier:n,password:r});return t.success&&(e.value=t.data.user),{success:!0}}catch(e){return{success:!1,message:e.response?.data?.message||`Login failed`}}finally{t.value=!1}}async function s(n){t.value=!0;try{let{data:t}=await Q.post(`/auth/register`,n);return t.success&&(e.value=t.data.user),{success:!0}}catch(e){return{success:!1,message:e.response?.data?.message||`Registration failed`}}finally{t.value=!1}}async function c(){try{await Q.post(`/auth/logout`)}finally{e.value=null}}async function l(n){t.value=!0;try{let{data:t}=await Q.put(`/auth/profile`,n,{headers:{"Content-Type":`multipart/form-data`}});return t.success&&(e.value=t.data),{success:!0}}catch(e){return{success:!1,message:e.response?.data?.message||`Update failed`}}finally{t.value=!1}}return{user:e,loading:t,isLoggedIn:n,isAdmin:r,isArtist:i,checkSession:a,login:o,register:s,logout:c,updateProfile:l}}),Lf=Es(`ui`,()=>{let e=F([]),t=0;function n(n,r=`info`){let i=++t;e.value.push({id:i,message:n,type:r}),setTimeout(()=>{e.value=e.value.filter(e=>e.id!==i)},3e3)}function r(t){e.value=e.value.filter(e=>e.id!==t)}return{toasts:e,showToast:n,dismissToast:r}}),Rf=t((e=>{(function(){var t=function(){this.init()};t.prototype={init:function(){var e=this||n;return e._counter=1e3,e._html5AudioPool=[],e.html5PoolSize=10,e._codecs={},e._howls=[],e._muted=!1,e._volume=1,e._canPlayEvent=`canplaythrough`,e._navigator=typeof window<`u`&&window.navigator?window.navigator:null,e.masterGain=null,e.noAudio=!1,e.usingWebAudio=!0,e.autoSuspend=!0,e.ctx=null,e.autoUnlock=!0,e._setup(),e},volume:function(e){var t=this||n;if(e=parseFloat(e),t.ctx||u(),e!==void 0&&e>=0&&e<=1){if(t._volume=e,t._muted)return t;t.usingWebAudio&&t.masterGain.gain.setValueAtTime(e,n.ctx.currentTime);for(var r=0;r<t._howls.length;r++)if(!t._howls[r]._webAudio)for(var i=t._howls[r]._getSoundIds(),a=0;a<i.length;a++){var o=t._howls[r]._soundById(i[a]);o&&o._node&&(o._node.volume=o._volume*e)}return t}return t._volume},mute:function(e){var t=this||n;t.ctx||u(),t._muted=e,t.usingWebAudio&&t.masterGain.gain.setValueAtTime(e?0:t._volume,n.ctx.currentTime);for(var r=0;r<t._howls.length;r++)if(!t._howls[r]._webAudio)for(var i=t._howls[r]._getSoundIds(),a=0;a<i.length;a++){var o=t._howls[r]._soundById(i[a]);o&&o._node&&(o._node.muted=e?!0:o._muted)}return t},stop:function(){for(var e=this||n,t=0;t<e._howls.length;t++)e._howls[t].stop();return e},unload:function(){for(var e=this||n,t=e._howls.length-1;t>=0;t--)e._howls[t].unload();return e.usingWebAudio&&e.ctx&&e.ctx.close!==void 0&&(e.ctx.close(),e.ctx=null,u()),e},codecs:function(e){return(this||n)._codecs[e.replace(/^x-/,``)]},_setup:function(){var e=this||n;if(e.state=e.ctx&&e.ctx.state||`suspended`,e._autoSuspend(),!e.usingWebAudio)if(typeof Audio<`u`)try{var t=new Audio;t.oncanplaythrough===void 0&&(e._canPlayEvent=`canplay`)}catch{e.noAudio=!0}else e.noAudio=!0;try{var t=new Audio;t.muted&&(e.noAudio=!0)}catch{}return e.noAudio||e._setupCodecs(),e},_setupCodecs:function(){var e=this||n,t=null;try{t=typeof Audio<`u`?new Audio:null}catch{return e}if(!t||typeof t.canPlayType!=`function`)return e;var r=t.canPlayType(`audio/mpeg;`).replace(/^no$/,``),i=e._navigator?e._navigator.userAgent:``,a=i.match(/OPR\/(\d+)/g),o=a&&parseInt(a[0].split(`/`)[1],10)<33,s=i.indexOf(`Safari`)!==-1&&i.indexOf(`Chrome`)===-1,c=i.match(/Version\/(.*?) /),l=s&&c&&parseInt(c[1],10)<15;return e._codecs={mp3:!!(!o&&(r||t.canPlayType(`audio/mp3;`).replace(/^no$/,``))),mpeg:!!r,opus:!!t.canPlayType(`audio/ogg; codecs="opus"`).replace(/^no$/,``),ogg:!!t.canPlayType(`audio/ogg; codecs="vorbis"`).replace(/^no$/,``),oga:!!t.canPlayType(`audio/ogg; codecs="vorbis"`).replace(/^no$/,``),wav:!!(t.canPlayType(`audio/wav; codecs="1"`)||t.canPlayType(`audio/wav`)).replace(/^no$/,``),aac:!!t.canPlayType(`audio/aac;`).replace(/^no$/,``),caf:!!t.canPlayType(`audio/x-caf;`).replace(/^no$/,``),m4a:!!(t.canPlayType(`audio/x-m4a;`)||t.canPlayType(`audio/m4a;`)||t.canPlayType(`audio/aac;`)).replace(/^no$/,``),m4b:!!(t.canPlayType(`audio/x-m4b;`)||t.canPlayType(`audio/m4b;`)||t.canPlayType(`audio/aac;`)).replace(/^no$/,``),mp4:!!(t.canPlayType(`audio/x-mp4;`)||t.canPlayType(`audio/mp4;`)||t.canPlayType(`audio/aac;`)).replace(/^no$/,``),weba:!!(!l&&t.canPlayType(`audio/webm; codecs="vorbis"`).replace(/^no$/,``)),webm:!!(!l&&t.canPlayType(`audio/webm; codecs="vorbis"`).replace(/^no$/,``)),dolby:!!t.canPlayType(`audio/mp4; codecs="ec-3"`).replace(/^no$/,``),flac:!!(t.canPlayType(`audio/x-flac;`)||t.canPlayType(`audio/flac;`)).replace(/^no$/,``)},e},_unlockAudio:function(){var e=this||n;if(!(e._audioUnlocked||!e.ctx)){e._audioUnlocked=!1,e.autoUnlock=!1,!e._mobileUnloaded&&e.ctx.sampleRate!==44100&&(e._mobileUnloaded=!0,e.unload()),e._scratchBuffer=e.ctx.createBuffer(1,1,22050);var t=function(n){for(;e._html5AudioPool.length<e.html5PoolSize;)try{var r=new Audio;r._unlocked=!0,e._releaseHtml5Audio(r)}catch{e.noAudio=!0;break}for(var i=0;i<e._howls.length;i++)if(!e._howls[i]._webAudio)for(var a=e._howls[i]._getSoundIds(),o=0;o<a.length;o++){var s=e._howls[i]._soundById(a[o]);s&&s._node&&!s._node._unlocked&&(s._node._unlocked=!0,s._node.load())}e._autoResume();var c=e.ctx.createBufferSource();c.buffer=e._scratchBuffer,c.connect(e.ctx.destination),c.start===void 0?c.noteOn(0):c.start(0),typeof e.ctx.resume==`function`&&e.ctx.resume(),c.onended=function(){c.disconnect(0),e._audioUnlocked=!0,document.removeEventListener(`touchstart`,t,!0),document.removeEventListener(`touchend`,t,!0),document.removeEventListener(`click`,t,!0),document.removeEventListener(`keydown`,t,!0);for(var n=0;n<e._howls.length;n++)e._howls[n]._emit(`unlock`)}};return document.addEventListener(`touchstart`,t,!0),document.addEventListener(`touchend`,t,!0),document.addEventListener(`click`,t,!0),document.addEventListener(`keydown`,t,!0),e}},_obtainHtml5Audio:function(){var e=this||n;if(e._html5AudioPool.length)return e._html5AudioPool.pop();var t=new Audio().play();return t&&typeof Promise<`u`&&(t instanceof Promise||typeof t.then==`function`)&&t.catch(function(){console.warn(`HTML5 Audio pool exhausted, returning potentially locked audio object.`)}),new Audio},_releaseHtml5Audio:function(e){var t=this||n;return e._unlocked&&t._html5AudioPool.push(e),t},_autoSuspend:function(){var e=this;if(!(!e.autoSuspend||!e.ctx||e.ctx.suspend===void 0||!n.usingWebAudio)){for(var t=0;t<e._howls.length;t++)if(e._howls[t]._webAudio){for(var r=0;r<e._howls[t]._sounds.length;r++)if(!e._howls[t]._sounds[r]._paused)return e}return e._suspendTimer&&clearTimeout(e._suspendTimer),e._suspendTimer=setTimeout(function(){if(e.autoSuspend){e._suspendTimer=null,e.state=`suspending`;var t=function(){e.state=`suspended`,e._resumeAfterSuspend&&(delete e._resumeAfterSuspend,e._autoResume())};e.ctx.suspend().then(t,t)}},3e4),e}},_autoResume:function(){var e=this;if(!(!e.ctx||e.ctx.resume===void 0||!n.usingWebAudio))return e.state===`running`&&e.ctx.state!==`interrupted`&&e._suspendTimer?(clearTimeout(e._suspendTimer),e._suspendTimer=null):e.state===`suspended`||e.state===`running`&&e.ctx.state===`interrupted`?(e.ctx.resume().then(function(){e.state=`running`;for(var t=0;t<e._howls.length;t++)e._howls[t]._emit(`resume`)}),e._suspendTimer&&=(clearTimeout(e._suspendTimer),null)):e.state===`suspending`&&(e._resumeAfterSuspend=!0),e}};var n=new t,r=function(e){var t=this;if(!e.src||e.src.length===0){console.error(`An array of source files must be passed with any new Howl.`);return}t.init(e)};r.prototype={init:function(e){var t=this;return n.ctx||u(),t._autoplay=e.autoplay||!1,t._format=typeof e.format==`string`?[e.format]:e.format,t._html5=e.html5||!1,t._muted=e.mute||!1,t._loop=e.loop||!1,t._pool=e.pool||5,t._preload=typeof e.preload==`boolean`||e.preload===`metadata`?e.preload:!0,t._rate=e.rate||1,t._sprite=e.sprite||{},t._src=typeof e.src==`string`?[e.src]:e.src,t._volume=e.volume===void 0?1:e.volume,t._xhr={method:e.xhr&&e.xhr.method?e.xhr.method:`GET`,headers:e.xhr&&e.xhr.headers?e.xhr.headers:null,withCredentials:e.xhr&&e.xhr.withCredentials?e.xhr.withCredentials:!1},t._duration=0,t._state=`unloaded`,t._sounds=[],t._endTimers={},t._queue=[],t._playLock=!1,t._onend=e.onend?[{fn:e.onend}]:[],t._onfade=e.onfade?[{fn:e.onfade}]:[],t._onload=e.onload?[{fn:e.onload}]:[],t._onloaderror=e.onloaderror?[{fn:e.onloaderror}]:[],t._onplayerror=e.onplayerror?[{fn:e.onplayerror}]:[],t._onpause=e.onpause?[{fn:e.onpause}]:[],t._onplay=e.onplay?[{fn:e.onplay}]:[],t._onstop=e.onstop?[{fn:e.onstop}]:[],t._onmute=e.onmute?[{fn:e.onmute}]:[],t._onvolume=e.onvolume?[{fn:e.onvolume}]:[],t._onrate=e.onrate?[{fn:e.onrate}]:[],t._onseek=e.onseek?[{fn:e.onseek}]:[],t._onunlock=e.onunlock?[{fn:e.onunlock}]:[],t._onresume=[],t._webAudio=n.usingWebAudio&&!t._html5,n.ctx!==void 0&&n.ctx&&n.autoUnlock&&n._unlockAudio(),n._howls.push(t),t._autoplay&&t._queue.push({event:`play`,action:function(){t.play()}}),t._preload&&t._preload!==`none`&&t.load(),t},load:function(){var e=this,t=null;if(n.noAudio){e._emit(`loaderror`,null,`No audio support.`);return}typeof e._src==`string`&&(e._src=[e._src]);for(var r=0;r<e._src.length;r++){var a,s;if(e._format&&e._format[r])a=e._format[r];else{if(s=e._src[r],typeof s!=`string`){e._emit(`loaderror`,null,`Non-string found in selected audio sources - ignoring.`);continue}a=/^data:audio\/([^;,]+);/i.exec(s),a||=/\.([^.]+)$/.exec(s.split(`?`,1)[0]),a&&=a[1].toLowerCase()}if(a||console.warn(`No file extension was found. Consider using the "format" property or specify an extension.`),a&&n.codecs(a)){t=e._src[r];break}}if(!t){e._emit(`loaderror`,null,`No codec support for selected audio sources.`);return}return e._src=t,e._state=`loading`,window.location.protocol===`https:`&&t.slice(0,5)===`http:`&&(e._html5=!0,e._webAudio=!1),new i(e),e._webAudio&&o(e),e},play:function(e,t){var r=this,i=null;if(typeof e==`number`)i=e,e=null;else if(typeof e==`string`&&r._state===`loaded`&&!r._sprite[e])return null;else if(e===void 0&&(e=`__default`,!r._playLock)){for(var a=0,o=0;o<r._sounds.length;o++)r._sounds[o]._paused&&!r._sounds[o]._ended&&(a++,i=r._sounds[o]._id);a===1?e=null:i=null}var s=i?r._soundById(i):r._inactiveSound();if(!s)return null;if(i&&!e&&(e=s._sprite||`__default`),r._state!==`loaded`){s._sprite=e,s._ended=!1;var c=s._id;return r._queue.push({event:`play`,action:function(){r.play(c)}}),c}if(i&&!s._paused)return t||r._loadQueue(`play`),s._id;r._webAudio&&n._autoResume();var l=Math.max(0,s._seek>0?s._seek:r._sprite[e][0]/1e3),u=Math.max(0,(r._sprite[e][0]+r._sprite[e][1])/1e3-l),d=u*1e3/Math.abs(s._rate),f=r._sprite[e][0]/1e3,p=(r._sprite[e][0]+r._sprite[e][1])/1e3;s._sprite=e,s._ended=!1;var m=function(){s._paused=!1,s._seek=l,s._start=f,s._stop=p,s._loop=!!(s._loop||r._sprite[e][2])};if(l>=p){r._ended(s);return}var h=s._node;if(r._webAudio){var g=function(){r._playLock=!1,m(),r._refreshBuffer(s);var e=s._muted||r._muted?0:s._volume;h.gain.setValueAtTime(e,n.ctx.currentTime),s._playStart=n.ctx.currentTime,h.bufferSource.start===void 0?s._loop?h.bufferSource.noteGrainOn(0,l,86400):h.bufferSource.noteGrainOn(0,l,u):s._loop?h.bufferSource.start(0,l,86400):h.bufferSource.start(0,l,u),d!==1/0&&(r._endTimers[s._id]=setTimeout(r._ended.bind(r,s),d)),t||setTimeout(function(){r._emit(`play`,s._id),r._loadQueue()},0)};n.state===`running`&&n.ctx.state!==`interrupted`?g():(r._playLock=!0,r.once(`resume`,g),r._clearTimer(s._id))}else{var _=function(){h.currentTime=l,h.muted=s._muted||r._muted||n._muted||h.muted,h.volume=s._volume*n.volume(),h.playbackRate=s._rate;try{var i=h.play();if(i&&typeof Promise<`u`&&(i instanceof Promise||typeof i.then==`function`)?(r._playLock=!0,m(),i.then(function(){r._playLock=!1,h._unlocked=!0,t?r._loadQueue():r._emit(`play`,s._id)}).catch(function(){r._playLock=!1,r._emit(`playerror`,s._id,`Playback was unable to start. This is most commonly an issue on mobile devices and Chrome where playback was not within a user interaction.`),s._ended=!0,s._paused=!0})):t||(r._playLock=!1,m(),r._emit(`play`,s._id)),h.playbackRate=s._rate,h.paused){r._emit(`playerror`,s._id,`Playback was unable to start. This is most commonly an issue on mobile devices and Chrome where playback was not within a user interaction.`);return}e!==`__default`||s._loop?r._endTimers[s._id]=setTimeout(r._ended.bind(r,s),d):(r._endTimers[s._id]=function(){r._ended(s),h.removeEventListener(`ended`,r._endTimers[s._id],!1)},h.addEventListener(`ended`,r._endTimers[s._id],!1))}catch(e){r._emit(`playerror`,s._id,e)}};h.src===`data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA`&&(h.src=r._src,h.load());var v=window&&window.ejecta||!h.readyState&&n._navigator.isCocoonJS;if(h.readyState>=3||v)_();else{r._playLock=!0,r._state=`loading`;var y=function(){r._state=`loaded`,_(),h.removeEventListener(n._canPlayEvent,y,!1)};h.addEventListener(n._canPlayEvent,y,!1),r._clearTimer(s._id)}}return s._id},pause:function(e){var t=this;if(t._state!==`loaded`||t._playLock)return t._queue.push({event:`pause`,action:function(){t.pause(e)}}),t;for(var n=t._getSoundIds(e),r=0;r<n.length;r++){t._clearTimer(n[r]);var i=t._soundById(n[r]);if(i&&!i._paused&&(i._seek=t.seek(n[r]),i._rateSeek=0,i._paused=!0,t._stopFade(n[r]),i._node))if(t._webAudio){if(!i._node.bufferSource)continue;i._node.bufferSource.stop===void 0?i._node.bufferSource.noteOff(0):i._node.bufferSource.stop(0),t._cleanBuffer(i._node)}else (!isNaN(i._node.duration)||i._node.duration===1/0)&&i._node.pause();arguments[1]||t._emit(`pause`,i?i._id:null)}return t},stop:function(e,t){var n=this;if(n._state!==`loaded`||n._playLock)return n._queue.push({event:`stop`,action:function(){n.stop(e)}}),n;for(var r=n._getSoundIds(e),i=0;i<r.length;i++){n._clearTimer(r[i]);var a=n._soundById(r[i]);a&&(a._seek=a._start||0,a._rateSeek=0,a._paused=!0,a._ended=!0,n._stopFade(r[i]),a._node&&(n._webAudio?a._node.bufferSource&&(a._node.bufferSource.stop===void 0?a._node.bufferSource.noteOff(0):a._node.bufferSource.stop(0),n._cleanBuffer(a._node)):(!isNaN(a._node.duration)||a._node.duration===1/0)&&(a._node.currentTime=a._start||0,a._node.pause(),a._node.duration===1/0&&n._clearSound(a._node))),t||n._emit(`stop`,a._id))}return n},mute:function(e,t){var r=this;if(r._state!==`loaded`||r._playLock)return r._queue.push({event:`mute`,action:function(){r.mute(e,t)}}),r;if(t===void 0)if(typeof e==`boolean`)r._muted=e;else return r._muted;for(var i=r._getSoundIds(t),a=0;a<i.length;a++){var o=r._soundById(i[a]);o&&(o._muted=e,o._interval&&r._stopFade(o._id),r._webAudio&&o._node?o._node.gain.setValueAtTime(e?0:o._volume,n.ctx.currentTime):o._node&&(o._node.muted=n._muted?!0:e),r._emit(`mute`,o._id))}return r},volume:function(){var e=this,t=arguments,r,i;if(t.length===0)return e._volume;t.length===1||t.length===2&&t[1]===void 0?e._getSoundIds().indexOf(t[0])>=0?i=parseInt(t[0],10):r=parseFloat(t[0]):t.length>=2&&(r=parseFloat(t[0]),i=parseInt(t[1],10));var a;if(r!==void 0&&r>=0&&r<=1){if(e._state!==`loaded`||e._playLock)return e._queue.push({event:`volume`,action:function(){e.volume.apply(e,t)}}),e;i===void 0&&(e._volume=r),i=e._getSoundIds(i);for(var o=0;o<i.length;o++)a=e._soundById(i[o]),a&&(a._volume=r,t[2]||e._stopFade(i[o]),e._webAudio&&a._node&&!a._muted?a._node.gain.setValueAtTime(r,n.ctx.currentTime):a._node&&!a._muted&&(a._node.volume=r*n.volume()),e._emit(`volume`,a._id))}else return a=i?e._soundById(i):e._sounds[0],a?a._volume:0;return e},fade:function(e,t,r,i){var a=this;if(a._state!==`loaded`||a._playLock)return a._queue.push({event:`fade`,action:function(){a.fade(e,t,r,i)}}),a;e=Math.min(Math.max(0,parseFloat(e)),1),t=Math.min(Math.max(0,parseFloat(t)),1),r=parseFloat(r),a.volume(e,i);for(var o=a._getSoundIds(i),s=0;s<o.length;s++){var c=a._soundById(o[s]);if(c){if(i||a._stopFade(o[s]),a._webAudio&&!c._muted){var l=n.ctx.currentTime,u=l+r/1e3;c._volume=e,c._node.gain.setValueAtTime(e,l),c._node.gain.linearRampToValueAtTime(t,u)}a._startFadeInterval(c,e,t,r,o[s],i===void 0)}}return a},_startFadeInterval:function(e,t,n,r,i,a){var o=this,s=t,c=n-t,l=Math.abs(c/.01),u=Math.max(4,l>0?r/l:r),d=Date.now();e._fadeTo=n,e._interval=setInterval(function(){var i=(Date.now()-d)/r;d=Date.now(),s+=c*i,s=Math.round(s*100)/100,s=c<0?Math.max(n,s):Math.min(n,s),o._webAudio?e._volume=s:o.volume(s,e._id,!0),a&&(o._volume=s),(n<t&&s<=n||n>t&&s>=n)&&(clearInterval(e._interval),e._interval=null,e._fadeTo=null,o.volume(n,e._id),o._emit(`fade`,e._id))},u)},_stopFade:function(e){var t=this,r=t._soundById(e);return r&&r._interval&&(t._webAudio&&r._node.gain.cancelScheduledValues(n.ctx.currentTime),clearInterval(r._interval),r._interval=null,t.volume(r._fadeTo,e),r._fadeTo=null,t._emit(`fade`,e)),t},loop:function(){var e=this,t=arguments,n,r,i;if(t.length===0)return e._loop;if(t.length===1)if(typeof t[0]==`boolean`)n=t[0],e._loop=n;else return i=e._soundById(parseInt(t[0],10)),i?i._loop:!1;else t.length===2&&(n=t[0],r=parseInt(t[1],10));for(var a=e._getSoundIds(r),o=0;o<a.length;o++)i=e._soundById(a[o]),i&&(i._loop=n,e._webAudio&&i._node&&i._node.bufferSource&&(i._node.bufferSource.loop=n,n&&(i._node.bufferSource.loopStart=i._start||0,i._node.bufferSource.loopEnd=i._stop,e.playing(a[o])&&(e.pause(a[o],!0),e.play(a[o],!0)))));return e},rate:function(){var e=this,t=arguments,r,i;t.length===0?i=e._sounds[0]._id:t.length===1?e._getSoundIds().indexOf(t[0])>=0?i=parseInt(t[0],10):r=parseFloat(t[0]):t.length===2&&(r=parseFloat(t[0]),i=parseInt(t[1],10));var a;if(typeof r==`number`){if(e._state!==`loaded`||e._playLock)return e._queue.push({event:`rate`,action:function(){e.rate.apply(e,t)}}),e;i===void 0&&(e._rate=r),i=e._getSoundIds(i);for(var o=0;o<i.length;o++)if(a=e._soundById(i[o]),a){e.playing(i[o])&&(a._rateSeek=e.seek(i[o]),a._playStart=e._webAudio?n.ctx.currentTime:a._playStart),a._rate=r,e._webAudio&&a._node&&a._node.bufferSource?a._node.bufferSource.playbackRate.setValueAtTime(r,n.ctx.currentTime):a._node&&(a._node.playbackRate=r);var s=e.seek(i[o]),c=((e._sprite[a._sprite][0]+e._sprite[a._sprite][1])/1e3-s)*1e3/Math.abs(a._rate);(e._endTimers[i[o]]||!a._paused)&&(e._clearTimer(i[o]),e._endTimers[i[o]]=setTimeout(e._ended.bind(e,a),c)),e._emit(`rate`,a._id)}}else return a=e._soundById(i),a?a._rate:e._rate;return e},seek:function(){var e=this,t=arguments,r,i;if(t.length===0?e._sounds.length&&(i=e._sounds[0]._id):t.length===1?e._getSoundIds().indexOf(t[0])>=0?i=parseInt(t[0],10):e._sounds.length&&(i=e._sounds[0]._id,r=parseFloat(t[0])):t.length===2&&(r=parseFloat(t[0]),i=parseInt(t[1],10)),i===void 0)return 0;if(typeof r==`number`&&(e._state!==`loaded`||e._playLock))return e._queue.push({event:`seek`,action:function(){e.seek.apply(e,t)}}),e;var a=e._soundById(i);if(a)if(typeof r==`number`&&r>=0){var o=e.playing(i);o&&e.pause(i,!0),a._seek=r,a._ended=!1,e._clearTimer(i),!e._webAudio&&a._node&&!isNaN(a._node.duration)&&(a._node.currentTime=r);var s=function(){o&&e.play(i,!0),e._emit(`seek`,i)};if(o&&!e._webAudio){var c=function(){e._playLock?setTimeout(c,0):s()};setTimeout(c,0)}else s()}else if(e._webAudio){var l=e.playing(i)?n.ctx.currentTime-a._playStart:0,u=a._rateSeek?a._rateSeek-a._seek:0;return a._seek+(u+l*Math.abs(a._rate))}else return a._node.currentTime;return e},playing:function(e){var t=this;if(typeof e==`number`){var n=t._soundById(e);return n?!n._paused:!1}for(var r=0;r<t._sounds.length;r++)if(!t._sounds[r]._paused)return!0;return!1},duration:function(e){var t=this,n=t._duration,r=t._soundById(e);return r&&(n=t._sprite[r._sprite][1]/1e3),n},state:function(){return this._state},unload:function(){for(var e=this,t=e._sounds,r=0;r<t.length;r++)t[r]._paused||e.stop(t[r]._id),e._webAudio||(e._clearSound(t[r]._node),t[r]._node.removeEventListener(`error`,t[r]._errorFn,!1),t[r]._node.removeEventListener(n._canPlayEvent,t[r]._loadFn,!1),t[r]._node.removeEventListener(`ended`,t[r]._endFn,!1),n._releaseHtml5Audio(t[r]._node)),delete t[r]._node,e._clearTimer(t[r]._id);var i=n._howls.indexOf(e);i>=0&&n._howls.splice(i,1);var o=!0;for(r=0;r<n._howls.length;r++)if(n._howls[r]._src===e._src||e._src.indexOf(n._howls[r]._src)>=0){o=!1;break}return a&&o&&delete a[e._src],n.noAudio=!1,e._state=`unloaded`,e._sounds=[],e=null,null},on:function(e,t,n,r){var i=this,a=i[`_on`+e];return typeof t==`function`&&a.push(r?{id:n,fn:t,once:r}:{id:n,fn:t}),i},off:function(e,t,n){var r=this,i=r[`_on`+e],a=0;if(typeof t==`number`&&(n=t,t=null),t||n)for(a=0;a<i.length;a++){var o=n===i[a].id;if(t===i[a].fn&&o||!t&&o){i.splice(a,1);break}}else if(e)r[`_on`+e]=[];else{var s=Object.keys(r);for(a=0;a<s.length;a++)s[a].indexOf(`_on`)===0&&Array.isArray(r[s[a]])&&(r[s[a]]=[])}return r},once:function(e,t,n){var r=this;return r.on(e,t,n,1),r},_emit:function(e,t,n){for(var r=this,i=r[`_on`+e],a=i.length-1;a>=0;a--)(!i[a].id||i[a].id===t||e===`load`)&&(setTimeout(function(e){e.call(this,t,n)}.bind(r,i[a].fn),0),i[a].once&&r.off(e,i[a].fn,i[a].id));return r._loadQueue(e),r},_loadQueue:function(e){var t=this;if(t._queue.length>0){var n=t._queue[0];n.event===e&&(t._queue.shift(),t._loadQueue()),e||n.action()}return t},_ended:function(e){var t=this,r=e._sprite;if(!t._webAudio&&e._node&&!e._node.paused&&!e._node.ended&&e._node.currentTime<e._stop)return setTimeout(t._ended.bind(t,e),100),t;var i=!!(e._loop||t._sprite[r][2]);if(t._emit(`end`,e._id),!t._webAudio&&i&&t.stop(e._id,!0).play(e._id),t._webAudio&&i){t._emit(`play`,e._id),e._seek=e._start||0,e._rateSeek=0,e._playStart=n.ctx.currentTime;var a=(e._stop-e._start)*1e3/Math.abs(e._rate);t._endTimers[e._id]=setTimeout(t._ended.bind(t,e),a)}return t._webAudio&&!i&&(e._paused=!0,e._ended=!0,e._seek=e._start||0,e._rateSeek=0,t._clearTimer(e._id),t._cleanBuffer(e._node),n._autoSuspend()),!t._webAudio&&!i&&t.stop(e._id,!0),t},_clearTimer:function(e){var t=this;if(t._endTimers[e]){if(typeof t._endTimers[e]!=`function`)clearTimeout(t._endTimers[e]);else{var n=t._soundById(e);n&&n._node&&n._node.removeEventListener(`ended`,t._endTimers[e],!1)}delete t._endTimers[e]}return t},_soundById:function(e){for(var t=this,n=0;n<t._sounds.length;n++)if(e===t._sounds[n]._id)return t._sounds[n];return null},_inactiveSound:function(){var e=this;e._drain();for(var t=0;t<e._sounds.length;t++)if(e._sounds[t]._ended)return e._sounds[t].reset();return new i(e)},_drain:function(){var e=this,t=e._pool,n=0,r=0;if(!(e._sounds.length<t)){for(r=0;r<e._sounds.length;r++)e._sounds[r]._ended&&n++;for(r=e._sounds.length-1;r>=0;r--){if(n<=t)return;e._sounds[r]._ended&&(e._webAudio&&e._sounds[r]._node&&e._sounds[r]._node.disconnect(0),e._sounds.splice(r,1),n--)}}},_getSoundIds:function(e){var t=this;if(e===void 0){for(var n=[],r=0;r<t._sounds.length;r++)n.push(t._sounds[r]._id);return n}else return[e]},_refreshBuffer:function(e){var t=this;return e._node.bufferSource=n.ctx.createBufferSource(),e._node.bufferSource.buffer=a[t._src],e._panner?e._node.bufferSource.connect(e._panner):e._node.bufferSource.connect(e._node),e._node.bufferSource.loop=e._loop,e._loop&&(e._node.bufferSource.loopStart=e._start||0,e._node.bufferSource.loopEnd=e._stop||0),e._node.bufferSource.playbackRate.setValueAtTime(e._rate,n.ctx.currentTime),t},_cleanBuffer:function(e){var t=this,r=n._navigator&&n._navigator.vendor.indexOf(`Apple`)>=0;if(!e.bufferSource)return t;if(n._scratchBuffer&&e.bufferSource&&(e.bufferSource.onended=null,e.bufferSource.disconnect(0),r))try{e.bufferSource.buffer=n._scratchBuffer}catch{}return e.bufferSource=null,t},_clearSound:function(e){/MSIE |Trident\//.test(n._navigator&&n._navigator.userAgent)||(e.src=`data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA`)}};var i=function(e){this._parent=e,this.init()};i.prototype={init:function(){var e=this,t=e._parent;return e._muted=t._muted,e._loop=t._loop,e._volume=t._volume,e._rate=t._rate,e._seek=0,e._paused=!0,e._ended=!0,e._sprite=`__default`,e._id=++n._counter,t._sounds.push(e),e.create(),e},create:function(){var e=this,t=e._parent,r=n._muted||e._muted||e._parent._muted?0:e._volume;return t._webAudio?(e._node=n.ctx.createGain===void 0?n.ctx.createGainNode():n.ctx.createGain(),e._node.gain.setValueAtTime(r,n.ctx.currentTime),e._node.paused=!0,e._node.connect(n.masterGain)):n.noAudio||(e._node=n._obtainHtml5Audio(),e._errorFn=e._errorListener.bind(e),e._node.addEventListener(`error`,e._errorFn,!1),e._loadFn=e._loadListener.bind(e),e._node.addEventListener(n._canPlayEvent,e._loadFn,!1),e._endFn=e._endListener.bind(e),e._node.addEventListener(`ended`,e._endFn,!1),e._node.src=t._src,e._node.preload=t._preload===!0?`auto`:t._preload,e._node.volume=r*n.volume(),e._node.load()),e},reset:function(){var e=this,t=e._parent;return e._muted=t._muted,e._loop=t._loop,e._volume=t._volume,e._rate=t._rate,e._seek=0,e._rateSeek=0,e._paused=!0,e._ended=!0,e._sprite=`__default`,e._id=++n._counter,e},_errorListener:function(){var e=this;e._parent._emit(`loaderror`,e._id,e._node.error?e._node.error.code:0),e._node.removeEventListener(`error`,e._errorFn,!1)},_loadListener:function(){var e=this,t=e._parent;t._duration=Math.ceil(e._node.duration*10)/10,Object.keys(t._sprite).length===0&&(t._sprite={__default:[0,t._duration*1e3]}),t._state!==`loaded`&&(t._state=`loaded`,t._emit(`load`),t._loadQueue()),e._node.removeEventListener(n._canPlayEvent,e._loadFn,!1)},_endListener:function(){var e=this,t=e._parent;t._duration===1/0&&(t._duration=Math.ceil(e._node.duration*10)/10,t._sprite.__default[1]===1/0&&(t._sprite.__default[1]=t._duration*1e3),t._ended(e)),e._node.removeEventListener(`ended`,e._endFn,!1)}};var a={},o=function(e){var t=e._src;if(a[t]){e._duration=a[t].duration,l(e);return}if(/^data:[^;]+;base64,/.test(t)){for(var n=atob(t.split(`,`)[1]),r=new Uint8Array(n.length),i=0;i<n.length;++i)r[i]=n.charCodeAt(i);c(r.buffer,e)}else{var o=new XMLHttpRequest;o.open(e._xhr.method,t,!0),o.withCredentials=e._xhr.withCredentials,o.responseType=`arraybuffer`,e._xhr.headers&&Object.keys(e._xhr.headers).forEach(function(t){o.setRequestHeader(t,e._xhr.headers[t])}),o.onload=function(){var t=(o.status+``)[0];if(t!==`0`&&t!==`2`&&t!==`3`){e._emit(`loaderror`,null,`Failed loading audio file with status: `+o.status+`.`);return}c(o.response,e)},o.onerror=function(){e._webAudio&&(e._html5=!0,e._webAudio=!1,e._sounds=[],delete a[t],e.load())},s(o)}},s=function(e){try{e.send()}catch{e.onerror()}},c=function(e,t){var r=function(){t._emit(`loaderror`,null,`Decoding audio data failed.`)},i=function(e){e&&t._sounds.length>0?(a[t._src]=e,l(t,e)):r()};typeof Promise<`u`&&n.ctx.decodeAudioData.length===1?n.ctx.decodeAudioData(e).then(i).catch(r):n.ctx.decodeAudioData(e,i,r)},l=function(e,t){t&&!e._duration&&(e._duration=t.duration),Object.keys(e._sprite).length===0&&(e._sprite={__default:[0,e._duration*1e3]}),e._state!==`loaded`&&(e._state=`loaded`,e._emit(`load`),e._loadQueue())},u=function(){if(n.usingWebAudio){try{typeof AudioContext<`u`?n.ctx=new AudioContext:typeof webkitAudioContext<`u`?n.ctx=new webkitAudioContext:n.usingWebAudio=!1}catch{n.usingWebAudio=!1}n.ctx||(n.usingWebAudio=!1);var e=/iP(hone|od|ad)/.test(n._navigator&&n._navigator.platform),t=n._navigator&&n._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/),r=t?parseInt(t[1],10):null;if(e&&r&&r<9){var i=/safari/.test(n._navigator&&n._navigator.userAgent.toLowerCase());n._navigator&&!i&&(n.usingWebAudio=!1)}n.usingWebAudio&&(n.masterGain=n.ctx.createGain===void 0?n.ctx.createGainNode():n.ctx.createGain(),n.masterGain.gain.setValueAtTime(n._muted?0:n._volume,n.ctx.currentTime),n.masterGain.connect(n.ctx.destination)),n._setup()}};typeof define==`function`&&define.amd&&define([],function(){return{Howler:n,Howl:r}}),e!==void 0&&(e.Howler=n,e.Howl=r),typeof global<`u`?(global.HowlerGlobal=t,global.Howler=n,global.Howl=r,global.Sound=i):typeof window<`u`&&(window.HowlerGlobal=t,window.Howler=n,window.Howl=r,window.Sound=i)})(),(function(){HowlerGlobal.prototype._pos=[0,0,0],HowlerGlobal.prototype._orientation=[0,0,-1,0,1,0],HowlerGlobal.prototype.stereo=function(e){var t=this;if(!t.ctx||!t.ctx.listener)return t;for(var n=t._howls.length-1;n>=0;n--)t._howls[n].stereo(e);return t},HowlerGlobal.prototype.pos=function(e,t,n){var r=this;if(!r.ctx||!r.ctx.listener)return r;if(t=typeof t==`number`?t:r._pos[1],n=typeof n==`number`?n:r._pos[2],typeof e==`number`)r._pos=[e,t,n],r.ctx.listener.positionX===void 0?r.ctx.listener.setPosition(r._pos[0],r._pos[1],r._pos[2]):(r.ctx.listener.positionX.setTargetAtTime(r._pos[0],Howler.ctx.currentTime,.1),r.ctx.listener.positionY.setTargetAtTime(r._pos[1],Howler.ctx.currentTime,.1),r.ctx.listener.positionZ.setTargetAtTime(r._pos[2],Howler.ctx.currentTime,.1));else return r._pos;return r},HowlerGlobal.prototype.orientation=function(e,t,n,r,i,a){var o=this;if(!o.ctx||!o.ctx.listener)return o;var s=o._orientation;if(t=typeof t==`number`?t:s[1],n=typeof n==`number`?n:s[2],r=typeof r==`number`?r:s[3],i=typeof i==`number`?i:s[4],a=typeof a==`number`?a:s[5],typeof e==`number`)o._orientation=[e,t,n,r,i,a],o.ctx.listener.forwardX===void 0?o.ctx.listener.setOrientation(e,t,n,r,i,a):(o.ctx.listener.forwardX.setTargetAtTime(e,Howler.ctx.currentTime,.1),o.ctx.listener.forwardY.setTargetAtTime(t,Howler.ctx.currentTime,.1),o.ctx.listener.forwardZ.setTargetAtTime(n,Howler.ctx.currentTime,.1),o.ctx.listener.upX.setTargetAtTime(r,Howler.ctx.currentTime,.1),o.ctx.listener.upY.setTargetAtTime(i,Howler.ctx.currentTime,.1),o.ctx.listener.upZ.setTargetAtTime(a,Howler.ctx.currentTime,.1));else return s;return o},Howl.prototype.init=(function(e){return function(t){var n=this;return n._orientation=t.orientation||[1,0,0],n._stereo=t.stereo||null,n._pos=t.pos||null,n._pannerAttr={coneInnerAngle:t.coneInnerAngle===void 0?360:t.coneInnerAngle,coneOuterAngle:t.coneOuterAngle===void 0?360:t.coneOuterAngle,coneOuterGain:t.coneOuterGain===void 0?0:t.coneOuterGain,distanceModel:t.distanceModel===void 0?`inverse`:t.distanceModel,maxDistance:t.maxDistance===void 0?1e4:t.maxDistance,panningModel:t.panningModel===void 0?`HRTF`:t.panningModel,refDistance:t.refDistance===void 0?1:t.refDistance,rolloffFactor:t.rolloffFactor===void 0?1:t.rolloffFactor},n._onstereo=t.onstereo?[{fn:t.onstereo}]:[],n._onpos=t.onpos?[{fn:t.onpos}]:[],n._onorientation=t.onorientation?[{fn:t.onorientation}]:[],e.call(this,t)}})(Howl.prototype.init),Howl.prototype.stereo=function(t,n){var r=this;if(!r._webAudio)return r;if(r._state!==`loaded`)return r._queue.push({event:`stereo`,action:function(){r.stereo(t,n)}}),r;var i=Howler.ctx.createStereoPanner===void 0?`spatial`:`stereo`;if(n===void 0)if(typeof t==`number`)r._stereo=t,r._pos=[t,0,0];else return r._stereo;for(var a=r._getSoundIds(n),o=0;o<a.length;o++){var s=r._soundById(a[o]);if(s)if(typeof t==`number`)s._stereo=t,s._pos=[t,0,0],s._node&&(s._pannerAttr.panningModel=`equalpower`,(!s._panner||!s._panner.pan)&&e(s,i),i===`spatial`?s._panner.positionX===void 0?s._panner.setPosition(t,0,0):(s._panner.positionX.setValueAtTime(t,Howler.ctx.currentTime),s._panner.positionY.setValueAtTime(0,Howler.ctx.currentTime),s._panner.positionZ.setValueAtTime(0,Howler.ctx.currentTime)):s._panner.pan.setValueAtTime(t,Howler.ctx.currentTime)),r._emit(`stereo`,s._id);else return s._stereo}return r},Howl.prototype.pos=function(t,n,r,i){var a=this;if(!a._webAudio)return a;if(a._state!==`loaded`)return a._queue.push({event:`pos`,action:function(){a.pos(t,n,r,i)}}),a;if(n=typeof n==`number`?n:0,r=typeof r==`number`?r:-.5,i===void 0)if(typeof t==`number`)a._pos=[t,n,r];else return a._pos;for(var o=a._getSoundIds(i),s=0;s<o.length;s++){var c=a._soundById(o[s]);if(c)if(typeof t==`number`)c._pos=[t,n,r],c._node&&((!c._panner||c._panner.pan)&&e(c,`spatial`),c._panner.positionX===void 0?c._panner.setPosition(t,n,r):(c._panner.positionX.setValueAtTime(t,Howler.ctx.currentTime),c._panner.positionY.setValueAtTime(n,Howler.ctx.currentTime),c._panner.positionZ.setValueAtTime(r,Howler.ctx.currentTime))),a._emit(`pos`,c._id);else return c._pos}return a},Howl.prototype.orientation=function(t,n,r,i){var a=this;if(!a._webAudio)return a;if(a._state!==`loaded`)return a._queue.push({event:`orientation`,action:function(){a.orientation(t,n,r,i)}}),a;if(n=typeof n==`number`?n:a._orientation[1],r=typeof r==`number`?r:a._orientation[2],i===void 0)if(typeof t==`number`)a._orientation=[t,n,r];else return a._orientation;for(var o=a._getSoundIds(i),s=0;s<o.length;s++){var c=a._soundById(o[s]);if(c)if(typeof t==`number`)c._orientation=[t,n,r],c._node&&(c._panner||(c._pos||=a._pos||[0,0,-.5],e(c,`spatial`)),c._panner.orientationX===void 0?c._panner.setOrientation(t,n,r):(c._panner.orientationX.setValueAtTime(t,Howler.ctx.currentTime),c._panner.orientationY.setValueAtTime(n,Howler.ctx.currentTime),c._panner.orientationZ.setValueAtTime(r,Howler.ctx.currentTime))),a._emit(`orientation`,c._id);else return c._orientation}return a},Howl.prototype.pannerAttr=function(){var t=this,n=arguments,r,i,a;if(!t._webAudio)return t;if(n.length===0)return t._pannerAttr;if(n.length===1)if(typeof n[0]==`object`)r=n[0],i===void 0&&(r.pannerAttr||={coneInnerAngle:r.coneInnerAngle,coneOuterAngle:r.coneOuterAngle,coneOuterGain:r.coneOuterGain,distanceModel:r.distanceModel,maxDistance:r.maxDistance,refDistance:r.refDistance,rolloffFactor:r.rolloffFactor,panningModel:r.panningModel},t._pannerAttr={coneInnerAngle:r.pannerAttr.coneInnerAngle===void 0?t._coneInnerAngle:r.pannerAttr.coneInnerAngle,coneOuterAngle:r.pannerAttr.coneOuterAngle===void 0?t._coneOuterAngle:r.pannerAttr.coneOuterAngle,coneOuterGain:r.pannerAttr.coneOuterGain===void 0?t._coneOuterGain:r.pannerAttr.coneOuterGain,distanceModel:r.pannerAttr.distanceModel===void 0?t._distanceModel:r.pannerAttr.distanceModel,maxDistance:r.pannerAttr.maxDistance===void 0?t._maxDistance:r.pannerAttr.maxDistance,refDistance:r.pannerAttr.refDistance===void 0?t._refDistance:r.pannerAttr.refDistance,rolloffFactor:r.pannerAttr.rolloffFactor===void 0?t._rolloffFactor:r.pannerAttr.rolloffFactor,panningModel:r.pannerAttr.panningModel===void 0?t._panningModel:r.pannerAttr.panningModel});else return a=t._soundById(parseInt(n[0],10)),a?a._pannerAttr:t._pannerAttr;else n.length===2&&(r=n[0],i=parseInt(n[1],10));for(var o=t._getSoundIds(i),s=0;s<o.length;s++)if(a=t._soundById(o[s]),a){var c=a._pannerAttr;c={coneInnerAngle:r.coneInnerAngle===void 0?c.coneInnerAngle:r.coneInnerAngle,coneOuterAngle:r.coneOuterAngle===void 0?c.coneOuterAngle:r.coneOuterAngle,coneOuterGain:r.coneOuterGain===void 0?c.coneOuterGain:r.coneOuterGain,distanceModel:r.distanceModel===void 0?c.distanceModel:r.distanceModel,maxDistance:r.maxDistance===void 0?c.maxDistance:r.maxDistance,refDistance:r.refDistance===void 0?c.refDistance:r.refDistance,rolloffFactor:r.rolloffFactor===void 0?c.rolloffFactor:r.rolloffFactor,panningModel:r.panningModel===void 0?c.panningModel:r.panningModel};var l=a._panner;l||=(a._pos||=t._pos||[0,0,-.5],e(a,`spatial`),a._panner),l.coneInnerAngle=c.coneInnerAngle,l.coneOuterAngle=c.coneOuterAngle,l.coneOuterGain=c.coneOuterGain,l.distanceModel=c.distanceModel,l.maxDistance=c.maxDistance,l.refDistance=c.refDistance,l.rolloffFactor=c.rolloffFactor,l.panningModel=c.panningModel}return t},Sound.prototype.init=(function(e){return function(){var t=this,n=t._parent;t._orientation=n._orientation,t._stereo=n._stereo,t._pos=n._pos,t._pannerAttr=n._pannerAttr,e.call(this),t._stereo?n.stereo(t._stereo):t._pos&&n.pos(t._pos[0],t._pos[1],t._pos[2],t._id)}})(Sound.prototype.init),Sound.prototype.reset=(function(e){return function(){var t=this,n=t._parent;return t._orientation=n._orientation,t._stereo=n._stereo,t._pos=n._pos,t._pannerAttr=n._pannerAttr,t._stereo?n.stereo(t._stereo):t._pos?n.pos(t._pos[0],t._pos[1],t._pos[2],t._id):t._panner&&(t._panner.disconnect(0),t._panner=void 0,n._refreshBuffer(t)),e.call(this)}})(Sound.prototype.reset);var e=function(e,t){t||=`spatial`,t===`spatial`?(e._panner=Howler.ctx.createPanner(),e._panner.coneInnerAngle=e._pannerAttr.coneInnerAngle,e._panner.coneOuterAngle=e._pannerAttr.coneOuterAngle,e._panner.coneOuterGain=e._pannerAttr.coneOuterGain,e._panner.distanceModel=e._pannerAttr.distanceModel,e._panner.maxDistance=e._pannerAttr.maxDistance,e._panner.refDistance=e._pannerAttr.refDistance,e._panner.rolloffFactor=e._pannerAttr.rolloffFactor,e._panner.panningModel=e._pannerAttr.panningModel,e._panner.positionX===void 0?e._panner.setPosition(e._pos[0],e._pos[1],e._pos[2]):(e._panner.positionX.setValueAtTime(e._pos[0],Howler.ctx.currentTime),e._panner.positionY.setValueAtTime(e._pos[1],Howler.ctx.currentTime),e._panner.positionZ.setValueAtTime(e._pos[2],Howler.ctx.currentTime)),e._panner.orientationX===void 0?e._panner.setOrientation(e._orientation[0],e._orientation[1],e._orientation[2]):(e._panner.orientationX.setValueAtTime(e._orientation[0],Howler.ctx.currentTime),e._panner.orientationY.setValueAtTime(e._orientation[1],Howler.ctx.currentTime),e._panner.orientationZ.setValueAtTime(e._orientation[2],Howler.ctx.currentTime))):(e._panner=Howler.ctx.createStereoPanner(),e._panner.pan.setValueAtTime(e._stereo,Howler.ctx.currentTime)),e._panner.connect(e._node),e._paused||e._parent.pause(e._id,!0).play(e._id,!0)}})()}))(),zf=null,Bf={};function Vf(e){return!e||isNaN(e)?`0:00`:`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,`0`)}`}function Hf(e){$f(),zf=new Rf.Howl({src:[e],html5:!0,onplay:()=>Bf.onPlay?.(),onpause:()=>Bf.onPause?.(),onend:()=>Bf.onEnd?.(),onloaderror:()=>Bf.onError?.(),onplayerror:()=>Bf.onError?.()})}function Uf(){zf?.play()}function Wf(){zf?.pause()}function Gf(){zf?.playing()?zf.pause():zf.play()}function Kf(e){zf&&zf.seek(e)}function qf(){return zf?zf.seek():0}function Jf(e){return e!==void 0&&Howler.volume(e/100),Howler.volume()*100}function Yf(){return zf?zf.duration():0}function Xf(){return zf?zf.playing():!1}function Zf(e,t){Bf[e]=t}function Qf(e){delete Bf[e]}function $f(){zf&&=(zf.unload(),null),Bf={}}var $={load:Hf,play:Uf,pause:Wf,togglePlay:Gf,seek:Kf,getSeek:qf,volume:Jf,duration:Yf,playing:Xf,on:Zf,off:Qf,destroy:$f,formatTime:Vf},ep=Es(`player`,()=>{let e=F(null),t=F(!1),n=F(0),r=F(0),i=F(80),a=F(null),o=F(null),s=G(()=>$.formatTime(n.value)),c=G(()=>$.formatTime(r.value));function l(i){if(!i)return;e.value=i,n.value=0,r.value=0,t.value=!1,g();let a=i.audioUrl.startsWith(`http`)?i.audioUrl:`http://localhost:3001${i.audioUrl}`;$.load(a),$.on(`play`,()=>{t.value=!0}),$.on(`pause`,()=>{t.value=!1}),$.on(`end`,()=>{t.value=!1,g(),o.value&&o.value()}),$.on(`error`,()=>{t.value=!1})}function u(e){o.value=e}function d(){e.value&&($.playing()?($.pause(),g()):($.play(),h()))}function f(){e.value&&($.play(),h())}function p(e){$.seek(e),n.value=e}function m(e){i.value=e,$.volume(e)}function h(){g(),a.value=setInterval(()=>{$.playing()&&(n.value=$.getSeek(),r.value=$.duration())},500)}function g(){a.value&&=(clearInterval(a.value),null)}function _(){g(),$.destroy(),e.value=null,t.value=!1,n.value=0,r.value=0,o.value=null}return{currentTrack:e,isPlaying:t,progress:n,duration:r,volume:i,formattedProgress:s,formattedDuration:c,setTrack:l,onEnd:u,togglePlay:d,play:f,seek:p,setVolume:m,$reset:_}}),tp=Es(`queue`,()=>{let e=F([]),t=F(-1),n=F(!1),r=F(`off`),i=G(()=>t.value<0||t.value>=e.value.length?null:e.value[t.value]);function a(n,r=0){e.value=n,t.value=r}function o(){if(e.value.length===0)return null;if(r.value===`one`)return e.value[t.value];let i;if(i=n.value?Math.floor(Math.random()*e.value.length):t.value+1,i>=e.value.length)if(r.value===`all`)i=0;else return null;return t.value=i,e.value[i]}function s(){if(e.value.length===0)return null;if(r.value===`one`)return e.value[t.value];let i;if(i=n.value?Math.floor(Math.random()*e.value.length):t.value-1,i<0)if(r.value===`all`)i=e.value.length-1;else return null;return t.value=i,e.value[i]}function c(){n.value=!n.value}function l(){let e=[`off`,`all`,`one`];r.value=e[(e.indexOf(r.value)+1)%e.length]}function u(){e.value=[],t.value=-1,n.value=!1,r.value=`off`}return{queue:e,currentIndex:t,shuffle:n,repeat:r,currentTrack:i,setQueue:a,nextTrack:o,prevTrack:s,toggleShuffle:c,cycleRepeat:l,$reset:u}}),np={class:`bg-noctune-teal px-4 py-3 flex items-center justify-between border-b-4 border-black`},rp={class:`flex items-center gap-4`},ip={class:`flex-1 max-w-md mx-8 relative`},ap={class:`relative`},op={key:0,class:`absolute top-full mt-2 left-0 right-0 bg-white border-2 border-black rounded-lg shadow-[4px_4px_0px_0px_#000] max-h-96 overflow-y-auto z-50`},sp={key:0,class:`p-2`},cp=[`onClick`],lp={class:`w-8 h-8 bg-gray-300 rounded border border-black flex-shrink-0 overflow-hidden`},up=[`src`],dp={class:`min-w-0 flex-1`},fp={class:`text-sm font-medium text-black truncate`},pp={class:`text-xs text-gray-500`},mp={key:1,class:`p-2 border-t border-gray-200`},hp=[`onClick`],gp={key:2,class:`p-4 text-center text-gray-500 text-sm`},_p={class:`flex items-center gap-4`},vp={class:`w-8 h-8 rounded-full bg-noctune-dark overflow-hidden border-2 border-black`},yp=[`src`],bp={key:1,class:`w-full h-full flex items-center justify-center`},xp={__name:`AppHeader`,setup(e){let t=Ol(),n=If(),r=ep(),i=tp(),a=F(``),o=F(null),s=null;function c(e){return e?e.startsWith(`http`)?e:`http://localhost:3001${e}`:``}function l(){if(clearTimeout(s),!a.value.trim()){o.value=null;return}s=setTimeout(async()=>{try{let{data:e}=await Q.get(`/search?q=${encodeURIComponent(a.value)}`);e.success&&(o.value=e.data)}catch{o.value=null}},300)}function u(){a.value=``,o.value=null}function d(e){u(),i.setQueue([e],0),r.setTrack(e),r.play()}function f(){t.push(`/library`)}return(e,r)=>{let i=Tr(`router-link`);return R(),z(`header`,np,[B(`div`,rp,[V(i,{to:`/home`,class:`text-black font-bold text-2xl tracking-wider font-mono`},{default:Rn(()=>[...r[1]||=[H(`NOCTUNE`,-1)]]),_:1})]),B(`div`,ip,[B(`div`,ap,[r[2]||=B(`div`,{class:`absolute inset-y-0 left-3 flex items-center pointer-events-none`},[B(`svg`,{class:`w-5 h-5 text-gray-500`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z`})])],-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":r[0]||=e=>a.value=e,onInput:l,onKeydown:Vo(u,[`escape`]),placeholder:`Search music, artist, album...`,class:`w-full bg-noctune-cream py-2 pl-10 pr-4 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-black`},null,544),[[Eo,a.value]])]),o.value&&a.value?(R(),z(`div`,op,[o.value.tracks?.length?(R(),z(`div`,sp,[r[3]||=B(`p`,{class:`text-xs font-bold text-gray-500 px-2 py-1`},`TRACKS`,-1),(R(!0),z(L,null,kr(o.value.tracks.slice(0,5),e=>(R(),z(`div`,{key:e._id,onClick:t=>d(e),class:`flex items-center gap-3 px-2 py-2 hover:bg-gray-100 rounded cursor-pointer`},[B(`div`,lp,[e.coverUrl?(R(),z(`img`,{key:0,src:c(e.coverUrl),class:`w-full h-full object-cover`},null,8,up)):U(``,!0)]),B(`div`,dp,[B(`p`,fp,A(e.title),1),B(`p`,pp,A(e.artist),1)])],8,cp))),128))])):U(``,!0),o.value.artists?.length?(R(),z(`div`,mp,[r[4]||=B(`p`,{class:`text-xs font-bold text-gray-500 px-2 py-1`},`ARTISTS`,-1),(R(!0),z(L,null,kr(o.value.artists.slice(0,3),e=>(R(),z(`div`,{key:e.name,onClick:n=>I(t).push(`/home?artist=${e.name}`),class:`px-2 py-2 hover:bg-gray-100 rounded cursor-pointer text-sm font-medium text-black`},A(e.name),9,hp))),128))])):U(``,!0),!o.value.tracks?.length&&!o.value.artists?.length?(R(),z(`div`,gp,`No results found`)):U(``,!0)])):U(``,!0)]),B(`div`,_p,[B(`button`,{onClick:f,class:`text-black hover:opacity-80`},[...r[5]||=[B(`svg`,{class:`w-7 h-7`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z`})],-1)]]),V(i,{to:`/profile`,class:`text-black hover:opacity-80`},{default:Rn(()=>[B(`div`,vp,[I(n).user?.avatarUrl?(R(),z(`img`,{key:0,src:c(I(n).user.avatarUrl),class:`w-full h-full object-cover`},null,8,yp)):(R(),z(`div`,bp,[...r[6]||=[B(`svg`,{class:`w-5 h-5 text-white`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z`})],-1)]]))])]),_:1})])])}}},Sp={class:`w-64 bg-noctune-cream border-r-4 border-black flex flex-col h-full`},Cp={class:`p-4 space-y-2`},wp={class:`flex-1 overflow-y-auto px-4 mt-4`},Tp={key:0,class:`space-y-1`},Ep=[`onClick`],Dp={__name:`Sidebar`,setup(e){let t=kl(),n=Ol(),r=If();tp();let i=F([]),a=e=>t.path===e;async function o(){if(r.isLoggedIn)try{let{data:e}=await Q.get(`/playlists`);e.success&&(i.value=e.data)}catch{}}async function s(){let e=prompt(`Playlist name:`);if(e?.trim())try{let{data:t}=await Q.post(`/playlists`,{name:e.trim()});t.success&&i.value.push(t.data)}catch{}}return hr(o),(e,t)=>{let o=Tr(`router-link`);return R(),z(`aside`,Sp,[B(`nav`,Cp,[V(o,{to:`/home`,class:_e([`flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors`,{"bg-noctune-teal text-black":a(`/home`)}])},{default:Rn(()=>[...t[0]||=[B(`svg`,{class:`w-6 h-6`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z`})],-1),B(`span`,{class:`tracking-wide`},`HOME`,-1)]]),_:1},8,[`class`]),V(o,{to:`/library`,class:_e([`flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors`,{"bg-noctune-teal text-black":a(`/library`)}])},{default:Rn(()=>[...t[1]||=[B(`svg`,{class:`w-6 h-6`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z`})],-1),B(`span`,{class:`tracking-wide`},`LIBRARY`,-1)]]),_:1},8,[`class`]),V(o,{to:`/playlist`,class:_e([`flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors`,{"bg-noctune-teal text-black":a(`/playlist`)}])},{default:Rn(()=>[...t[2]||=[B(`svg`,{class:`w-6 h-6`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z`})],-1),B(`span`,{class:`tracking-wide`},`PLAYLIST`,-1)]]),_:1},8,[`class`]),I(r).isAdmin?(R(),Qi(o,{key:0,to:`/admin/tracks`,class:_e([`flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-orange/20 transition-colors`,{"bg-noctune-orange text-black":a(`/admin/tracks`)}])},{default:Rn(()=>[...t[3]||=[B(`svg`,{class:`w-6 h-6`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-3 17l-4-4 1.41-1.41L11 16.17l6.59-6.59L19 11l-8 8z`})],-1),B(`span`,{class:`tracking-wide`},`UPLOAD TRACK`,-1)]]),_:1},8,[`class`])):U(``,!0)]),t[7]||=B(`div`,{class:`mx-4 border-t-2 border-gray-300 my-2`},null,-1),B(`div`,{class:`px-4`},[B(`button`,{onClick:s,class:`w-full bg-noctune-yellow border-2 border-black rounded-lg py-3 px-4 font-bold flex items-center gap-2 hover:bg-yellow-400 transition-colors`},[...t[4]||=[B(`svg`,{class:`w-5 h-5`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`3`,d:`M12 4v16m8-8H4`})],-1),B(`span`,{class:`tracking-wide`},`CREATE PLAYLIST`,-1)]])]),B(`div`,wp,[i.value.length?(R(),z(`div`,Tp,[t[6]||=B(`p`,{class:`text-xs font-bold text-gray-500 px-2 mb-2`},`YOUR PLAYLISTS`,-1),(R(!0),z(L,null,kr(i.value,e=>(R(),z(`div`,{key:e._id,onClick:t=>I(n).push(`/playlist/${e._id}`),class:`flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer hover:bg-noctune-teal/20 transition-colors text-sm text-black font-medium truncate`},[t[5]||=B(`svg`,{class:`w-4 h-4 flex-shrink-0 text-gray-500`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z`})],-1),H(` `+A(e.name),1)],8,Ep))),128))])):U(``,!0)])])}}},Op=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},kp={key:0,class:`fixed bottom-0 left-0 right-0 bg-noctune-dark border-t-4 border-black z-50`},Ap={class:`flex items-center px-4 py-2 max-w-screen-2xl mx-auto`},jp={class:`flex items-center gap-3 w-80`},Mp={class:`w-12 h-12 bg-black rounded-lg overflow-hidden flex-shrink-0 border border-white/20`},Np=[`src`],Pp={key:1,class:`w-full h-full flex items-center justify-center`},Fp={class:`min-w-0`},Ip={class:`text-sm font-bold text-white truncate`},Lp={class:`text-xs text-gray-400 truncate`},Rp={class:`flex-1 flex flex-col items-center`},zp={class:`flex items-center gap-4 mb-1`},Bp={key:0,class:`w-5 h-5 text-black`,fill:`currentColor`,viewBox:`0 0 24 24`},Vp={key:1,class:`w-5 h-5 text-black ml-0.5`,fill:`currentColor`,viewBox:`0 0 24 24`},Hp={key:0,class:`absolute -top-2 -right-2 text-[9px] font-bold`},Up={class:`flex items-center gap-3 w-full max-w-lg`},Wp={class:`text-xs text-gray-400 w-10 text-right`},Gp=[`value`,`max`],Kp={class:`text-xs text-gray-400 w-10`},qp={class:`w-80 flex items-center justify-end gap-3`},Jp={class:`flex items-center gap-2`},Yp=[`value`],Xp=Op({__name:`PlayerBar`,setup(e){let t=ep(),n=tp(),r=F(!1);function i(){let e=n.nextTrack();e&&(t.setTrack(e),t.play())}hr(()=>{t.onEnd(i)});let a=G(()=>{let e=t.currentTrack?.coverUrl;return e?e.startsWith(`http`)?e:`http://localhost:3001${e}`:``});function o(e){t.seek(parseFloat(e.target.value))}function s(e){t.setVolume(parseInt(e.target.value))}function c(){let e=n.nextTrack();e&&(t.setTrack(e),t.play())}function l(){let e=n.prevTrack();e&&(t.setTrack(e),t.play())}Kn(()=>t.currentTrack?.id,async e=>{if(e)try{let{data:t}=await Q.get(`/auth/me`);t.success&&(r.value=t.data.likedTracks?.includes(e)||!1)}catch{r.value=!1}});async function u(){if(!t.currentTrack)return;let e=t.currentTrack._id||t.currentTrack.id;try{r.value?await Q.delete(`/tracks/${e}/like`):await Q.post(`/tracks/${e}/like`),r.value=!r.value}catch{}}return(e,i)=>I(t).currentTrack?(R(),z(`div`,kp,[B(`div`,Ap,[B(`div`,jp,[B(`div`,Mp,[I(t).currentTrack.coverUrl?(R(),z(`img`,{key:0,src:a.value,alt:``,class:`w-full h-full object-cover`},null,8,Np)):(R(),z(`div`,Pp,[...i[5]||=[oa(`<svg class="w-8 h-6 text-white/60" viewBox="0 0 50 30" data-v-b7738cdf><rect x="2" y="10" width="3" height="10" fill="currentColor" data-v-b7738cdf></rect><rect x="8" y="5" width="3" height="20" fill="currentColor" data-v-b7738cdf></rect><rect x="14" y="8" width="3" height="14" fill="currentColor" data-v-b7738cdf></rect><rect x="20" y="3" width="3" height="24" fill="currentColor" data-v-b7738cdf></rect><rect x="26" y="7" width="3" height="16" fill="currentColor" data-v-b7738cdf></rect><rect x="32" y="5" width="3" height="20" fill="currentColor" data-v-b7738cdf></rect><rect x="38" y="9" width="3" height="12" fill="currentColor" data-v-b7738cdf></rect><rect x="44" y="11" width="3" height="8" fill="currentColor" data-v-b7738cdf></rect></svg>`,1)]]))]),B(`div`,Fp,[B(`p`,Ip,A(I(t).currentTrack.title),1),B(`p`,Lp,A(I(t).currentTrack.artist),1)])]),B(`div`,Rp,[B(`div`,zp,[B(`button`,{onClick:i[0]||=e=>I(n).toggleShuffle(),class:_e([`text-sm transition-colors`,I(n).shuffle?`text-noctune-teal`:`text-gray-400 hover:text-white`])},[...i[6]||=[B(`svg`,{class:`w-4 h-4`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z`})],-1)]],2),B(`button`,{onClick:i[1]||=e=>l(),class:`text-gray-400 hover:text-white transition-colors`},[...i[7]||=[B(`svg`,{class:`w-5 h-5`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M6 6h2v12H6zm3.5 6l8.5 6V6z`})],-1)]]),B(`button`,{onClick:i[2]||=e=>I(t).togglePlay(),class:`w-10 h-10 bg-white rounded-full flex items-center justify-center hover:scale-105 transition-transform`},[I(t).isPlaying?(R(),z(`svg`,Bp,[...i[8]||=[B(`path`,{d:`M6 19h4V5H6v14zm8-14v14h4V5h-4z`},null,-1)]])):(R(),z(`svg`,Vp,[...i[9]||=[B(`path`,{d:`M8 5v14l11-7z`},null,-1)]]))]),B(`button`,{onClick:i[3]||=e=>c(),class:`text-gray-400 hover:text-white transition-colors`},[...i[10]||=[B(`svg`,{class:`w-5 h-5`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z`})],-1)]]),B(`button`,{onClick:i[4]||=e=>I(n).cycleRepeat(),class:_e([`text-sm transition-colors`,I(n).repeat===`off`?`text-gray-400 hover:text-white`:`text-noctune-teal`,I(n).repeat===`one`?`relative`:``])},[i[11]||=B(`svg`,{class:`w-4 h-4`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z`})],-1),I(n).repeat===`one`?(R(),z(`span`,Hp,`1`)):U(``,!0)],2)]),B(`div`,Up,[B(`span`,Wp,A(I(t).formattedProgress),1),B(`input`,{type:`range`,value:I(t).progress,onInput:o,min:`0`,max:I(t).duration||1,step:`0.1`,class:`flex-1 h-1 bg-gray-600 rounded-full appearance-none cursor-pointer range-player`},null,40,Gp),B(`span`,Kp,A(I(t).formattedDuration),1)])]),B(`div`,qp,[B(`button`,{onClick:u,class:`text-gray-400 hover:text-red-400 transition-colors`},[(R(),z(`svg`,{class:_e([`w-5 h-5`,r.value?`text-red-400 fill-current`:``]),fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[...i[12]||=[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z`},null,-1)]],2))]),B(`div`,Jp,[i[13]||=B(`svg`,{class:`w-4 h-4 text-gray-400`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z`})],-1),B(`input`,{type:`range`,value:I(t).volume,onInput:s,min:`0`,max:`100`,class:`w-20 h-1 bg-gray-600 rounded-full appearance-none cursor-pointer range-vol`},null,40,Yp)])])])])):U(``,!0)}},[[`__scopeId`,`data-v-b7738cdf`]]),Zp={class:`min-h-screen bg-noctune-cream`},Qp={key:0,class:`flex flex-col min-h-screen`},$p={class:`flex flex-1`},em={class:`fixed top-4 right-4 z-[100] space-y-2`},tm={class:`flex items-center gap-2`},nm=[`onClick`],rm={__name:`App`,setup(e){let t=kl(),n=If(),r=Lf(),i=ep(),a=G(()=>t.meta?.guest===!0||t.path===`/register`),o=G(()=>!!i.currentTrack);function s(e){return{info:`bg-noctune-teal text-black`,success:`bg-green-400 text-black`,error:`bg-red-400 text-white`}[e]||`bg-noctune-yellow text-black`}return hr(async()=>{await n.checkSession()}),(e,t)=>{let n=Tr(`router-view`);return R(),z(`div`,Zp,[a.value?(R(),Qi(n,{key:1})):(R(),z(`div`,Qp,[V(xp),B(`div`,$p,[V(Dp),B(`main`,{class:_e([`flex-1 overflow-auto`,{"pb-20":o.value}])},[V(n)],2)]),V(Xp)])),B(`div`,em,[(R(!0),z(L,null,kr(I(r).toasts,e=>(R(),z(`div`,{key:e.id,class:_e([`px-4 py-3 rounded-lg border-2 border-black font-bold text-sm shadow-[4px_4px_0px_0px_#000] transition-all animate-slide-in`,s(e.type)])},[B(`div`,tm,[B(`span`,null,A(e.message),1),B(`button`,{onClick:t=>I(r).dismissToast(e.id),class:`ml-2 opacity-60 hover:opacity-100`},`×`,8,nm)])],2))),128))])])}}},im={class:`min-h-screen bg-noctune-cream flex items-center justify-center p-8`},am={class:`w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl`},om={class:`w-1/2 p-12 relative`},sm={class:`absolute top-8 right-12 grid grid-cols-4 gap-1`},cm={class:`absolute top-20 right-8 grid grid-cols-4 gap-1`},lm={class:`absolute bottom-12 left-12 grid grid-cols-3 gap-1`},um={class:`w-1/2 bg-white rounded-3xl m-4 p-10`},dm={key:0,class:`text-red-500 text-sm mb-4 font-medium`},fm={class:`mb-6`},pm={class:`flex border-2 border-black rounded-lg overflow-hidden`},mm={class:`mb-4`},hm={class:`flex border-2 border-black rounded-lg overflow-hidden`},gm=[`type`],_m={key:0,class:`w-5 h-5`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},vm={key:1,class:`w-5 h-5`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},ym=[`disabled`],bm={key:0,class:`inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin`},xm={class:`text-center mt-8 text-gray-600`},Sm={__name:`LoginPage`,setup(e){let t=Ol(),n=If(),r=F(``),i=F(``),a=F(!1),o=F(!1),s=F(``);async function c(){s.value=``,o.value=!0;let e=await n.login(r.value,i.value);o.value=!1,e.success?t.push(`/home`):s.value=e.message}return(e,t)=>{let n=Tr(`router-link`);return R(),z(`div`,im,[B(`div`,am,[B(`div`,om,[B(`div`,sm,[(R(),z(L,null,kr(16,e=>B(`span`,{key:e,class:`w-2 h-2 bg-black/40 rounded-full`})),64))]),B(`div`,cm,[(R(),z(L,null,kr(12,e=>B(`span`,{key:e,class:`w-2 h-2 bg-black/40 rounded-full`})),64))]),t[3]||=B(`div`,{class:`absolute top-16 left-20 text-black/60 text-4xl font-bold`},`+`,-1),t[4]||=B(`div`,{class:`absolute bottom-24 right-20 text-black/60 text-4xl font-bold`},`+`,-1),B(`div`,lm,[(R(),z(L,null,kr(12,e=>B(`span`,{key:e,class:`w-2 h-2 bg-black/40 rounded-full`})),64))]),t[5]||=oa(`<div class="flex flex-col items-center justify-center h-full"><div class="relative"><div class="w-48 h-48 flex items-center justify-center"><svg viewBox="0 0 120 120" class="w-full h-full"><polygon points="40,35 80,35 90,50 50,50" fill="#ff6b35"></polygon><polygon points="40,35 50,50 50,90 40,75" fill="#e85a2a"></polygon><polygon points="50,50 90,50 90,90 50,90" fill="#ff8c5a"></polygon><polygon points="40,75 50,90 50,70 40,55" fill="#1a1a1a"></polygon><polygon points="70,50 90,50 90,70 70,70" fill="#1a1a1a"></polygon><polygon points="50,70 70,70 70,90 50,90" fill="#1a1a1a"></polygon><rect x="95" y="35" width="5" height="5" fill="#ff6b35"></rect><rect x="100" y="30" width="4" height="4" fill="#ff6b35"></rect><rect x="105" y="38" width="3" height="3" fill="#ff6b35"></rect><rect x="98" y="45" width="4" height="4" fill="#ff6b35"></rect></svg></div></div><h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1></div>`,1)]),B(`div`,um,[t[16]||=B(`h2`,{class:`text-4xl font-black text-black mb-2`},`WELCOME!`,-1),t[17]||=B(`p`,{class:`text-gray-600 mb-8`},`Login to continue`,-1),s.value?(R(),z(`p`,dm,A(s.value),1)):U(``,!0),B(`div`,fm,[t[7]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`EMAIL/USERNAME`,-1),B(`div`,pm,[t[6]||=B(`div`,{class:`bg-noctune-teal p-3 border-r-2 border-black`},[B(`svg`,{class:`w-6 h-6 text-black`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z`})])],-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[0]||=e=>r.value=e,onKeyup:Vo(c,[`enter`]),class:`flex-1 px-4 py-3 focus:outline-none text-black`,placeholder:`Enter your email`},null,544),[[Eo,r.value]])])]),B(`div`,mm,[t[11]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`PASSWORD`,-1),B(`div`,hm,[t[10]||=B(`div`,{class:`bg-amber-200 p-3 border-r-2 border-black`},[B(`svg`,{class:`w-6 h-6 text-black`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z`})])],-1),zn(B(`input`,{type:a.value?`text`:`password`,"onUpdate:modelValue":t[1]||=e=>i.value=e,onKeyup:Vo(c,[`enter`]),class:`flex-1 px-4 py-3 focus:outline-none text-black`,placeholder:`Enter your password`},null,40,gm),[[Po,i.value]]),B(`button`,{onClick:t[2]||=e=>a.value=!a.value,class:`px-4 text-gray-500 hover:text-gray-700`},[a.value?(R(),z(`svg`,vm,[...t[9]||=[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M15 12a3 3 0 11-6 0 3 3 0 016 0z`},null,-1),B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z`},null,-1)]])):(R(),z(`svg`,_m,[...t[8]||=[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21`},null,-1)]]))])])]),t[18]||=B(`div`,{class:`text-right mb-6`},[B(`a`,{href:`#`,class:`text-sm text-gray-600 hover:text-black`},`Forgot password?`)],-1),B(`button`,{onClick:c,disabled:o.value,class:`w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50`},[o.value?(R(),z(`span`,bm)):(R(),z(L,{key:1},[t[12]||=B(`div`,{class:`bg-white/20 rounded p-1`},[B(`svg`,{class:`w-5 h-5`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z`})])],-1),t[13]||=H(` LOGIN `,-1)],64))],8,ym),t[19]||=oa(`<div class="flex items-center my-6"><div class="flex-1 border-t-2 border-gray-300"></div><span class="px-4 bg-black text-white text-xs font-bold py-1 rounded">OR SIGN IN WITH</span><div class="flex-1 border-t-2 border-gray-300"></div></div><button class="w-full border-2 border-gray-300 rounded-xl py-3 flex items-center justify-center gap-3 hover:bg-gray-50 transition-colors"><svg class="w-6 h-6" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path></svg><span class="font-bold text-gray-700">GOOGLE</span></button>`,2),B(`p`,xm,[t[15]||=H(` Don't have an account yet? `,-1),V(n,{to:`/register`,class:`text-noctune-orange font-bold hover:underline`},{default:Rn(()=>[...t[14]||=[H(`Register now`,-1)]]),_:1})])])])])}}},Cm={class:`min-h-screen bg-noctune-cream flex items-center justify-center p-8`},wm={class:`w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl`},Tm={class:`w-1/2 p-12 relative`},Em={class:`absolute top-8 right-12 grid grid-cols-4 gap-1`},Dm={class:`w-1/2 bg-white rounded-3xl m-4 p-10`},Om={key:0,class:`text-red-500 text-sm mb-4 font-medium`},km={class:`mb-4`},Am={class:`mb-4`},jm={class:`mb-4`},Mm={class:`mb-6`},Nm=[`disabled`],Pm={key:0,class:`inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin`},Fm={key:1},Im={class:`text-center mt-6 text-gray-600`},Lm={__name:`RegisterPage`,setup(e){let t=Ol(),n=If(),r=F(``),i=F(``),a=F(``),o=F(``),s=F(!1),c=F(``);async function l(){c.value=``,s.value=!0;let e=await n.register({name:r.value,username:i.value,email:a.value,password:o.value});s.value=!1,e.success?t.push(`/home`):c.value=e.message}return(e,t)=>{let n=Tr(`router-link`);return R(),z(`div`,Cm,[B(`div`,wm,[B(`div`,Tm,[B(`div`,Em,[(R(),z(L,null,kr(16,e=>B(`span`,{key:e,class:`w-2 h-2 bg-black/40 rounded-full`})),64))]),t[4]||=oa(`<div class="flex flex-col items-center justify-center h-full"><div class="relative"><div class="w-48 h-48 flex items-center justify-center"><svg viewBox="0 0 120 120" class="w-full h-full"><polygon points="40,35 80,35 90,50 50,50" fill="#ff6b35"></polygon><polygon points="40,35 50,50 50,90 40,75" fill="#e85a2a"></polygon><polygon points="50,50 90,50 90,90 50,90" fill="#ff8c5a"></polygon><polygon points="40,75 50,90 50,70 40,55" fill="#1a1a1a"></polygon><polygon points="70,50 90,50 90,70 70,70" fill="#1a1a1a"></polygon><polygon points="50,70 70,70 70,90 50,90" fill="#1a1a1a"></polygon></svg></div></div><h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1></div>`,1)]),B(`div`,Dm,[t[11]||=B(`h2`,{class:`text-4xl font-black text-black mb-2`},`JOIN US!`,-1),t[12]||=B(`p`,{class:`text-gray-600 mb-6`},`Create your account`,-1),c.value?(R(),z(`p`,Om,A(c.value),1)):U(``,!0),B(`div`,km,[t[5]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`NAME`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[0]||=e=>r.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`Your name`},null,512),[[Eo,r.value]])]),B(`div`,Am,[t[6]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`USERNAME`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[1]||=e=>i.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`Choose a username`},null,512),[[Eo,i.value]])]),B(`div`,jm,[t[7]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`EMAIL`,-1),zn(B(`input`,{type:`email`,"onUpdate:modelValue":t[2]||=e=>a.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`Enter your email`},null,512),[[Eo,a.value]])]),B(`div`,Mm,[t[8]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`PASSWORD`,-1),zn(B(`input`,{type:`password`,"onUpdate:modelValue":t[3]||=e=>o.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`Create a password`},null,512),[[Eo,o.value]])]),B(`button`,{onClick:l,disabled:s.value,class:`w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50`},[s.value?(R(),z(`span`,Pm)):(R(),z(`span`,Fm,`REGISTER`))],8,Nm),B(`p`,Im,[t[10]||=H(` Already have an account? `,-1),V(n,{to:`/`,class:`text-noctune-orange font-bold hover:underline`},{default:Rn(()=>[...t[9]||=[H(`Login`,-1)]]),_:1})])])])])}}},Rm={class:`min-h-screen bg-noctune-cream flex flex-col`},zm={class:`p-8`},Bm={key:0,class:`text-center py-12 text-gray-500`},Vm={key:1,class:`grid grid-cols-4 gap-4`},Hm=[`onClick`],Um={class:`aspect-square bg-gray-300 relative overflow-hidden`},Wm=[`src`],Gm={class:`p-3`},Km={class:`text-sm font-bold text-black truncate`},qm={class:`text-xs text-gray-500 truncate`},Jm={__name:`LandingPage`,setup(e){let t=ep(),n=tp(),r=F([]),i=F(!0);function a(e){return e?e.startsWith(`http`)?e:`http://localhost:3001${e}`:``}function o(e){let i=r.value.findIndex(t=>t._id===e._id);n.setQueue(r.value,i),t.setTrack(e),t.play()}function s(){r.value.length&&o(r.value[0])}return hr(async()=>{try{let{data:e}=await Q.get(`/tracks`);e.success&&(r.value=e.data)}catch{}finally{i.value=!1}}),(e,t)=>(R(),z(`div`,Rm,[B(`div`,zm,[B(`div`,{class:`flex items-start gap-8 mb-12`},[B(`div`,{class:`flex-1`},[t[1]||=B(`h1`,{class:`text-5xl font-black text-black leading-tight mb-2`},[H(`MUSIC`),B(`br`),H(`THAT HITS`)],-1),t[2]||=B(`div`,{class:`inline-block bg-noctune-orange px-4 py-2 mb-4 border-b-4 border-black`},[B(`span`,{class:`text-4xl font-black text-black`},`DIFFERENT.`)],-1),t[3]||=B(`p`,{class:`text-gray-600 mb-6`},`You Vibe. Your sound. Only on Noctune.`,-1),B(`div`,{class:`flex gap-4`},[B(`button`,{onClick:s,class:`bg-noctune-yellow border-2 border-black px-6 py-3 font-bold hover:bg-yellow-400 transition-colors rounded-lg`},`PLAY NOW`),t[0]||=B(`button`,{class:`bg-gray-200 border-2 border-black px-6 py-3 font-bold hover:bg-gray-300 transition-colors rounded-lg`},`EXPLORE`,-1)])]),t[4]||=B(`div`,{class:`w-80 h-80 rounded-2xl overflow-hidden border-4 border-black flex-shrink-0`},[B(`img`,{src:`https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop`,alt:`Music illustration`,class:`w-full h-full object-cover`})],-1)]),B(`section`,null,[t[6]||=B(`h2`,{class:`text-2xl font-black text-black mb-6 flex items-center`},[H(` TRENDING NOW `),B(`svg`,{class:`w-5 h-5 ml-2`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z`})])],-1),i.value?(R(),z(`div`,Bm,`Loading tracks...`)):(R(),z(`div`,Vm,[(R(!0),z(L,null,kr(r.value,e=>(R(),z(`div`,{key:e._id,onClick:t=>o(e),class:`bg-white rounded-2xl border-2 border-black overflow-hidden hover:scale-[1.02] transition-transform cursor-pointer group`},[B(`div`,Um,[e.coverUrl?(R(),z(`img`,{key:0,src:a(e.coverUrl),class:`w-full h-full object-cover`},null,8,Wm)):U(``,!0),t[5]||=B(`div`,{class:`absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center`},[B(`div`,{class:`w-12 h-12 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity`},[B(`svg`,{class:`w-6 h-6 ml-1 text-black`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M8 5v14l11-7z`})])])],-1)]),B(`div`,Gm,[B(`p`,Km,A(e.title),1),B(`p`,qm,A(e.artist),1)])],8,Hm))),128))]))])])]))}},Ym={class:`p-8`},Xm={class:`mb-12`},Zm={key:0,class:`text-center py-12 text-gray-500`},Qm={key:1,class:`text-center py-12`},$m={key:2,class:`grid grid-cols-4 gap-6`},eh=[`onClick`],th={class:`aspect-square bg-gray-300 relative overflow-hidden`},nh=[`src`],rh={class:`p-3`},ih={class:`text-sm font-bold text-black truncate`},ah={class:`text-xs text-gray-500 truncate`},oh={key:0,class:`text-center py-8 text-gray-500`},sh={key:1,class:`bg-white rounded-2xl border-4 border-black overflow-hidden`},ch={class:`divide-y divide-gray-200`},lh=[`onClick`],uh={class:`flex-1 flex items-center gap-3`},dh={class:`text-sm text-gray-400 w-6`},fh={class:`w-10 h-10 rounded-lg flex-shrink-0 overflow-hidden bg-gray-300 border border-black`},ph=[`src`],mh={class:`font-medium text-black text-sm truncate`},hh={class:`w-40 text-center text-gray-600 text-sm truncate`},gh={class:`w-32 text-center text-gray-600 text-sm truncate`},_h=[`onClick`],vh={__name:`LibraryPage`,setup(e){let t=ep(),n=tp(),r=F([]),i=F([]),a=F(!0),o=F(!0);function s(e){return e?e.startsWith(`http`)?e:`http://localhost:3001${e}`:``}function c(e){let a=i.value.length?i.value:r.value,o=a.findIndex(t=>t._id===e._id);n.setQueue(a,o>=0?o:0),t.setTrack(e),t.play()}async function l(e){try{e._isLiked?(await Q.delete(`/tracks/${e._id}/like`),e._isLiked=!1,r.value=r.value.filter(t=>t._id!==e._id)):(await Q.post(`/tracks/${e._id}/like`),e._isLiked=!0)}catch{}}return hr(async()=>{try{let{data:e}=await Q.get(`/tracks/liked`);e.success&&(r.value=e.data.likedTracks||[],r.value.forEach(e=>e._isLiked=!0))}catch{}finally{a.value=!1}try{let{data:e}=await Q.get(`/tracks`);if(e.success){i.value=e.data;let t=new Set(r.value.map(e=>e._id));i.value.forEach(e=>e._isLiked=t.has(e._id))}}catch{}finally{o.value=!1}}),(e,t)=>{let n=Tr(`router-link`);return R(),z(`div`,Ym,[B(`section`,Xm,[t[3]||=B(`h2`,{class:`text-3xl font-black text-black mb-6`},`Liked Tracks`,-1),a.value?(R(),z(`div`,Zm,`Loading...`)):r.value.length===0?(R(),z(`div`,Qm,[t[1]||=B(`p`,{class:`text-gray-500 mb-4`},`No liked tracks yet`,-1),V(n,{to:`/home`,class:`bg-noctune-yellow border-2 border-black px-6 py-3 font-bold inline-block hover:bg-yellow-400 transition-colors rounded-lg`},{default:Rn(()=>[...t[0]||=[H(`Discover Music`,-1)]]),_:1})])):(R(),z(`div`,$m,[(R(!0),z(L,null,kr(r.value,e=>(R(),z(`div`,{key:e._id,onClick:t=>c(e),class:`group cursor-pointer bg-white rounded-2xl border-2 border-black overflow-hidden hover:scale-[1.02] transition-transform`},[B(`div`,th,[e.coverUrl?(R(),z(`img`,{key:0,src:s(e.coverUrl),class:`w-full h-full object-cover`},null,8,nh)):U(``,!0),t[2]||=B(`div`,{class:`absolute bottom-2 right-2 w-10 h-10 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity`},[B(`svg`,{class:`w-5 h-5 ml-0.5`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M8 5v14l11-7z`})])],-1)]),B(`div`,rh,[B(`p`,ih,A(e.title),1),B(`p`,ah,A(e.artist),1)])],8,eh))),128))]))]),B(`section`,null,[t[6]||=B(`h2`,{class:`text-2xl font-black text-black mb-6 flex items-center`},[H(` All Tracks `),B(`svg`,{class:`w-5 h-5 ml-2`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z`})])],-1),o.value?(R(),z(`div`,oh,`Loading...`)):(R(),z(`div`,sh,[t[5]||=oa(`<div class="bg-noctune-teal px-6 py-3 flex items-center text-black font-bold border-b-4 border-black"><span class="flex-1">TITLE</span><span class="w-40 text-center">ARTIST</span><span class="w-32 text-center">ALBUM</span><span class="w-12 text-center"></span></div>`,1),B(`div`,ch,[(R(!0),z(L,null,kr(i.value,(e,n)=>(R(),z(`div`,{key:e._id,onClick:t=>c(e),class:`px-6 py-3 flex items-center hover:bg-gray-50 transition-colors cursor-pointer`},[B(`div`,uh,[B(`span`,dh,A(n+1),1),B(`div`,fh,[e.coverUrl?(R(),z(`img`,{key:0,src:s(e.coverUrl),class:`w-full h-full object-cover`},null,8,ph)):U(``,!0)]),B(`span`,mh,A(e.title),1)]),B(`span`,hh,A(e.artist),1),B(`span`,gh,A(e.album),1),B(`button`,{onClick:zo(t=>l(e),[`stop`]),class:`w-12 flex justify-center text-gray-400 hover:text-red-400 transition-colors`},[(R(),z(`svg`,{class:_e([`w-5 h-5`,e._isLiked?`fill-red-400 text-red-400`:``]),fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[...t[4]||=[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z`},null,-1)]],2))],8,_h)],8,lh))),128))])]))])])}}},yh={class:`p-8`},bh={key:0,class:`text-center py-20 text-gray-500`},xh={class:`flex items-start gap-8 mb-8`},Sh={class:`w-56 h-56 rounded-2xl overflow-hidden border-4 border-black flex-shrink-0 bg-black`},Ch=[`src`],wh={key:1,class:`w-full h-full flex items-center justify-center`},Th={class:`flex-1`},Eh={class:`text-4xl font-black text-black mb-4 leading-tight`},Dh={key:0,class:`text-gray-600 mb-4`},Oh={class:`flex items-center gap-3 text-gray-600 mb-6`},kh={class:`font-medium`},Ah={class:`flex gap-4`},jh=[`disabled`],Mh={class:`bg-white rounded-2xl border-4 border-black overflow-hidden`},Nh={class:`divide-y divide-gray-200`},Ph=[`onClick`],Fh={class:`w-12 text-center text-gray-500`},Ih={class:`flex-1 flex items-center gap-4`},Lh={class:`w-12 h-12 rounded-lg flex-shrink-0 overflow-hidden bg-gray-300 border border-black`},Rh=[`src`],zh={class:`font-medium text-black text-sm truncate`},Bh={class:`w-48 text-center text-gray-600 text-sm truncate`},Vh=[`onClick`],Hh={key:0,class:`p-8 text-center text-gray-500`},Uh={key:2,class:`text-center py-20 text-gray-500`},Wh={__name:`PlaylistPage`,setup(e){let t=kl(),n=ep(),r=tp(),i=F(null),a=F(!0);function o(e){return e?e.startsWith(`http`)?e:`http://localhost:3001${e}`:``}function s(e){if(!i.value?.tracks?.length)return;let t=i.value.tracks;r.setQueue(t,e),n.setTrack(t[e]),n.play()}function c(){i.value?.tracks?.length&&s(0)}async function l(e){try{e._isLiked?(await Q.delete(`/tracks/${e._id}/like`),e._isLiked=!1):(await Q.post(`/tracks/${e._id}/like`),e._isLiked=!0)}catch{}}return hr(async()=>{let e=t.params.id;try{if(e){let{data:t}=await Q.get(`/playlists/${e}`);t.success&&(i.value=t.data,i.value.tracks?.forEach(e=>e._isLiked=!1))}else{let{data:e}=await Q.get(`/playlists`);if(e.success&&e.data.length){let{data:t}=await Q.get(`/playlists/${e.data[0]._id}`);t.success&&(i.value=t.data,i.value.tracks?.forEach(e=>e._isLiked=!1))}else i.value={name:`My Playlist`,tracks:[]}}}catch{i.value=null}finally{a.value=!1}}),(e,t)=>(R(),z(`div`,yh,[a.value?(R(),z(`div`,bh,`Loading playlist...`)):i.value?(R(),z(L,{key:1},[B(`div`,xh,[B(`div`,Sh,[i.value.coverUrl?(R(),z(`img`,{key:0,src:o(i.value.coverUrl),class:`w-full h-full object-cover`},null,8,Ch)):(R(),z(`div`,wh,[...t[0]||=[oa(`<svg class="w-40 h-24 text-white/60" viewBox="0 0 100 50"><rect x="5" y="20" width="4" height="15" fill="currentColor"></rect><rect x="12" y="10" width="4" height="30" fill="currentColor"></rect><rect x="19" y="15" width="4" height="20" fill="currentColor"></rect><rect x="26" y="5" width="4" height="40" fill="currentColor"></rect><rect x="33" y="12" width="4" height="26" fill="currentColor"></rect><rect x="40" y="8" width="4" height="34" fill="currentColor"></rect><rect x="47" y="15" width="4" height="20" fill="currentColor"></rect><rect x="54" y="18" width="4" height="14" fill="currentColor"></rect><rect x="61" y="12" width="4" height="26" fill="currentColor"></rect><rect x="68" y="8" width="4" height="34" fill="currentColor"></rect><rect x="75" y="15" width="4" height="20" fill="currentColor"></rect><rect x="82" y="20" width="4" height="15" fill="currentColor"></rect><rect x="89" y="22" width="4" height="10" fill="currentColor"></rect></svg>`,1)]]))]),B(`div`,Th,[t[2]||=B(`span`,{class:`inline-block bg-noctune-teal text-black text-xs font-bold px-3 py-1 rounded mb-3 border border-black`},`PLAYLIST`,-1),B(`h1`,Eh,A(i.value.name),1),i.value.description?(R(),z(`p`,Dh,A(i.value.description),1)):U(``,!0),B(`div`,Oh,[B(`span`,kh,A(i.value.tracks?.length||0)+` songs`,1)]),B(`div`,Ah,[B(`button`,{onClick:c,disabled:!i.value.tracks?.length,class:`bg-noctune-teal border-2 border-black px-6 py-2 font-bold flex items-center gap-2 rounded-lg hover:bg-teal-600 transition-colors disabled:opacity-50`},[...t[1]||=[B(`svg`,{class:`w-4 h-4`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M8 5v14l11-7z`})],-1),H(` PLAY `,-1)]],8,jh)])])]),B(`div`,Mh,[t[4]||=oa(`<div class="bg-noctune-teal px-6 py-3 flex items-center text-black font-bold border-b-4 border-black"><span class="w-12 text-center">#</span><span class="flex-1 text-center">TITLE</span><span class="w-48 text-center">ARTIST</span><span class="w-12 text-center"></span></div>`,1),B(`div`,Nh,[(R(!0),z(L,null,kr(i.value.tracks,(e,n)=>(R(),z(`div`,{key:e._id,onClick:e=>s(n),class:`px-6 py-3 flex items-center hover:bg-gray-50 transition-colors cursor-pointer`},[B(`span`,Fh,A(n+1),1),B(`div`,Ih,[B(`div`,Lh,[e.coverUrl?(R(),z(`img`,{key:0,src:o(e.coverUrl),class:`w-full h-full object-cover`},null,8,Rh)):U(``,!0)]),B(`span`,zh,A(e.title),1)]),B(`span`,Bh,A(e.artist),1),B(`button`,{onClick:zo(t=>l(e),[`stop`]),class:`w-12 flex justify-center text-gray-400 hover:text-red-400 transition-colors`},[(R(),z(`svg`,{class:_e([`w-5 h-5`,e._isLiked?`fill-red-400 text-red-400`:``]),fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[...t[3]||=[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z`},null,-1)]],2))],8,Vh)],8,Ph))),128)),i.value.tracks?.length?U(``,!0):(R(),z(`div`,Hh,`No tracks in this playlist yet`))])])],64)):(R(),z(`div`,Uh,`Playlist not found`))]))}},Gh={class:`p-8`},Kh={class:`bg-white rounded-2xl border-4 border-black p-6 mb-6 flex items-center gap-8`},qh={class:`w-40 h-40 rounded-full border-4 border-black overflow-hidden flex-shrink-0 bg-gray-300`},Jh=[`src`],Yh={key:1,class:`w-full h-full flex items-center justify-center`},Xh={class:`flex-1`},Zh={class:`text-3xl font-black text-black mb-1`},Qh={class:`text-gray-600 mb-3`},$h={class:`inline-flex items-center gap-2 border-2 border-noctune-orange text-noctune-orange px-3 py-1 rounded-full mb-4`},eg={class:`text-sm font-medium`},tg={class:`flex gap-4`},ng={key:0,class:`bg-white rounded-2xl border-4 border-black p-6 mb-6`},rg={key:0,class:`text-red-500 text-sm mb-4`},ig={key:1,class:`text-green-600 text-sm mb-4`},ag={class:`space-y-4 max-w-md`},og=[`disabled`],sg={key:0,class:`inline-block w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin mr-1`},cg={class:`bg-white rounded-2xl border-4 border-black p-6 mb-6 flex justify-center gap-12`},lg={class:`flex items-center gap-4`},ug={class:`text-2xl font-black text-black`},dg={__name:`ProfilePage`,setup(e){let t=Ol(),n=If(),r=F(!1),i=F(``),a=F(``),o=F(``),s=F(null),c=F(!1),l=F(``),u=F(``),d=F(0),f=G(()=>n.user?.name||n.user?.username||`User`);function p(e){return e?e.startsWith(`http`)?e:`http://localhost:3001${e}`:``}function m(){r.value=!r.value,r.value&&(i.value=n.user?.name||``,a.value=n.user?.username||``,o.value=n.user?.email||``,s.value=null,l.value=``,u.value=``)}function h(e){s.value=e.target.files[0]||null}async function g(){l.value=``,u.value=``,c.value=!0;try{let e=new FormData;e.append(`name`,i.value),e.append(`username`,a.value),e.append(`email`,o.value),s.value&&e.append(`avatar`,s.value);let t=await n.updateProfile(e);t.success?(u.value=`Profile updated!`,setTimeout(()=>{r.value=!1},1500)):l.value=t.message}catch{l.value=`Update failed`}finally{c.value=!1}}async function _(){await n.logout(),t.push(`/`)}return hr(async()=>{try{let{data:e}=await Q.get(`/tracks/liked`);e.success&&(d.value=e.data.likedTracks?.length||0)}catch{}}),(e,t)=>(R(),z(`div`,Gh,[B(`div`,Kh,[B(`div`,qh,[I(n).user?.avatarUrl?(R(),z(`img`,{key:0,src:p(I(n).user.avatarUrl),alt:`Profile`,class:`w-full h-full object-cover`},null,8,Jh)):(R(),z(`div`,Yh,[...t[3]||=[B(`svg`,{class:`w-16 h-16 text-gray-400`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z`})],-1)]]))]),B(`div`,Xh,[B(`h1`,Zh,A(f.value),1),B(`p`,Qh,`@`+A(I(n).user?.username||`username`),1),B(`div`,$h,[t[4]||=B(`svg`,{class:`w-4 h-4`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z`})],-1),B(`span`,eg,A(I(n).user?.role===`admin`?`Admin`:`Premium Member`),1)]),B(`div`,tg,[B(`button`,{onClick:m,class:`border-2 border-black px-4 py-2 rounded-lg font-medium flex items-center gap-2 hover:bg-gray-100 transition-colors`},[t[5]||=B(`svg`,{class:`w-4 h-4`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z`})],-1),H(` `+A(r.value?`Cancel`:`Edit Profile`),1)])])])]),r.value?(R(),z(`div`,ng,[t[11]||=B(`h3`,{class:`text-xl font-black text-black mb-4`},`Edit Profile`,-1),l.value?(R(),z(`p`,rg,A(l.value),1)):U(``,!0),u.value?(R(),z(`p`,ig,A(u.value),1)):U(``,!0),B(`div`,ag,[B(`div`,null,[t[6]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-1`},`NAME`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[0]||=e=>i.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black`},null,512),[[Eo,i.value]])]),B(`div`,null,[t[7]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-1`},`USERNAME`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[1]||=e=>a.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black`},null,512),[[Eo,a.value]])]),B(`div`,null,[t[8]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-1`},`EMAIL`,-1),zn(B(`input`,{type:`email`,"onUpdate:modelValue":t[2]||=e=>o.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black`},null,512),[[Eo,o.value]])]),B(`div`,null,[t[9]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-1`},`AVATAR`,-1),B(`input`,{type:`file`,accept:`image/*`,onChange:h,class:`w-full text-sm`},null,32)]),B(`button`,{onClick:g,disabled:c.value,class:`bg-noctune-teal border-2 border-black px-6 py-2 font-bold rounded-lg hover:bg-teal-600 transition-colors disabled:opacity-50`},[c.value?(R(),z(`span`,sg)):U(``,!0),t[10]||=H(` Save Changes `,-1)],8,og)])])):U(``,!0),B(`div`,cg,[B(`div`,lg,[t[13]||=B(`div`,{class:`w-14 h-14 bg-noctune-orange rounded-xl flex items-center justify-center border-2 border-black`},[B(`svg`,{class:`w-7 h-7 text-white`,fill:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{d:`M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z`})])],-1),B(`div`,null,[B(`p`,ug,A(d.value),1),t[12]||=B(`p`,{class:`text-sm text-gray-500`},`Liked Songs`,-1)])])]),B(`button`,{onClick:_,class:`w-full bg-noctune-orange border-4 border-black rounded-2xl py-4 font-bold text-black flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors`},[...t[14]||=[B(`svg`,{class:`w-6 h-6`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`},[B(`path`,{"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`2`,d:`M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1`})],-1),H(` Logout `,-1)]])]))}},fg={class:`min-h-screen bg-noctune-cream flex flex-col`},pg={class:`flex flex-1`},mg={class:`flex-1 p-8 overflow-auto`},hg={class:`max-w-2xl mx-auto`},gg={key:0,class:`text-red-500 text-sm mb-4 font-medium`},_g={key:1,class:`text-green-600 text-sm mb-4 font-medium`},vg={class:`bg-white rounded-2xl border-4 border-black p-8 space-y-6`},yg=[`src`],bg={key:1,class:`text-gray-500`},xg={key:0,class:`text-black font-medium`},Sg={key:1,class:`text-gray-500`},Cg=[`disabled`],wg={key:0,class:`inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2`},Tg=[{path:`/`,name:`Login`,component:Sm,meta:{guest:!0}},{path:`/register`,name:`Register`,component:Lm,meta:{guest:!0}},{path:`/home`,name:`Home`,component:Jm,meta:{auth:!0}},{path:`/library`,name:`Library`,component:vh,meta:{auth:!0}},{path:`/playlist`,name:`Playlist`,component:Wh,meta:{auth:!0}},{path:`/playlist/:id`,name:`PlaylistDetail`,component:Wh,meta:{auth:!0}},{path:`/profile`,name:`Profile`,component:dg,meta:{auth:!0}},{path:`/admin/tracks`,name:`AdminTracks`,component:{__name:`AdminPage`,setup(e){let t=Ol(),n=F(``),r=F(``),i=F(``),a=F(``),o=F(null),s=F(``),c=F(null),l=F(!1),u=F(``),d=F(``),f=F(null),p=F(null);function m(e){let t=e.target.files[0];t&&(o.value=t,s.value=URL.createObjectURL(t))}function h(e){let t=e.target.files[0];t&&(c.value=t)}async function g(){if(u.value=``,d.value=``,!n.value||!r.value||!i.value||!a.value||!o.value||!c.value){u.value=`All fields are required`;return}l.value=!0;try{let e=new FormData;e.append(`title`,n.value),e.append(`artist`,r.value),e.append(`album`,i.value),e.append(`genre`,a.value),e.append(`cover`,o.value),e.append(`audio`,c.value);let{data:l}=await Q.post(`/admin/tracks`,e,{headers:{"Content-Type":`multipart/form-data`}});l.success&&(d.value=`Track uploaded successfully!`,n.value=``,r.value=``,i.value=``,a.value=``,o.value=null,s.value=``,c.value=null,setTimeout(()=>t.push(`/home`),1500))}catch(e){u.value=e.response?.data?.message||`Upload failed`}finally{l.value=!1}}return(e,t)=>(R(),z(`div`,fg,[V(xp),B(`div`,pg,[V(Dp),B(`main`,mg,[B(`div`,hg,[t[12]||=B(`h1`,{class:`text-4xl font-black text-black mb-2`},`Upload Track`,-1),t[13]||=B(`p`,{class:`text-gray-600 mb-8`},`Add a new track to the library`,-1),u.value?(R(),z(`p`,gg,A(u.value),1)):U(``,!0),d.value?(R(),z(`p`,_g,A(d.value),1)):U(``,!0),B(`div`,vg,[B(`div`,null,[t[6]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`TITLE`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[0]||=e=>n.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`Track title`},null,512),[[Eo,n.value]])]),B(`div`,null,[t[7]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`ARTIST`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[1]||=e=>r.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`Artist name`},null,512),[[Eo,r.value]])]),B(`div`,null,[t[8]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`ALBUM`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[2]||=e=>i.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`Album name`},null,512),[[Eo,i.value]])]),B(`div`,null,[t[9]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`GENRE`,-1),zn(B(`input`,{type:`text`,"onUpdate:modelValue":t[3]||=e=>a.value=e,class:`w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black`,placeholder:`e.g. Pop, Rock, Jazz`},null,512),[[Eo,a.value]])]),B(`div`,null,[t[10]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`COVER IMAGE`,-1),B(`div`,{class:`border-2 border-dashed border-black rounded-lg p-6 text-center cursor-pointer hover:bg-gray-50`,onClick:t[4]||=e=>f.value.click()},[s.value?(R(),z(`img`,{key:0,src:s.value,class:`w-32 h-32 object-cover mx-auto mb-2 rounded-lg border-2 border-black`},null,8,yg)):(R(),z(`p`,bg,`Click to upload cover image`)),B(`input`,{ref_key:`coverInput`,ref:f,type:`file`,accept:`image/*`,onChange:m,class:`hidden`},null,544)])]),B(`div`,null,[t[11]||=B(`label`,{class:`block text-xs font-bold text-gray-600 mb-2 tracking-wider`},`AUDIO FILE`,-1),B(`div`,{class:`border-2 border-dashed border-black rounded-lg p-6 text-center cursor-pointer hover:bg-gray-50`,onClick:t[5]||=e=>p.value.click()},[c.value?(R(),z(`p`,xg,A(c.value.name),1)):(R(),z(`p`,Sg,`Click to upload audio file (MP3, WAV, FLAC)`)),B(`input`,{ref_key:`audioInput`,ref:p,type:`file`,accept:`.mp3,.wav,.flac`,onChange:h,class:`hidden`},null,544)])]),B(`button`,{onClick:g,disabled:l.value,class:`w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl hover:bg-orange-600 transition-colors disabled:opacity-50`},[l.value?(R(),z(`span`,wg)):U(``,!0),H(` `+A(l.value?`Uploading...`:`UPLOAD TRACK`),1)],8,Cg)])])])])]))}},meta:{auth:!0,admin:!0}}],Eg=Dl({history:qc(),routes:Tg});Eg.beforeEach((e,t,n)=>{let r=If();if(e.meta.admin&&!r.isAdmin)return n(`/home`);if(e.meta.auth&&!r.isLoggedIn)return n(`/`);if(e.meta.guest&&r.isLoggedIn)return n(`/home`);n()});var Dg=Go(rm);Dg.use(fs()),Dg.use(Eg),Dg.mount(`#app`);
\ No newline at end of file
diff --git a/dist/assets/index-mUm8ch4i.css b/dist/assets/index-mUm8ch4i.css
new file mode 100644
index 0000000..03088b6
--- /dev/null
+++ b/dist/assets/index-mUm8ch4i.css
@@ -0,0 +1 @@
+.range-player[data-v-b7738cdf]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px}.range-vol[data-v-b7738cdf]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px}.animate-slide-in{animation:.3s ease-out slideIn}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,system-ui,sans-serif;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:Space Mono,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-right-2{right:-.5rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.bottom-12{bottom:3rem}.bottom-2{bottom:.5rem}.bottom-24{bottom:6rem}.left-0{left:0}.left-12{left:3rem}.left-20{left:5rem}.left-3{left:.75rem}.right-0{right:0}.right-12{right:3rem}.right-2{right:.5rem}.right-20{right:5rem}.right-4{right:1rem}.right-8{right:2rem}.top-16{top:4rem}.top-20{top:5rem}.top-4{top:1rem}.top-8{top:2rem}.top-full{top:100%}.z-50{z-index:50}.z-\[100\]{z-index:100}.m-4{margin:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-80{height:20rem}.h-full{height:100%}.max-h-96{max-height:24rem}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-80{width:20rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-5xl{max-width:64rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-screen-2xl{max-width:1536px}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-4{border-bottom-width:4px}.border-r-2{border-right-width:2px}.border-r-4{border-right-width:4px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-t-4{border-top-width:4px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-noctune-orange{--tw-border-opacity:1;border-color:rgb(255 107 53/var(--tw-border-opacity,1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/20{border-color:#fff3}.border-t-transparent{border-top-color:#0000}.bg-amber-200{--tw-bg-opacity:1;background-color:rgb(253 230 138/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/0{background-color:#0000}.bg-black\/30{background-color:#0000004d}.bg-black\/40{background-color:#0006}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity,1))}.bg-noctune-cream{--tw-bg-opacity:1;background-color:rgb(245 240 220/var(--tw-bg-opacity,1))}.bg-noctune-dark{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-noctune-orange{--tw-bg-opacity:1;background-color:rgb(255 107 53/var(--tw-bg-opacity,1))}.bg-noctune-teal{--tw-bg-opacity:1;background-color:rgb(26 155 143/var(--tw-bg-opacity,1))}.bg-noctune-yellow{--tw-bg-opacity:1;background-color:rgb(255 215 0/var(--tw-bg-opacity,1))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/20{background-color:#fff3}.fill-current{fill:currentColor}.fill-red-400{fill:#f87171}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-20{padding-bottom:5rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:Space Mono,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[9px\]{font-size:9px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-black\/60{color:#0009}.text-black\/70{color:#000000b3}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-noctune-dark{--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}.text-noctune-orange{--tw-text-opacity:1;color:rgb(255 107 53/var(--tw-text-opacity,1))}.text-noctune-teal{--tw-text-opacity:1;color:rgb(26 155 143/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/60{color:#fff9}.opacity-0{opacity:0}.opacity-60{opacity:.6}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-\[4px_4px_0px_0px_\#000\]{--tw-shadow:4px 4px 0px 0px #000;--tw-shadow-colored:4px 4px 0px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box}body{margin:0;padding:0;font-family:Inter,system-ui,sans-serif}input[type=range]{appearance:none;background:#1a1a1a;border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#1a1a1a;border-radius:50%;width:14px;height:14px}input[type=range]::-moz-range-thumb{cursor:pointer;background:#1a1a1a;border:none;border-radius:50%;width:14px;height:14px}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-noctune-orange\/20:hover{background-color:#ff6b3533}.hover\:bg-noctune-teal\/20:hover{background-color:#1a9b8f33}.hover\:bg-orange-600:hover{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.hover\:bg-yellow-400:hover{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.hover\:text-red-400:hover{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\:ring-black:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity,1))}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:bg-black\/20{background-color:#0003}.group:hover .group-hover\:opacity-100{opacity:1}
diff --git a/dist/icon-dark-32x32.png b/dist/icon-dark-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..12c825a109e3c3b7941d957d8a2ac936d5717c5b
GIT binary patch
literal 585
zcmV-P0=E5$P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0p3YOK~#7F?U(Iw
zf<O?4S0@Eff*nXI5Gv3P&<dgz02P20L@SU~09F7UXa~^2WnUu9A%~yD%a1%WtDLvo
zzPIeHN+cnKu-HD?a?wBeX>F5K@I)Y9hkG8}6|W~i?1A`6NlJRKhy3zE`f!keoG%R0
zLjeJTG%_U3XczECJ+W9Ul%E@hL8fWaWHO=AXw-HPJ%Obz83z};-L7?CU4%tZlvbfq
zEBjzx9^1A}Dr6sIBaY)TBdrV^4u?`@rFb@*wbXi^SI_f8Vm_bOV-;zd3J%)H1n!X;
z$~%U-YUfcD(Q37#N6E6R%!<5wkR(aNuW<?xoS#$e9EKtJzE95vcN~W}qe|b_F~swM
zhzd?St=DUMCirHv>GW6j0n4%|2!eXNTrO$5-O@GSb5HORaRJwL>*7H%p)jeV2su!r
z*f@A&t;!dLE_1aH@a~o88UniJApD$%1pw?uB>;9y@TUdjc`mp(TLJ*rORM9l437xC
z26nfAN`%~~s)g__*G88?fQq|*4;+uj@<@)yW8#!H=FnjF`+euV)9JL?f=~SaAo&vl
z3erab0bit#2t{b|MNE2l9}WhCgfDLYy6X?0V`ue<GvSHX5h^9|gvo}M^_zdsEji{l
Xb$b%asYFxh00000NkvXXu0mjf%ys!F

literal 0
HcmV?d00001

diff --git a/dist/icon-light-32x32.png b/dist/icon-light-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3462ccd8a6f9c1da6893d213f8868200cf3c80a
GIT binary patch
literal 566
zcmV-60?GY}P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0n155K~#7F?N{5C
zf-n%BeH1_mmOu%y1Fb+y&<fyhKcNG#0-*x!K&?PKfDW>A*$pRw#5ZO?_MS6vLWbO%
z$;=!eG9lP9wu((Y*{a{QLvkP)fYfDCmppnQxw1r&haSk4i4VSf(V24@8gKNI90B=3
z4FQro;+;IhyMRx660$6_KCkPV4u=D6w_7@$PFA0%l+-00k4HI~OnUFNNf-n{V+uC4
zx)0{{@n*9j8+0E;V>}+ye!uTWU^E&vDizl2bx&;^$L+ijLgsnij%`s1!%$XLWkiCH
z%J6yDcMNrE=Nv9dl7#LBlQ&V(cMq^|!_TM!kWZ)6)_Jj5P!vV<DEVr&qOvTlzP&QU
z`9OpMhrJQ<2>E<IclulV07_=LT()Bz#cVdCOMuTU<O<Hx(vuF!gv4|uA(I=)hB<vL
z<%>k`@SLyjG)<)q5a61F@a{Ty3(#Ng3V>Zh{;&W(Q@PvidIB)VXKp+Pfz3D<nqC9D
zS%4CuH!8Id?s{&x00FjjZ~7i!vZf?asvJ^d4h^Q;WONio(QCoL{|CvR5Kxmp)DTdT
zKNPqKy0R1pu=al>^*|nX!x6ubJS7JZlAMP9Jr_FRH=9>9Cn9I^!T<mO07*qoM6N<$
Eg07_KNB{r;

literal 0
HcmV?d00001

diff --git a/dist/icon.svg b/dist/icon.svg
new file mode 100644
index 0000000..5c11e6c
--- /dev/null
+++ b/dist/icon.svg
@@ -0,0 +1,26 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @media (prefers-color-scheme: light) {
+      .background { fill: black; }
+      .foreground { fill: white; }
+    }
+    @media (prefers-color-scheme: dark) {
+      .background { fill: white; }
+      .foreground { fill: black; }
+    }
+  </style>
+  <g clip-path="url(#clip0_7960_43945)">
+    <rect class="background" width="180" height="180" rx="37" />
+    <g style="transform: scale(95%); transform-origin: center">
+      <path class="foreground"
+        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
+      <path class="foreground"
+        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_7960_43945">
+      <rect width="180" height="180" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..c7255e1
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/svg+xml" href="/vite.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Noctune - Music That Hits Different</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <script type="module" crossorigin src="/assets/index-BO7gh51n.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-mUm8ch4i.css">
+  </head>
+  <body class="bg-noctune-cream">
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/dist/placeholder-logo.png b/dist/placeholder-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a792ac2ddfbe047639f7907c82f14c73e3de3d9
GIT binary patch
literal 568
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5Ca^FANm1Vwi-43tfKP}kNR$*1WiP`GRL@@$
z<QL3vU!lR_fWZ6t2>}KL6V^XjP|gFiXN9MWV@SoVw>S2B83zimJup|_^-FbrjeV<v
z*lw|=xs0x-S#nsL%^x(0FVKj%;qsQ{U_)>3it>ba2M!&I{-9Oz_xPcYF3oFZ=eo>b
ztd*bf%*2|<`prCX7bFlbJSYChhATpnZHm_gDmxOE$M3Ov^QCh;k9GZ#-G|g`wsZ1y
zY-hCA6Y*4%kP@8PzH+9qgqG>UuX7G~Jv3yxb4X!L$WkVer)+Lao)20%*YwyPoNauk
zS!$0_-Kr#3+3w{V4Ccu^47H4DY>j<sazVM=;K3pHk{C5Z9+CU(_C~D2hB~a*&VI>P
zOx?nl+kWZD?x4qFw+?-2Jz{$0yTXmVj$U6an>Gc>YVI}tW1#2eCg2#H$RT;W`9jE4
z<(d!P-_Kw0oV0yf*RuH&47YRnuIuc%FZkt*pVIL&DpPv8{<u#M`yJBCefwlcT-?&n
zjxSV#cP<yr(CFAcO<MeKYtwf3*yMaAuj@PF;;yRSvlUx1ZJp{~pm)R1n_XBvJ$&o^
z@|B67@3(7p1LcJx-KQrXz4I$U-A#P^e%a;@1bFc|j=?m3v(EJ3b*iA~_jL7hS?83{
F1OR^s+sXg{

literal 0
HcmV?d00001

diff --git a/dist/placeholder-logo.svg b/dist/placeholder-logo.svg
new file mode 100644
index 0000000..b1695aa
--- /dev/null
+++ b/dist/placeholder-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/dist/placeholder-user.jpg b/dist/placeholder-user.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6fa7543d38ed8fdb38f03b5c0f40ad2d66827d4a
GIT binary patch
literal 1635
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Jot=}Njf<0mlbf51hhI{FpO24UPE1@#
zQbj>cRarq<NkiAtKtsz+TS?i-#mLOs*1^F+&A`pu)y~V(-oX}R2qQN)H$N}Gtbl;5
zt){Z3Ey>{jAqGJXh7$}Ym>C5bm;@P_1sVSzVUPwol9>?*7~p`Fjh%&&i5Vy<f-DS?
z|9^{thnbOqNq|`ZC~&g@u8VX=&D0{3NxJM8pgPZVC{;A7_ZmRB%rg%6?s#L-<8jAt
z0z{;6M(1w%g+C<%x63v_L_Qop_vlnupKyXLgwOCqL#0qDzHbAR3#0hCCI(yZ^Dhe6
zF%4q6JX@HXcv8TZpNd?b`6dvt1)_(e?F$%`&(vJvb^z&QR@8F^nq++Vvq=Gn&*oGp
ztH8i`B#KuC#AReE29iQ7J3t)rfIKjWodp;enVA?_x!E~6A*KL>o`r#xP0%qgXfnHy
zn7E>$Lug{-LIb0a!ifhj3W%7RB^MNLx}>0_tP&7BY4IaqjBo(siP4_n_ky5FEmL(`
zmhdc@Jb`OxUUPQK!#s<ks4a^p%H4WwDH~SypW$=Z+Y7nHVuC7`f>q(C`ZJd3YCA-U
zh)gnS;tOzhJ@#Yf$<H#|T_Xi0EycfeiDqs%zjsG4=iCqeb2guta$W3tyl3m%@RzH%
zw$)BNFmug&r#)BuLRM|CQ!V1T5}m5A6W-@iJL|m54!fk=sdn?qW<?z@Q0vqR3!XAL
zY<6+j>SRGl2DVF#R;SL@d2ijhdh5m?{S3~XPpnp*$)2k2D4JJuYTMD;n0K36=Y8OJ
z-mS1ZZC1<AQ;7$xFJ;KI$coB-@#?w#R%S(^Vy12TlL^0+jun3QbGz*s)t|7a{K#C>
z49BdqoLo<WB68%O^mTUSWN*BC$H7x@u4>M_v$9v)Hm?5W<`Stp{n4{)u7wjb{~fvi
z!T;47&))dGMoGtVj(5+GENxwrz4z{INB>V}1-4JUxp@DgJ8LKAUAQWhoR~X5%Wp!~
z<DEyIh54}GuHDORee^nG{=GJ{6F;tQFYa8gBi;RW!?hOKPp@w0bZ55BxNw^zr`q$9
z|Cgg0imF};Dm+VO?a6Cq6V!EZKX>=~v%IB`XWv<uso3&rOQXBsJ*#tZSFUs9{Y^K{
zS>>j>XTei(%h-3q0fm1bY5udCHKmu^f&G@&$==-St!-gGk?J$~inXs)aj#q07WR4-
zM=rxkFUy8C!QJtD_bgKux*|B+dhW6{-z2Xe?@~0Ks(ijMro-3a&Mj#N$xpGBRnmWt
zTsUxz-_bhtPj<sMeuw`I#q*`&SU0SnCF#EM>F={K-%Z^<th=u9Px?QDVDQ^dYbW_s
zu35R9EqP8RyTuy$o@<vb=I^oyx%njXt>57b<}UkWR&Lo)qWhnrV2yD?(SL?Q-l9d;
zHS6^j9!_Ejaqqemoyn}=@ptvvS-S7I7N7FZ5}(WNv3l;#-@XTLOmcJGRz1a7FhcBC
z-nPY(UsETGE4&Rdme=pC+jj2j;!j+6o-!m}7oD?jz2dGcAvK4%qSmfE=U+z7Z+`#j
z$Mx4a@1yJ$R+zt@y0z(yW_ISH^4k|<^!Al@?-M=r`gz3ehXgqVyM1>}k-Q}GF<-;)
z*LLGyVd)Qk|Ji$(J?dTY-07-((_=n&#1_`3T&d5FiH|guzja;wny>q}tw+C34*a{8
zfJ9i0DbumfeTVp1E#|(wudjdSJE%AnL@H&$nSBB{^D;34Gp|fN9u>e68m!_b0O__-
AD*ylh

literal 0
HcmV?d00001

diff --git a/dist/placeholder.jpg b/dist/placeholder.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6bfe96336dbe567f5f1e9129f5bccdc78b114bba
GIT binary patch
literal 1064
zcmb7@Nla5w6o$`zL;Ko7c&|)~7+MC)5J;K9giwZ-mWToZDl29|7tA;;v?z!g5*b9%
zRSP(-1ZOwO;J6Z;05{Ybq6y%HZtA^{7Ghj^Zu0K`Ud}o9eCM5OpR~^apJ^}|03iS)
zUSPLDyMAv~1wd97gaQBuEK&lE6~YUU53r&J$VBT_bS?^Z_)q|CRlqoW3h_=1XC~2(
zowlIWj23Fe8(HX8O~UM7AR)W5x}mzhvbshU9ifGUR8tm1vSSl<kSO`*>)WSJzz{QQ
zmi2yKN<Cm70f8eW(?|eHK(v7DW8jCYV3BBI7ywN%hy{t1lgSm>VU))a_#4eg7^#He
zB=v{_T40oFHqzanm!#xGc@)<MNSjrish-x{=)u4et=Dkfcv@G?A<ni{7gXvUJKtU3
zmz_Rzcws|cT-nKnk)nx~{xvmkH2V1RtND!sJ)^CQ&kRlGw;2T$*JSdwKEWZO35gqx
zrp#^IcNFfdtlG6_@4o#<+KwJO-f`-5@0qifbLTHyyma}>^&2;D-M({g?EZs?j~+jH
z`uxSqSCdoIGw<Gi`1omd?(4VjKYlL#`b{Wtcb6gYQ{*HN47*B+TS8$@nxa{Xr5L6S
z;U3YvQq8C$Q`}jte^ic#P7)nZoa$Md8`GQ}*lA50^pcjuZk-<wDjH6=)h&1*Dvhhz
zpwH{l^iAOAtr0omF^C}pqvRJ5n6mN;!c*VS*hHAjhg({gxw=pGETi=gIN*k^UUTq`
zj5-OQIT7EybwDnzP`-vVP;i`_lPcsgxvPu9Rq#~`Zf=7AS|1PJkif9e;6RNgJW3ZI
zu1(TvGzps$lhX7?lQArAOa5j<o-V_vx8o$p#nn}C6VytjS|6c_(EqpDr@@65+b7`R
zn%j-vIox%`QU^te2QL{dOFV{7i9nK!9mXJ<Cs%<YhW{A=rNHy5j!elZu5IqL4i3+c
z^R@+*R+n8=WA3nAx%YI&c|fxI?q6r~ek7ehemM<@V)2~gYb`?{s3UotPgOhL*=!vg
XAGR(0la3V0lXM&+MLHyoCvxf!Qm;2N

literal 0
HcmV?d00001

diff --git a/dist/placeholder.svg b/dist/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/dist/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts
new file mode 100644
index 0000000..8932bc5
--- /dev/null
+++ b/hooks/use-toast.ts
@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e142852
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/svg+xml" href="/vite.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Noctune - Music That Hits Different</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+  </head>
+  <body class="bg-noctune-cream">
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..fed2fe9
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..c4b7818
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..41f91a8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "noctune-music-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.16.1",
+    "howler": "^2.2.4",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.34",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.0",
+    "tailwindcss": "^3.4.0",
+    "vite": "^8.0.14"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..9693d64
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,1634 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      axios:
+        specifier: ^1.16.1
+        version: 1.16.1
+      howler:
+        specifier: ^2.2.4
+        version: 2.2.4
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@5.7.3)(vue@3.5.34(typescript@5.7.3))
+      vue:
+        specifier: ^3.5.34
+        version: 3.5.34(typescript@5.7.3)
+      vue-router:
+        specifier: ^4.6.4
+        version: 4.6.4(vue@3.5.34(typescript@5.7.3))
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.7
+        version: 6.0.7(vite@8.0.14(@types/node@22.19.11)(jiti@1.21.7))(vue@3.5.34(typescript@5.7.3))
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.24(postcss@8.5.15)
+      postcss:
+        specifier: ^8.5.0
+        version: 8.5.15
+      tailwindcss:
+        specifier: ^3.4.0
+        version: 3.4.19
+      vite:
+        specifier: ^8.0.14
+        version: 8.0.14(@types/node@22.19.11)(jiti@1.21.7)
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@oxc-project/types@0.132.0':
+    resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
+
+  '@rolldown/binding-android-arm64@1.0.2':
+    resolution: {integrity: sha512-ZS4D1JPGn/MYQN/SYDWftIE/nVsM8j/AFOYEzAoOE2O3NktQOZru+/vYXGbR/qtdLdIfGCP0lcoJiYVzsEz+iQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.0.2':
+    resolution: {integrity: sha512-vdFA9+C/rekyGce7WqHs/xoT0ioZEWaOFyZLIV1mEeNFaFDUQrPIo8Vs2GvJ6eetb3rzDUtUBgzto3ExpXJB3w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.2':
+    resolution: {integrity: sha512-BewSOwTHazv77DTYiAZXSqqKZ4KP/KonFisDMVU7PImxoWfB2aepnPhd2E4SWz3zDzYgDNbs6jBmTdgNnF02GA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.2':
+    resolution: {integrity: sha512-m41o7M0YWtUdqk61Tb+jnKb2rN++iRdIASlExkUoKfIAH30DOHCB8fVLzSUpbWHHU8esmEioY62PxzexE8MBuA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
+    resolution: {integrity: sha512-jcojB9H7W/jS29pMKWAK1N+fU99vXodHDTatS3b3y/XSOCiHo0kkA74pL3jJmkoQtYpOCxDvaKs1fo2Ij/1X5w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.2':
+    resolution: {integrity: sha512-1jn6qDU5iiOgFgygDzKUuKP0maTi0/f1+sBLgvij/76C77Nm3ts6ufz9Bjg5q5dduxiUIxtq86JIoBvo1xQ4Ig==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.2':
+    resolution: {integrity: sha512-QVLO/czFMdoMFSqlX3bcswcJNm/23r+qoa/jgtmFc/qEp6/jXmIkDjF/XIo8dPfGaiwy1xfQn8o77L79GeXFgw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.2':
+    resolution: {integrity: sha512-hgO5Abm0w5UL6FEa2iFnZqo2KlK7TQ5QhV5x09hujBf7t5KzHQ1VmfPuTpqRy/rNlSxua3eWH374xxiVrP+lcA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.2':
+    resolution: {integrity: sha512-fy8rXxuYEu602abC8MUNaPjYLIFzReOaEIEMKMUa0rFEUxNpVXhs15KSSQ4qlqSaM7B6rcj9rDZgADh/IGDzLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.2':
+    resolution: {integrity: sha512-0+bOkiQ779+r1WpoHOWHqncvyySci0vKph+myNDYb+im6meJAzHQXay6oEgnkHuUGouM1LKTZwqKpBow6Kj7CQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.0.2':
+    resolution: {integrity: sha512-mjSkrzZK5Qsl0a9d1JgILOiuZOSDTVdKENcSXBoqbzSrspLR/4/IRVDo5wd2GgZjNss/viBFJdeq+j7qH2nypw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.0.2':
+    resolution: {integrity: sha512-1v5vHasdfQAZoEHakBV72LIFAC9JjnymsiKxp+GEr/ma3+NJCPSaYK+qavInOovJkgwFrs7GccX2d6IgDA3Z5w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.2':
+    resolution: {integrity: sha512-mb1VobWn6NheziTk5/WEaR6AKVbrwT5sOi6C7zk3gy/pD1qtJfU1j4PgTo2NJnOtbL9Dl3Aeei8w9jJ7qC2jZQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.2':
+    resolution: {integrity: sha512-SqKonF56vA/L2yHwHYcEp2P34URpOZ7d1fS635cTkpDnUtEGdUbhI6NzsPdqeSWvAAeGDrxjWjNmibDIdFf9/A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.2':
+    resolution: {integrity: sha512-v7qRI7gXLRINcOGXt+7YmAZ6iFuyZVMIoXAxhd8oP+DR9dLfL9GfNIx7PLMxmhZdvq8waUJBQiWN9EKNy+TRBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@tybys/wasm-util@0.10.2':
+    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
+
+  '@types/node@22.19.11':
+    resolution: {integrity: sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==}
+
+  '@vitejs/plugin-vue@6.0.7':
+    resolution: {integrity: sha512-km+p+XdSz9Sxm5rqUbqcSfZYaAniKxWBj1KURl+Jr7UaPvvX7BmaWMdP69I5rrFDeQGyxAG7NXdc57vz+snhWg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.2.25
+
+  '@vue/compiler-core@3.5.34':
+    resolution: {integrity: sha512-s9cLyK5mLcvZ4Agva5QgRsQyLKvts9WbU9DB6NqiZkkGEdwmcEiylj5Jbwkp680drF/NNCV8OlAJSe+yMLxaJw==}
+
+  '@vue/compiler-dom@3.5.34':
+    resolution: {integrity: sha512-EbF/T++k0e2MMZlJsBhzK8Sgwt0HcIPOhzn1CTB/lv6sQcyk+OWf8YeiLxZp3ro7MbbLcAfAJ6sEvjFWuNgUCw==}
+
+  '@vue/compiler-sfc@3.5.34':
+    resolution: {integrity: sha512-D/ihr6uZeIt6r+pVZf46RWT1fAsLFMbUP7k8G1VkiiWexriED9GrX3echHd4Abbt17zjlfiFJ8z7a3BxZOPNjg==}
+
+  '@vue/compiler-ssr@3.5.34':
+    resolution: {integrity: sha512-cDtTHKibkThKGHH1SP+WdccquNRYQDFH6rRjQCqT9G2ltFAfoR5pUftpab/z+aM5mW9HLLVQW7hfKKQe/1GBeQ==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
+  '@vue/reactivity@3.5.34':
+    resolution: {integrity: sha512-y9XDjCEuBp+98k+UL5dbYkh57AHU4o6cxZedOPXw3bmrZZYLQsVHguGurq7hVrPCSrQtrnz1f9dssyFr+dMXfQ==}
+
+  '@vue/runtime-core@3.5.34':
+    resolution: {integrity: sha512-mKeBYvu8tcMSLhypAHBmriUFfWXKTCF/23Z4jiCoYK3UtWepkliViNLuR90V9XOyD62mUxs9p1jsrpK3CCGIzw==}
+
+  '@vue/runtime-dom@3.5.34':
+    resolution: {integrity: sha512-e8kZzERmCwUnBRVsgSQlAfrfU2rGoy0FFKPBXSlfEjc/O3KfA7QP0t1/2ZylrbchjmIKB4dPTd07A6WPr0eOrg==}
+
+  '@vue/server-renderer@3.5.34':
+    resolution: {integrity: sha512-nHxmJoTrKsmrkbILRhkC9gY1G3moZbJTqCzDd7DOOzG5KH9oeJ0Unqrff5f9v0pW//jES05ZkJcNtfE8JjOIew==}
+    peerDependencies:
+      vue: 3.5.34
+
+  '@vue/shared@3.5.34':
+    resolution: {integrity: sha512-24uqU4OIiX29ryC3MeWid/Xf2fa2EFRUVLb77nRhk+UrTVrh/XiGtFAFmJBAtBRbjwNdsPRP+jj/OL27Eg1NDA==}
+
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  autoprefixer@10.4.24:
+    resolution: {integrity: sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  axios@1.16.1:
+    resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}
+
+  baseline-browser-mapping@2.9.19:
+    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
+    hasBin: true
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  caniuse-lite@1.0.30001769:
+    resolution: {integrity: sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  electron-to-chromium@1.5.286:
+    resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
+
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.3:
+    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
+    engines: {node: '>= 0.4'}
+
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  howler@2.2.4:
+    resolution: {integrity: sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.16.2:
+    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
+    peerDependencies:
+      typescript: '>=4.5.0'
+      vue: ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  resolve@1.22.12:
+    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rolldown@1.0.2:
+    resolution: {integrity: sha512-oZx5zVDtVB44AW3eaifgDml1gWRDZGvjcfdxonE4swNPG98PrrXjaO/KrnUjzlMnztCCRVlUueA1kCXhARGk6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  vite@8.0.14:
+    resolution: {integrity: sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.1.18
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vue-router@4.6.4:
+    resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  vue@3.5.34:
+    resolution: {integrity: sha512-WdLBG9gm02OgJIG9axd5Hpx0TFLdzVgfG2evFFu8Rur5O/IoGc5cMjnjh3tPL6GnRGsYvUhBSKVPYVcxRKpMCA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@oxc-project/types@0.132.0': {}
+
+  '@rolldown/binding-android-arm64@1.0.2':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.2':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.2':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.2':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.2':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.2':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.2':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.2':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.2':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.2':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.2':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.2':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.2':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.2':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@tybys/wasm-util@0.10.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/node@22.19.11':
+    dependencies:
+      undici-types: 6.21.0
+    optional: true
+
+  '@vitejs/plugin-vue@6.0.7(vite@8.0.14(@types/node@22.19.11)(jiti@1.21.7))(vue@3.5.34(typescript@5.7.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.0.14(@types/node@22.19.11)(jiti@1.21.7)
+      vue: 3.5.34(typescript@5.7.3)
+
+  '@vue/compiler-core@3.5.34':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/shared': 3.5.34
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.34':
+    dependencies:
+      '@vue/compiler-core': 3.5.34
+      '@vue/shared': 3.5.34
+
+  '@vue/compiler-sfc@3.5.34':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/compiler-core': 3.5.34
+      '@vue/compiler-dom': 3.5.34
+      '@vue/compiler-ssr': 3.5.34
+      '@vue/shared': 3.5.34
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.15
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.34':
+    dependencies:
+      '@vue/compiler-dom': 3.5.34
+      '@vue/shared': 3.5.34
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
+  '@vue/reactivity@3.5.34':
+    dependencies:
+      '@vue/shared': 3.5.34
+
+  '@vue/runtime-core@3.5.34':
+    dependencies:
+      '@vue/reactivity': 3.5.34
+      '@vue/shared': 3.5.34
+
+  '@vue/runtime-dom@3.5.34':
+    dependencies:
+      '@vue/reactivity': 3.5.34
+      '@vue/runtime-core': 3.5.34
+      '@vue/shared': 3.5.34
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.34(vue@3.5.34(typescript@5.7.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.34
+      '@vue/shared': 3.5.34
+      vue: 3.5.34(typescript@5.7.3)
+
+  '@vue/shared@3.5.34': {}
+
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
+  arg@5.0.2: {}
+
+  asynckit@0.4.0: {}
+
+  autoprefixer@10.4.24(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001769
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  axios@1.16.1:
+    dependencies:
+      follow-redirects: 1.16.0
+      form-data: 4.0.5
+      https-proxy-agent: 5.0.1
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+
+  baseline-browser-mapping@2.9.19: {}
+
+  binary-extensions@2.3.0: {}
+
+  birpc@2.9.0: {}
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.19
+      caniuse-lite: 1.0.30001769
+      electron-to-chromium: 1.5.286
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  camelcase-css@2.0.1: {}
+
+  caniuse-lite@1.0.30001769: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  commander@4.1.1: {}
+
+  copy-anything@4.0.5:
+    dependencies:
+      is-what: 5.5.0
+
+  cssesc@3.0.0: {}
+
+  csstype@3.2.3: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  delayed-stream@1.0.0: {}
+
+  detect-libc@2.1.2: {}
+
+  didyoumean@1.2.2: {}
+
+  dlv@1.1.3: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  electron-to-chromium@1.5.286: {}
+
+  entities@7.0.1: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.2:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.3
+
+  escalade@3.2.0: {}
+
+  estree-walker@2.0.2: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  follow-redirects@1.16.0: {}
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.3
+      mime-types: 2.1.35
+
+  fraction.js@5.3.4: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.3
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.2
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  gopd@1.2.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.3:
+    dependencies:
+      function-bind: 1.1.2
+
+  hookable@5.5.3: {}
+
+  howler@2.2.4: {}
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.16.2:
+    dependencies:
+      hasown: 2.0.3
+
+  is-extglob@2.1.1: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  is-what@5.5.0: {}
+
+  jiti@1.21.7: {}
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  math-intrinsics@1.1.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mitt@3.0.1: {}
+
+  ms@2.1.3: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.12: {}
+
+  node-releases@2.0.27: {}
+
+  normalize-path@3.0.0: {}
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  perfect-debounce@1.0.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.2: {}
+
+  picomatch@4.0.4: {}
+
+  pify@2.3.0: {}
+
+  pinia@3.0.4(typescript@5.7.3)(vue@3.5.34(typescript@5.7.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.34(typescript@5.7.3)
+    optionalDependencies:
+      typescript: 5.7.3
+
+  pirates@4.0.7: {}
+
+  postcss-import@15.1.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.12
+
+  postcss-js@4.1.0(postcss@8.5.15):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.15
+
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.15):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 1.21.7
+      postcss: 8.5.15
+
+  postcss-nested@6.2.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.15:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  proxy-from-env@2.1.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.2
+
+  resolve@1.22.12:
+    dependencies:
+      es-errors: 1.3.0
+      is-core-module: 2.16.2
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.1.0: {}
+
+  rfdc@1.4.1: {}
+
+  rolldown@1.0.2:
+    dependencies:
+      '@oxc-project/types': 0.132.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.2
+      '@rolldown/binding-darwin-arm64': 1.0.2
+      '@rolldown/binding-darwin-x64': 1.0.2
+      '@rolldown/binding-freebsd-x64': 1.0.2
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.2
+      '@rolldown/binding-linux-arm64-gnu': 1.0.2
+      '@rolldown/binding-linux-arm64-musl': 1.0.2
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.2
+      '@rolldown/binding-linux-s390x-gnu': 1.0.2
+      '@rolldown/binding-linux-x64-gnu': 1.0.2
+      '@rolldown/binding-linux-x64-musl': 1.0.2
+      '@rolldown/binding-openharmony-arm64': 1.0.2
+      '@rolldown/binding-wasm32-wasi': 1.0.2
+      '@rolldown/binding-win32-arm64-msvc': 1.0.2
+      '@rolldown/binding-win32-x64-msvc': 1.0.2
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  source-map-js@1.2.1: {}
+
+  speakingurl@14.0.1: {}
+
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.16
+      ts-interface-checker: 0.1.13
+
+  superjson@2.2.6:
+    dependencies:
+      copy-anything: 4.0.5
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  tailwindcss@3.4.19:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.15
+      postcss-import: 15.1.0(postcss@8.5.15)
+      postcss-js: 4.1.0(postcss@8.5.15)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.15)
+      postcss-nested: 6.2.0(postcss@8.5.15)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.12
+      sucrase: 3.35.1
+    transitivePeerDependencies:
+      - tsx
+      - yaml
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.8.1:
+    optional: true
+
+  typescript@5.7.3:
+    optional: true
+
+  undici-types@6.21.0:
+    optional: true
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  util-deprecate@1.0.2: {}
+
+  vite@8.0.14(@types/node@22.19.11)(jiti@1.21.7):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.15
+      rolldown: 1.0.2
+      tinyglobby: 0.2.16
+    optionalDependencies:
+      '@types/node': 22.19.11
+      fsevents: 2.3.3
+      jiti: 1.21.7
+
+  vue-router@4.6.4(vue@3.5.34(typescript@5.7.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.34(typescript@5.7.3)
+
+  vue@3.5.34(typescript@5.7.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.34
+      '@vue/compiler-sfc': 3.5.34
+      '@vue/runtime-dom': 3.5.34
+      '@vue/server-renderer': 3.5.34(vue@3.5.34(typescript@5.7.3))
+      '@vue/shared': 3.5.34
+    optionalDependencies:
+      typescript: 5.7.3
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/apple-icon.png b/public/apple-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9418b406bdb93a28dfc30c2ea61bef97b9d7c22
GIT binary patch
literal 2626
zcmds3`8(A67av!MNqJJEvb0h5uF-O3Z6YCVcEd!Gv2&Xd#xj)%6+*}|q-+m{Fl4Nu
z(QIZWVk}d{Fr%?_2Z=H6_tX6czQ5o1^Ss~Zc|XrN=Q-zf&g(oU?Ye`tyxb8v5C|l1
zbJfxbkc3}%w>0pY4oX7-A^X==I2w?@jsz$PqXc|p*K8~=xx^GNea58PC#Xn&51D#<
zxMOkrmHL2MMG`sN(rMKEnP$@Mv;$N%Tk4VhzD+AyUgK|fkNX#03S3-`OJIhqb^9&j
z(90`v4D>R670)b1GYxxI>A1KRc)0rhv_r2<cB$RJs%QerIu!#tVgDUuSvW0`dbU?m
zAt+Ji*wC(h7Ui=4HHEE;t63*1!zNoR(L6?_bCtsbTN@h#dFAtG{i)9%G(7w*2DDXS
zo2z}w)b#VQQ-+4a@mp&Y6YTbwiaC};FS@{tTpatjdGd0DoyxQXKcAYbQ>1jp+d@t?
zES%GJtMXcbZ+1@3SHY}=3COAs&acDlY!jUqeMygd*%YZ5(Bq^I7973)&6Ri8EEbQF
z*k_UTUXws)H~0*`Fz}le9Fzp?_E)jshSAH2pM_TcD(DdC#YX69L7pVwKpk1;Kaimc
z_UQ<nme9;@OWyghRJ6b<lZ+SdNUGh(W-()Zx?+=;0}yEO)?MeO+crOs>_9jJk0E-&
z!6P;PHLkUg{BI+*MW{LIW{IJe7G*qd5@Dnoqj~-1eJ!unIxU~>_<GxX{jhKBhKS`a
zT_I-J?Z7WxalDR=m8qf&5no=sjhL!=9y?kG=bw=A2{d}%?oWfPibWf3QGF@<j?!OS
zXI^^((Tg7>1~AoD=V(gq1yCrIo~C&ET5qD%KO2XHDbWi<73QQgE8Dv~hU##+jiPfI
zOv<^@*UHDW#)Y!!R|{{h%(>w=G&EFv`a!&F;Bm0_QPw2AD{iAWAhrh@`<aq|#%HIN
zC8Uei7M$6c$CIDEl4?0Br=%b1<m}v~pFo$TRH^kwxRe}LGl{v`6618D#~Z6+97T7|
z11srsJ@`PN?btmSF`^}S#A4LPdu4g5XKMB_&rE2kn8+S_ArB<V>BNdBf+hB;neb_w
zQWzo&^|-p&k;je{jOyKkct$P^kv7LZAkT+QyoYtDN0^Cqo9WpacEX4<(tQcZI;A^6
zmb#I<sk-QSdcpRMKm+V{j3Bw#1Oo-j>o?PB`Dbt!b~f8tFo&o{T-oK6Ce}DvIRKwI
z&w1LJ6golB0_y=F`*pqOie2|DyO+Zx%xPG#POhYT@X0;aZ0^fPgX9NK^YpytMX-?E
z%^k65esR3H1bb!HM&r)|o@7DSaMhn)OGyFD5+ip59vjB4cI-!V#(bQu5u2iJR$qE3
zjU1_QEx~3aGp;Z)+Y&^rBaF7FB~Om^m;FSR(>ze^SOmVunxT`mYR5HT<Gpwb0dT$w
z+3;bfUuyxto`M<D6J8OFwgB?<ulIVpT>8PkESHRFMZvNM7bjY1n6MHy_(p@bX;o?~
z8h{Nj!Tn=;9*nP!UimW5W0txZ2hCA)G3_i*|2)xOWV^h@OeRc6*(|<oogqY>@;GsD
zVg=gFGAl6fd$jJLY#JL`q8+K=k1R_dgpNZ6I5yCXCXRuaVHL{)cwi|&?7?6es=e&o
z-qJJ#e;{4i*nN2{1K~J3udN7~utx2yQgTk?qspIK>qpzZhuIa(>6f*hl=0?Z9hflD
zwY>swB8n88LLE8yacAUF3k&brf(kDVGzLPA4lkOH>Voq@WJle}dmTImj`laS{&z_G
zUBM_rs-^X0RTfpM$$PXgd2cF0tmp1M`4r)mFMek?Cil5JA+7~VBSO8|1<8A_v+HjR
z0uJ#}Yg_Ar%U*$-)ZIo8Sy9|Anp1@>sbxSn^4+67hkd*H0i~nuKyBeWU=rE^43<B8
zt8bS;)%?zkC9g3<&Gg#>Z(B3cgGz@<>LJ=#?I3`K7eqgnR@V$Cl1H_hx7At!sCv(b
zj@@+q&8UMZuvbKD6XIiMDp;tRy3Si*F95XPiKG#L-+1s>f0TA)+J22<(FjqMn7dr<
z_`1%#B`eDrc`o8zKkOleSLf99@>CTJd`9LTcKheoH#nSe^u>Fh3I!Bc%KhTkFYgF5
ziqhQpk}`XDHHquSyAwKM3*dZ(AfSzpMUyh!_@pOFqVA<Sct;dILO_P4q{fpPmLBAD
zPI;Ee$RFVfqM8SoK)H{9YVa`^(As?M2`~Vx$*n>%=SsN2^u|^r>$tiPWPxp|L-+&5
zO^ukm0Zff!As=8VpMc&^&~mGTWgar<%MX)wMM5re-5R{{-t`{IdCE^|M0R2G&E7-{
zcIfOtdWmp-VK^mu@6ht+4p%UwmgUQ7yAwQ_tz+LFy|T>F>H$d8owKCtNg%73#g7?n
z9ePrH;Y7fCMS1xf)}`#%F|GM`#L*}nf=Xhm_*Hq`$3K3~+<hdkEIk#V8>!FTubw`M
zq;TB=k1Ne1k;t0RGyE*ktCt%};H5+kyN~AHV5NK^8Dbc~aH)3x-VZzd445Jwr3&0u
zmakwGZ+i|L?!n(R{Mve7ExXcNPLJogIM#T%F??qq7<Zp5g3qX8Qda!EoW5DcRwBz3
zKM{h4XC}S^>`D)b14zHI{;YHK4NLZ#8G0QmB(0vGGX7G3!<ZLR(r=<0nK;>rX%^s?
zeq>ZOl1DU9^)}ae5pk-Ji@gW6T{PMKUBUukxlNACTOIZR>ZLuz^hAyeRM!y2z53Ja
zZ;;wCLODVxd*#ZNfl^#iNl7>`adG)_*l@4z+1uZzdy$*Mxp`LEWrn+z2}byy_!bvW
zb62?S6%-VNoPPJ<d%{-<6N_p}Sl^Lz!CXYTo<<Z}1UDz&lP9`CwY0RZQz(=gC5|-c
hzqWb&{{`#ZKcE8)<`V-Q1>vtv(8kKavL1Fb@qaK!^mG6K

literal 0
HcmV?d00001

diff --git a/public/icon-dark-32x32.png b/public/icon-dark-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..12c825a109e3c3b7941d957d8a2ac936d5717c5b
GIT binary patch
literal 585
zcmV-P0=E5$P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0p3YOK~#7F?U(Iw
zf<O?4S0@Eff*nXI5Gv3P&<dgz02P20L@SU~09F7UXa~^2WnUu9A%~yD%a1%WtDLvo
zzPIeHN+cnKu-HD?a?wBeX>F5K@I)Y9hkG8}6|W~i?1A`6NlJRKhy3zE`f!keoG%R0
zLjeJTG%_U3XczECJ+W9Ul%E@hL8fWaWHO=AXw-HPJ%Obz83z};-L7?CU4%tZlvbfq
zEBjzx9^1A}Dr6sIBaY)TBdrV^4u?`@rFb@*wbXi^SI_f8Vm_bOV-;zd3J%)H1n!X;
z$~%U-YUfcD(Q37#N6E6R%!<5wkR(aNuW<?xoS#$e9EKtJzE95vcN~W}qe|b_F~swM
zhzd?St=DUMCirHv>GW6j0n4%|2!eXNTrO$5-O@GSb5HORaRJwL>*7H%p)jeV2su!r
z*f@A&t;!dLE_1aH@a~o88UniJApD$%1pw?uB>;9y@TUdjc`mp(TLJ*rORM9l437xC
z26nfAN`%~~s)g__*G88?fQq|*4;+uj@<@)yW8#!H=FnjF`+euV)9JL?f=~SaAo&vl
z3erab0bit#2t{b|MNE2l9}WhCgfDLYy6X?0V`ue<GvSHX5h^9|gvo}M^_zdsEji{l
Xb$b%asYFxh00000NkvXXu0mjf%ys!F

literal 0
HcmV?d00001

diff --git a/public/icon-light-32x32.png b/public/icon-light-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3462ccd8a6f9c1da6893d213f8868200cf3c80a
GIT binary patch
literal 566
zcmV-60?GY}P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0n155K~#7F?N{5C
zf-n%BeH1_mmOu%y1Fb+y&<fyhKcNG#0-*x!K&?PKfDW>A*$pRw#5ZO?_MS6vLWbO%
z$;=!eG9lP9wu((Y*{a{QLvkP)fYfDCmppnQxw1r&haSk4i4VSf(V24@8gKNI90B=3
z4FQro;+;IhyMRx660$6_KCkPV4u=D6w_7@$PFA0%l+-00k4HI~OnUFNNf-n{V+uC4
zx)0{{@n*9j8+0E;V>}+ye!uTWU^E&vDizl2bx&;^$L+ijLgsnij%`s1!%$XLWkiCH
z%J6yDcMNrE=Nv9dl7#LBlQ&V(cMq^|!_TM!kWZ)6)_Jj5P!vV<DEVr&qOvTlzP&QU
z`9OpMhrJQ<2>E<IclulV07_=LT()Bz#cVdCOMuTU<O<Hx(vuF!gv4|uA(I=)hB<vL
z<%>k`@SLyjG)<)q5a61F@a{Ty3(#Ng3V>Zh{;&W(Q@PvidIB)VXKp+Pfz3D<nqC9D
zS%4CuH!8Id?s{&x00FjjZ~7i!vZf?asvJ^d4h^Q;WONio(QCoL{|CvR5Kxmp)DTdT
zKNPqKy0R1pu=al>^*|nX!x6ubJS7JZlAMP9Jr_FRH=9>9Cn9I^!T<mO07*qoM6N<$
Eg07_KNB{r;

literal 0
HcmV?d00001

diff --git a/public/icon.svg b/public/icon.svg
new file mode 100644
index 0000000..5c11e6c
--- /dev/null
+++ b/public/icon.svg
@@ -0,0 +1,26 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @media (prefers-color-scheme: light) {
+      .background { fill: black; }
+      .foreground { fill: white; }
+    }
+    @media (prefers-color-scheme: dark) {
+      .background { fill: white; }
+      .foreground { fill: black; }
+    }
+  </style>
+  <g clip-path="url(#clip0_7960_43945)">
+    <rect class="background" width="180" height="180" rx="37" />
+    <g style="transform: scale(95%); transform-origin: center">
+      <path class="foreground"
+        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
+      <path class="foreground"
+        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_7960_43945">
+      <rect width="180" height="180" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/public/placeholder-logo.png b/public/placeholder-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a792ac2ddfbe047639f7907c82f14c73e3de3d9
GIT binary patch
literal 568
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5Ca^FANm1Vwi-43tfKP}kNR$*1WiP`GRL@@$
z<QL3vU!lR_fWZ6t2>}KL6V^XjP|gFiXN9MWV@SoVw>S2B83zimJup|_^-FbrjeV<v
z*lw|=xs0x-S#nsL%^x(0FVKj%;qsQ{U_)>3it>ba2M!&I{-9Oz_xPcYF3oFZ=eo>b
ztd*bf%*2|<`prCX7bFlbJSYChhATpnZHm_gDmxOE$M3Ov^QCh;k9GZ#-G|g`wsZ1y
zY-hCA6Y*4%kP@8PzH+9qgqG>UuX7G~Jv3yxb4X!L$WkVer)+Lao)20%*YwyPoNauk
zS!$0_-Kr#3+3w{V4Ccu^47H4DY>j<sazVM=;K3pHk{C5Z9+CU(_C~D2hB~a*&VI>P
zOx?nl+kWZD?x4qFw+?-2Jz{$0yTXmVj$U6an>Gc>YVI}tW1#2eCg2#H$RT;W`9jE4
z<(d!P-_Kw0oV0yf*RuH&47YRnuIuc%FZkt*pVIL&DpPv8{<u#M`yJBCefwlcT-?&n
zjxSV#cP<yr(CFAcO<MeKYtwf3*yMaAuj@PF;;yRSvlUx1ZJp{~pm)R1n_XBvJ$&o^
z@|B67@3(7p1LcJx-KQrXz4I$U-A#P^e%a;@1bFc|j=?m3v(EJ3b*iA~_jL7hS?83{
F1OR^s+sXg{

literal 0
HcmV?d00001

diff --git a/public/placeholder-logo.svg b/public/placeholder-logo.svg
new file mode 100644
index 0000000..b1695aa
--- /dev/null
+++ b/public/placeholder-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/placeholder-user.jpg b/public/placeholder-user.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6fa7543d38ed8fdb38f03b5c0f40ad2d66827d4a
GIT binary patch
literal 1635
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Jot=}Njf<0mlbf51hhI{FpO24UPE1@#
zQbj>cRarq<NkiAtKtsz+TS?i-#mLOs*1^F+&A`pu)y~V(-oX}R2qQN)H$N}Gtbl;5
zt){Z3Ey>{jAqGJXh7$}Ym>C5bm;@P_1sVSzVUPwol9>?*7~p`Fjh%&&i5Vy<f-DS?
z|9^{thnbOqNq|`ZC~&g@u8VX=&D0{3NxJM8pgPZVC{;A7_ZmRB%rg%6?s#L-<8jAt
z0z{;6M(1w%g+C<%x63v_L_Qop_vlnupKyXLgwOCqL#0qDzHbAR3#0hCCI(yZ^Dhe6
zF%4q6JX@HXcv8TZpNd?b`6dvt1)_(e?F$%`&(vJvb^z&QR@8F^nq++Vvq=Gn&*oGp
ztH8i`B#KuC#AReE29iQ7J3t)rfIKjWodp;enVA?_x!E~6A*KL>o`r#xP0%qgXfnHy
zn7E>$Lug{-LIb0a!ifhj3W%7RB^MNLx}>0_tP&7BY4IaqjBo(siP4_n_ky5FEmL(`
zmhdc@Jb`OxUUPQK!#s<ks4a^p%H4WwDH~SypW$=Z+Y7nHVuC7`f>q(C`ZJd3YCA-U
zh)gnS;tOzhJ@#Yf$<H#|T_Xi0EycfeiDqs%zjsG4=iCqeb2guta$W3tyl3m%@RzH%
zw$)BNFmug&r#)BuLRM|CQ!V1T5}m5A6W-@iJL|m54!fk=sdn?qW<?z@Q0vqR3!XAL
zY<6+j>SRGl2DVF#R;SL@d2ijhdh5m?{S3~XPpnp*$)2k2D4JJuYTMD;n0K36=Y8OJ
z-mS1ZZC1<AQ;7$xFJ;KI$coB-@#?w#R%S(^Vy12TlL^0+jun3QbGz*s)t|7a{K#C>
z49BdqoLo<WB68%O^mTUSWN*BC$H7x@u4>M_v$9v)Hm?5W<`Stp{n4{)u7wjb{~fvi
z!T;47&))dGMoGtVj(5+GENxwrz4z{INB>V}1-4JUxp@DgJ8LKAUAQWhoR~X5%Wp!~
z<DEyIh54}GuHDORee^nG{=GJ{6F;tQFYa8gBi;RW!?hOKPp@w0bZ55BxNw^zr`q$9
z|Cgg0imF};Dm+VO?a6Cq6V!EZKX>=~v%IB`XWv<uso3&rOQXBsJ*#tZSFUs9{Y^K{
zS>>j>XTei(%h-3q0fm1bY5udCHKmu^f&G@&$==-St!-gGk?J$~inXs)aj#q07WR4-
zM=rxkFUy8C!QJtD_bgKux*|B+dhW6{-z2Xe?@~0Ks(ijMro-3a&Mj#N$xpGBRnmWt
zTsUxz-_bhtPj<sMeuw`I#q*`&SU0SnCF#EM>F={K-%Z^<th=u9Px?QDVDQ^dYbW_s
zu35R9EqP8RyTuy$o@<vb=I^oyx%njXt>57b<}UkWR&Lo)qWhnrV2yD?(SL?Q-l9d;
zHS6^j9!_Ejaqqemoyn}=@ptvvS-S7I7N7FZ5}(WNv3l;#-@XTLOmcJGRz1a7FhcBC
z-nPY(UsETGE4&Rdme=pC+jj2j;!j+6o-!m}7oD?jz2dGcAvK4%qSmfE=U+z7Z+`#j
z$Mx4a@1yJ$R+zt@y0z(yW_ISH^4k|<^!Al@?-M=r`gz3ehXgqVyM1>}k-Q}GF<-;)
z*LLGyVd)Qk|Ji$(J?dTY-07-((_=n&#1_`3T&d5FiH|guzja;wny>q}tw+C34*a{8
zfJ9i0DbumfeTVp1E#|(wudjdSJE%AnL@H&$nSBB{^D;34Gp|fN9u>e68m!_b0O__-
AD*ylh

literal 0
HcmV?d00001

diff --git a/public/placeholder.jpg b/public/placeholder.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6bfe96336dbe567f5f1e9129f5bccdc78b114bba
GIT binary patch
literal 1064
zcmb7@Nla5w6o$`zL;Ko7c&|)~7+MC)5J;K9giwZ-mWToZDl29|7tA;;v?z!g5*b9%
zRSP(-1ZOwO;J6Z;05{Ybq6y%HZtA^{7Ghj^Zu0K`Ud}o9eCM5OpR~^apJ^}|03iS)
zUSPLDyMAv~1wd97gaQBuEK&lE6~YUU53r&J$VBT_bS?^Z_)q|CRlqoW3h_=1XC~2(
zowlIWj23Fe8(HX8O~UM7AR)W5x}mzhvbshU9ifGUR8tm1vSSl<kSO`*>)WSJzz{QQ
zmi2yKN<Cm70f8eW(?|eHK(v7DW8jCYV3BBI7ywN%hy{t1lgSm>VU))a_#4eg7^#He
zB=v{_T40oFHqzanm!#xGc@)<MNSjrish-x{=)u4et=Dkfcv@G?A<ni{7gXvUJKtU3
zmz_Rzcws|cT-nKnk)nx~{xvmkH2V1RtND!sJ)^CQ&kRlGw;2T$*JSdwKEWZO35gqx
zrp#^IcNFfdtlG6_@4o#<+KwJO-f`-5@0qifbLTHyyma}>^&2;D-M({g?EZs?j~+jH
z`uxSqSCdoIGw<Gi`1omd?(4VjKYlL#`b{Wtcb6gYQ{*HN47*B+TS8$@nxa{Xr5L6S
z;U3YvQq8C$Q`}jte^ic#P7)nZoa$Md8`GQ}*lA50^pcjuZk-<wDjH6=)h&1*Dvhhz
zpwH{l^iAOAtr0omF^C}pqvRJ5n6mN;!c*VS*hHAjhg({gxw=pGETi=gIN*k^UUTq`
zj5-OQIT7EybwDnzP`-vVP;i`_lPcsgxvPu9Rq#~`Zf=7AS|1PJkif9e;6RNgJW3ZI
zu1(TvGzps$lhX7?lQArAOa5j<o-V_vx8o$p#nn}C6VytjS|6c_(EqpDr@@65+b7`R
zn%j-vIox%`QU^te2QL{dOFV{7i9nK!9mXJ<Cs%<YhW{A=rNHy5j!elZu5IqL4i3+c
z^R@+*R+n8=WA3nAx%YI&c|fxI?q6r~ek7ehemM<@V)2~gYb`?{s3UotPgOhL*=!vg
XAGR(0la3V0lXM&+MLHyoCvxf!Qm;2N

literal 0
HcmV?d00001

diff --git a/public/placeholder.svg b/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..508d8db
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream">
+    <div v-if="!isAuthPage" class="flex flex-col min-h-screen">
+      <AppHeader />
+      <div class="flex flex-1">
+        <Sidebar />
+        <main class="flex-1 overflow-auto" :class="{ 'pb-20': hasPlayer }">
+          <router-view />
+        </main>
+      </div>
+      <PlayerBar />
+    </div>
+    <router-view v-else />
+    <div class="fixed top-4 right-4 z-[100] space-y-2">
+      <div v-for="toast in uiStore.toasts" :key="toast.id"
+        class="px-4 py-3 rounded-lg border-2 border-black font-bold text-sm shadow-[4px_4px_0px_0px_#000] transition-all animate-slide-in"
+        :class="toastClass(toast.type)"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ toast.message }}</span>
+          <button @click="uiStore.dismissToast(toast.id)" class="ml-2 opacity-60 hover:opacity-100">&times;</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAuthStore } from './stores/authStore.js'
+import { useUiStore } from './stores/uiStore.js'
+import { usePlayerStore } from './stores/playerStore.js'
+import AppHeader from './components/AppHeader.vue'
+import Sidebar from './components/Sidebar.vue'
+import PlayerBar from './components/PlayerBar.vue'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const uiStore = useUiStore()
+const playerStore = usePlayerStore()
+
+const isAuthPage = computed(() => {
+  return route.meta?.guest === true || route.path === '/register'
+})
+
+const hasPlayer = computed(() => !!playerStore.currentTrack)
+
+function toastClass(type) {
+  return {
+    info: 'bg-noctune-teal text-black',
+    success: 'bg-green-400 text-black',
+    error: 'bg-red-400 text-white',
+  }[type] || 'bg-noctune-yellow text-black'
+}
+
+onMounted(async () => {
+  await authStore.checkSession()
+})
+</script>
+
+<style>
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+</style>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
new file mode 100644
index 0000000..3178550
--- /dev/null
+++ b/src/components/AppHeader.vue
@@ -0,0 +1,109 @@
+<template>
+  <header class="bg-noctune-teal px-4 py-3 flex items-center justify-between border-b-4 border-black">
+    <div class="flex items-center gap-4">
+      <router-link to="/home" class="text-black font-bold text-2xl tracking-wider font-mono">NOCTUNE</router-link>
+    </div>
+
+    <div class="flex-1 max-w-md mx-8 relative">
+      <div class="relative">
+        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
+          <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+        <input type="text" v-model="query" @input="onSearch" @keydown.escape="clearSearch" placeholder="Search music, artist, album..."
+          class="w-full bg-noctune-cream py-2 pl-10 pr-4 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-black" />
+      </div>
+      <div v-if="searchResults && query" class="absolute top-full mt-2 left-0 right-0 bg-white border-2 border-black rounded-lg shadow-[4px_4px_0px_0px_#000] max-h-96 overflow-y-auto z-50">
+        <div v-if="searchResults.tracks?.length" class="p-2">
+          <p class="text-xs font-bold text-gray-500 px-2 py-1">TRACKS</p>
+          <div v-for="track in searchResults.tracks.slice(0, 5)" :key="track._id" @click="playSearchTrack(track)" class="flex items-center gap-3 px-2 py-2 hover:bg-gray-100 rounded cursor-pointer">
+            <div class="w-8 h-8 bg-gray-300 rounded border border-black flex-shrink-0 overflow-hidden">
+              <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-black truncate">{{ track.title }}</p>
+              <p class="text-xs text-gray-500">{{ track.artist }}</p>
+            </div>
+          </div>
+        </div>
+        <div v-if="searchResults.artists?.length" class="p-2 border-t border-gray-200">
+          <p class="text-xs font-bold text-gray-500 px-2 py-1">ARTISTS</p>
+          <div v-for="artist in searchResults.artists.slice(0, 3)" :key="artist.name" @click="router.push(`/home?artist=${artist.name}`)" class="px-2 py-2 hover:bg-gray-100 rounded cursor-pointer text-sm font-medium text-black">{{ artist.name }}</div>
+        </div>
+        <div v-if="!searchResults.tracks?.length && !searchResults.artists?.length" class="p-4 text-center text-gray-500 text-sm">No results found</div>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <button @click="toggleLikeRedirect" class="text-black hover:opacity-80">
+        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+        </svg>
+      </button>
+      <router-link to="/profile" class="text-black hover:opacity-80">
+        <div class="w-8 h-8 rounded-full bg-noctune-dark overflow-hidden border-2 border-black">
+          <img v-if="authStore.user?.avatarUrl" :src="formatUrl(authStore.user.avatarUrl)" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+          </div>
+        </div>
+      </router-link>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const query = ref('')
+const searchResults = ref(null)
+let searchTimeout = null
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function onSearch() {
+  clearTimeout(searchTimeout)
+  if (!query.value.trim()) {
+    searchResults.value = null
+    return
+  }
+  searchTimeout = setTimeout(async () => {
+    try {
+      const { data } = await api.get(`/search?q=${encodeURIComponent(query.value)}`)
+      if (data.success) searchResults.value = data.data
+    } catch {
+      searchResults.value = null
+    }
+  }, 300)
+}
+
+function clearSearch() {
+  query.value = ''
+  searchResults.value = null
+}
+
+function playSearchTrack(track) {
+  clearSearch()
+  queueStore.setQueue([track], 0)
+  playerStore.setTrack(track)
+  playerStore.play()
+}
+
+function toggleLikeRedirect() {
+  router.push('/library')
+}
+</script>
diff --git a/src/components/MusicPlayer.vue b/src/components/MusicPlayer.vue
new file mode 100644
index 0000000..7ab8000
--- /dev/null
+++ b/src/components/MusicPlayer.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="bg-noctune-orange rounded-xl p-4 border-2 border-black">
+    <!-- Album Art & Info -->
+    <div class="flex items-start gap-3 mb-4">
+      <div class="w-16 h-16 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+        <!-- Waveform icon -->
+        <svg class="w-12 h-8 text-white" viewBox="0 0 50 30">
+          <rect x="2" y="10" width="3" height="10" fill="currentColor"/>
+          <rect x="8" y="5" width="3" height="20" fill="currentColor"/>
+          <rect x="14" y="8" width="3" height="14" fill="currentColor"/>
+          <rect x="20" y="3" width="3" height="24" fill="currentColor"/>
+          <rect x="26" y="7" width="3" height="16" fill="currentColor"/>
+          <rect x="32" y="5" width="3" height="20" fill="currentColor"/>
+          <rect x="38" y="9" width="3" height="12" fill="currentColor"/>
+          <rect x="44" y="11" width="3" height="8" fill="currentColor"/>
+        </svg>
+      </div>
+      <div class="flex-1 min-w-0">
+        <h4 class="font-bold text-sm text-black truncate">No. 1 Party Anthem</h4>
+        <p class="text-xs text-black/70">Arctic Monkeys</p>
+      </div>
+    </div>
+    
+    <!-- Progress Bar -->
+    <div class="mb-3">
+      <input 
+        type="range" 
+        :value="progress" 
+        @input="updateProgress"
+        min="0" 
+        max="100" 
+        class="w-full h-1.5 bg-black/30 rounded-full appearance-none cursor-pointer"
+      />
+      <div class="flex justify-between text-xs text-black mt-1">
+        <span>1:30</span>
+        <span>3:00</span>
+      </div>
+    </div>
+    
+    <!-- Controls -->
+    <div class="flex items-center justify-center gap-6">
+      <button class="text-black hover:opacity-70 transition-opacity">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+        </svg>
+      </button>
+      <button class="w-12 h-12 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black hover:bg-yellow-400 transition-colors">
+        <svg class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      </button>
+      <button class="text-black hover:opacity-70 transition-opacity">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const progress = ref(50)
+
+const updateProgress = (e) => {
+  progress.value = e.target.value
+}
+</script>
+
+<style scoped>
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/PlayerBar.vue b/src/components/PlayerBar.vue
new file mode 100644
index 0000000..f8c6337
--- /dev/null
+++ b/src/components/PlayerBar.vue
@@ -0,0 +1,147 @@
+<template>
+  <div v-if="playerStore.currentTrack" class="fixed bottom-0 left-0 right-0 bg-noctune-dark border-t-4 border-black z-50">
+    <div class="flex items-center px-4 py-2 max-w-screen-2xl mx-auto">
+      <div class="flex items-center gap-3 w-80">
+        <div class="w-12 h-12 bg-black rounded-lg overflow-hidden flex-shrink-0 border border-white/20">
+          <img v-if="playerStore.currentTrack.coverUrl" :src="coverSrc" alt="" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <svg class="w-8 h-6 text-white/60" viewBox="0 0 50 30"><rect x="2" y="10" width="3" height="10" fill="currentColor"/><rect x="8" y="5" width="3" height="20" fill="currentColor"/><rect x="14" y="8" width="3" height="14" fill="currentColor"/><rect x="20" y="3" width="3" height="24" fill="currentColor"/><rect x="26" y="7" width="3" height="16" fill="currentColor"/><rect x="32" y="5" width="3" height="20" fill="currentColor"/><rect x="38" y="9" width="3" height="12" fill="currentColor"/><rect x="44" y="11" width="3" height="8" fill="currentColor"/></svg>
+          </div>
+        </div>
+        <div class="min-w-0">
+          <p class="text-sm font-bold text-white truncate">{{ playerStore.currentTrack.title }}</p>
+          <p class="text-xs text-gray-400 truncate">{{ playerStore.currentTrack.artist }}</p>
+        </div>
+      </div>
+
+      <div class="flex-1 flex flex-col items-center">
+        <div class="flex items-center gap-4 mb-1">
+          <button @click="queueStore.toggleShuffle()" :class="['text-sm transition-colors', queueStore.shuffle ? 'text-noctune-teal' : 'text-gray-400 hover:text-white']">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
+          </button>
+          <button @click="playPrev()" class="text-gray-400 hover:text-white transition-colors">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+          </button>
+          <button @click="playerStore.togglePlay()" class="w-10 h-10 bg-white rounded-full flex items-center justify-center hover:scale-105 transition-transform">
+            <svg v-if="playerStore.isPlaying" class="w-5 h-5 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+            <svg v-else class="w-5 h-5 text-black ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+          </button>
+          <button @click="playNext()" class="text-gray-400 hover:text-white transition-colors">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+          </button>
+          <button @click="queueStore.cycleRepeat()" :class="['text-sm transition-colors', queueStore.repeat !== 'off' ? 'text-noctune-teal' : 'text-gray-400 hover:text-white', queueStore.repeat === 'one' ? 'relative' : '']">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>
+            <span v-if="queueStore.repeat === 'one'" class="absolute -top-2 -right-2 text-[9px] font-bold">1</span>
+          </button>
+        </div>
+        <div class="flex items-center gap-3 w-full max-w-lg">
+          <span class="text-xs text-gray-400 w-10 text-right">{{ playerStore.formattedProgress }}</span>
+          <input type="range" :value="playerStore.progress" @input="onSeek" min="0" :max="playerStore.duration || 1" step="0.1" class="flex-1 h-1 bg-gray-600 rounded-full appearance-none cursor-pointer range-player" />
+          <span class="text-xs text-gray-400 w-10">{{ playerStore.formattedDuration }}</span>
+        </div>
+      </div>
+
+      <div class="w-80 flex items-center justify-end gap-3">
+        <button @click="toggleLike" class="text-gray-400 hover:text-red-400 transition-colors">
+          <svg class="w-5 h-5" :class="isLiked ? 'text-red-400 fill-current' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+        </button>
+        <div class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
+          <input type="range" :value="playerStore.volume" @input="onVolume" min="0" max="100" class="w-20 h-1 bg-gray-600 rounded-full appearance-none cursor-pointer range-vol" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+const isLiked = ref(false)
+
+function onTrackEnd() {
+  const next = queueStore.nextTrack()
+  if (next) {
+    playerStore.setTrack(next)
+    playerStore.play()
+  }
+}
+
+onMounted(() => {
+  playerStore.onEnd(onTrackEnd)
+})
+
+const coverSrc = computed(() => {
+  const url = playerStore.currentTrack?.coverUrl
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+})
+
+function onSeek(e) {
+  playerStore.seek(parseFloat(e.target.value))
+}
+
+function onVolume(e) {
+  playerStore.setVolume(parseInt(e.target.value))
+}
+
+function playNext() {
+  const next = queueStore.nextTrack()
+  if (next) {
+    playerStore.setTrack(next)
+    playerStore.play()
+  }
+}
+
+function playPrev() {
+  const prev = queueStore.prevTrack()
+  if (prev) {
+    playerStore.setTrack(prev)
+    playerStore.play()
+  }
+}
+
+watch(() => playerStore.currentTrack?.id, async (id) => {
+  if (!id) return
+  try {
+    const { data } = await api.get('/auth/me')
+    if (data.success) {
+      isLiked.value = data.data.likedTracks?.includes(id) || false
+    }
+  } catch {
+    isLiked.value = false
+  }
+})
+
+async function toggleLike() {
+  if (!playerStore.currentTrack) return
+  const id = playerStore.currentTrack._id || playerStore.currentTrack.id
+  try {
+    if (isLiked.value) {
+      await api.delete(`/tracks/${id}/like`)
+    } else {
+      await api.post(`/tracks/${id}/like`)
+    }
+    isLiked.value = !isLiked.value
+  } catch {
+    // ignore
+  }
+}
+</script>
+
+<style scoped>
+.range-player::-webkit-slider-thumb,
+.range-vol::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/SettingsItem.vue b/src/components/SettingsItem.vue
new file mode 100644
index 0000000..fce9093
--- /dev/null
+++ b/src/components/SettingsItem.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex items-center gap-4 px-6 py-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors">
+    <div :class="[iconColor, 'w-12 h-12 rounded-xl flex items-center justify-center border-2 border-black']">
+      <!-- User Icon -->
+      <svg v-if="icon === 'user'" class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+      <!-- Lock Icon -->
+      <svg v-else-if="icon === 'lock'" class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+      </svg>
+      <!-- Shield Icon -->
+      <svg v-else-if="icon === 'shield'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
+      </svg>
+      <!-- Card Icon -->
+      <svg v-else-if="icon === 'card'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>
+      </svg>
+      <!-- Bell Icon -->
+      <svg v-else-if="icon === 'bell'" class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+      </svg>
+      <!-- Moon Icon -->
+      <svg v-else-if="icon === 'moon'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
+      </svg>
+      <!-- Globe Icon -->
+      <svg v-else-if="icon === 'globe'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+      </svg>
+    </div>
+    <div class="flex-1">
+      <h3 class="font-bold text-black">{{ title }}</h3>
+      <p class="text-sm text-gray-500">{{ subtitle }}</p>
+    </div>
+    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  iconColor: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  subtitle: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..60c6eb7
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,94 @@
+<template>
+  <aside class="w-64 bg-noctune-cream border-r-4 border-black flex flex-col h-full">
+    <nav class="p-4 space-y-2">
+      <router-link to="/home"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
+        :class="{ 'bg-noctune-teal text-black': isActive('/home') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
+        <span class="tracking-wide">HOME</span>
+      </router-link>
+      <router-link to="/library"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
+        :class="{ 'bg-noctune-teal text-black': isActive('/library') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
+        <span class="tracking-wide">LIBRARY</span>
+      </router-link>
+      <router-link to="/playlist"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
+        :class="{ 'bg-noctune-teal text-black': isActive('/playlist') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z"/></svg>
+        <span class="tracking-wide">PLAYLIST</span>
+      </router-link>
+      <router-link v-if="authStore.isAdmin" to="/admin/tracks"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-orange/20 transition-colors"
+        :class="{ 'bg-noctune-orange text-black': isActive('/admin/tracks') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-3 17l-4-4 1.41-1.41L11 16.17l6.59-6.59L19 11l-8 8z"/></svg>
+        <span class="tracking-wide">UPLOAD TRACK</span>
+      </router-link>
+    </nav>
+
+    <div class="mx-4 border-t-2 border-gray-300 my-2"></div>
+
+    <div class="px-4">
+      <button @click="openCreatePlaylist" class="w-full bg-noctune-yellow border-2 border-black rounded-lg py-3 px-4 font-bold flex items-center gap-2 hover:bg-yellow-400 transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
+        <span class="tracking-wide">CREATE PLAYLIST</span>
+      </button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto px-4 mt-4">
+      <div v-if="playlists.length" class="space-y-1">
+        <p class="text-xs font-bold text-gray-500 px-2 mb-2">YOUR PLAYLISTS</p>
+        <div v-for="pl in playlists" :key="pl._id"
+          @click="router.push(`/playlist/${pl._id}`)"
+          class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer hover:bg-noctune-teal/20 transition-colors text-sm text-black font-medium truncate"
+        >
+          <svg class="w-4 h-4 flex-shrink-0 text-gray-500" fill="currentColor" viewBox="0 0 24 24"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z"/></svg>
+          {{ pl.name }}
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const queueStore = useQueueStore()
+
+const playlists = ref([])
+
+const isActive = (path) => route.path === path
+
+async function fetchPlaylists() {
+  if (!authStore.isLoggedIn) return
+  try {
+    const { data } = await api.get('/playlists')
+    if (data.success) playlists.value = data.data
+  } catch {
+    // ignore
+  }
+}
+
+async function openCreatePlaylist() {
+  const name = prompt('Playlist name:')
+  if (!name?.trim()) return
+  try {
+    const { data } = await api.post('/playlists', { name: name.trim() })
+    if (data.success) {
+      playlists.value.push(data.data)
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onMounted(fetchPlaylists)
+</script>
diff --git a/src/composables/useAuthGate.js b/src/composables/useAuthGate.js
new file mode 100644
index 0000000..e89b69b
--- /dev/null
+++ b/src/composables/useAuthGate.js
@@ -0,0 +1,30 @@
+import { useAuthStore } from '../stores/authStore.js'
+
+let pendingAction = null
+
+export function useAuthGate() {
+  const authStore = useAuthStore()
+
+  async function requireAuth({ message, onAuthenticated }) {
+    if (authStore.isLoggedIn) {
+      onAuthenticated()
+    } else {
+      pendingAction = onAuthenticated
+      if (message) {
+        const { useUiStore } = await import('../stores/uiStore.js')
+        const uiStore = useUiStore()
+        uiStore.showToast(message, 'info')
+      }
+    }
+  }
+
+  function executePending() {
+    if (pendingAction) {
+      const fn = pendingAction
+      pendingAction = null
+      fn()
+    }
+  }
+
+  return { requireAuth, executePending }
+}
diff --git a/src/composables/usePlayer.js b/src/composables/usePlayer.js
new file mode 100644
index 0000000..0d1b5ad
--- /dev/null
+++ b/src/composables/usePlayer.js
@@ -0,0 +1,39 @@
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+
+export function usePlayer() {
+  const playerStore = usePlayerStore()
+  const queueStore = useQueueStore()
+
+  playerStore.onEnd(() => {
+    const next = queueStore.nextTrack()
+    if (next) {
+      playerStore.setTrack(next)
+      playerStore.play()
+    }
+  })
+
+  function playTrack(tracks, index) {
+    queueStore.setQueue(tracks, index)
+    playerStore.setTrack(tracks[index])
+    playerStore.play()
+  }
+
+  function playNext() {
+    const next = queueStore.nextTrack()
+    if (next) {
+      playerStore.setTrack(next)
+      playerStore.play()
+    }
+  }
+
+  function playPrev() {
+    const prev = queueStore.prevTrack()
+    if (prev) {
+      playerStore.setTrack(prev)
+      playerStore.play()
+    }
+  }
+
+  return { playTrack, playNext, playPrev }
+}
diff --git a/src/lib/api.js b/src/lib/api.js
new file mode 100644
index 0000000..ee173b3
--- /dev/null
+++ b/src/lib/api.js
@@ -0,0 +1,30 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001/api',
+  withCredentials: true,
+  headers: { 'Content-Type': 'application/json' },
+})
+
+api.interceptors.response.use(
+  (res) => res,
+  async (err) => {
+    const original = err.config
+    if (err.response?.status === 401 && !original._retry) {
+      original._retry = true
+      try {
+        await axios.post(
+          `${api.defaults.baseURL}/auth/refresh`,
+          {},
+          { withCredentials: true }
+        )
+        return api(original)
+      } catch {
+        return Promise.reject(err)
+      }
+    }
+    return Promise.reject(err)
+  }
+)
+
+export default api
diff --git a/src/lib/audioEngine.js b/src/lib/audioEngine.js
new file mode 100644
index 0000000..f1c91b2
--- /dev/null
+++ b/src/lib/audioEngine.js
@@ -0,0 +1,56 @@
+import { Howl } from 'howler'
+
+let howl = null
+let listeners = {}
+
+function formatTime(secs) {
+  if (!secs || isNaN(secs)) return '0:00'
+  const m = Math.floor(secs / 60)
+  const s = Math.floor(secs % 60)
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+function load(url) {
+  destroy()
+  howl = new Howl({
+    src: [url],
+    html5: true,
+    onplay: () => listeners.onPlay?.(),
+    onpause: () => listeners.onPause?.(),
+    onend: () => listeners.onEnd?.(),
+    onloaderror: () => listeners.onError?.(),
+    onplayerror: () => listeners.onError?.(),
+  })
+}
+
+function play() { howl?.play() }
+function pause() { howl?.pause() }
+function togglePlay() { howl?.playing() ? howl.pause() : howl.play() }
+
+function seek(time) { if (howl) howl.seek(time) }
+function getSeek() { return howl ? howl.seek() : 0 }
+
+function volume(val) {
+  if (val !== undefined) Howler.volume(val / 100)
+  return Howler.volume() * 100
+}
+
+function duration() { return howl ? howl.duration() : 0 }
+function playing() { return howl ? howl.playing() : false }
+
+function on(event, fn) { listeners[event] = fn }
+function off(event) { delete listeners[event] }
+
+function destroy() {
+  if (howl) {
+    howl.unload()
+    howl = null
+  }
+  listeners = {}
+}
+
+export default {
+  load, play, pause, togglePlay,
+  seek, getSeek, volume, duration, playing,
+  on, off, destroy, formatTime,
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..695ba53
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router/index.js'
+import './style.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..d2ad06c
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,46 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+
+import LoginPage from '../views/LoginPage.vue'
+import RegisterPage from '../views/RegisterPage.vue'
+import LandingPage from '../views/LandingPage.vue'
+import LibraryPage from '../views/LibraryPage.vue'
+import PlaylistPage from '../views/PlaylistPage.vue'
+import ProfilePage from '../views/ProfilePage.vue'
+import AdminPage from '../views/AdminPage.vue'
+
+const routes = [
+  { path: '/', name: 'Login', component: LoginPage, meta: { guest: true } },
+  { path: '/register', name: 'Register', component: RegisterPage, meta: { guest: true } },
+  { path: '/home', name: 'Home', component: LandingPage, meta: { auth: true } },
+  { path: '/library', name: 'Library', component: LibraryPage, meta: { auth: true } },
+  { path: '/playlist', name: 'Playlist', component: PlaylistPage, meta: { auth: true } },
+  { path: '/playlist/:id', name: 'PlaylistDetail', component: PlaylistPage, meta: { auth: true } },
+  { path: '/profile', name: 'Profile', component: ProfilePage, meta: { auth: true } },
+  { path: '/admin/tracks', name: 'AdminTracks', component: AdminPage, meta: { auth: true, admin: true } },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore()
+
+  if (to.meta.admin && !authStore.isAdmin) {
+    return next('/home')
+  }
+
+  if (to.meta.auth && !authStore.isLoggedIn) {
+    return next('/')
+  }
+
+  if (to.meta.guest && authStore.isLoggedIn) {
+    return next('/home')
+  }
+
+  next()
+})
+
+export default router
diff --git a/src/stores/authStore.js b/src/stores/authStore.js
new file mode 100644
index 0000000..3c187bc
--- /dev/null
+++ b/src/stores/authStore.js
@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import api from '../lib/api.js'
+
+export const useAuthStore = defineStore('auth', () => {
+  const user = ref(null)
+  const loading = ref(false)
+
+  const isLoggedIn = computed(() => !!user.value)
+  const isAdmin = computed(() => user.value?.role === 'admin')
+  const isArtist = computed(() => user.value?.role === 'artist')
+
+  async function checkSession() {
+    try {
+      const { data } = await api.get('/auth/me')
+      if (data.success) user.value = data.data
+    } catch {
+      user.value = null
+    }
+  }
+
+  async function login(identifier, password) {
+    loading.value = true
+    try {
+      const { data } = await api.post('/auth/login', { identifier, password })
+      if (data.success) user.value = data.data.user
+      return { success: true }
+    } catch (err) {
+      const msg = err.response?.data?.message || 'Login failed'
+      return { success: false, message: msg }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function register(form) {
+    loading.value = true
+    try {
+      const { data } = await api.post('/auth/register', form)
+      if (data.success) user.value = data.data.user
+      return { success: true }
+    } catch (err) {
+      const msg = err.response?.data?.message || 'Registration failed'
+      return { success: false, message: msg }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function logout() {
+    try {
+      await api.post('/auth/logout')
+    } finally {
+      user.value = null
+    }
+  }
+
+  async function updateProfile(formData) {
+    loading.value = true
+    try {
+      const { data } = await api.put('/auth/profile', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      })
+      if (data.success) user.value = data.data
+      return { success: true }
+    } catch (err) {
+      const msg = err.response?.data?.message || 'Update failed'
+      return { success: false, message: msg }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { user, loading, isLoggedIn, isAdmin, isArtist, checkSession, login, register, logout, updateProfile }
+})
diff --git a/src/stores/playerStore.js b/src/stores/playerStore.js
new file mode 100644
index 0000000..17ee58a
--- /dev/null
+++ b/src/stores/playerStore.js
@@ -0,0 +1,103 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import audioEngine from '../lib/audioEngine.js'
+
+export const usePlayerStore = defineStore('player', () => {
+  const currentTrack = ref(null)
+  const isPlaying = ref(false)
+  const progress = ref(0)
+  const duration = ref(0)
+  const volume = ref(80)
+  const seekInterval = ref(null)
+  const onEndCallback = ref(null)
+
+  const formattedProgress = computed(() => audioEngine.formatTime(progress.value))
+  const formattedDuration = computed(() => audioEngine.formatTime(duration.value))
+
+  function setTrack(track) {
+    if (!track) return
+    currentTrack.value = track
+    progress.value = 0
+    duration.value = 0
+    isPlaying.value = false
+    stopSeekInterval()
+
+    const audioUrl = track.audioUrl.startsWith('http')
+      ? track.audioUrl
+      : `http://localhost:3001${track.audioUrl}`
+
+    audioEngine.load(audioUrl)
+    audioEngine.on('play', () => { isPlaying.value = true })
+    audioEngine.on('pause', () => { isPlaying.value = false })
+    audioEngine.on('end', () => {
+      isPlaying.value = false
+      stopSeekInterval()
+      if (onEndCallback.value) onEndCallback.value()
+    })
+    audioEngine.on('error', () => { isPlaying.value = false })
+  }
+
+  function onEnd(cb) {
+    onEndCallback.value = cb
+  }
+
+  function togglePlay() {
+    if (!currentTrack.value) return
+    if (audioEngine.playing()) {
+      audioEngine.pause()
+      stopSeekInterval()
+    } else {
+      audioEngine.play()
+      startSeekInterval()
+    }
+  }
+
+  function play() {
+    if (!currentTrack.value) return
+    audioEngine.play()
+    startSeekInterval()
+  }
+
+  function seek(time) {
+    audioEngine.seek(time)
+    progress.value = time
+  }
+
+  function setVolume(val) {
+    volume.value = val
+    audioEngine.volume(val)
+  }
+
+  function startSeekInterval() {
+    stopSeekInterval()
+    seekInterval.value = setInterval(() => {
+      if (audioEngine.playing()) {
+        progress.value = audioEngine.getSeek()
+        duration.value = audioEngine.duration()
+      }
+    }, 500)
+  }
+
+  function stopSeekInterval() {
+    if (seekInterval.value) {
+      clearInterval(seekInterval.value)
+      seekInterval.value = null
+    }
+  }
+
+  function $reset() {
+    stopSeekInterval()
+    audioEngine.destroy()
+    currentTrack.value = null
+    isPlaying.value = false
+    progress.value = 0
+    duration.value = 0
+    onEndCallback.value = null
+  }
+
+  return {
+    currentTrack, isPlaying, progress, duration, volume,
+    formattedProgress, formattedDuration,
+    setTrack, onEnd, togglePlay, play, seek, setVolume, $reset,
+  }
+})
diff --git a/src/stores/queueStore.js b/src/stores/queueStore.js
new file mode 100644
index 0000000..b38641e
--- /dev/null
+++ b/src/stores/queueStore.js
@@ -0,0 +1,86 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useQueueStore = defineStore('queue', () => {
+  const queue = ref([])
+  const currentIndex = ref(-1)
+  const shuffle = ref(false)
+  const repeat = ref('off')
+
+  const currentTrack = computed(() => {
+    if (currentIndex.value < 0 || currentIndex.value >= queue.value.length) return null
+    return queue.value[currentIndex.value]
+  })
+
+  function setQueue(tracks, startIndex = 0) {
+    queue.value = tracks
+    currentIndex.value = startIndex
+  }
+
+  function nextTrack() {
+    if (queue.value.length === 0) return null
+    if (repeat.value === 'one') return queue.value[currentIndex.value]
+
+    let idx
+    if (shuffle.value) {
+      idx = Math.floor(Math.random() * queue.value.length)
+    } else {
+      idx = currentIndex.value + 1
+    }
+
+    if (idx >= queue.value.length) {
+      if (repeat.value === 'all') {
+        idx = 0
+      } else {
+        return null
+      }
+    }
+    currentIndex.value = idx
+    return queue.value[idx]
+  }
+
+  function prevTrack() {
+    if (queue.value.length === 0) return null
+    if (repeat.value === 'one') return queue.value[currentIndex.value]
+
+    let idx
+    if (shuffle.value) {
+      idx = Math.floor(Math.random() * queue.value.length)
+    } else {
+      idx = currentIndex.value - 1
+    }
+
+    if (idx < 0) {
+      if (repeat.value === 'all') {
+        idx = queue.value.length - 1
+      } else {
+        return null
+      }
+    }
+    currentIndex.value = idx
+    return queue.value[idx]
+  }
+
+  function toggleShuffle() {
+    shuffle.value = !shuffle.value
+  }
+
+  function cycleRepeat() {
+    const modes = ['off', 'all', 'one']
+    const i = modes.indexOf(repeat.value)
+    repeat.value = modes[(i + 1) % modes.length]
+  }
+
+  function $reset() {
+    queue.value = []
+    currentIndex.value = -1
+    shuffle.value = false
+    repeat.value = 'off'
+  }
+
+  return {
+    queue, currentIndex, shuffle, repeat, currentTrack,
+    setQueue, nextTrack, prevTrack,
+    toggleShuffle, cycleRepeat, $reset,
+  }
+})
diff --git a/src/stores/uiStore.js b/src/stores/uiStore.js
new file mode 100644
index 0000000..6d7a25d
--- /dev/null
+++ b/src/stores/uiStore.js
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useUiStore = defineStore('ui', () => {
+  const toasts = ref([])
+  let toastId = 0
+
+  function showToast(message, type = 'info') {
+    const id = ++toastId
+    toasts.value.push({ id, message, type })
+    setTimeout(() => {
+      toasts.value = toasts.value.filter((t) => t.id !== id)
+    }, 3000)
+  }
+
+  function dismissToast(id) {
+    toasts.value = toasts.value.filter((t) => t.id !== id)
+  }
+
+  return { toasts, showToast, dismissToast }
+})
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..b75937e
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  border-radius: 3px;
+  background: #1a1a1a;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  cursor: pointer;
+  border: none;
+}
diff --git a/src/views/AdminPage.vue b/src/views/AdminPage.vue
new file mode 100644
index 0000000..f50aa90
--- /dev/null
+++ b/src/views/AdminPage.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex flex-col">
+    <AppHeader />
+    <div class="flex flex-1">
+      <Sidebar />
+      <main class="flex-1 p-8 overflow-auto">
+        <div class="max-w-2xl mx-auto">
+          <h1 class="text-4xl font-black text-black mb-2">Upload Track</h1>
+          <p class="text-gray-600 mb-8">Add a new track to the library</p>
+          <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
+          <p v-if="success" class="text-green-600 text-sm mb-4 font-medium">{{ success }}</p>
+          <div class="bg-white rounded-2xl border-4 border-black p-8 space-y-6">
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">TITLE</label>
+              <input type="text" v-model="title" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Track title" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">ARTIST</label>
+              <input type="text" v-model="artist" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Artist name" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">ALBUM</label>
+              <input type="text" v-model="album" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Album name" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">GENRE</label>
+              <input type="text" v-model="genre" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="e.g. Pop, Rock, Jazz" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">COVER IMAGE</label>
+              <div class="border-2 border-dashed border-black rounded-lg p-6 text-center cursor-pointer hover:bg-gray-50" @click="coverInput.click()">
+                <img v-if="coverPreview" :src="coverPreview" class="w-32 h-32 object-cover mx-auto mb-2 rounded-lg border-2 border-black" />
+                <p v-else class="text-gray-500">Click to upload cover image</p>
+                <input ref="coverInput" type="file" accept="image/*" @change="onCoverChange" class="hidden" />
+              </div>
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">AUDIO FILE</label>
+              <div class="border-2 border-dashed border-black rounded-lg p-6 text-center cursor-pointer hover:bg-gray-50" @click="audioInput.click()">
+                <p v-if="audioFile" class="text-black font-medium">{{ audioFile.name }}</p>
+                <p v-else class="text-gray-500">Click to upload audio file (MP3, WAV, FLAC)</p>
+                <input ref="audioInput" type="file" accept=".mp3,.wav,.flac" @change="onAudioChange" class="hidden" />
+              </div>
+            </div>
+            <button @click="handleUpload" :disabled="uploading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl hover:bg-orange-600 transition-colors disabled:opacity-50">
+              <span v-if="uploading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></span>
+              {{ uploading ? 'Uploading...' : 'UPLOAD TRACK' }}
+            </button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import AppHeader from '../components/AppHeader.vue'
+import Sidebar from '../components/Sidebar.vue'
+import api from '../lib/api.js'
+
+const router = useRouter()
+
+const title = ref('')
+const artist = ref('')
+const album = ref('')
+const genre = ref('')
+const coverFile = ref(null)
+const coverPreview = ref('')
+const audioFile = ref(null)
+const uploading = ref(false)
+const error = ref('')
+const success = ref('')
+
+const coverInput = ref(null)
+const audioInput = ref(null)
+
+function onCoverChange(e) {
+  const file = e.target.files[0]
+  if (!file) return
+  coverFile.value = file
+  coverPreview.value = URL.createObjectURL(file)
+}
+
+function onAudioChange(e) {
+  const file = e.target.files[0]
+  if (!file) return
+  audioFile.value = file
+}
+
+async function handleUpload() {
+  error.value = ''
+  success.value = ''
+
+  if (!title.value || !artist.value || !album.value || !genre.value || !coverFile.value || !audioFile.value) {
+    error.value = 'All fields are required'
+    return
+  }
+
+  uploading.value = true
+  try {
+    const formData = new FormData()
+    formData.append('title', title.value)
+    formData.append('artist', artist.value)
+    formData.append('album', album.value)
+    formData.append('genre', genre.value)
+    formData.append('cover', coverFile.value)
+    formData.append('audio', audioFile.value)
+
+    const { data } = await api.post('/admin/tracks', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+
+    if (data.success) {
+      success.value = 'Track uploaded successfully!'
+      title.value = ''
+      artist.value = ''
+      album.value = ''
+      genre.value = ''
+      coverFile.value = null
+      coverPreview.value = ''
+      audioFile.value = null
+      setTimeout(() => router.push('/home'), 1500)
+    }
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Upload failed'
+  } finally {
+    uploading.value = false
+  }
+}
+</script>
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
new file mode 100644
index 0000000..e82b815
--- /dev/null
+++ b/src/views/LandingPage.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex flex-col">
+    <div class="p-8">
+      <div class="flex items-start gap-8 mb-12">
+        <div class="flex-1">
+          <h1 class="text-5xl font-black text-black leading-tight mb-2">MUSIC<br/>THAT HITS</h1>
+          <div class="inline-block bg-noctune-orange px-4 py-2 mb-4 border-b-4 border-black">
+            <span class="text-4xl font-black text-black">DIFFERENT.</span>
+          </div>
+          <p class="text-gray-600 mb-6">You Vibe. Your sound. Only on Noctune.</p>
+          <div class="flex gap-4">
+            <button @click="playFirstTrack" class="bg-noctune-yellow border-2 border-black px-6 py-3 font-bold hover:bg-yellow-400 transition-colors rounded-lg">PLAY NOW</button>
+            <button class="bg-gray-200 border-2 border-black px-6 py-3 font-bold hover:bg-gray-300 transition-colors rounded-lg">EXPLORE</button>
+          </div>
+        </div>
+        <div class="w-80 h-80 rounded-2xl overflow-hidden border-4 border-black flex-shrink-0">
+          <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop" alt="Music illustration" class="w-full h-full object-cover" />
+        </div>
+      </div>
+
+      <section>
+        <h2 class="text-2xl font-black text-black mb-6 flex items-center">
+          TRENDING NOW
+          <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+        </h2>
+        <div v-if="loading" class="text-center py-12 text-gray-500">Loading tracks...</div>
+        <div v-else class="grid grid-cols-4 gap-4">
+          <div v-for="track in tracks" :key="track._id"
+            @click="playTrack(track)"
+            class="bg-white rounded-2xl border-2 border-black overflow-hidden hover:scale-[1.02] transition-transform cursor-pointer group"
+          >
+            <div class="aspect-square bg-gray-300 relative overflow-hidden">
+              <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+              <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+                <div class="w-12 h-12 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity">
+                  <svg class="w-6 h-6 ml-1 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                </div>
+              </div>
+            </div>
+            <div class="p-3">
+              <p class="text-sm font-bold text-black truncate">{{ track.title }}</p>
+              <p class="text-xs text-gray-500 truncate">{{ track.artist }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const tracks = ref([])
+const loading = ref(true)
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function playTrack(track) {
+  const idx = tracks.value.findIndex((t) => t._id === track._id)
+  queueStore.setQueue(tracks.value, idx)
+  playerStore.setTrack(track)
+  playerStore.play()
+}
+
+function playFirstTrack() {
+  if (tracks.value.length) playTrack(tracks.value[0])
+}
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get('/tracks')
+    if (data.success) tracks.value = data.data
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/src/views/LibraryPage.vue b/src/views/LibraryPage.vue
new file mode 100644
index 0000000..a2dd23c
--- /dev/null
+++ b/src/views/LibraryPage.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="p-8">
+    <section class="mb-12">
+      <h2 class="text-3xl font-black text-black mb-6">Liked Tracks</h2>
+      <div v-if="loading" class="text-center py-12 text-gray-500">Loading...</div>
+      <div v-else-if="likedTracks.length === 0" class="text-center py-12">
+        <p class="text-gray-500 mb-4">No liked tracks yet</p>
+        <router-link to="/home" class="bg-noctune-yellow border-2 border-black px-6 py-3 font-bold inline-block hover:bg-yellow-400 transition-colors rounded-lg">Discover Music</router-link>
+      </div>
+      <div v-else class="grid grid-cols-4 gap-6">
+        <div v-for="track in likedTracks" :key="track._id"
+          @click="playTrack(track)"
+          class="group cursor-pointer bg-white rounded-2xl border-2 border-black overflow-hidden hover:scale-[1.02] transition-transform"
+        >
+          <div class="aspect-square bg-gray-300 relative overflow-hidden">
+            <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+            <div class="absolute bottom-2 right-2 w-10 h-10 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity">
+              <svg class="w-5 h-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+            </div>
+          </div>
+          <div class="p-3">
+            <p class="text-sm font-bold text-black truncate">{{ track.title }}</p>
+            <p class="text-xs text-gray-500 truncate">{{ track.artist }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="text-2xl font-black text-black mb-6 flex items-center">
+        All Tracks
+        <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+      </h2>
+      <div v-if="allLoading" class="text-center py-8 text-gray-500">Loading...</div>
+      <div v-else class="bg-white rounded-2xl border-4 border-black overflow-hidden">
+        <div class="bg-noctune-teal px-6 py-3 flex items-center text-black font-bold border-b-4 border-black">
+          <span class="flex-1">TITLE</span>
+          <span class="w-40 text-center">ARTIST</span>
+          <span class="w-32 text-center">ALBUM</span>
+          <span class="w-12 text-center"></span>
+        </div>
+        <div class="divide-y divide-gray-200">
+          <div v-for="(track, index) in allTracks" :key="track._id"
+            @click="playTrack(track)"
+            class="px-6 py-3 flex items-center hover:bg-gray-50 transition-colors cursor-pointer"
+          >
+            <div class="flex-1 flex items-center gap-3">
+              <span class="text-sm text-gray-400 w-6">{{ index + 1 }}</span>
+              <div class="w-10 h-10 rounded-lg flex-shrink-0 overflow-hidden bg-gray-300 border border-black">
+                <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+              </div>
+              <span class="font-medium text-black text-sm truncate">{{ track.title }}</span>
+            </div>
+            <span class="w-40 text-center text-gray-600 text-sm truncate">{{ track.artist }}</span>
+            <span class="w-32 text-center text-gray-600 text-sm truncate">{{ track.album }}</span>
+            <button @click.stop="toggleLike(track)" class="w-12 flex justify-center text-gray-400 hover:text-red-400 transition-colors">
+              <svg class="w-5 h-5" :class="track._isLiked ? 'fill-red-400 text-red-400' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const likedTracks = ref([])
+const allTracks = ref([])
+const loading = ref(true)
+const allLoading = ref(true)
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function playTrack(track) {
+  const tracks = allTracks.value.length ? allTracks.value : likedTracks.value
+  const idx = tracks.findIndex((t) => t._id === track._id)
+  queueStore.setQueue(tracks, idx >= 0 ? idx : 0)
+  playerStore.setTrack(track)
+  playerStore.play()
+}
+
+async function toggleLike(track) {
+  try {
+    if (track._isLiked) {
+      await api.delete(`/tracks/${track._id}/like`)
+      track._isLiked = false
+      likedTracks.value = likedTracks.value.filter((t) => t._id !== track._id)
+    } else {
+      await api.post(`/tracks/${track._id}/like`)
+      track._isLiked = true
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onMounted(async () => {
+  try {
+    const { data: liked } = await api.get('/tracks/liked')
+    if (liked.success) {
+      likedTracks.value = liked.data.likedTracks || []
+      likedTracks.value.forEach((t) => (t._isLiked = true))
+    }
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false
+  }
+
+  try {
+    const { data: all } = await api.get('/tracks')
+    if (all.success) {
+      allTracks.value = all.data
+      const likedIds = new Set(likedTracks.value.map((t) => t._id))
+      allTracks.value.forEach((t) => (t._isLiked = likedIds.has(t._id)))
+    }
+  } catch {
+    // ignore
+  } finally {
+    allLoading.value = false
+  }
+})
+</script>
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
new file mode 100644
index 0000000..258edcb
--- /dev/null
+++ b/src/views/LoginPage.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex items-center justify-center p-8">
+    <div class="w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl">
+      <div class="w-1/2 p-12 relative">
+        <div class="absolute top-8 right-12 grid grid-cols-4 gap-1">
+          <span v-for="i in 16" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
+        </div>
+        <div class="absolute top-20 right-8 grid grid-cols-4 gap-1">
+          <span v-for="i in 12" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
+        </div>
+        <div class="absolute top-16 left-20 text-black/60 text-4xl font-bold">+</div>
+        <div class="absolute bottom-24 right-20 text-black/60 text-4xl font-bold">+</div>
+        <div class="absolute bottom-12 left-12 grid grid-cols-3 gap-1">
+          <span v-for="i in 12" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
+        </div>
+        <div class="flex flex-col items-center justify-center h-full">
+          <div class="relative">
+            <div class="w-48 h-48 flex items-center justify-center">
+              <svg viewBox="0 0 120 120" class="w-full h-full">
+                <polygon points="40,35 80,35 90,50 50,50" fill="#ff6b35"/>
+                <polygon points="40,35 50,50 50,90 40,75" fill="#e85a2a"/>
+                <polygon points="50,50 90,50 90,90 50,90" fill="#ff8c5a"/>
+                <polygon points="40,75 50,90 50,70 40,55" fill="#1a1a1a"/>
+                <polygon points="70,50 90,50 90,70 70,70" fill="#1a1a1a"/>
+                <polygon points="50,70 70,70 70,90 50,90" fill="#1a1a1a"/>
+                <rect x="95" y="35" width="5" height="5" fill="#ff6b35"/>
+                <rect x="100" y="30" width="4" height="4" fill="#ff6b35"/>
+                <rect x="105" y="38" width="3" height="3" fill="#ff6b35"/>
+                <rect x="98" y="45" width="4" height="4" fill="#ff6b35"/>
+              </svg>
+            </div>
+          </div>
+          <h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1>
+        </div>
+      </div>
+
+      <div class="w-1/2 bg-white rounded-3xl m-4 p-10">
+        <h2 class="text-4xl font-black text-black mb-2">WELCOME!</h2>
+        <p class="text-gray-600 mb-8">Login to continue</p>
+        <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
+
+        <div class="mb-6">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">EMAIL/USERNAME</label>
+          <div class="flex border-2 border-black rounded-lg overflow-hidden">
+            <div class="bg-noctune-teal p-3 border-r-2 border-black">
+              <svg class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+            </div>
+            <input type="text" v-model="identifier" @keyup.enter="handleLogin" class="flex-1 px-4 py-3 focus:outline-none text-black" placeholder="Enter your email" />
+          </div>
+        </div>
+
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">PASSWORD</label>
+          <div class="flex border-2 border-black rounded-lg overflow-hidden">
+            <div class="bg-amber-200 p-3 border-r-2 border-black">
+              <svg class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
+            </div>
+            <input :type="showPassword ? 'text' : 'password'" v-model="password" @keyup.enter="handleLogin" class="flex-1 px-4 py-3 focus:outline-none text-black" placeholder="Enter your password" />
+            <button @click="showPassword = !showPassword" class="px-4 text-gray-500 hover:text-gray-700">
+              <svg v-if="!showPassword" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
+              <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="text-right mb-6">
+          <a href="#" class="text-sm text-gray-600 hover:text-black">Forgot password?</a>
+        </div>
+
+        <button @click="handleLogin" :disabled="loading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50">
+          <span v-if="loading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+          <template v-else>
+            <div class="bg-white/20 rounded p-1">
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
+            </div>
+            LOGIN
+          </template>
+        </button>
+
+        <div class="flex items-center my-6">
+          <div class="flex-1 border-t-2 border-gray-300"></div>
+          <span class="px-4 bg-black text-white text-xs font-bold py-1 rounded">OR SIGN IN WITH</span>
+          <div class="flex-1 border-t-2 border-gray-300"></div>
+        </div>
+
+        <button class="w-full border-2 border-gray-300 rounded-xl py-3 flex items-center justify-center gap-3 hover:bg-gray-50 transition-colors">
+          <svg class="w-6 h-6" viewBox="0 0 24 24">
+            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+          </svg>
+          <span class="font-bold text-gray-700">GOOGLE</span>
+        </button>
+
+        <p class="text-center mt-8 text-gray-600">
+          Don&apos;t have an account yet?
+          <router-link to="/register" class="text-noctune-orange font-bold hover:underline">Register now</router-link>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const identifier = ref('')
+const password = ref('')
+const showPassword = ref(false)
+const loading = ref(false)
+const error = ref('')
+
+async function handleLogin() {
+  error.value = ''
+  loading.value = true
+  const result = await authStore.login(identifier.value, password.value)
+  loading.value = false
+  if (result.success) {
+    router.push('/home')
+  } else {
+    error.value = result.message
+  }
+}
+</script>
diff --git a/src/views/PlaylistPage.vue b/src/views/PlaylistPage.vue
new file mode 100644
index 0000000..208f325
--- /dev/null
+++ b/src/views/PlaylistPage.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="p-8">
+    <div v-if="loading" class="text-center py-20 text-gray-500">Loading playlist...</div>
+    <template v-else-if="playlist">
+      <div class="flex items-start gap-8 mb-8">
+        <div class="w-56 h-56 rounded-2xl overflow-hidden border-4 border-black flex-shrink-0 bg-black">
+          <img v-if="playlist.coverUrl" :src="formatUrl(playlist.coverUrl)" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <svg class="w-40 h-24 text-white/60" viewBox="0 0 100 50">
+              <rect x="5" y="20" width="4" height="15" fill="currentColor"/>
+              <rect x="12" y="10" width="4" height="30" fill="currentColor"/>
+              <rect x="19" y="15" width="4" height="20" fill="currentColor"/>
+              <rect x="26" y="5" width="4" height="40" fill="currentColor"/>
+              <rect x="33" y="12" width="4" height="26" fill="currentColor"/>
+              <rect x="40" y="8" width="4" height="34" fill="currentColor"/>
+              <rect x="47" y="15" width="4" height="20" fill="currentColor"/>
+              <rect x="54" y="18" width="4" height="14" fill="currentColor"/>
+              <rect x="61" y="12" width="4" height="26" fill="currentColor"/>
+              <rect x="68" y="8" width="4" height="34" fill="currentColor"/>
+              <rect x="75" y="15" width="4" height="20" fill="currentColor"/>
+              <rect x="82" y="20" width="4" height="15" fill="currentColor"/>
+              <rect x="89" y="22" width="4" height="10" fill="currentColor"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="flex-1">
+          <span class="inline-block bg-noctune-teal text-black text-xs font-bold px-3 py-1 rounded mb-3 border border-black">PLAYLIST</span>
+          <h1 class="text-4xl font-black text-black mb-4 leading-tight">{{ playlist.name }}</h1>
+          <p v-if="playlist.description" class="text-gray-600 mb-4">{{ playlist.description }}</p>
+          <div class="flex items-center gap-3 text-gray-600 mb-6">
+            <span class="font-medium">{{ playlist.tracks?.length || 0 }} songs</span>
+          </div>
+          <div class="flex gap-4">
+            <button @click="playAll" :disabled="!playlist.tracks?.length" class="bg-noctune-teal border-2 border-black px-6 py-2 font-bold flex items-center gap-2 rounded-lg hover:bg-teal-600 transition-colors disabled:opacity-50">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+              PLAY
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-2xl border-4 border-black overflow-hidden">
+        <div class="bg-noctune-teal px-6 py-3 flex items-center text-black font-bold border-b-4 border-black">
+          <span class="w-12 text-center">#</span>
+          <span class="flex-1 text-center">TITLE</span>
+          <span class="w-48 text-center">ARTIST</span>
+          <span class="w-12 text-center"></span>
+        </div>
+        <div class="divide-y divide-gray-200">
+          <div v-for="(track, index) in playlist.tracks" :key="track._id"
+            @click="playTrack(index)"
+            class="px-6 py-3 flex items-center hover:bg-gray-50 transition-colors cursor-pointer"
+          >
+            <span class="w-12 text-center text-gray-500">{{ index + 1 }}</span>
+            <div class="flex-1 flex items-center gap-4">
+              <div class="w-12 h-12 rounded-lg flex-shrink-0 overflow-hidden bg-gray-300 border border-black">
+                <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+              </div>
+              <span class="font-medium text-black text-sm truncate">{{ track.title }}</span>
+            </div>
+            <span class="w-48 text-center text-gray-600 text-sm truncate">{{ track.artist }}</span>
+            <button @click.stop="toggleLike(track)" class="w-12 flex justify-center text-gray-400 hover:text-red-400 transition-colors">
+              <svg class="w-5 h-5" :class="track._isLiked ? 'fill-red-400 text-red-400' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+            </button>
+          </div>
+          <div v-if="!playlist.tracks?.length" class="p-8 text-center text-gray-500">No tracks in this playlist yet</div>
+        </div>
+      </div>
+    </template>
+    <div v-else class="text-center py-20 text-gray-500">Playlist not found</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const route = useRoute()
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const playlist = ref(null)
+const loading = ref(true)
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function playTrack(index) {
+  if (!playlist.value?.tracks?.length) return
+  const tracks = playlist.value.tracks
+  queueStore.setQueue(tracks, index)
+  playerStore.setTrack(tracks[index])
+  playerStore.play()
+}
+
+function playAll() {
+  if (playlist.value?.tracks?.length) playTrack(0)
+}
+
+async function toggleLike(track) {
+  try {
+    if (track._isLiked) {
+      await api.delete(`/tracks/${track._id}/like`)
+      track._isLiked = false
+    } else {
+      await api.post(`/tracks/${track._id}/like`)
+      track._isLiked = true
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onMounted(async () => {
+  const id = route.params.id
+  try {
+    if (id) {
+      const { data } = await api.get(`/playlists/${id}`)
+      if (data.success) {
+        playlist.value = data.data
+        playlist.value.tracks?.forEach((t) => (t._isLiked = false))
+      }
+    } else {
+      const { data } = await api.get('/playlists')
+      if (data.success && data.data.length) {
+        const { data: detail } = await api.get(`/playlists/${data.data[0]._id}`)
+        if (detail.success) {
+          playlist.value = detail.data
+          playlist.value.tracks?.forEach((t) => (t._isLiked = false))
+        }
+      } else {
+        playlist.value = { name: 'My Playlist', tracks: [] }
+      }
+    }
+  } catch {
+    playlist.value = null
+  } finally {
+    loading.value = false
+  }
+})
+</script>
diff --git a/src/views/ProfilePage.vue b/src/views/ProfilePage.vue
new file mode 100644
index 0000000..1e58c50
--- /dev/null
+++ b/src/views/ProfilePage.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="p-8">
+    <div class="bg-white rounded-2xl border-4 border-black p-6 mb-6 flex items-center gap-8">
+      <div class="w-40 h-40 rounded-full border-4 border-black overflow-hidden flex-shrink-0 bg-gray-300">
+        <img v-if="authStore.user?.avatarUrl" :src="formatUrl(authStore.user.avatarUrl)" alt="Profile" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full flex items-center justify-center">
+          <svg class="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+        </div>
+      </div>
+
+      <div class="flex-1">
+        <h1 class="text-3xl font-black text-black mb-1">{{ userDisplayName }}</h1>
+        <p class="text-gray-600 mb-3">@{{ authStore.user?.username || 'username' }}</p>
+        <div class="inline-flex items-center gap-2 border-2 border-noctune-orange text-noctune-orange px-3 py-1 rounded-full mb-4">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
+          <span class="text-sm font-medium">{{ authStore.user?.role === 'admin' ? 'Admin' : 'Premium Member' }}</span>
+        </div>
+        <div class="flex gap-4">
+          <button @click="toggleEdit" class="border-2 border-black px-4 py-2 rounded-lg font-medium flex items-center gap-2 hover:bg-gray-100 transition-colors">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+            {{ editing ? 'Cancel' : 'Edit Profile' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="editing" class="bg-white rounded-2xl border-4 border-black p-6 mb-6">
+      <h3 class="text-xl font-black text-black mb-4">Edit Profile</h3>
+      <p v-if="editError" class="text-red-500 text-sm mb-4">{{ editError }}</p>
+      <p v-if="editSuccess" class="text-green-600 text-sm mb-4">{{ editSuccess }}</p>
+      <div class="space-y-4 max-w-md">
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">NAME</label>
+          <input type="text" v-model="editName" class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black" />
+        </div>
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">USERNAME</label>
+          <input type="text" v-model="editUsername" class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black" />
+        </div>
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">EMAIL</label>
+          <input type="email" v-model="editEmail" class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black" />
+        </div>
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">AVATAR</label>
+          <input type="file" accept="image/*" @change="onAvatarChange" class="w-full text-sm" />
+        </div>
+        <button @click="handleUpdate" :disabled="updating" class="bg-noctune-teal border-2 border-black px-6 py-2 font-bold rounded-lg hover:bg-teal-600 transition-colors disabled:opacity-50">
+          <span v-if="updating" class="inline-block w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin mr-1"></span>
+          Save Changes
+        </button>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-2xl border-4 border-black p-6 mb-6 flex justify-center gap-12">
+      <div class="flex items-center gap-4">
+        <div class="w-14 h-14 bg-noctune-orange rounded-xl flex items-center justify-center border-2 border-black">
+          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
+        </div>
+        <div>
+          <p class="text-2xl font-black text-black">{{ likedCount }}</p>
+          <p class="text-sm text-gray-500">Liked Songs</p>
+        </div>
+      </div>
+    </div>
+
+    <button @click="handleLogout" class="w-full bg-noctune-orange border-4 border-black rounded-2xl py-4 font-bold text-black flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
+      Logout
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+import api from '../lib/api.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const editing = ref(false)
+const editName = ref('')
+const editUsername = ref('')
+const editEmail = ref('')
+const avatarFile = ref(null)
+const updating = ref(false)
+const editError = ref('')
+const editSuccess = ref('')
+const likedCount = ref(0)
+
+const userDisplayName = computed(() => {
+  return authStore.user?.name || authStore.user?.username || 'User'
+})
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function toggleEdit() {
+  editing.value = !editing.value
+  if (editing.value) {
+    editName.value = authStore.user?.name || ''
+    editUsername.value = authStore.user?.username || ''
+    editEmail.value = authStore.user?.email || ''
+    avatarFile.value = null
+    editError.value = ''
+    editSuccess.value = ''
+  }
+}
+
+function onAvatarChange(e) {
+  avatarFile.value = e.target.files[0] || null
+}
+
+async function handleUpdate() {
+  editError.value = ''
+  editSuccess.value = ''
+  updating.value = true
+  try {
+    const formData = new FormData()
+    formData.append('name', editName.value)
+    formData.append('username', editUsername.value)
+    formData.append('email', editEmail.value)
+    if (avatarFile.value) formData.append('avatar', avatarFile.value)
+
+    const result = await authStore.updateProfile(formData)
+    if (result.success) {
+      editSuccess.value = 'Profile updated!'
+      setTimeout(() => { editing.value = false }, 1500)
+    } else {
+      editError.value = result.message
+    }
+  } catch {
+    editError.value = 'Update failed'
+  } finally {
+    updating.value = false
+  }
+}
+
+async function handleLogout() {
+  await authStore.logout()
+  router.push('/')
+}
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get('/tracks/liked')
+    if (data.success) {
+      likedCount.value = data.data.likedTracks?.length || 0
+    }
+  } catch {
+    // ignore
+  }
+})
+</script>
diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue
new file mode 100644
index 0000000..b520ae9
--- /dev/null
+++ b/src/views/RegisterPage.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex items-center justify-center p-8">
+    <div class="w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl">
+      <div class="w-1/2 p-12 relative">
+        <div class="absolute top-8 right-12 grid grid-cols-4 gap-1">
+          <span v-for="i in 16" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
+        </div>
+        <div class="flex flex-col items-center justify-center h-full">
+          <div class="relative">
+            <div class="w-48 h-48 flex items-center justify-center">
+              <svg viewBox="0 0 120 120" class="w-full h-full">
+                <polygon points="40,35 80,35 90,50 50,50" fill="#ff6b35"/>
+                <polygon points="40,35 50,50 50,90 40,75" fill="#e85a2a"/>
+                <polygon points="50,50 90,50 90,90 50,90" fill="#ff8c5a"/>
+                <polygon points="40,75 50,90 50,70 40,55" fill="#1a1a1a"/>
+                <polygon points="70,50 90,50 90,70 70,70" fill="#1a1a1a"/>
+                <polygon points="50,70 70,70 70,90 50,90" fill="#1a1a1a"/>
+              </svg>
+            </div>
+          </div>
+          <h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1>
+        </div>
+      </div>
+      <div class="w-1/2 bg-white rounded-3xl m-4 p-10">
+        <h2 class="text-4xl font-black text-black mb-2">JOIN US!</h2>
+        <p class="text-gray-600 mb-6">Create your account</p>
+        <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">NAME</label>
+          <input type="text" v-model="name" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Your name" />
+        </div>
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">USERNAME</label>
+          <input type="text" v-model="username" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Choose a username" />
+        </div>
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">EMAIL</label>
+          <input type="email" v-model="email" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Enter your email" />
+        </div>
+        <div class="mb-6">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">PASSWORD</label>
+          <input type="password" v-model="password" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Create a password" />
+        </div>
+        <button @click="handleRegister" :disabled="loading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50">
+          <span v-if="loading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+          <span v-else>REGISTER</span>
+        </button>
+        <p class="text-center mt-6 text-gray-600">
+          Already have an account?
+          <router-link to="/" class="text-noctune-orange font-bold hover:underline">Login</router-link>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const name = ref('')
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const loading = ref(false)
+const error = ref('')
+
+async function handleRegister() {
+  error.value = ''
+  loading.value = true
+  const result = await authStore.register({ name: name.value, username: username.value, email: email.value, password: password.value })
+  loading.value = false
+  if (result.success) {
+    router.push('/home')
+  } else {
+    error.value = result.message
+  }
+}
+</script>
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..dc2aea1
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,125 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: 'Geist', 'Geist Fallback';
+  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e78cc8c
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'noctune-teal': '#1a9b8f',
+        'noctune-cream': '#f5f0dc',
+        'noctune-yellow': '#ffd700',
+        'noctune-orange': '#ff6b35',
+        'noctune-dark': '#1a1a1a',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['Space Mono', 'monospace'],
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..70ac6e7
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': '/src'
+    }
+  }
+})