init after I forgot

2026-05-01 19:32:15 -06:00
commit c3de799f09
29 changed files with 4256 additions and 0 deletions
@@ -0,0 +1 @@
+node_modules/
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "vuetifyjs.vuetify-vscode",
+    "vue.volar"
+  ]
+}
@@ -0,0 +1,75 @@
+# pex2
+
+Scaffolded with Vuetify CLI.
+
+## ❗️ Documentation
+
+- Primary docs: https://vuetifyjs.com/
+- Getting started guide: https://vuetifyjs.com/en/getting-started/installation/
+- Community support: https://community.vuetifyjs.com/
+- Issue tracker: https://issues.vuetifyjs.com/
+
+## 🧱 Stack
+
+- Framework: Vue 3 + Vite
+- UI Library: Vuetify
+- Language: TypeScript
+- Package manager: npm
+
+## 🧭 Start Here
+
+- Main entry: `src/main.ts`
+- Main app component: `src/App.vue`
+- Main styles: `src/styles/`
+- Plugin setup: `src/plugins/`
+
+## 📁 Project Structure
+
+- `src/main.ts` — application entry point
+- `src/App.vue` — root component
+- `src/components/` — reusable Vue components
+- `src/plugins/` — plugin registration and setup
+- `src/styles/` — global styles and theme settings
+- `public/` — static public files
+
+## ✨ Enabled Features
+
+- Tailwind CSS
+
+## 💿 Install
+
+Use your selected package manager (npm) to install dependencies:
+
+```bash
+npm install
+```
+
+## 🚀 Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+## 🏗️ Build
+
+```bash
+npm run build
+```
+
+## 🧪 Available Scripts
+
+- `npm run dev`
+- `npm run build`
+- `npm run preview`
+- `npm run build-only`
+- `npm run type-check`
+
+## 💪 Support Vuetify Development
+
+This project uses Vuetify - an MIT licensed Open Source project. We are glad to welcome contributors and any support for ongoing development:
+
+- Contribute to Vuetify and ecosystem projects: https://github.com/vuetifyjs
+- Request enterprise support: https://support.vuetifyjs.com/
+- Sponsor on GitHub: https://github.com/sponsors/vuetifyjs
+- Support on Open Collective: https://opencollective.com/vuetify
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-vue-layouts-next/client" />
@@ -0,0 +1,3 @@
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify()
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Vuetify 4</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+{
+  "name": "pex2",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.2.10",
+    "@fontsource/roboto-mono": "^5.2.8",
+    "@mdi/font": "7.4.47",
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.6",
+    "vuetify": "^4.0.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
+    "npm-run-all2": "^8.0.4",
+    "sass-embedded": "^1.98.0",
+    "tailwindcss": "^4.2.1",
+    "typescript": "~5.9.3",
+    "unplugin-fonts": "^1.4.0",
+    "vite": "^8.0.0",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vue-tsc": "^3.2.5"
+  },
+  "overrides": {
+    "unplugin-fonts": {
+      "vite": "^8.0.0"
+    }
+  }
+}
@@ -0,0 +1,18 @@
+<template>
+  <v-app>
+    <Header v-if="!$route.meta.hideHeader" />
+
+    <v-main>
+      <v-container fluid>
+        <router-view />
+      </v-container>
+    </v-main>
+    
+    <Footer v-if="!$route.meta.hideFooter" />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import Header from '@/components/Header.vue'
+  import Footer from '@/components/Footer.vue'
+</script>
@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>
@@ -0,0 +1,55 @@
+<template>
+    <v-sheet color="#0d1117" rounded="lg">
+        <v-tabs
+            v-model="tab"
+            :items="tabs"
+            align-tabs="center"
+            color="white"
+            height="60"
+            slider-color="#f78166"
+        >
+            <template v-slot:tab="{ item }">
+                <v-tab
+                    :prepend-icon="item.icon"
+                    :text="item.text"
+                    :value="item.value"
+                    class="text-none"
+                ></v-tab>
+            </template>
+
+            <template v-slot:item="{ item }">
+                <v-tabs-window-item :value="item.value" class="pa-4">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
+                </v-tabs-window-item>
+            </template>
+        </v-tabs>
+    </v-sheet>
+</template>
+
+<script setup>
+    import { shallowRef } from 'vue'
+
+    const tab = shallowRef('tab-1')
+    const tabs = [
+        {
+            icon: 'mdi-book-open-page-variant',
+            text: 'Readme',
+            value: 'tab-1',
+        },
+        {
+            icon: 'mdi-handshake-outline',
+            text: 'Code of Conduct',
+            value: 'tab-2',
+        },
+        {
+            icon: 'mdi-license',
+            text: 'MIT License',
+            value: 'tab-3',
+        },
+        {
+            icon: 'mdi-shield-lock-outline',
+            text: 'Security',
+            value: 'tab-4',
+        },
+    ]
+</script>
@@ -0,0 +1,108 @@
+<template>
+    <v-app-bar color="primary">
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+
+        <v-app-bar-title>PEX2 or something I have really no idea</v-app-bar-title>
+
+        <template>
+            <v-btn icon="mdi-help-box" />
+            <v-btn icon="mdi-account-circle" />
+            <v-btn icon @click="toggleTheme">
+                <v-icon>
+                    {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+                </v-icon>
+            </v-btn>
+            <v-menu>
+                <template #activator="{ props }">
+                <v-btn icon v-bind="props">
+                    <v-avatar size="32">
+                    <img src="https://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" />
+                    </v-avatar>
+                </v-btn>
+                </template>
+
+                <v-list>
+                <v-list-item title="Profile" to="/profile"/>
+                <v-list-item title="Sign out" />
+                </v-list>
+            </v-menu>
+        </template>
+
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" temporary :location="$vuetify.display.mobile ? 'bottom' : undefined">
+        <v-list>
+            <v-list-item title="Home" to="/" prepend-icon="mdi-home"/>
+            <v-list-group value="pex">
+                <template #activator="{ props }">
+                    <v-list-item v-bind="props" title="My PEX Items" prepend-icon="mdi-account"/>
+                </template>
+                    <v-list-item density="default" v-for="item in pexItems"
+                        :key="item.title"
+                        :title="item.title"
+                        :to="item.to"
+                        :prepend-icon="item.icon"
+                        link
+                    />
+            </v-list-group>
+            <v-list-group value="scheduling">
+                <template #activator="{ props }">
+                    <v-list-item v-bind="props" title="Scheduling" />
+                </template>
+                    <v-list-item density="default" v-for="item in schedulingItems"
+                        :key="item.title"
+                        :title="item.title"
+                        :to="item.to"
+                        link
+                    />
+            </v-list-group>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<style scoped>
+    :deep(.v-list-item__spacer) {
+        width: 10px;
+    }
+    :deep(.v-list-group__items .v-list-item) {
+        padding-inline-start: 48px;
+    }
+</style>
+
+<script setup>
+    import { ref, watch } from 'vue'
+
+    const pexItems = [
+        {
+            title: 'Dashboard',
+            to: '/dashboard',
+            icon: 'mdi-view-dashboard'
+        },
+        {
+            title: 'Calendar',
+            to: '/calendar',
+            icon: 'mdi-calendar'
+        },
+        {
+            title: 'My Folder',
+            to: '/my-folder',
+            icon: 'mdi-folder-outline'
+        },
+    ]
+
+    const schedulingItems = [
+        { title: 'Calendar', to: '/calendar' },
+        { title: 'Scheduler', to: '/scheduler' }
+    ]
+
+    function toggleTheme() {
+        theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+    }
+
+    const drawer = ref(false)
+    const group = ref(null)
+
+    watch(group, () => {
+        drawer.value = false
+    })
+</script>
@@ -0,0 +1,117 @@
+<template>
+  <v-container class="h-full flex items-center" max-width="900">
+    <div>
+      <v-img
+        alt="Placeholder logo"
+        class="mb-4"
+        height="150"
+        src="@/assets/logo.png"
+      />
+
+      <div class="mb-8 text-center">
+        <div class="font-light -mb-1">Welcome to</div>
+        <h1 class="text-6xl font-heading font-bold">Vuetify</h1>
+      </div>
+
+      <div class="grid md:grid-cols-2 gap-4">
+        <v-card
+          class="hero-card md:col-span-2"
+          image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
+          rounded="3xl"
+          variant="flat"
+        >
+          <template #prepend>
+            <v-avatar class="ml-2 mr-4" icon="mdi-rocket-launch-outline" size="60" variant="tonal" />
+          </template>
+
+          <template #image>
+            <v-img class="hidden md:flex" position="top right" />
+          </template>
+
+          <template #title>
+            <h2 class="text-2xl font-medium my-0">
+              Get started
+            </h2>
+          </template>
+
+          <template #subtitle>
+            <div class="leading-7">
+              Change this page by updating <v-code>components/HelloWorld.vue</v-code>.
+            </div>
+          </template>
+        </v-card>
+
+        <v-card
+          v-for="link in links"
+          :href="link.href"
+          :key="link.href"
+          :subtitle="link.subtitle"
+          :title="link.title"
+          class="
+            h-full py-3 rounded-3xl transition-[border-radius] hover:rounded-lg
+            flex items-center [&>.v-card-item]:w-full
+            group"
+          rel="noopener noreferrer"
+          target="_blank"
+          variant="flat"
+        >
+          <template #prepend>
+            <v-avatar :icon="link.icon" size="60" variant="tonal" class="ml-2 mr-4" />
+          </template>
+          <template #append>
+            <v-icon class="ml-1 opacity-0 transition group-hover:opacity-90 group-hover:-translate-x-1" icon="mdi-open-in-new" />
+          </template>
+          <template #subtitle>
+            <div class="line-clamp-2 text-wrap">{{ link.subtitle }}</div>
+          </template>
+        </v-card>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+  const links = [
+    {
+      href: 'https://vuetifyjs.com/',
+      icon: 'mdi-text',
+      subtitle: 'Learn about all things Vuetify in our documentation.',
+      title: 'Documentation',
+    },
+    {
+      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
+      icon: 'mdi-star',
+      subtitle: 'Explore available framework Features.',
+      title: 'Features',
+    },
+    {
+      href: 'https://vuetifyjs.com/components/all',
+      icon: 'mdi-widgets-outline',
+      subtitle: 'Discover components in the API Explorer.',
+      title: 'Components',
+    },
+    {
+      href: 'https://discord.vuetifyjs.com',
+      icon: 'mdi-account-group-outline',
+      subtitle: 'Connect with Vuetify developers.',
+      title: 'Community',
+    },
+  ]
+</script>
+
+<style scoped>
+@reference "../styles/tailwind.css";
+
+/*
+  1. mixing helper classes and @apply for demonstration purposes only
+  2. the classes below are NOT wrapped in any CSS layer, so they "win" over everything else
+*/
+.hero-card {
+  @apply py-3 md:pr-[120px] w-full transition-none;
+}
+
+:deep(.v-card) {
+  @apply bg-gray-200;
+  @apply dark:bg-black dark:bg-linear-to-r dark:from-primary/50 dark:to-primary/30 dark:text-white/80;
+}
+</style>
@@ -0,0 +1,27 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+import router from '../src/router/index.js'
+
+// Styles
+import 'unfonts.css'
+import './styles/tailwind.css'
+import './styles/main.scss'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.use(router)
+app.mount('#app')
@@ -0,0 +1,15 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Types
+import type { App } from 'vue'
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app: App) {
+  app.use(vuetify)
+}
@@ -0,0 +1,28 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com
+ */
+
+import { createVuetify } from 'vuetify'
+import '@mdi/font/css/materialdesignicons.css'
+import '../styles/layers.css'
+import 'vuetify/styles'
+
+export default createVuetify({
+  theme: {
+    defaultTheme: 'system',
+    utilities: false,
+  },
+  display: {
+    mobileBreakpoint: 'md',
+    thresholds: {
+      xs: 0,
+      sm: 600,
+      md: 840,
+      lg: 1145,
+      xl: 1545,
+      xxl: 2138,
+    },
+  },
+})
@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HelloWorld from '../components/HelloWorld.vue'
+import Dashboard from '../views/Dashboard.vue'
+import SystemNotice from '../views/SystemNotice.vue'
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: HelloWorld
+    },
+    {
+        path: '/dashboard',
+        name: 'Dashboard',
+        component: Dashboard
+    },
+    {
+        path: '/system-notice',
+        name: 'SystemNotice',
+        component: SystemNotice,
+        meta: { hideHeader: true, hideFooter: true }
+    },
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+export default router
@@ -0,0 +1,11 @@
+@layer tailwind-theme;
+@layer tailwind-reset;
+
+@layer vuetify-core;
+@layer vuetify-components;
+@layer vuetify-overrides;
+@layer vuetify-utilities;
+
+@layer tailwind-utilities;
+
+@layer vuetify-final;
@@ -0,0 +1,5 @@
+@layer vuetify-overrides {
+  code, pre, .v-code {
+    font-family: var(--font-mono);
+  }
+}
@@ -0,0 +1,28 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+@use 'vuetify/settings' with (
+  $color-pack: false,
+  $utilities: false,
+
+  $heading-font-family: var(--font-heading),
+  $body-font-family: var(--font-body),
+
+  $grid-breakpoints: (
+    'xs': 0,
+    'sm': 600px,
+    'md': 840px,
+    'lg': 1145px,
+    'xl': 1545px,
+    'xxl': 2138px,
+  ),
+  $container-max-widths: (
+    'md': 700px,
+    'lg': 1000px,
+    'xl': 1400px,
+    'xxl': 2000px,
+  ),
+);
@@ -0,0 +1,77 @@
+@import "tailwindcss/theme" layer(tailwind-theme);
+@import "tailwindcss/preflight" layer(tailwind-reset);
+@import "tailwindcss/utilities" layer(tailwind-utilities);
+
+@theme {
+  --font-heading: "Roboto", sans-serif;
+  --font-body: "Roboto", sans-serif;
+  --font-mono: "Roboto Mono", monospace;
+
+  --color-background: rgb(var(--v-theme-background));
+  --color-surface: rgb(var(--v-theme-surface));
+  --color-on-surface: rgb(var(--v-theme-on-surface));
+
+  --color-primary: rgb(var(--v-theme-primary));
+  --color-success: rgb(var(--v-theme-success));
+  --color-info: rgb(var(--v-theme-info));
+  --color-warning: rgb(var(--v-theme-warning));
+  --color-error: rgb(var(--v-theme-error));
+
+  --breakpoint-*: initial;
+  --breakpoint-xs: 0px;
+  --breakpoint-sm: 600px;
+  --breakpoint-md: 840px;
+  --breakpoint-lg: 1145px;
+  --breakpoint-xl: 1545px;
+  --breakpoint-xxl: 2138px;
+}
+
+@custom-variant light (&:where(.v-theme--light, .v-theme--light *));
+@custom-variant dark (&:where(.v-theme--dark, .v-theme--dark *));
+
+/* safelist to ensure variables are always available */
+@source inline('font-heading');
+@source inline('font-body');
+@source inline('font-mono');
+
+/*
+  note: adopt and extend values from TailwindCSS
+*/
+@utility rounded-pill   { border-radius: 9999px }
+@utility rounded-circle { border-radius: 50%    }
+@utility rounded-shaped { border-radius: 24px 0 }
+
+@source inline('rounded'); /* .25rem */
+@source inline('rounded-{none,sm,md,lg,xl,2xl,3xl,full,pill,circle,shaped}');
+
+/* MD3 elevation */
+@utility elevation-0 {
+  box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
+  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
+}
+@utility elevation-1 {
+  box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
+  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
+}
+@utility elevation-2 {
+  box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
+  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent);
+}
+@utility elevation-3 {
+  box-shadow: 0px 1px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 4px 8px 3px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
+  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 6%, transparent);
+}
+@utility elevation-4 {
+  box-shadow: 0px 2px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 6px 10px 4px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
+  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 8%, transparent);
+}
+@utility elevation-5 {
+  box-shadow: 0px 4px 4px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 8px 12px 6px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
+  --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 10%, transparent);
+}
+@utility elevation-overlay {
+  background-image: linear-gradient(var(--v-elevation-overlay), var(--v-elevation-overlay));
+}
+
+/* safelist for elevation="..." props */
+@source inline('elevation-{0,1,2,3,4,5}');
@@ -0,0 +1,29 @@
+<template>
+    <v-btn @click="dialog = true">
+      Open Dialog
+    </v-btn>
+
+    <v-dialog
+      v-model="dialog"
+      width="auto"
+    >
+      <v-card
+        max-width="400"
+        prepend-icon="mdi-update"
+        text="Your application will relaunch automatically after the update is complete."
+        title="Update in progress"
+      >
+        <template v-slot:actions>
+          <v-btn
+            class="ms-auto"
+            text="OK"
+            @click="dialog = false"
+          ></v-btn>
+        </template>
+      </v-card>
+    </v-dialog>
+</template>
+
+<script setup>
+
+</script>
@@ -0,0 +1,25 @@
+<template>
+  <v-container class="flex items-center justify-center min-h-screen">
+    <v-card class="pa-8">
+      <v-card-title>System Use Notice</v-card-title>
+        <v-card-text>
+            <div class="text-headline-large">Usage Agreement</div>
+            <p>
+                You are accessing a U.S. Government (USG) Information System (IS) that is provided for USG-authorized use only. By using this IS (which includes any device attached to this IS), you consent to the following conditions:
+            </p>
+            <ul class="pl-8" style="list-style: disc">
+                <li>The USG routinely intercepts and monitors communications on this IS for purposes including, but not limited to, penetration testing, COMSEC monitoring, network operations and defense, personnel misconduct (PM), law enforcement (LE) and counterintelligence (CI) investigations.</li>
+                <li>At any time, the USG may inspect and seize data stored on this IS.</li>
+                <li>Communications using, or data stored on, this IS are not private, are subject to routine monitoring, interception, and search, and may be disclosed or used for any USG-authorized purpose.</li>
+                <li>This IS includes security measures (e.g., authentication and access controls) to protect USG interests--not for your personal benefit or privacy.</li>
+                <li>Notwithstanding the above, using this IS does not constitute consent to PM, LE or CI investigative searching or monitoring of the content of privileged communications, or work product, related to personal representation or services by attorneys, psychotherapists, or clergy, and their assistants. Such communications and work product are private and confidential. See User Agreement for details.</li>
+            </ul>
+        </v-card-text>
+        <v-card-actions class="flex justify-end">
+            <v-btn elevation="1" to="/">
+                Accept and Continue
+            </v-btn>
+        </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
@@ -0,0 +1,56 @@
+import { fileURLToPath, URL } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
+import Vue from '@vitejs/plugin-vue'
+import Fonts from 'unplugin-fonts/vite'
+import { defineConfig } from 'vite'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto Mono',
+            weights: [400, 700],
+          },
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
+      },
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})