@elsapiens/cli 0.1.0 → 0.1.2

package/dist/templates/app/help-topics.ejs

@@ -0,0 +1,135 @@
+import type { HelpTopic } from '@elsapiens/services';
+
+/**
+ * Help topics for the application
+ * These are displayed in the help panel
+ */
+export const helpTopics: HelpTopic[] = [
+  // Getting Started
+  {
+    id: 'getting-started',
+    title: 'Getting Started',
+    summary: 'Learn the basics of using <%= pascalName %>.',
+    category: 'Getting Started',
+    content: `
+      <h3>Welcome to <%= pascalName %>!</h3>
+      <p>This guide will help you get started with the platform and understand its key features.</p>
+
+      <h4>Quick Start</h4>
+      <ol>
+        <li><strong>Dashboard:</strong> Your central hub for monitoring key metrics and recent activity.</li>
+        <li><strong>Settings:</strong> Customize your account and preferences.</li>
+      </ol>
+
+      <h4>Need Help?</h4>
+      <p>Click the help button (?) in the bottom right corner at any time to access this help center.</p>
+    `,
+    showInHelpPanel: true,
+    showInTooltip: false,
+  },
+
+  // Navigation
+  {
+    id: 'navigation',
+    title: 'Navigation',
+    summary: 'Learn how to navigate through the application.',
+    category: 'Getting Started',
+    content: `
+      <h3>Navigating the Application</h3>
+      <p>The application uses a sidebar navigation on the left side of the screen.</p>
+
+      <h4>Main Sections</h4>
+      <ul>
+        <li><strong>Dashboard:</strong> Overview of your workspace with key metrics.</li>
+        <li><strong>Settings:</strong> Account and application settings.</li>
+      </ul>
+
+      <h4>Top Bar</h4>
+      <p>The top bar shows your current context and provides quick access to user-related features.</p>
+    `,
+    showInHelpPanel: true,
+    relatedTopicIds: ['getting-started', 'settings'],
+  },
+
+  // Settings
+  {
+    id: 'settings',
+    title: 'Settings',
+    summary: 'Configure your application preferences.',
+    category: 'Getting Started',
+    content: `
+      <h3>Application Settings</h3>
+      <p>Access settings through the gear icon in the navigation. You can customize:</p>
+
+      <h4>Profile</h4>
+      <p>Update your personal information including name and email.</p>
+
+      <h4>Notifications</h4>
+      <p>Control push notifications and email updates.</p>
+
+      <h4>Appearance</h4>
+      <ul>
+        <li><strong>Theme:</strong> Choose between light, dark, or system theme.</li>
+        <li><strong>Language:</strong> Select your preferred language.</li>
+        <li><strong>Spacing Mode:</strong> Adjust UI density (compact, normal, spacious).</li>
+      </ul>
+
+      <h4>Security</h4>
+      <p>Update your password and manage security settings.</p>
+    `,
+    showInHelpPanel: true,
+    relatedTopicIds: ['navigation'],
+  },
+
+  // Theme
+  {
+    id: 'theme',
+    title: 'Theme & Appearance',
+    summary: 'Customize the look and feel of the application.',
+    category: 'Customization',
+    content: `
+      <h3>Theme & Appearance</h3>
+      <p>Personalize the application to match your preferences.</p>
+
+      <h4>Dark Mode</h4>
+      <p>Toggle dark mode from the Settings page. Dark mode reduces eye strain in low-light conditions.</p>
+
+      <h4>Spacing Mode</h4>
+      <p>Adjust the UI density:</p>
+      <ul>
+        <li><strong>Compact:</strong> Smaller spacing for more content visibility.</li>
+        <li><strong>Normal:</strong> Balanced spacing (default).</li>
+        <li><strong>Spacious:</strong> Larger spacing for improved readability.</li>
+      </ul>
+    `,
+    showInHelpPanel: true,
+    relatedTopicIds: ['settings'],
+  },
+
+  // Keyboard Shortcuts
+  {
+    id: 'shortcuts',
+    title: 'Keyboard Shortcuts',
+    summary: 'Speed up your workflow with keyboard shortcuts.',
+    category: 'Customization',
+    content: `
+      <h3>Keyboard Shortcuts</h3>
+      <p>Use keyboard shortcuts to navigate and perform actions quickly.</p>
+
+      <h4>Global Shortcuts</h4>
+      <ul>
+        <li><kbd>?</kbd> - Open keyboard shortcuts panel</li>
+        <li><kbd>Ctrl/Cmd + K</kbd> - Open command palette</li>
+        <li><kbd>Esc</kbd> - Close modals and panels</li>
+      </ul>
+
+      <h4>Navigation</h4>
+      <ul>
+        <li><kbd>G then D</kbd> - Go to Dashboard</li>
+        <li><kbd>G then S</kbd> - Go to Settings</li>
+      </ul>
+    `,
+    showInHelpPanel: true,
+    relatedTopicIds: ['navigation'],
+  },
+];

package/dist/templates/app/husky-pre-commit.ejs

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# Run tests with coverage check (85% minimum)
+pnpm test:coverage
+
+# Run linting
+pnpm lint

package/dist/templates/app/index-css.ejs

@@ -1,5 +1,540 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+@import '@elsapiens/styles/variables';
+@import '@elsapiens/styles/color-schemes';
+@import '@elsapiens/styles/backgrounds';
+@import '@elsapiens/styles/components';
+
+/**
+ * <%= projectName %> - Main Stylesheet
+ * Primary Brand Color: Wisteria Blue
+ */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Custom styles can be added here */
+@layer base {
+  :root {
+    /* =========================================================================
+     * Semantic Colors - Light Mode (using --wisteria-* from color-schemes.css)
+     * ========================================================================= */
+    --background: 220 30% 98%;
+    --foreground: var(--wisteria-900);
+    --foreground-secondary: var(--wisteria-500);
+
+    --card: 0 0% 100%;
+    --card-foreground: var(--wisteria-900);
+
+    --popover: 0 0% 100%;
+    --popover-foreground: var(--wisteria-900);
+
+    --primary: var(--wisteria-500);
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: var(--wisteria-100);
+    --secondary-foreground: var(--wisteria-800);
+
+    --muted: var(--wisteria-100);
+    --muted-foreground: var(--wisteria-400);
+
+    --accent: var(--wisteria-100);
+    --accent-foreground: var(--wisteria-800);
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: var(--wisteria-200);
+    --input: var(--wisteria-200);
+    --ring: var(--wisteria-500);
+
+    --radius: 0.5rem;
+
+    /* Status colors */
+    --success: 142 71% 45%;
+    --warning: 38 92% 50%;
+    --error: 0 84% 60%;
+    --info: var(--wisteria-500);
+  }
+
+  .dark {
+    --background: var(--wisteria-950);
+    --foreground: var(--wisteria-50);
+    --foreground-secondary: var(--wisteria-400);
+
+    --card: var(--wisteria-900);
+    --card-foreground: var(--wisteria-50);
+
+    --popover: var(--wisteria-900);
+    --popover-foreground: var(--wisteria-50);
+
+    --primary: var(--wisteria-400);
+    --primary-foreground: var(--wisteria-950);
+
+    --secondary: var(--wisteria-800);
+    --secondary-foreground: var(--wisteria-100);
+
+    --muted: var(--wisteria-800);
+    --muted-foreground: var(--wisteria-400);
+
+    --accent: var(--wisteria-800);
+    --accent-foreground: var(--wisteria-100);
+
+    --destructive: 0 62% 50%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: var(--wisteria-700);
+    --input: var(--wisteria-700);
+    --ring: var(--wisteria-400);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    line-height: 1.5;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  /* Focus styles for accessibility */
+  :focus-visible {
+    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
+  }
+
+  /* Monospace for numbers and code */
+  code, kbd, pre, samp, .font-mono {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+  }
+}
+
+@layer components {
+  /* Primary Button */
+  .btn-primary {
+    @apply bg-wisteria-500 text-white px-3 py-2 rounded-md font-medium
+           hover:bg-wisteria-600 active:bg-wisteria-700
+           focus-visible:ring-2 focus-visible:ring-wisteria-500 focus-visible:ring-offset-2
+           disabled:opacity-50 disabled:cursor-not-allowed
+           transition-colors duration-150;
+  }
+
+  /* Secondary Button */
+  .btn-secondary {
+    @apply bg-wisteria-100 text-wisteria-800 px-3 py-2 rounded-md font-medium
+           hover:bg-wisteria-200 active:bg-wisteria-300
+           dark:bg-wisteria-800 dark:text-wisteria-100
+           dark:hover:bg-wisteria-700 dark:active:bg-wisteria-600
+           transition-colors duration-150;
+  }
+
+  /* Ghost Button */
+  .btn-ghost {
+    @apply text-wisteria-600 px-3 py-2 rounded-md font-medium
+           hover:bg-wisteria-100 active:bg-wisteria-200
+           dark:text-wisteria-300 dark:hover:bg-wisteria-800
+           transition-colors duration-150;
+  }
+
+  /* Card */
+  .card {
+    @apply bg-white dark:bg-wisteria-900 rounded-lg shadow-sm
+           border border-wisteria-200 dark:border-wisteria-700
+           overflow-hidden;
+  }
+
+  /* Form Input */
+  .input {
+    @apply w-full px-3 py-2 rounded-md border border-wisteria-200
+           bg-white dark:bg-wisteria-900
+           text-wisteria-900 dark:text-wisteria-50
+           placeholder:text-wisteria-300 dark:placeholder:text-wisteria-500
+           focus:border-wisteria-500 focus:ring-1 focus:ring-wisteria-500
+           disabled:opacity-50 disabled:cursor-not-allowed
+           transition-colors duration-150;
+  }
+
+  /* Label */
+  .label {
+    @apply block text-sm font-medium text-wisteria-800 dark:text-wisteria-200 mb-1;
+  }
+
+  /* Status Badges */
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .badge-draft {
+    @apply bg-wisteria-100 text-wisteria-700 dark:bg-wisteria-800 dark:text-wisteria-300;
+  }
+
+  .badge-success {
+    @apply bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300;
+  }
+
+  .badge-warning {
+    @apply bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300;
+  }
+
+  .badge-error {
+    @apply bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300;
+  }
+
+  /* Skeleton */
+  .skeleton {
+    @apply bg-wisteria-200 dark:bg-wisteria-700 rounded animate-pulse;
+  }
+
+  /* Empty State */
+  .empty-state {
+    @apply flex flex-col items-center justify-center py-12 text-center;
+  }
+
+  .empty-state-icon {
+    @apply w-16 h-16 text-wisteria-300 dark:text-wisteria-600 mb-4;
+  }
+
+  .empty-state-title {
+    @apply text-lg font-medium text-wisteria-700 dark:text-wisteria-300 mb-2;
+  }
+
+  .empty-state-description {
+    @apply text-sm text-wisteria-500 dark:text-wisteria-400 max-w-sm;
+  }
+}
+
+/* Hide scrollbar but keep functionality */
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* =========================================================================
+ * Global Scrollbar Styling
+ * Thin scrollbar with theme-matching colors
+ * ========================================================================= */
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
+}
+
+.dark * {
+  scrollbar-color: hsl(var(--muted-foreground) / 0.5) transparent;
+}
+
+/* Chrome, Safari, Edge */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground) / 0.5);
+}
+
+.dark *::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--muted-foreground) / 0.4);
+}
+
+.dark *::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground) / 0.6);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Hide native scrollbar - for synced scroll containers (Summary, Table) */
+.hide-native-scrollbar {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.hide-native-scrollbar::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+/* Visible scrollbar for custom scrollbars */
+.scrollbar-visible {
+  scrollbar-width: auto;
+  scrollbar-color: hsl(var(--border)) hsl(var(--muted) / 0.3);
+}
+
+.scrollbar-visible::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-track {
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 5px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--border));
+  border-radius: 5px;
+  border: 2px solid hsl(var(--muted) / 0.3);
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground));
+}
+
+/* =========================================================================
+ * Adaptive Layout Spacing System
+ * Uses CSS variables that respond to data-spacing attribute on html element
+ * ========================================================================= */
+
+:root {
+  /* Default (normal) spacing values */
+  --el-layout-gap-xs: 0.25rem;  /* 4px */
+  --el-layout-gap-sm: 0.5rem;   /* 8px */
+  --el-layout-gap-md: 0.75rem;  /* 12px */
+  --el-layout-gap-lg: 1rem;     /* 16px */
+  --el-layout-gap-xl: 1.5rem;   /* 24px */
+  --el-layout-gap-2xl: 2rem;    /* 32px */
+  --el-field-grid-gap: 2.25rem; /* 36px - Between form fields in grid */
+
+  /* Component internal spacing */
+  --el-tabs-padding: 0.25rem;   /* 4px - for switch/tabs pill container */
+  --el-tabs-gap: 0.25rem;       /* 4px - gap between tabs/switches */
+}
+
+/* Compact spacing mode */
+[data-spacing="compact"] {
+  --el-layout-gap-xs: 0.25rem;  /* 4px */
+  --el-layout-gap-sm: 0.5rem;   /* 8px */
+  --el-layout-gap-md: 0.75rem;  /* 12px */
+  --el-layout-gap-lg: 1rem;     /* 16px */
+  --el-layout-gap-xl: 1.5rem;   /* 24px */
+  --el-layout-gap-2xl: 2rem;    /* 32px */
+  --el-field-grid-gap: 1.5rem;  /* 24px - Between form fields in grid */
+
+  /* Component internal spacing - compact */
+  --el-tabs-padding: 0.25rem;   /* 4px */
+  --el-tabs-gap: 0.25rem;       /* 4px */
+}
+
+/* Spacious spacing mode */
+[data-spacing="spacious"] {
+  --el-layout-gap-xs: 0.5rem;   /* 8px */
+  --el-layout-gap-sm: 0.75rem;  /* 12px */
+  --el-layout-gap-md: 1rem;     /* 16px */
+  --el-layout-gap-lg: 1.5rem;   /* 24px */
+  --el-layout-gap-xl: 2rem;     /* 32px */
+  --el-layout-gap-2xl: 3rem;    /* 48px */
+  --el-field-grid-gap: 3rem;    /* 48px - Between form fields in grid */
+
+  /* Component internal spacing - spacious */
+  --el-tabs-padding: 0.375rem;  /* 6px */
+  --el-tabs-gap: 0.375rem;      /* 6px */
+}
+
+/* Gap utilities */
+.el-gap-xs { gap: var(--el-layout-gap-xs); }
+.el-gap-sm { gap: var(--el-layout-gap-sm); }
+.el-gap-md { gap: var(--el-layout-gap-md); }
+.el-gap-lg { gap: var(--el-layout-gap-lg); }
+.el-gap-xl { gap: var(--el-layout-gap-xl); }
+.el-gap-2xl { gap: var(--el-layout-gap-2xl); }
+
+/* Padding utilities - all sides */
+.el-p-xs { padding: var(--el-layout-gap-xs); }
+.el-p-sm { padding: var(--el-layout-gap-sm); }
+.el-p-md { padding: var(--el-layout-gap-md); }
+.el-p-lg { padding: var(--el-layout-gap-lg); }
+.el-p-xl { padding: var(--el-layout-gap-xl); }
+.el-p-2xl { padding: var(--el-layout-gap-2xl); }
+
+/* Padding X (horizontal) */
+.el-px-xs { padding-left: var(--el-layout-gap-xs); padding-right: var(--el-layout-gap-xs); }
+.el-px-sm { padding-left: var(--el-layout-gap-sm); padding-right: var(--el-layout-gap-sm); }
+.el-px-md { padding-left: var(--el-layout-gap-md); padding-right: var(--el-layout-gap-md); }
+.el-px-lg { padding-left: var(--el-layout-gap-lg); padding-right: var(--el-layout-gap-lg); }
+.el-px-xl { padding-left: var(--el-layout-gap-xl); padding-right: var(--el-layout-gap-xl); }
+.el-px-2xl { padding-left: var(--el-layout-gap-2xl); padding-right: var(--el-layout-gap-2xl); }
+
+/* Padding Y (vertical) */
+.el-py-xs { padding-top: var(--el-layout-gap-xs); padding-bottom: var(--el-layout-gap-xs); }
+.el-py-sm { padding-top: var(--el-layout-gap-sm); padding-bottom: var(--el-layout-gap-sm); }
+.el-py-md { padding-top: var(--el-layout-gap-md); padding-bottom: var(--el-layout-gap-md); }
+.el-py-lg { padding-top: var(--el-layout-gap-lg); padding-bottom: var(--el-layout-gap-lg); }
+.el-py-xl { padding-top: var(--el-layout-gap-xl); padding-bottom: var(--el-layout-gap-xl); }
+.el-py-2xl { padding-top: var(--el-layout-gap-2xl); padding-bottom: var(--el-layout-gap-2xl); }
+
+/* Padding Top */
+.el-pt-xs { padding-top: var(--el-layout-gap-xs); }
+.el-pt-sm { padding-top: var(--el-layout-gap-sm); }
+.el-pt-md { padding-top: var(--el-layout-gap-md); }
+.el-pt-lg { padding-top: var(--el-layout-gap-lg); }
+.el-pt-xl { padding-top: var(--el-layout-gap-xl); }
+.el-pt-2xl { padding-top: var(--el-layout-gap-2xl); }
+
+/* Padding Bottom */
+.el-pb-xs { padding-bottom: var(--el-layout-gap-xs); }
+.el-pb-sm { padding-bottom: var(--el-layout-gap-sm); }
+.el-pb-md { padding-bottom: var(--el-layout-gap-md); }
+.el-pb-lg { padding-bottom: var(--el-layout-gap-lg); }
+.el-pb-xl { padding-bottom: var(--el-layout-gap-xl); }
+.el-pb-2xl { padding-bottom: var(--el-layout-gap-2xl); }
+
+/* Padding Left */
+.el-pl-xs { padding-left: var(--el-layout-gap-xs); }
+.el-pl-sm { padding-left: var(--el-layout-gap-sm); }
+.el-pl-md { padding-left: var(--el-layout-gap-md); }
+.el-pl-lg { padding-left: var(--el-layout-gap-lg); }
+.el-pl-xl { padding-left: var(--el-layout-gap-xl); }
+.el-pl-2xl { padding-left: var(--el-layout-gap-2xl); }
+
+/* Padding Right */
+.el-pr-xs { padding-right: var(--el-layout-gap-xs); }
+.el-pr-sm { padding-right: var(--el-layout-gap-sm); }
+.el-pr-md { padding-right: var(--el-layout-gap-md); }
+.el-pr-lg { padding-right: var(--el-layout-gap-lg); }
+.el-pr-xl { padding-right: var(--el-layout-gap-xl); }
+.el-pr-2xl { padding-right: var(--el-layout-gap-2xl); }
+
+/* Margin utilities - all sides */
+.el-m-xs { margin: var(--el-layout-gap-xs); }
+.el-m-sm { margin: var(--el-layout-gap-sm); }
+.el-m-md { margin: var(--el-layout-gap-md); }
+.el-m-lg { margin: var(--el-layout-gap-lg); }
+.el-m-xl { margin: var(--el-layout-gap-xl); }
+.el-m-2xl { margin: var(--el-layout-gap-2xl); }
+
+/* Margin X (horizontal) */
+.el-mx-xs { margin-left: var(--el-layout-gap-xs); margin-right: var(--el-layout-gap-xs); }
+.el-mx-sm { margin-left: var(--el-layout-gap-sm); margin-right: var(--el-layout-gap-sm); }
+.el-mx-md { margin-left: var(--el-layout-gap-md); margin-right: var(--el-layout-gap-md); }
+.el-mx-lg { margin-left: var(--el-layout-gap-lg); margin-right: var(--el-layout-gap-lg); }
+.el-mx-xl { margin-left: var(--el-layout-gap-xl); margin-right: var(--el-layout-gap-xl); }
+.el-mx-2xl { margin-left: var(--el-layout-gap-2xl); margin-right: var(--el-layout-gap-2xl); }
+
+/* Margin Y (vertical) */
+.el-my-xs { margin-top: var(--el-layout-gap-xs); margin-bottom: var(--el-layout-gap-xs); }
+.el-my-sm { margin-top: var(--el-layout-gap-sm); margin-bottom: var(--el-layout-gap-sm); }
+.el-my-md { margin-top: var(--el-layout-gap-md); margin-bottom: var(--el-layout-gap-md); }
+.el-my-lg { margin-top: var(--el-layout-gap-lg); margin-bottom: var(--el-layout-gap-lg); }
+.el-my-xl { margin-top: var(--el-layout-gap-xl); margin-bottom: var(--el-layout-gap-xl); }
+.el-my-2xl { margin-top: var(--el-layout-gap-2xl); margin-bottom: var(--el-layout-gap-2xl); }
+
+/* Margin Top */
+.el-mt-xs { margin-top: var(--el-layout-gap-xs); }
+.el-mt-sm { margin-top: var(--el-layout-gap-sm); }
+.el-mt-md { margin-top: var(--el-layout-gap-md); }
+.el-mt-lg { margin-top: var(--el-layout-gap-lg); }
+.el-mt-xl { margin-top: var(--el-layout-gap-xl); }
+.el-mt-2xl { margin-top: var(--el-layout-gap-2xl); }
+
+/* Margin Bottom */
+.el-mb-xs { margin-bottom: var(--el-layout-gap-xs); }
+.el-mb-sm { margin-bottom: var(--el-layout-gap-sm); }
+.el-mb-md { margin-bottom: var(--el-layout-gap-md); }
+.el-mb-lg { margin-bottom: var(--el-layout-gap-lg); }
+.el-mb-xl { margin-bottom: var(--el-layout-gap-xl); }
+.el-mb-2xl { margin-bottom: var(--el-layout-gap-2xl); }
+
+/* Margin Left */
+.el-ml-xs { margin-left: var(--el-layout-gap-xs); }
+.el-ml-sm { margin-left: var(--el-layout-gap-sm); }
+.el-ml-md { margin-left: var(--el-layout-gap-md); }
+.el-ml-lg { margin-left: var(--el-layout-gap-lg); }
+.el-ml-xl { margin-left: var(--el-layout-gap-xl); }
+.el-ml-2xl { margin-left: var(--el-layout-gap-2xl); }
+
+/* Margin Right */
+.el-mr-xs { margin-right: var(--el-layout-gap-xs); }
+.el-mr-sm { margin-right: var(--el-layout-gap-sm); }
+.el-mr-md { margin-right: var(--el-layout-gap-md); }
+.el-mr-lg { margin-right: var(--el-layout-gap-lg); }
+.el-mr-xl { margin-right: var(--el-layout-gap-xl); }
+.el-mr-2xl { margin-right: var(--el-layout-gap-2xl); }
+
+/* Space Y (vertical stacking) - margin-top on all but first child */
+.el-space-y-xs > * + * { margin-top: var(--el-layout-gap-xs); }
+.el-space-y-sm > * + * { margin-top: var(--el-layout-gap-sm); }
+.el-space-y-md > * + * { margin-top: var(--el-layout-gap-md); }
+.el-space-y-lg > * + * { margin-top: var(--el-layout-gap-lg); }
+.el-space-y-xl > * + * { margin-top: var(--el-layout-gap-xl); }
+.el-space-y-2xl > * + * { margin-top: var(--el-layout-gap-2xl); }
+
+/* Space X (horizontal stacking) - margin-left on all but first child */
+.el-space-x-xs > * + * { margin-left: var(--el-layout-gap-xs); }
+.el-space-x-sm > * + * { margin-left: var(--el-layout-gap-sm); }
+.el-space-x-md > * + * { margin-left: var(--el-layout-gap-md); }
+.el-space-x-lg > * + * { margin-left: var(--el-layout-gap-lg); }
+.el-space-x-xl > * + * { margin-left: var(--el-layout-gap-xl); }
+.el-space-x-2xl > * + * { margin-left: var(--el-layout-gap-2xl); }
+
+/* Toast animations */
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}
+
+/* Modal animations */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scale-in {
+  animation: scale-in 0.2s ease-out;
+}