@mytechtoday/augment-extensions 1.2.2 → 1.3.1

package/augment-extensions/visual-design/domains/other/web-app.ts

@@ -0,0 +1,157 @@
+/**
+ * Web-app Domain Module
+ * 
+ * Interactive SPA/PWA patterns for single-page applications
+ * with dynamic content, state management, and app-like experiences.
+ */
+
+import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
+
+// ============================================================================
+// Web-app Color Palette
+// ============================================================================
+
+const WEBAPP_COLORS: ColorPalette = {
+  primary: {
+    name: 'App Primary',
+    hex: '#6366F1',
+    rgb: { r: 99, g: 102, b: 241 },
+    hsl: { h: 239, s: 84, l: 67 },
+    variants: [
+      { name: 'Primary Light', hex: '#A5B4FC', usage: 'Hover states, highlights' },
+      { name: 'Primary Dark', hex: '#4F46E5', usage: 'Active states, pressed' }
+    ]
+  },
+  neutral: [
+    { name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
+    { name: 'Gray 50', hex: '#F9FAFB', rgb: { r: 249, g: 250, b: 251 }, hsl: { h: 210, s: 20, l: 98 } },
+    { name: 'Gray 100', hex: '#F3F4F6', rgb: { r: 243, g: 244, b: 246 }, hsl: { h: 220, s: 14, l: 96 } },
+    { name: 'Gray 700', hex: '#374151', rgb: { r: 55, g: 65, b: 81 }, hsl: { h: 217, s: 19, l: 27 } },
+    { name: 'Gray 900', hex: '#111827', rgb: { r: 17, g: 24, b: 39 }, hsl: { h: 221, s: 39, l: 11 } }
+  ],
+  semantic: {
+    success: { hex: '#10B981', usage: 'Success states, confirmations' },
+    warning: { hex: '#F59E0B', usage: 'Warnings, pending states' },
+    error: { hex: '#EF4444', usage: 'Errors, validation failures' },
+    info: { hex: '#3B82F6', usage: 'Information, tooltips' }
+  },
+  accessibility: {
+    minimumContrast: 4.5,
+    targetContrast: 7,
+    colorBlindSafe: true,
+    guidelines: [
+      'Ensure 4.5:1 contrast for all interactive elements',
+      'Use focus indicators with 3:1 contrast',
+      'Support dark mode with proper contrast',
+      'Test with accessibility tools'
+    ]
+  }
+};
+
+// ============================================================================
+// Web-app Typography
+// ============================================================================
+
+const WEBAPP_TYPOGRAPHY: TypographyRules = {
+  fontFamilies: {
+    primary: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    secondary: 'Inter, system-ui, sans-serif',
+    monospace: '"SF Mono", Monaco, "Cascadia Code", monospace'
+  },
+  hierarchy: {
+    h1: { fontSize: '32px', fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.02em' },
+    h2: { fontSize: '24px', fontWeight: 600, lineHeight: 1.3, letterSpacing: '-0.01em' },
+    h3: { fontSize: '20px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
+    h4: { fontSize: '18px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
+    h5: { fontSize: '16px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
+    h6: { fontSize: '14px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
+    body: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
+    small: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' },
+    caption: { fontSize: '11px', fontWeight: 400, lineHeight: 1.3, letterSpacing: '0.01em' }
+  },
+  scale: {
+    base: 14,
+    ratio: 1.2,
+    sizes: [11, 12, 14, 16, 18, 20, 24, 32, 40]
+  },
+  guidelines: [
+    'Use system fonts for native app feel',
+    'Smaller base size (14px) for dense interfaces',
+    'Consistent font weights for UI hierarchy',
+    'Monospace for code and data display',
+    'Optimize for readability at small sizes'
+  ]
+};
+
+// ============================================================================
+// Web-app Layout System
+// ============================================================================
+
+const WEBAPP_LAYOUT: LayoutSystem = {
+  grid: {
+    columns: 12,
+    gutter: '16px',
+    margin: '16px',
+    breakpoints: {
+      mobile: '0-639px',
+      tablet: '640-1023px',
+      desktop: '1024px+'
+    }
+  },
+  spacing: {
+    unit: 4,
+    scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64],
+    guidelines: [
+      'Use 4px base unit for tight spacing',
+      'Compact spacing for dense interfaces',
+      'Consistent padding in panels and cards',
+      'Minimal margins for app-like feel'
+    ]
+  },
+  containerWidths: {
+    mobile: '100%',
+    tablet: '100%',
+    desktop: '100%',
+    fullscreen: '100vw'
+  },
+  guidelines: [
+    'Use app shell pattern (persistent header/sidebar)',
+    'Implement virtual scrolling for large lists',
+    'Use fixed positioning for navigation',
+    'Optimize for single-hand mobile use',
+    'Support offline-first architecture',
+    'Implement skeleton screens for loading states'
+  ]
+};
+
+// ============================================================================
+// Web-app Domain Export
+// ============================================================================
+
+export const WEBAPP_DOMAIN: DomainStyle = {
+  domain: 'web-app',
+  characteristics: [
+    'Single-page application architecture',
+    'Client-side routing and state management',
+    'Real-time data updates and synchronization',
+    'Offline-first with service workers',
+    'App-like navigation patterns',
+    'Persistent UI shell (header, sidebar)',
+    'Loading states and skeleton screens',
+    'Optimistic UI updates',
+    'Touch-friendly interactions',
+    'Progressive Web App capabilities'
+  ],
+  colorScheme: WEBAPP_COLORS,
+  typography: WEBAPP_TYPOGRAPHY,
+  layout: WEBAPP_LAYOUT,
+  examples: [
+    'Dashboard with data visualization and charts',
+    'Project management tool with kanban boards',
+    'Email client with inbox and compose views',
+    'Social media feed with infinite scroll',
+    'Collaborative document editor',
+    'Task management app with drag-and-drop'
+  ]
+};
+

package/augment-extensions/visual-design/domains/other/website.ts

@@ -0,0 +1,161 @@
+/**
+ * Website Domain Module
+ * 
+ * Holistic multi-page site design patterns for traditional websites
+ * with navigation, content hierarchy, and information architecture.
+ */
+
+import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
+
+// ============================================================================
+// Website Color Palette
+// ============================================================================
+
+const WEBSITE_COLORS: ColorPalette = {
+  primary: {
+    name: 'Brand Primary',
+    hex: '#2563EB',
+    rgb: { r: 37, g: 99, b: 235 },
+    hsl: { h: 221, s: 83, l: 53 },
+    variants: [
+      { name: 'Primary Light', hex: '#60A5FA', usage: 'Hover states, accents' },
+      { name: 'Primary Dark', hex: '#1E40AF', usage: 'Active states, emphasis' }
+    ]
+  },
+  neutral: [
+    { name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
+    { name: 'Gray 50', hex: '#F9FAFB', rgb: { r: 249, g: 250, b: 251 }, hsl: { h: 210, s: 20, l: 98 } },
+    { name: 'Gray 100', hex: '#F3F4F6', rgb: { r: 243, g: 244, b: 246 }, hsl: { h: 220, s: 14, l: 96 } },
+    { name: 'Gray 200', hex: '#E5E7EB', rgb: { r: 229, g: 231, b: 235 }, hsl: { h: 220, s: 13, l: 91 } },
+    { name: 'Gray 800', hex: '#1F2937', rgb: { r: 31, g: 41, b: 55 }, hsl: { h: 215, s: 28, l: 17 } },
+    { name: 'Gray 900', hex: '#111827', rgb: { r: 17, g: 24, b: 39 }, hsl: { h: 221, s: 39, l: 11 } }
+  ],
+  semantic: {
+    success: { hex: '#10B981', usage: 'Success messages, confirmations' },
+    warning: { hex: '#F59E0B', usage: 'Warnings, cautions' },
+    error: { hex: '#EF4444', usage: 'Errors, destructive actions' },
+    info: { hex: '#3B82F6', usage: 'Information, tips' }
+  },
+  accessibility: {
+    minimumContrast: 4.5,
+    targetContrast: 7,
+    colorBlindSafe: true,
+    guidelines: [
+      'Ensure 4.5:1 contrast for body text',
+      'Ensure 3:1 contrast for large text (18pt+)',
+      'Never rely on color alone to convey information',
+      'Test with color blindness simulators'
+    ]
+  }
+};
+
+// ============================================================================
+// Website Typography
+// ============================================================================
+
+const WEBSITE_TYPOGRAPHY: TypographyRules = {
+  fontFamilies: {
+    primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    secondary: 'Georgia, "Times New Roman", serif',
+    monospace: '"Fira Code", "Courier New", monospace'
+  },
+  hierarchy: {
+    h1: { fontSize: '48px', fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.02em' },
+    h2: { fontSize: '36px', fontWeight: 700, lineHeight: 1.3, letterSpacing: '-0.01em' },
+    h3: { fontSize: '28px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
+    h4: { fontSize: '24px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
+    h5: { fontSize: '20px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
+    h6: { fontSize: '18px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
+    body: { fontSize: '16px', fontWeight: 400, lineHeight: 1.6, letterSpacing: '0' },
+    small: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
+    caption: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0.01em' }
+  },
+  scale: {
+    base: 16,
+    ratio: 1.25,
+    sizes: [12, 14, 16, 18, 20, 24, 28, 36, 48, 64]
+  },
+  guidelines: [
+    'Use system font stack for fast loading',
+    'Limit to 2-3 font families maximum',
+    'Maintain consistent line height (1.5-1.6 for body)',
+    'Use font-weight variations for hierarchy',
+    'Ensure minimum 16px for body text',
+    'Apply responsive typography with clamp()'
+  ]
+};
+
+// ============================================================================
+// Website Layout System
+// ============================================================================
+
+const WEBSITE_LAYOUT: LayoutSystem = {
+  grid: {
+    columns: 12,
+    gutter: '24px',
+    margin: '24px',
+    breakpoints: {
+      mobile: '0-639px',
+      tablet: '640-1023px',
+      desktop: '1024-1279px',
+      wide: '1280px+'
+    }
+  },
+  spacing: {
+    unit: 8,
+    scale: [0, 8, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160],
+    guidelines: [
+      'Use 8px base unit for all spacing',
+      'Apply consistent spacing scale',
+      'Increase spacing for visual hierarchy',
+      'Maintain breathing room around sections'
+    ]
+  },
+  containerWidths: {
+    mobile: '100%',
+    tablet: '768px',
+    desktop: '1024px',
+    wide: '1280px',
+    max: '1440px'
+  },
+  guidelines: [
+    'Use semantic HTML5 elements (header, nav, main, aside, footer)',
+    'Implement sticky navigation for easy access',
+    'Create clear visual hierarchy with spacing',
+    'Use grid for complex layouts, flexbox for components',
+    'Ensure mobile-first responsive design',
+    'Maintain consistent page structure across site'
+  ]
+};
+
+// ============================================================================
+// Website Domain Export
+// ============================================================================
+
+export const WEBSITE_DOMAIN: DomainStyle = {
+  domain: 'website',
+  characteristics: [
+    'Multi-page navigation structure',
+    'Clear information architecture',
+    'Consistent header and footer across pages',
+    'Breadcrumb navigation for deep content',
+    'Search functionality for content discovery',
+    'Responsive design for all devices',
+    'SEO-optimized structure and metadata',
+    'Accessible navigation and content',
+    'Fast page load times',
+    'Clear call-to-action placement'
+  ],
+  colorScheme: WEBSITE_COLORS,
+  typography: WEBSITE_TYPOGRAPHY,
+  layout: WEBSITE_LAYOUT,
+  examples: [
+    'Corporate website with About, Services, Contact pages',
+    'Blog with article listing and individual post pages',
+    'Portfolio site with project gallery and case studies',
+    'E-commerce site with product catalog and checkout',
+    'Documentation site with sidebar navigation',
+    'Landing page with hero section and feature sections'
+  ]
+};
+

package/augment-extensions/visual-design/domains/other/windows-platform.ts

@@ -0,0 +1,156 @@
+/**
+ * Windows Platform Domain Module
+ * 
+ * Windows-specific application design patterns following
+ * Windows 11 design principles and WinUI 3 guidelines.
+ */
+
+import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
+
+// ============================================================================
+// Windows Platform Color Palette
+// ============================================================================
+
+const WINDOWS_COLORS: ColorPalette = {
+  primary: {
+    name: 'System Accent',
+    hex: '#0078D4',
+    rgb: { r: 0, g: 120, b: 212 },
+    hsl: { h: 206, s: 100, l: 42 },
+    variants: [
+      { name: 'Accent Light 1', hex: '#4A9EFF', usage: 'Hover states' },
+      { name: 'Accent Dark 1', hex: '#005A9E', usage: 'Pressed states' }
+    ]
+  },
+  neutral: [
+    { name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
+    { name: 'Card Background', hex: '#F3F3F3', rgb: { r: 243, g: 243, b: 243 }, hsl: { h: 0, s: 0, l: 95 } },
+    { name: 'Layer', hex: '#EBEBEB', rgb: { r: 235, g: 235, b: 235 }, hsl: { h: 0, s: 0, l: 92 } },
+    { name: 'Text Primary', hex: '#000000', rgb: { r: 0, g: 0, b: 0 }, hsl: { h: 0, s: 0, l: 0 } },
+    { name: 'Text Secondary', hex: '#605E5C', rgb: { r: 96, g: 94, b: 92 }, hsl: { h: 30, s: 2, l: 37 } }
+  ],
+  semantic: {
+    success: { hex: '#107C10', usage: 'Success states' },
+    warning: { hex: '#FFB900', usage: 'Warnings, cautions' },
+    error: { hex: '#D13438', usage: 'Errors, critical actions' },
+    info: { hex: '#0078D4', usage: 'Information, tips' }
+  },
+  accessibility: {
+    minimumContrast: 4.5,
+    targetContrast: 7,
+    colorBlindSafe: true,
+    guidelines: [
+      'Use system accent color from Windows settings',
+      'Support Windows high contrast themes',
+      'Respect dark/light mode preference',
+      'Test with Windows Narrator'
+    ]
+  }
+};
+
+// ============================================================================
+// Windows Platform Typography
+// ============================================================================
+
+const WINDOWS_TYPOGRAPHY: TypographyRules = {
+  fontFamilies: {
+    primary: '"Segoe UI Variable", "Segoe UI", sans-serif',
+    secondary: 'system-ui, sans-serif',
+    monospace: '"Cascadia Code", "Consolas", monospace'
+  },
+  hierarchy: {
+    h1: { fontSize: '28px', fontWeight: 600, lineHeight: 1.3, letterSpacing: '0' },
+    h2: { fontSize: '20px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
+    h3: { fontSize: '16px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
+    h4: { fontSize: '14px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
+    h5: { fontSize: '12px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
+    h6: { fontSize: '11px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
+    body: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
+    small: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' },
+    caption: { fontSize: '11px', fontWeight: 400, lineHeight: 1.3, letterSpacing: '0' }
+  },
+  scale: {
+    base: 14,
+    ratio: 1.15,
+    sizes: [11, 12, 14, 16, 20, 28, 40]
+  },
+  guidelines: [
+    'Use Segoe UI Variable for Windows 11',
+    'Use Segoe UI for Windows 10',
+    'Follow Windows typography ramp',
+    'Support variable font weights',
+    'Ensure ClearType rendering'
+  ]
+};
+
+// ============================================================================
+// Windows Platform Layout System
+// ============================================================================
+
+const WINDOWS_LAYOUT: LayoutSystem = {
+  grid: {
+    columns: 12,
+    gutter: '12px',
+    margin: '12px',
+    breakpoints: {
+      compact: '0-639px',
+      medium: '640-1023px',
+      expanded: '1024px+'
+    }
+  },
+  spacing: {
+    unit: 4,
+    scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
+    guidelines: [
+      'Use 4px base unit for spacing',
+      'Follow WinUI 3 spacing guidelines',
+      'Maintain 44x44px touch targets',
+      'Use consistent padding in controls'
+    ]
+  },
+  containerWidths: {
+    compact: '100%',
+    medium: '100%',
+    expanded: '100%'
+  },
+  guidelines: [
+    'Use WinUI 3 controls and patterns',
+    'Implement title bar with window controls',
+    'Support Acrylic and Mica materials',
+    'Follow Windows 11 rounded corners (8px)',
+    'Implement proper focus visuals',
+    'Support snap layouts and window management'
+  ]
+};
+
+// ============================================================================
+// Windows Platform Domain Export
+// ============================================================================
+
+export const WINDOWS_PLATFORM_DOMAIN: DomainStyle = {
+  domain: 'windows-platform',
+  characteristics: [
+    'WinUI 3 controls and components',
+    'Acrylic and Mica background materials',
+    'Rounded corners (8px radius)',
+    'System accent color integration',
+    'Title bar with window controls',
+    'Fluent Design System principles',
+    'Reveal highlight on hover',
+    'Smooth animations and transitions',
+    'High DPI and touch support',
+    'Windows 11 snap layouts integration'
+  ],
+  colorScheme: WINDOWS_COLORS,
+  typography: WINDOWS_TYPOGRAPHY,
+  layout: WINDOWS_LAYOUT,
+  examples: [
+    'Settings app with navigation view',
+    'File Explorer with ribbon interface',
+    'Calculator with number pad layout',
+    'Photos app with gallery view',
+    'Mail app with reading pane',
+    'Store app with product listings'
+  ]
+};
+