@tower_74/cms-app 0.1.0

package/src/components/ui/sidebar/SidebarProvider.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'radix-vue';
+import { computed, ref, type HTMLAttributes, type Ref } from 'vue';
+import {
+    SIDEBAR_COOKIE_MAX_AGE,
+    SIDEBAR_COOKIE_NAME,
+    SIDEBAR_KEYBOARD_SHORTCUT,
+    SIDEBAR_WIDTH,
+    SIDEBAR_WIDTH_ICON,
+    provideSidebarContext,
+} from './utils';
+
+const props = withDefaults(
+    defineProps<{
+        defaultOpen?: boolean;
+        open?: boolean;
+        class?: HTMLAttributes['class'];
+    }>(),
+    {
+        defaultOpen: true,
+        open: undefined,
+    },
+);
+
+const emits = defineEmits<{
+    'update:open': [open: boolean];
+}>();
+
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
+
+const open = useVModel(props, 'open', emits, {
+    defaultValue: props.defaultOpen ?? false,
+    passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+    open.value = value; // emits('update:open', value)
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+
+function setOpenMobile(value: boolean) {
+    openMobile.value = value;
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+    return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        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 = computed(() => (open.value ? 'expanded' : 'collapsed'));
+
+provideSidebarContext({
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar,
+});
+</script>
+
+<template>
+    <TooltipProvider :delay-duration="0">
+        <div
+            :style="{
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+            }"
+            :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+        >
+            <slot />
+        </div>
+    </TooltipProvider>
+</template>

package/src/components/ui/sidebar/SidebarRail.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+import { useSidebar } from './utils';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+    <button
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        :tabindex="-1"
+        title="Toggle Sidebar"
+        :class="
+            cn(
+                'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+                '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+                props.class,
+            )
+        "
+        @click="toggleSidebar"
+    >
+        <slot />
+    </button>
+</template>

package/src/components/ui/sidebar/SidebarSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Separator from '@/components/ui/separator/Separator.vue';
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <Separator data-sidebar="separator" :class="cn('mx-2 w-auto bg-sidebar-border', props.class)">
+        <slot />
+    </Separator>
+</template>

package/src/components/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue';
+import { cn } from '@/lib/utils';
+import { PanelLeft } from 'lucide-vue-next';
+import type { HTMLAttributes } from 'vue';
+import { useSidebar } from './utils';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+    <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('h-7 w-7', props.class)" @click="toggleSidebar">
+        <PanelLeft />
+        <span class="sr-only">Toggle Sidebar</span>
+    </Button>
+</template>

package/src/components/ui/sidebar/index.ts

@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+
+export { useSidebar } from './utils';
+
+export const sidebarMenuButtonVariants = cva(
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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',
+        },
+    },
+);
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;

package/src/components/ui/sidebar/utils.ts

@@ -0,0 +1,19 @@
+import { createContext } from 'radix-vue';
+import type { ComputedRef, Ref } from 'vue';
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+    state: ComputedRef<'expanded' | 'collapsed'>;
+    open: Ref<boolean>;
+    setOpen: (value: boolean) => void;
+    isMobile: Ref<boolean>;
+    openMobile: Ref<boolean>;
+    setOpenMobile: (value: boolean) => void;
+    toggleSidebar: () => void;
+}>('Sidebar');

package/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+interface SkeletonProps {
+    class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+    <div :class="cn('animate-pulse rounded-md bg-accent', props.class)" />
+</template>

package/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue';

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipRoot, useForwardPropsEmits, type TooltipRootEmits, type TooltipRootProps } from 'radix-vue';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <TooltipRoot v-bind="forwarded">
+        <slot />
+    </TooltipRoot>
+</template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { TooltipContent, TooltipPortal, useForwardPropsEmits, type TooltipContentEmits, type TooltipContentProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+    sideOffset: 4,
+});
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <TooltipPortal>
+        <TooltipContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+        </TooltipContent>
+    </TooltipPortal>
+</template>

package/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'radix-vue';
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+    <TooltipProvider v-bind="props">
+        <slot />
+    </TooltipProvider>
+</template>

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue';
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+    <TooltipTrigger v-bind="props">
+        <slot />
+    </TooltipTrigger>
+</template>

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';

package/src/composables/useAppearance.ts

@@ -0,0 +1,53 @@
+import { onMounted, ref } from 'vue';
+
+type Appearance = 'light' | 'dark' | 'system';
+
+export function updateTheme(value: Appearance) {
+    if (value === 'system') {
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.documentElement.classList.toggle('dark', systemTheme === 'dark');
+    } else {
+        document.documentElement.classList.toggle('dark', value === 'dark');
+    }
+}
+
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+const handleSystemThemeChange = () => {
+    const currentAppearance = localStorage.getItem('appearance') as Appearance | null;
+    updateTheme(currentAppearance || 'system');
+};
+
+export function initializeTheme() {
+    // Initialize theme from saved preference or default to system...
+    const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
+    updateTheme(savedAppearance || 'system');
+
+    // Set up system theme change listener...
+    mediaQuery.addEventListener('change', handleSystemThemeChange);
+}
+
+export function useAppearance() {
+    const appearance = ref<Appearance>('system');
+
+    onMounted(() => {
+        initializeTheme();
+
+        const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
+
+        if (savedAppearance) {
+            appearance.value = savedAppearance;
+        }
+    });
+
+    function updateAppearance(value: Appearance) {
+        appearance.value = value;
+        localStorage.setItem('appearance', value);
+        updateTheme(value);
+    }
+
+    return {
+        appearance,
+        updateAppearance,
+    };
+}

package/src/composables/useInitials.ts

@@ -0,0 +1,14 @@
+export function getInitials(fullName?: string): string {
+    if (!fullName) return '';
+
+    const names = fullName.trim().split(' ');
+
+    if (names.length === 0) return '';
+    if (names.length === 1) return names[0].charAt(0).toUpperCase();
+
+    return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();
+}
+
+export function useInitials() {
+    return { getInitials };
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import type { DefineComponent } from 'vue';
+import { cmsPages } from './pages';
+
+export { initializeTheme } from './composables/useAppearance';
+export { cmsPages };
+
+type PageGlob = Record<string, () => Promise<unknown>>;
+
+/**
+ * Resolve an Inertia page by name, preferring a client site's own page of the same
+ * name over the one shipped by the CMS app shell (ADR-0023). `localPages` is the host
+ * app's `import.meta.glob('./pages/**\/*.vue')` and may be empty. Both globs produce
+ * `./pages/Name.vue` keys, so spreading local on top lets a client override any page
+ * by dropping a same-named file into its own `resources/js/pages`.
+ */
+export function resolveCmsPage(name: string, localPages: PageGlob = {}) {
+    return resolvePageComponent(`./pages/${name}.vue`, {
+        ...cmsPages,
+        ...localPages,
+    } as Record<string, () => Promise<DefineComponent>>);
+}

package/src/layouts/AdminLayout.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import AppContent from '@/components/AppContent.vue';
+import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import AppShell from '@/components/AppShell.vue';
+import AuthBar from '@/components/AuthBar.vue';
+import NavUser from '@/components/NavUser.vue';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarTrigger,
+} from '@/components/ui/sidebar';
+import { Link, usePage } from '@inertiajs/vue3';
+import {
+    FileStack,
+    FileText,
+    Folder,
+    Image,
+    Inbox,
+    LayoutGrid,
+    ListOrdered,
+    Menu,
+    Paintbrush,
+    Settings,
+    ShoppingBag,
+    Tag,
+    Users,
+} from 'lucide-vue-next';
+import { type Component, computed, ref, watch } from 'vue';
+
+interface NavItem {
+    label: string;
+    href: string;
+    icon: Component;
+    permission?: string;
+}
+
+// Full CMS nav. Items with a `permission` are hidden unless the shared ability map allows them,
+// so every user sees only what their role grants (super-admin sees all via the gate bypass).
+const nav: NavItem[] = [
+    { label: 'Dashboard', href: '/dashboard', icon: LayoutGrid },
+    { label: 'Posts', href: '/admin/content/post', icon: FileText, permission: 'posts' },
+    { label: 'Pages', href: '/admin/content/page', icon: FileStack, permission: 'pages' },
+    { label: 'Categories', href: '/admin/taxonomy/category', icon: Folder, permission: 'taxonomy' },
+    { label: 'Tags', href: '/admin/taxonomy/post_tag', icon: Tag, permission: 'taxonomy' },
+    { label: 'Media', href: '/admin/media', icon: Image, permission: 'media' },
+    { label: 'Forms', href: '/admin/forms', icon: Inbox, permission: 'forms' },
+    { label: 'Products', href: '/admin/commerce/products', icon: ShoppingBag, permission: 'products' },
+    { label: 'Orders', href: '/admin/commerce/orders', icon: ListOrdered, permission: 'orders' },
+    { label: 'Menus', href: '/admin/menus', icon: Menu, permission: 'menus' },
+    { label: 'Users', href: '/admin/users', icon: Users, permission: 'users' },
+    { label: 'Theme', href: '/admin/appearance/theme', icon: Paintbrush, permission: 'theme' },
+    { label: 'Widgets', href: '/admin/appearance/widgets', icon: LayoutGrid, permission: 'widgets' },
+    { label: 'Settings', href: '/admin/settings', icon: Settings, permission: 'settings' },
+];
+
+const page = usePage();
+const url = computed(() => page.url);
+const site = computed(
+    () =>
+        (page.props.site as { name: string; logo: string | null; showName: boolean } | undefined) ?? {
+            name: 'Dashboard',
+            logo: null,
+            showName: false,
+        },
+);
+// Name shows whenever there's no logo, or the logo is configured to sit beside the name.
+const showName = computed(() => !site.value.logo || site.value.showName);
+const can = computed(() => (page.props.auth as { can?: Record<string, boolean> } | undefined)?.can ?? {});
+const visibleNav = computed(() => nav.filter((item) => !item.permission || can.value[item.permission]));
+
+const isActive = (href: string) => (href === '/dashboard' ? url.value === '/dashboard' : url.value.startsWith(href));
+
+// Transient success toast driven by flash data.
+const flashSuccess = computed(() => (page.props.flash as { success?: string } | undefined)?.success);
+const showToast = ref(false);
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+watch(
+    flashSuccess,
+    (value) => {
+        if (value && typeof window !== 'undefined') {
+            showToast.value = true;
+            clearTimeout(timer);
+            timer = setTimeout(() => (showToast.value = false), 3500);
+        }
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <AppShell variant="sidebar">
+        <!-- Authenticated admin bar (WordPress-style): full-width row above the whole shell. -->
+        <template #topbar>
+            <AuthBar primary-label="View site" primary-href="/" primary-kind="site" />
+        </template>
+
+        <!-- Offset the fixed sidebar down by the 2rem bar so it sits below it, not under it. -->
+        <Sidebar collapsible="icon" variant="inset" class="top-8 h-[calc(100svh-2rem)]">
+            <SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" as-child>
+                            <Link href="/dashboard">
+                                <!-- Icon square: the logo if uploaded, otherwise the lettermark. -->
+                                <div
+                                    class="flex aspect-square size-8 items-center justify-center overflow-hidden rounded-md"
+                                    :class="site.logo ? 'bg-sidebar-accent' : 'bg-sidebar-primary text-sidebar-primary-foreground'"
+                                >
+                                    <img v-if="site.logo" :src="site.logo" :alt="site.name" class="size-full object-contain" />
+                                    <AppLogoIcon v-else class="size-5 fill-current text-white dark:text-black" />
+                                </div>
+                                <!-- Name to the right: always without a logo; with a logo only when enabled. -->
+                                <div v-if="showName" class="ml-1 grid flex-1 text-left text-sm">
+                                    <span class="truncate font-semibold leading-tight">{{ site.name }}</span>
+                                </div>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+
+            <SidebarContent>
+                <SidebarGroup class="px-2 py-0">
+                    <SidebarGroupLabel>Manage</SidebarGroupLabel>
+                    <SidebarMenu>
+                        <SidebarMenuItem v-for="item in visibleNav" :key="item.href">
+                            <SidebarMenuButton as-child :is-active="isActive(item.href)" :tooltip="item.label">
+                                <Link :href="item.href">
+                                    <component :is="item.icon" />
+                                    <span>{{ item.label }}</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </SidebarGroup>
+            </SidebarContent>
+
+            <SidebarFooter>
+                <NavUser />
+            </SidebarFooter>
+        </Sidebar>
+
+        <AppContent variant="sidebar" class="min-h-0 peer-data-[variant=inset]:min-h-0">
+            <header class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6">
+                <SidebarTrigger class="-ml-1 text-foreground" />
+                <h1 class="text-base font-medium text-foreground"><slot name="title">Dashboard</slot></h1>
+            </header>
+
+            <div class="flex-1 p-6">
+                <slot />
+            </div>
+        </AppContent>
+
+        <div
+            v-if="showToast"
+            class="fixed right-4 top-4 z-50 flex items-center gap-3 rounded-md bg-foreground px-4 py-2 text-sm text-background shadow-lg"
+        >
+            <span>{{ flashSuccess }}</span>
+            <button class="opacity-70 transition-opacity hover:opacity-100" @click="showToast = false">✕</button>
+        </div>
+    </AppShell>
+</template>

package/src/layouts/AuthLayout.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
+
+defineProps<{
+    title?: string;
+    description?: string;
+}>();
+</script>
+
+<template>
+    <AuthLayout :title="title" :description="description">
+        <slot />
+    </AuthLayout>
+</template>