added media, mutation events, agent instructions

resources/js/layouts/auth/AuthSimpleLayout.vue

@@ -10,28 +10,19 @@ defineProps<{
 </script>
 
 <template>
-    <div
-        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
-    >
-        <div class="w-full max-w-sm">
-            <div class="flex flex-col gap-8">
-                <div class="flex flex-col items-center gap-4">
-                    <Link
-                        :href="home()"
-                        class="flex flex-col items-center gap-2 font-medium"
-                    >
-                        <div
-                            class="mb-1 flex h-9 w-9 items-center justify-center rounded-md"
-                        >
-                            <AppLogoIcon
-                                class="size-9 fill-current text-[var(--foreground)] dark:text-white"
-                            />
+    <div class="auth-layout">
+        <div class="auth-layout__container">
+            <div class="auth-layout__inner">
+                <div class="auth-layout__header">
+                    <Link :href="home()" class="auth-layout__logo-link">
+                        <div class="auth-layout__logo-box">
+                            <AppLogoIcon class="auth-layout__logo" />
                         </div>
                         <span class="sr-only">{{ title }}</span>
                     </Link>
-                    <div class="space-y-2 text-center">
-                        <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">
+                    <div class="auth-layout__title-box">
+                        <h1 class="auth-layout__title">{{ title }}</h1>
+                        <p class="auth-layout__description">
                             {{ description }}
                         </p>
                     </div>
@@ -41,3 +32,47 @@ defineProps<{
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.auth-layout {
+    @apply flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10;
+}
+
+.auth-layout__container {
+    @apply w-full max-w-sm;
+}
+
+.auth-layout__inner {
+    @apply flex flex-col gap-8;
+}
+
+.auth-layout__header {
+    @apply flex flex-col items-center gap-4;
+}
+
+.auth-layout__logo-link {
+    @apply flex flex-col items-center gap-2 font-medium;
+}
+
+.auth-layout__logo-box {
+    @apply mb-1 flex h-9 w-9 items-center justify-center rounded-md;
+}
+
+.auth-layout__logo {
+    @apply size-9 fill-current text-[var(--foreground)] dark:text-white;
+}
+
+.auth-layout__title-box {
+    @apply space-y-2 text-center;
+}
+
+.auth-layout__title {
+    @apply text-xl font-medium;
+}
+
+.auth-layout__description {
+    @apply text-center text-sm text-muted-foreground;
+}
+</style>