@polymarbot/nuxt-layer-shadcn-ui 0.1.2 → 0.1.4

package/app/assets/styles/colors.css

@@ -2,13 +2,13 @@
 /* Reference: https://www.shadcn-vue.com/themes */
 
 :root {
-  /* Background scale — base / surface / muted / accent */
-  --background: oklch(1 0 0);
-  --background-surface: oklch(0.98 0 0);
+  /* Background */
+  --background: oklch(0.98 0 0);
+  --background-surface: oklch(1 0 0);
   --background-muted: oklch(0.95 0 0);
   --background-accent: oklch(0.93 0 0);
 
-  /* Foreground scale — base / muted / accent */
+  /* Foreground */
   --foreground: oklch(0.145 0 0);
   --foreground-muted: oklch(0.556 0 0);
   --foreground-accent: oklch(0.35 0 0);
@@ -22,7 +22,7 @@
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
 
-  /* Semantic status */
+  /* Status */
   --status-foreground: oklch(0.985 0 0);
   --success: oklch(0.58 0.17 163.225);
   --info: oklch(0.58 0.15 221.723);
@@ -32,13 +32,14 @@
 }
 
 .dark {
-  /* Background scale */
+  /* Background — muted/accent go brighter than surface here; they're an
+     interaction axis, not a deeper elevation level than cards. */
   --background: oklch(0.12 0 0);
   --background-surface: oklch(0.18 0 0);
   --background-muted: oklch(0.25 0 0);
   --background-accent: oklch(0.3 0 0);
 
-  /* Foreground scale */
+  /* Foreground */
   --foreground: oklch(0.985 0 0);
   --foreground-muted: oklch(0.708 0 0);
   --foreground-accent: oklch(0.85 0 0);
@@ -52,7 +53,7 @@
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.439 0 0);
 
-  /* Semantic status */
+  /* Status */
   --status-foreground: oklch(0.145 0 0);
   --success: oklch(0.696 0.17 162.48);
   --info: oklch(0.685 0.121 220.7);
@@ -67,10 +68,10 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
 
-  /* Components — surface elevation */
-  --color-card: var(--background);
+  /* Components */
+  --color-card: var(--background-surface);
   --color-card-foreground: var(--foreground);
-  --color-popover: var(--background);
+  --color-popover: var(--background-surface);
   --color-popover-foreground: var(--foreground);
 
   /* Brand */
@@ -85,24 +86,13 @@
   --color-accent: var(--background-accent);
   --color-accent-foreground: var(--foreground-accent);
   --color-destructive: var(--danger);
-  --color-destructive-foreground: var(--status-foreground);
 
   /* Form & Border */
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
 
-  /* Sidebar — inherits from main theme */
-  --color-sidebar: var(--background-surface);
-  --color-sidebar-foreground: var(--foreground);
-  --color-sidebar-primary: var(--primary);
-  --color-sidebar-primary-foreground: var(--primary-foreground);
-  --color-sidebar-accent: var(--background-accent);
-  --color-sidebar-accent-foreground: var(--foreground-accent);
-  --color-sidebar-border: var(--border);
-  --color-sidebar-ring: var(--ring);
-
-  /* Semantic status */
+  /* Status */
   --color-success: var(--success);
   --color-success-foreground: var(--status-foreground);
   --color-info: var(--info);
@@ -113,4 +103,14 @@
   --color-warn-foreground: var(--status-foreground);
   --color-danger: var(--danger);
   --color-danger-foreground: var(--status-foreground);
-}
+
+  /* Sidebar */
+  --color-sidebar: var(--background);
+  --color-sidebar-foreground: var(--foreground);
+  --color-sidebar-primary: var(--primary);
+  --color-sidebar-primary-foreground: var(--primary-foreground);
+  --color-sidebar-accent: var(--background-accent);
+  --color-sidebar-accent-foreground: var(--foreground-accent);
+  --color-sidebar-border: var(--border);
+  --color-sidebar-ring: var(--ring);
+}

package/app/assets/styles/globals.css

@@ -2,11 +2,9 @@
 @import 'tw-animate-css';
 @import './colors.css';
 @import './utilities.css';
-@import './animate.css';
-@import './transition.css';
 
-/* Ensure Tailwind scans all source files in this app */
-@source '../../../..';
+/* Ensure Tailwind scans the layer's own source files */
+@source '../../..';
 
 /* Dark mode configuration for Tailwind v4 */
 @custom-variant dark (&:where(.dark, .dark *));
@@ -14,30 +12,5 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    box-sizing: border-box;
-  }
-  html {
-    font-size: 16px;
-  }
-  body {
-    @apply bg-background text-foreground;
-    margin: 0;
-  }
-}
-
-/* Prevent accidental text selection on touch devices */
-@media (pointer: coarse) {
-  body {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-  input,
-  textarea,
-  [contenteditable='true'],
-  pre,
-  code,
-  .selectable {
-    -webkit-user-select: text;
-    user-select: text;
   }
 }

package/app/assets/styles/index.stories.ts

@@ -6,20 +6,23 @@ type Swatch = {
   bg: string
   fg?: string
   border?: boolean
+  span?: string
 }
 
 type Group = {
   title: string
   description?: string
   swatches: Swatch[]
+  cols?: string
 }
 
 const groups: Group[] = [
   {
     title: 'Surface',
-    description: 'Page, card and popover backgrounds — pair each with its matching foreground.',
+    description: 'Two independent axes — elevation (background / card / popover) and interaction (muted / accent).',
+    cols: 'grid-cols-1 sm:grid-cols-2',
     swatches: [
-      { name: 'background', token: '--color-background', bg: 'bg-background', fg: 'text-foreground', border: true },
+      { name: 'background', token: '--color-background', bg: 'bg-background', fg: 'text-foreground', border: true, span: 'col-span-2' },
       { name: 'card', token: '--color-card', bg: 'bg-card', fg: 'text-card-foreground', border: true },
       { name: 'popover', token: '--color-popover', bg: 'bg-popover', fg: 'text-popover-foreground', border: true },
       { name: 'muted', token: '--color-muted', bg: 'bg-muted', fg: 'text-muted-foreground' },
@@ -43,7 +46,6 @@ const groups: Group[] = [
       { name: 'help', token: '--color-help', bg: 'bg-help', fg: 'text-help-foreground' },
       { name: 'warn', token: '--color-warn', bg: 'bg-warn', fg: 'text-warn-foreground' },
       { name: 'danger', token: '--color-danger', bg: 'bg-danger', fg: 'text-danger-foreground' },
-      { name: 'destructive', token: '--color-destructive', bg: 'bg-destructive', fg: 'text-destructive-foreground' },
     ],
   },
   {
@@ -94,7 +96,7 @@ export const Palette: Story = {
             <h3 class="text-lg font-medium">{{ group.title }}</h3>
             <p v-if="group.description" class="mt-1 text-sm text-muted-foreground">{{ group.description }}</p>
           </header>
-          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <div :class="['grid gap-3', group.cols || 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4']">
             <div
               v-for="swatch in group.swatches"
               :key="swatch.name"
@@ -103,6 +105,7 @@ export const Palette: Story = {
                 swatch.bg,
                 swatch.fg,
                 swatch.border ? 'border border-border' : '',
+                swatch.span,
               ]"
             >
               <span class="font-mono text-xs font-medium">{{ swatch.name }}</span>
@@ -157,7 +160,7 @@ export const LightVsDark: Story = {
     },
   },
   render: () => ({
-    setup: () => ({ groups }),
+    setup: () => ({ groups: groups.filter(g => g.title !== 'Sidebar') }),
     template: `
       <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
         <div class="rounded-lg border border-border bg-background p-6">
@@ -174,6 +177,7 @@ export const LightVsDark: Story = {
                     swatch.bg,
                     swatch.fg || 'text-foreground',
                     swatch.border ? 'border-border' : 'border-transparent',
+                    swatch.span,
                   ]"
                 >
                   <span class="font-mono text-xs">{{ swatch.name }}</span>
@@ -197,6 +201,7 @@ export const LightVsDark: Story = {
                     swatch.bg,
                     swatch.fg || 'text-foreground',
                     swatch.border ? 'border-border' : 'border-transparent',
+                    swatch.span,
                   ]"
                 >
                   <span class="font-mono text-xs">{{ swatch.name }}</span>

package/app/assets/styles/utilities.css

@@ -21,6 +21,3 @@
     to { height: 0; }
   }
 }
-
-/* Safe area utilities */
-@utility pb-safe { padding-bottom: env(safe-area-inset-bottom); }

package/app/components/ui/AdminLayout/Navbar.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { SidebarTrigger } from '../../shadcn/sidebar'
+</script>
+
+<template>
+  <header
+    class="
+      flex h-14 shrink-0 items-center gap-2 border-b border-sidebar-border
+      bg-card px-4 text-card-foreground transition-[width,height] ease-linear
+      group-has-data-[collapsible=icon]/sidebar-wrapper:h-12
+    "
+  >
+    <SidebarTrigger class="-ml-1" />
+    <Divider
+      type="vertical"
+      class="mr-2 h-4!"
+    />
+    <div class="flex flex-1 items-center">
+      <slot />
+    </div>
+  </header>
+</template>

package/app/components/ui/AdminLayout/SidebarDropdown.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { AdminLayoutSidebarDropdownProfile, AdminLayoutSidebarDropdownMenuItem } from './types'
+import { ChevronsUpDown } from 'lucide-vue-next'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '../../shadcn/sidebar'
+
+const props = defineProps<{
+  profile?: AdminLayoutSidebarDropdownProfile | null
+  menuItems?: AdminLayoutSidebarDropdownMenuItem[]
+}>()
+
+const { isMobile } = useSidebar()
+
+// Transform 'profile' items to Dropdown's custom-label items with slot 'profile'.
+// Other items pass through unchanged.
+const dropdownItems = computed<DropdownItem[]>(() =>
+  (props.menuItems ?? []).map(item => {
+    if (item.type === 'profile') {
+      const { type: _, ...rest } = item
+      return { type: 'custom-label', slot: 'profile', ...rest }
+    }
+    return item
+  }),
+)
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <Dropdown
+        :menus="dropdownItems"
+        trigger="click"
+        :side="isMobile ? 'bottom' : 'right'"
+        align="start"
+        :sideOffset="4"
+        class="min-w-56 rounded-lg"
+      >
+        <SidebarMenuButton
+          size="lg"
+          class="
+            data-[state=open]:bg-sidebar-accent
+            data-[state=open]:text-sidebar-accent-foreground
+          "
+        >
+          <Avatar
+            :image="profile?.icon ? undefined : (profile?.image || undefined)"
+            :fallbackLabel="profile?.icon ? undefined : profile?.title?.charAt(0)?.toUpperCase()"
+            shape="circle"
+            class="size-8"
+          >
+            <Icon
+              v-if="profile?.icon"
+              :name="profile.icon"
+              class="size-4"
+            />
+          </Avatar>
+          <div class="grid flex-1 text-left text-sm/tight">
+            <span class="truncate font-medium">
+              {{ profile?.title }}
+            </span>
+            <span class="truncate text-xs">
+              {{ profile?.subtitle }}
+            </span>
+          </div>
+          <ChevronsUpDown class="ml-auto size-4" />
+        </SidebarMenuButton>
+
+        <template #profile="{ item }">
+          <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <Avatar
+              :image="item.icon ? undefined : (item.image || undefined)"
+              :fallbackLabel="item.icon ? undefined : item.title?.charAt(0)?.toUpperCase()"
+              shape="circle"
+              class="size-8"
+            >
+              <Icon
+                v-if="item.icon"
+                :name="item.icon"
+                class="size-4"
+              />
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm/tight">
+              <span class="truncate font-semibold">
+                {{ item.title }}
+              </span>
+              <span
+                v-if="item.subtitle"
+                class="truncate text-xs"
+              >
+                {{ item.subtitle }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </Dropdown>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>

package/app/components/ui/AdminLayout/SidebarMenus.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import type { AdminLayoutSidebarMenuItem } from './types'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../../shadcn/collapsible'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../shadcn/dropdown-menu'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '../../shadcn/sidebar'
+
+const props = defineProps<{
+  menus: AdminLayoutSidebarMenuItem[]
+}>()
+
+const route = useRoute()
+
+const isExternal = (href: string) => /^https?:\/\//.test(href)
+
+const navGroups = computed(() => {
+  const groups: { label?: string, items: AdminLayoutSidebarMenuItem[] }[] = []
+  const groupMap = new Map<string | undefined, AdminLayoutSidebarMenuItem[]>()
+
+  for (const item of props.menus) {
+    const key = item.group
+    if (!groupMap.has(key)) {
+      const items: AdminLayoutSidebarMenuItem[] = []
+      groupMap.set(key, items)
+      groups.push({ label: key, items })
+    }
+    groupMap.get(key)!.push(item)
+  }
+
+  return groups
+})
+
+function isActive (href?: string): boolean {
+  if (!href || isExternal(href)) return false
+  return route.path.startsWith(href)
+}
+
+function isLink (item: AdminLayoutSidebarMenuItem): boolean {
+  return !!item.href
+}
+
+function hasActiveChild (item: AdminLayoutSidebarMenuItem): boolean {
+  return item.children?.some(child => isActive(child.href)) ?? false
+}
+</script>
+
+<template>
+  <SidebarGroup
+    v-for="(group, groupIndex) in navGroups"
+    :key="groupIndex"
+  >
+    <SidebarGroupLabel v-if="group.label">
+      {{ group.label }}
+    </SidebarGroupLabel>
+    <SidebarMenu>
+      <template
+        v-for="item in group.items"
+        :key="item.label"
+      >
+        <!-- Collapsible item with children -->
+        <Collapsible
+          v-if="item.children"
+          asChild
+          :defaultOpen="item.expanded ?? hasActiveChild(item)"
+          class="group/collapsible"
+        >
+          <SidebarMenuItem>
+            <CollapsibleTrigger asChild>
+              <SidebarMenuButton :tooltip="item.label">
+                <Icon
+                  v-if="item.icon"
+                  :name="item.icon"
+                />
+                <span>{{ item.label }}</span>
+                <Icon
+                  name="chevron-right"
+                  class="
+                    ml-auto transition-transform duration-200
+                    group-data-[state=open]/collapsible:rotate-90
+                  "
+                />
+              </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem
+                  v-for="child in item.children"
+                  :key="child.label"
+                >
+                  <SidebarMenuSubButton
+                    :asChild="isLink(child)"
+                    :isActive="isActive(child.href)"
+                  >
+                    <WebLink
+                      v-if="isLink(child)"
+                      :href="child.href"
+                      unstyled
+                    >
+                      <span>{{ child.label }}</span>
+                    </WebLink>
+                    <span
+                      v-else
+                      @click="child.command?.()"
+                    >
+                      {{ child.label }}
+                    </span>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </SidebarMenuItem>
+        </Collapsible>
+
+        <!-- Item with actions dropdown -->
+        <SidebarMenuItem v-else-if="item.actions">
+          <SidebarMenuButton
+            :asChild="isLink(item)"
+            :isActive="isActive(item.href)"
+            :tooltip="item.label"
+            @click="!isLink(item) ? item.command?.() : undefined"
+          >
+            <WebLink
+              v-if="isLink(item)"
+              :href="item.href"
+              :externalIcon="false"
+              unstyled
+            >
+              <Icon
+                v-if="item.icon"
+                :name="item.icon"
+              />
+              <span>{{ item.label }}</span>
+              <Icon
+                v-if="isExternal(item.href!)"
+                name="external-link"
+                class="ml-auto size-3.5 text-sidebar-foreground/50"
+              />
+            </WebLink>
+            <template v-else>
+              <Icon
+                v-if="item.icon"
+                :name="item.icon"
+              />
+              <span>{{ item.label }}</span>
+            </template>
+          </SidebarMenuButton>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuAction showOnHover>
+                <Icon name="ellipsis" />
+              </SidebarMenuAction>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              side="right"
+              align="start"
+              class="min-w-48 rounded-lg"
+            >
+              <DropdownMenuItem
+                v-for="action in item.actions"
+                :key="action.label"
+                @click="action.href ? undefined : action.command?.()"
+              >
+                <WebLink
+                  v-if="isLink(action)"
+                  :href="action.href"
+                  unstyled
+                  class="flex items-center gap-2"
+                >
+                  <Icon
+                    v-if="action.icon"
+                    :name="action.icon"
+                    class="text-muted-foreground"
+                  />
+                  <span>{{ action.label }}</span>
+                </WebLink>
+                <template v-else>
+                  <Icon
+                    v-if="action.icon"
+                    :name="action.icon"
+                    class="text-muted-foreground"
+                  />
+                  <span>{{ action.label }}</span>
+                </template>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+
+        <!-- Simple item -->
+        <SidebarMenuItem v-else>
+          <SidebarMenuButton
+            :asChild="isLink(item)"
+            :isActive="isActive(item.href)"
+            :tooltip="item.label"
+            @click="!isLink(item) ? item.command?.() : undefined"
+          >
+            <WebLink
+              v-if="isLink(item)"
+              :href="item.href"
+              :externalIcon="false"
+              unstyled
+            >
+              <Icon
+                v-if="item.icon"
+                :name="item.icon"
+              />
+              <span>{{ item.label }}</span>
+              <Icon
+                v-if="isExternal(item.href!)"
+                name="external-link"
+                class="ml-auto size-3.5 text-sidebar-foreground/50"
+              />
+            </WebLink>
+            <template v-else>
+              <Icon
+                v-if="item.icon"
+                :name="item.icon"
+              />
+              <span>{{ item.label }}</span>
+            </template>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </template>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>

package/app/components/ui/AdminLayout/index.stories.ts

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { AdminLayoutSidebarDropdownProfile, AdminLayoutSidebarMenuItem, AdminLayoutSidebarDropdownMenuItem } from './types'
+import AdminLayout from './index.vue'
+import Avatar from '../Avatar/index.vue'
+import Breadcrumb from '../Breadcrumb/index.vue'
+import Button from '../Button/index.vue'
+import Card from '../Card/index.vue'
+
+const menus: AdminLayoutSidebarMenuItem[] = [
+  {
+    label: 'Dashboard',
+    icon: 'layout-dashboard',
+    href: '#',
+  },
+  {
+    label: 'Inbox',
+    icon: 'inbox',
+    href: '#inbox',
+  },
+  {
+    label: 'Documentation',
+    icon: 'book-open',
+    group: 'Platform',
+    expanded: true,
+    children: [
+      { label: 'Introduction', href: '#intro' },
+      { label: 'Get Started', href: '#get-started' },
+      { label: 'Tutorials', href: '#tutorials' },
+    ],
+  },
+  {
+    label: 'Settings',
+    icon: 'settings',
+    group: 'Platform',
+    children: [
+      { label: 'General', href: '#general' },
+      { label: 'Team', href: '#team' },
+      { label: 'Billing', href: '#billing' },
+    ],
+  },
+  {
+    label: 'Design Engineering',
+    icon: 'frame',
+    href: '#design',
+    group: 'Projects',
+    actions: [
+      { label: 'View Project', icon: 'folder', href: '#design' },
+      { label: 'Share Project', icon: 'forward', command: () => {} },
+      { label: 'Delete Project', icon: 'trash-2', command: () => {} },
+    ],
+  },
+  {
+    label: 'Sales & Marketing',
+    icon: 'pie-chart',
+    href: '#sales',
+    group: 'Projects',
+    actions: [
+      { label: 'View Project', icon: 'folder', href: '#sales' },
+      { label: 'Delete Project', icon: 'trash-2', command: () => {} },
+    ],
+  },
+  {
+    label: 'shadcn-vue Docs',
+    icon: 'book-open-text',
+    href: 'https://www.shadcn-vue.com',
+    group: 'Links',
+  },
+  {
+    label: 'Print Page',
+    icon: 'printer',
+    group: 'Links',
+    command: () => {},
+  },
+]
+
+const menuItems: AdminLayoutSidebarDropdownMenuItem[] = [
+  { type: 'profile', title: 'Demo User', subtitle: 'demo@example.com' },
+  { type: 'action', label: 'Account', icon: 'badge-check', command: () => {} },
+  { type: 'action', label: 'Billing', icon: 'credit-card', command: () => {} },
+  { type: 'action', label: 'Notifications', icon: 'bell', command: () => {} },
+  { type: 'separator' },
+  { type: 'action', label: 'Sign Out', icon: 'log-out', command: () => {} },
+]
+
+const profile: AdminLayoutSidebarDropdownProfile = {
+  title: 'Demo User',
+  subtitle: 'demo@example.com',
+}
+
+const meta = {
+  title: 'UI/AdminLayout',
+  component: AdminLayout,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [ 'sidebar', 'floating', 'inset' ],
+    },
+    collapsible: {
+      control: 'select',
+      options: [ 'icon', 'offcanvas', 'none' ],
+    },
+  },
+  args: {
+    menus,
+    footerDropdown: { profile, menuItems },
+    variant: 'sidebar',
+    collapsible: 'icon',
+  },
+  render: args => ({
+    components: { AdminLayout, Avatar, Breadcrumb, Button, Card },
+    setup () {
+      const breadcrumb = [
+        { label: 'Dashboard', href: '#' },
+        { label: 'Overview' },
+      ]
+      return { args, breadcrumb }
+    },
+    template: `
+      <AdminLayout v-bind="args">
+        <template #navbar-left>
+          <Breadcrumb :model="breadcrumb" />
+        </template>
+        <template #navbar-right>
+          <Button variant="ghost" size="icon" icon="search" aria-label="Search" />
+          <Button variant="ghost" size="icon" icon="bell" aria-label="Notifications" />
+          <Avatar label="DU" size="small" />
+        </template>
+
+        <div class="space-y-6 p-6">
+          <div class="flex items-center justify-between">
+            <div>
+              <h1 class="text-2xl font-semibold tracking-tight">Overview</h1>
+              <p class="text-sm text-muted-foreground">Welcome back, here is what is happening today.</p>
+            </div>
+            <Button icon="plus">New Project</Button>
+          </div>
+
+          <div class="grid gap-4 md:grid-cols-3">
+            <Card title="Total Revenue">
+              <div class="text-2xl font-semibold">$45,231.89</div>
+              <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+            </Card>
+            <Card title="Subscriptions">
+              <div class="text-2xl font-semibold">+2,350</div>
+              <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+            </Card>
+            <Card title="Active Users">
+              <div class="text-2xl font-semibold">+12,234</div>
+              <p class="text-xs text-muted-foreground">+19% from last month</p>
+            </Card>
+          </div>
+
+          <Card title="Recent Activity">
+            <ul class="divide-y divide-border text-sm">
+              <li class="flex items-center justify-between py-3">
+                <span>Alice updated the design system</span>
+                <span class="text-xs text-muted-foreground">2 min ago</span>
+              </li>
+              <li class="flex items-center justify-between py-3">
+                <span>Bob deployed v1.4.0 to production</span>
+                <span class="text-xs text-muted-foreground">1 hour ago</span>
+              </li>
+              <li class="flex items-center justify-between py-3">
+                <span>Charlie opened a new issue</span>
+                <span class="text-xs text-muted-foreground">3 hours ago</span>
+              </li>
+            </ul>
+          </Card>
+        </div>
+      </AdminLayout>
+    `,
+  }),
+  decorators: [
+    () => ({
+      template: `
+        <div
+          class="relative h-[700px] overflow-hidden rounded-lg border border-border
+            [&_[data-slot=sidebar]>div:last-child]:absolute!
+            [&_[data-slot=sidebar]>div:last-child]:h-full!"
+        >
+          <story />
+        </div>
+      `,
+    }),
+  ],
+} satisfies Meta<typeof AdminLayout>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Floating: Story = {
+  args: { variant: 'floating' },
+}
+
+export const Inset: Story = {
+  args: { variant: 'inset' },
+}

package/app/components/ui/AdminLayout/index.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { AdminLayoutProps } from './types'
+import Navbar from './Navbar.vue'
+import SidebarDropdown from './SidebarDropdown.vue'
+import SidebarMenus from './SidebarMenus.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+} from '../../shadcn/sidebar'
+
+withDefaults(defineProps<AdminLayoutProps>(), {
+  headerDropdown: undefined,
+  footerDropdown: undefined,
+  variant: 'sidebar',
+  collapsible: 'icon',
+})
+</script>
+
+<template>
+  <!-- Wrap with a real DOM element to avoid Vue <Transition> warning.
+       SidebarProvider's root is reka-ui TooltipProvider (renderless), which
+       Nuxt's layoutTransition cannot animate. `display: contents` keeps
+       layout unaffected. -->
+  <div class="contents">
+    <SidebarProvider>
+      <Sidebar
+        :variant="variant"
+        :collapsible="collapsible"
+      >
+        <SidebarHeader>
+          <slot name="header">
+            <SidebarDropdown
+              v-if="headerDropdown"
+              :profile="headerDropdown.profile"
+              :menuItems="headerDropdown.menuItems"
+            />
+          </slot>
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarMenus :menus="menus" />
+        </SidebarContent>
+
+        <SidebarFooter>
+          <slot name="footer">
+            <SidebarDropdown
+              v-if="footerDropdown"
+              :profile="footerDropdown.profile"
+              :menuItems="footerDropdown.menuItems"
+            />
+          </slot>
+        </SidebarFooter>
+
+        <SidebarRail />
+      </Sidebar>
+
+      <SidebarInset class="min-w-0">
+        <Navbar>
+          <div class="flex flex-1 items-center gap-3">
+            <slot name="navbar-left" />
+          </div>
+          <div class="flex items-center gap-3">
+            <slot name="navbar-right" />
+          </div>
+        </Navbar>
+
+        <div class="flex-1 overflow-auto">
+          <slot />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  </div>
+</template>

package/app/components/ui/AdminLayout/types.ts

@@ -0,0 +1,42 @@
+import type { DropdownItem } from '../Dropdown/types'
+
+export interface AdminLayoutSidebarMenuItem {
+  label: string
+  icon?: string
+  href?: string
+  command?: () => void
+  group?: string
+  expanded?: boolean
+  children?: AdminLayoutSidebarMenuItem[]
+  actions?: AdminLayoutSidebarMenuItem[]
+}
+
+export interface AdminLayoutSidebarDropdownProfile {
+  title?: string
+  subtitle?: string
+  icon?: string
+  image?: string
+}
+
+/**
+ * Menu item for the SidebarDropdown.
+ *
+ * Union of Dropdown's DropdownItem with an extra 'profile' variant that renders
+ * a profile header (avatar + title + subtitle) as a label inside the menu.
+ */
+export type AdminLayoutSidebarDropdownMenuItem
+  = | DropdownItem
+    | ({ type: 'profile' } & AdminLayoutSidebarDropdownProfile)
+
+export interface AdminLayoutSidebarDropdownConfig {
+  profile?: AdminLayoutSidebarDropdownProfile | null
+  menuItems?: AdminLayoutSidebarDropdownMenuItem[]
+}
+
+export interface AdminLayoutProps {
+  menus: AdminLayoutSidebarMenuItem[]
+  headerDropdown?: AdminLayoutSidebarDropdownConfig
+  footerDropdown?: AdminLayoutSidebarDropdownConfig
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+}

package/nuxt.config.ts

@@ -15,11 +15,35 @@ export default defineNuxtConfig({
   // Package is declared as peerDependency so consumers own the version.
   modules: [ '@nuxtjs/i18n' ],
 
-  // Explicit absolute path so the layer's messages load regardless of the
-  // consumer's vueI18n setting (each layer's vueI18n is resolved per-layer
-  // and merged by @nuxtjs/i18n).
+  // Lazy-loaded messages. @nuxtjs/i18n v9+ lazy-loads every locale file by
+  // default; each layer's `langDir` resolves per-layer, so the files under
+  // this layer's directory stay scoped to this layer and are merged with
+  // the consumer's own locale files per matching `code`. `langDir` must be
+  // relative (absolute paths do not survive the build) — v10's default
+  // `restructureDir: 'i18n'` roots resolution at `<layer>/i18n/`.
   i18n: {
-    vueI18n: join(currentDir, 'i18n.config.ts'),
+    langDir: 'messages',
+    locales: [
+      { code: 'ar', file: 'ar.json' },
+      { code: 'de', file: 'de.json' },
+      { code: 'en', file: 'en.json' },
+      { code: 'es', file: 'es.json' },
+      { code: 'fr', file: 'fr.json' },
+      { code: 'hi', file: 'hi.json' },
+      { code: 'id', file: 'id.json' },
+      { code: 'it', file: 'it.json' },
+      { code: 'ja', file: 'ja.json' },
+      { code: 'ko', file: 'ko.json' },
+      { code: 'nl', file: 'nl.json' },
+      { code: 'pl', file: 'pl.json' },
+      { code: 'pt', file: 'pt.json' },
+      { code: 'ru', file: 'ru.json' },
+      { code: 'th', file: 'th.json' },
+      { code: 'tr', file: 'tr.json' },
+      { code: 'vi', file: 'vi.json' },
+      { code: 'zh-CN', file: 'zh-CN.json' },
+      { code: 'zh-TW', file: 'zh-TW.json' },
+    ],
   },
 
   // Register the layer's global stylesheet. Consumers extending this layer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -11,7 +11,6 @@
   "files": [
     "app",
     "i18n",
-    "i18n.config.ts",
     "nuxt.config.ts"
   ],
   "publishConfig": {

package/app/assets/styles/animate.css

@@ -1,71 +0,0 @@
-@keyframes slideIn {
-  from {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes hide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes swipeOut {
-  from {
-    transform: translateX(var(--radix-toast-swipe-end-x));
-  }
-  to {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(4px);
-  }
-}
-
-@keyframes pop {
-  from {
-    transform: scale(0);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@layer utilities {
-  .animate-slideIn {
-    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .animate-hide {
-    animation: hide 100ms ease-in;
-  }
-
-  .animate-swipeOut {
-    animation: swipeOut 100ms ease-out;
-  }
-
-  .animate-shake {
-    animation: shake 0.5s ease-in-out;
-  }
-
-  .animate-pop {
-    animation: pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-}

package/app/assets/styles/transition.css

@@ -1,34 +0,0 @@
-/* Layout transition (fade only) */
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity .2s;
-}
-.layout-enter-from,
-.layout-leave-to {
-  opacity: 0;
-}
-
-/* Page transition */
-.page-enter-active,
-.page-leave-active {
-  transition: all .2s;
-}
-.page-enter-from,
-.page-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* Tab transition */
-.tab-enter-active,
-.tab-leave-active {
-  transition: all .2s;
-}
-.tab-enter-from {
-  opacity: 0;
-  transform: translateX(30px);
-}
-.tab-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}

package/i18n.config.ts

@@ -1,19 +0,0 @@
-/**
- * Vue I18n config loaded by `@nuxtjs/i18n` (configured via `nuxt.config.ts`).
- *
- * Pre-merged messages live in `i18n/messages/<locale>.json` (generated by
- * `pnpm i18n:build`). This file auto-loads every JSON in that directory so
- * adding a new language file "just works" without touching this config.
- *
- * Consumers that extend this Nuxt layer inherit these messages; their own
- * translations are merged on top by `@nuxtjs/i18n`.
- */
-const files = import.meta.glob('./i18n/messages/*.json', { eager: true, import: 'default' })
-
-const messages: Record<string, unknown> = {}
-for (const [ filepath, data ] of Object.entries(files)) {
-  const code = filepath.split('/').pop()!.replace('.json', '')
-  messages[code] = data
-}
-
-export default defineI18nConfig(() => ({ messages }))