@bluefly/openstandardagents 0.2.7 → 0.2.8

package/website/.lighthouserc.ts

@@ -1,24 +0,0 @@
-import type { Config } from '@lhci/cli';
-
-const config: Config = {
-  ci: {
-    collect: {
-      staticDistDir: './out',
-      numberOfRuns: 3,
-    },
-    assert: {
-      assertions: {
-        'categories:performance': ['error', { minScore: 0.9 }],
-        'categories:accessibility': ['error', { minScore: 0.9 }],
-        'categories:best-practices': ['error', { minScore: 0.9 }],
-        'categories:seo': ['error', { minScore: 0.9 }],
-      },
-    },
-    upload: {
-      target: 'temporary-public-storage',
-    },
-  },
-};
-
-export default config;
-

package/website/.prettierrc

@@ -1,10 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "plugins": ["prettier-plugin-tailwindcss"]
-}
-

package/website/DESIGN_SYSTEM_IMPLEMENTATION.md

@@ -1,445 +0,0 @@
-# OSSA Website Design System Implementation
-
-## Overview
-
-This document summarizes the design system implementation for the OSSA website based on Issue #45. The implementation follows a phased approach to transform the website from developer-oriented to enterprise-ready with professional polish, accessibility compliance (WCAG 2.1 AA), and clear value articulation.
-
-## Implementation Status
-
-### ✅ Phase 1: Foundation & Design Tokens (COMPLETED)
-
-#### 1.1 Design Token System (`website/styles/_tokens.scss`)
-- **Color Scales**: Full 50-900 scales for all brand colors
-  - Primary (Blue-Purple #4A3ECD): 11 shades
-  - Secondary (Cyan-Blue #1CB9ED): 11 shades
-  - Accent (Purple #9060EA): 11 shades
-  - Success (Green #10b981): 11 shades
-  - Warning (Amber #f59e0b): 11 shades
-  - Error (Red #ef4444): 11 shades
-  - Info (Cyan #06b6d4): 11 shades
-  - Neutral/Gray: 11 shades
-
-- **Gradient Tokens**: CSS custom properties for consistent gradients
-  - Primary, Secondary, Accent gradients
-  - Hero, Button gradients
-  - Success, Warning, Error, Info gradients
-  - Background gradients (light, primary, secondary)
-
-- **Dark Mode Mappings**: Future-ready dark mode color system
-  - Background colors (primary, secondary, tertiary)
-  - Text colors (primary, secondary, tertiary)
-
-- **Focus Ring Colors**: Accessibility-compliant focus indicators
-  - Primary, Secondary, Accent focus rings
-  - Alpha variants for layering
-
-- **Additional Tokens**:
-  - Shadow system (sm, md, lg, xl, 2xl + colored shadows)
-  - Border radius (none to 3xl + full)
-  - Transitions (fast, base, slow, slower)
-  - Z-index layers (dropdown to tooltip)
-  - Opacity scale (0-100)
-
-#### 1.2 Typography System (`website/styles/_typography.scss`)
-- **Font Families**:
-  - Sans: Inter (body, headings, display)
-  - Mono: JetBrains Mono (code)
-
-- **Font Weights**: 9 levels (100-900)
-
-- **Typography Hierarchy**:
-  - Display: 72px / 48px mobile (extrabold, 1.1 line-height)
-  - H1: 56px / 40px mobile (bold, 1.2 line-height)
-  - H2: 40px / 32px mobile (bold, 1.3 line-height)
-  - H3: 32px / 28px mobile (semibold, 1.4 line-height)
-  - H4: 24px / 22px mobile (semibold, 1.5 line-height)
-  - H5: 20px / 18px mobile (semibold, 1.5 line-height)
-  - H6: 18px / 16px mobile (semibold, 1.5 line-height)
-  - Body: 16px (normal, 1.6 line-height)
-  - Small: 14px (normal, 1.5 line-height)
-  - Extra Small: 12px (normal, 1.4 line-height)
-
-- **Responsive Typography**: Automatic mobile scaling (20-30% reduction)
-
-- **Utility Classes**: 
-  - Typography mixins for all levels
-  - Font weight utilities
-  - Letter spacing utilities
-  - Text transform utilities
-  - Text decoration utilities
-  - Text alignment utilities
-  - Truncate and line-clamp utilities
-
-#### 1.3 Spacing & Layout System (`website/styles/_spacing.scss`)
-- **Spacing Scale**: 4px base unit (0 to 96rem)
-  - Granular scale: 0, 1px, 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px...
-  - Extended scale up to 384px (96rem)
-
-- **Vertical Rhythm System**:
-  - Section spacing: sm (48px), md (64px), lg (80px), xl (96px)
-  - Component spacing: xs (8px), sm (12px), md (16px), lg (24px), xl (32px)
-  - Element spacing: xs (4px), sm (8px), md (12px), lg (16px), xl (24px)
-
-- **Container Max-Widths**:
-  - sm: 640px
-  - md: 768px
-  - lg: 1024px
-  - xl: 1280px
-  - 2xl: 1536px
-
-- **Content Max-Widths** (for readable text):
-  - sm: 576px
-  - md: 672px
-  - lg: 768px
-  - xl: 896px
-  - 2xl: 1024px
-  - 3xl: 1152px
-  - 4xl: 1280px
-
-- **Utility Classes**:
-  - Container classes with responsive padding
-  - Content container classes
-  - Section spacing classes
-  - Stack (vertical) and inline (horizontal) spacing
-  - Margin utilities (all directions)
-  - Padding utilities (all directions)
-  - Gap utilities for flexbox/grid
-
-#### 1.4 Variables Integration (`website/styles/_variables.scss`)
-- Imports all token files (@use syntax)
-- Maintains backward compatibility with existing variable names
-- Maps old variables to new token system
-
-### ✅ Phase 2: Core Component Library (COMPLETED)
-
-#### 2.1 Button Component (`website/components/ui/Button.tsx`)
-- **Variants**: 4 types
-  - Primary: Gradient background (primary-500 to primary-600)
-  - Secondary: Gradient background (secondary-500 to secondary-600)
-  - Outline: Transparent with border
-  - Ghost: Transparent with hover background
-
-- **Sizes**: 3 options
-  - sm: text-sm, px-3, py-1.5
-  - md: text-base, px-4, py-2
-  - lg: text-lg, px-6, py-3
-
-- **States**: 6 states
-  - Default: Base styling
-  - Hover: Enhanced shadow, darker gradient
-  - Active: Darkest gradient
-  - Focus: 2px ring with offset
-  - Disabled: 50% opacity, no pointer events
-  - Loading: Animated spinner, disabled state
-
-- **Features**:
-  - Left/right icon support
-  - Full width option
-  - Accessible (ARIA attributes)
-  - Keyboard navigation support
-
-#### 2.2 Card Component (`website/components/ui/Card.tsx`)
-- **Variants**: 4 types
-  - Default: White background, border, subtle shadow
-  - Bordered: White background, 2px border
-  - Elevated: White background, large shadow
-  - Flat: Gray background, no border
-
-- **Padding**: 4 options (none, sm, md, lg)
-
-- **Interactive**: Optional hover effects
-  - Enhanced shadow
-  - Border color change
-  - Subtle scale animation
-
-- **Sub-components**:
-  - CardHeader: Top section with margin
-  - CardTitle: Heading (h1-h6 support)
-  - CardDescription: Subtitle text
-  - CardContent: Main content area
-  - CardFooter: Bottom section with border
-
-- **Semantic HTML**: Supports div, article, section
-
-#### 2.3 Form Components
-
-**Input Component** (`website/components/ui/Input.tsx`):
-- Label with required indicator
-- Error states with red styling
-- Helper text
-- Left/right icon support
-- Full width option
-- Accessibility:
-  - Auto-generated IDs
-  - aria-invalid
-  - aria-describedby
-  - Proper label association
-
-**Select Component** (`website/components/ui/Select.tsx`):
-- Custom dropdown styling
-- Label with required indicator
-- Error states
-- Helper text
-- Options array or children support
-- Custom dropdown icon
-- Full accessibility support
-
-**Checkbox Component** (`website/components/ui/Checkbox.tsx`):
-- Label and helper text
-- Error states
-- Proper focus indicators (2px ring)
-- Accessible (ARIA attributes)
-- Disabled state support
-
-**Radio Component** (`website/components/ui/Radio.tsx`):
-- Label and helper text
-- Error states
-- Proper focus indicators (2px ring)
-- Accessible (ARIA attributes)
-- Disabled state support
-
-**Textarea Component** (`website/components/ui/Textarea.tsx`):
-- Label with required indicator
-- Error states
-- Helper text
-- Character count (optional)
-- Resize options (none, vertical, horizontal, both)
-- Min-height: 100px
-- Full accessibility support
-
-#### 2.4 Badge & Tag Components
-
-**Badge Component** (`website/components/ui/Badge.tsx`):
-- **Variants**: 7 types
-  - default, success, warning, error, info, primary, secondary
-- **Sizes**: sm, md, lg
-- **Features**:
-  - Optional dot indicator
-  - Rounded full (pill shape)
-  - Border styling
-  - Color-coded backgrounds
-
-**Tag Component** (`website/components/ui/Tag.tsx`):
-- **Variants**: 7 types (same as Badge)
-- **Sizes**: sm, md, lg
-- **Features**:
-  - Removable option with X button
-  - onRemove callback
-  - Rounded corners (not full)
-  - Hover effects
-  - Accessible remove button
-
-#### 2.5 Component Export (`website/components/ui/index.ts`)
-- Barrel export file for easy importing
-- Exports all components and their TypeScript types
-- Usage: `import { Button, Card, Input } from '@/components/ui'`
-
-## Accessibility Features Implemented
-
-### WCAG 2.1 AA Compliance
-- ✅ **Focus Indicators**: 2px ring with offset on all interactive elements
-- ✅ **Color Contrast**: All text/background combinations meet 4.5:1 (normal) or 3:1 (large text)
-- ✅ **Keyboard Navigation**: All components fully keyboard accessible
-- ✅ **ARIA Attributes**: Proper labels, roles, and states
-- ✅ **Form Labels**: All inputs properly associated with labels
-- ✅ **Error States**: Clear error messages with role="alert"
-- ✅ **Touch Targets**: Minimum 44x44px for mobile (buttons, checkboxes, radios)
-- ✅ **Screen Reader Support**: Descriptive text, aria-describedby, aria-invalid
-
-### Accessibility Utilities
-- sr-only class for screen reader only content
-- focus:not-sr-only for skip links
-- aria-busy for loading states
-- aria-hidden for decorative icons
-
-## Design System Benefits
-
-### For Developers
-- **Consistent API**: All components follow same prop patterns
-- **TypeScript Support**: Full type definitions for all components
-- **Easy Imports**: Barrel exports for clean imports
-- **Responsive**: Mobile-first with automatic scaling
-- **Customizable**: className prop for extending styles
-- **Well-Documented**: Inline comments and prop descriptions
-
-### For Users
-- **Accessible**: WCAG 2.1 AA compliant
-- **Performant**: Optimized transitions and animations
-- **Responsive**: Works on all screen sizes
-- **Consistent**: Unified visual language
-- **Professional**: Enterprise-grade polish
-
-### For the Project
-- **Maintainable**: Centralized design tokens
-- **Scalable**: Easy to add new components
-- **Flexible**: Supports theming and customization
-- **Future-Ready**: Dark mode support prepared
-- **Brand Consistent**: Follows OSSA brand guidelines
-
-## Next Steps (Remaining Phases)
-
-### Phase 3: Layout & Navigation (Weeks 5-6)
-- [ ] Enhance Header component (active states, keyboard nav)
-- [ ] Enhance Footer component (multi-column, social links)
-- [ ] Create Breadcrumb component
-- [ ] Create TableOfContents component
-- [ ] Create Sidebar navigation component
-- [ ] Improve mobile navigation
-
-### Phase 4: Content & Messaging (Weeks 7-8)
-- [ ] Homepage redesign with new components
-- [ ] Create ValueProposition component
-- [ ] Create ComparisonMatrix component
-- [ ] Create FeatureGrid component
-- [ ] Create SocialProof component
-- [ ] Add architecture diagrams
-- [ ] Create CodeBlock component with copy button
-- [ ] Create CodeExample component
-- [ ] Create enterprise landing page
-
-### Phase 5: Interactive Elements (Weeks 9-10)
-- [ ] Create LoadingSpinner component
-- [ ] Create Skeleton component
-- [ ] Create Toast notification component
-- [ ] Add scroll animations
-- [ ] Add micro-interactions
-- [ ] Enhance playground
-
-### Phase 6: Accessibility & Performance (Weeks 11-12)
-- [ ] Complete accessibility audit
-- [ ] Add SkipLink component
-- [ ] Ensure all images have alt text
-- [ ] Optimize performance (Lighthouse >90)
-- [ ] Optimize Core Web Vitals
-- [ ] Add lazy loading
-
-### Phase 7: Testing & QA (Weeks 13-14)
-- [ ] Set up visual regression testing
-- [ ] Cross-browser testing
-- [ ] Component testing
-- [ ] Accessibility testing
-- [ ] Performance testing
-
-## Files Created
-
-### Design Tokens
-- `website/styles/_tokens.scss` - Color scales, gradients, shadows, etc.
-- `website/styles/_typography.scss` - Typography system
-- `website/styles/_spacing.scss` - Spacing and layout system
-- `website/styles/_variables.scss` - Updated with imports
-
-### UI Components
-- `website/components/ui/Button.tsx` - Button component
-- `website/components/ui/Card.tsx` - Card component with sub-components
-- `website/components/ui/Input.tsx` - Input component
-- `website/components/ui/Select.tsx` - Select component
-- `website/components/ui/Checkbox.tsx` - Checkbox component
-- `website/components/ui/Radio.tsx` - Radio component
-- `website/components/ui/Textarea.tsx` - Textarea component
-- `website/components/ui/Badge.tsx` - Badge component
-- `website/components/ui/Tag.tsx` - Tag component
-- `website/components/ui/index.ts` - Barrel export
-
-## Usage Examples
-
-### Button
-```tsx
-import { Button } from '@/components/ui';
-
-<Button variant="primary" size="lg" loading={isLoading}>
-  Get Started
-</Button>
-
-<Button variant="outline" leftIcon={<Icon />}>
-  Learn More
-</Button>
-```
-
-### Card
-```tsx
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui';
-
-<Card variant="elevated" interactive>
-  <CardHeader>
-    <CardTitle>Feature Title</CardTitle>
-    <CardDescription>Feature description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    Content goes here
-  </CardContent>
-</Card>
-```
-
-### Form
-```tsx
-import { Input, Select, Checkbox, Textarea } from '@/components/ui';
-
-<Input
-  label="Email"
-  type="email"
-  required
-  error={errors.email}
-  helperText="We'll never share your email"
-/>
-
-<Select
-  label="Country"
-  options={countries}
-  error={errors.country}
-/>
-
-<Checkbox
-  label="I agree to the terms"
-  error={errors.terms}
-/>
-
-<Textarea
-  label="Message"
-  showCharCount
-  maxLength={500}
-  resize="vertical"
-/>
-```
-
-### Badge & Tag
-```tsx
-import { Badge, Tag } from '@/components/ui';
-
-<Badge variant="success" dot>Active</Badge>
-<Badge variant="warning" size="sm">Beta</Badge>
-
-<Tag variant="primary" removable onRemove={() => handleRemove()}>
-  React
-</Tag>
-```
-
-## Technical Notes
-
-### Dependencies
-- No additional dependencies required
-- Uses existing Tailwind CSS configuration
-- Compatible with Next.js 15 and React 18
-
-### Browser Support
-- Modern browsers (Chrome, Firefox, Safari, Edge)
-- Progressive enhancement for older browsers
-- Graceful degradation for unsupported features
-
-### Performance
-- Minimal CSS footprint (SCSS compiled to CSS)
-- No runtime CSS-in-JS overhead
-- Optimized transitions (GPU-accelerated)
-- Tree-shakeable exports
-
-## Conclusion
-
-Phase 1 (Foundation & Design Tokens) and Phase 2 (Core Component Library) are complete. The design system provides a solid foundation for building the remaining phases. All components are production-ready, accessible, and follow best practices.
-
-The implementation prioritizes:
-1. **Accessibility** - WCAG 2.1 AA compliance from the start
-2. **Developer Experience** - Consistent API, TypeScript support
-3. **Performance** - Optimized animations, minimal overhead
-4. **Maintainability** - Centralized tokens, clear structure
-5. **Scalability** - Easy to extend and customize
-
-Next steps involve implementing the remaining phases (3-7) to complete the full design system transformation outlined in Issue #45.

package/website/Dockerfile

@@ -1,30 +0,0 @@
-# OSSA Website - Next.js Dev Server (for quick deployment)
-# Build from project root to access examples directory
-FROM node:20-alpine
-
-WORKDIR /app
-
-# Copy package files
-COPY website/package*.json ./website/
-RUN cd website && npm install --legacy-peer-deps
-
-# Copy examples directory (needed for generate-examples script)
-COPY examples ./examples
-
-# Copy website source code
-COPY website ./website
-
-WORKDIR /app/website
-
-# Generate examples.json - this MUST succeed
-RUN npm run generate-examples
-
-# Verify examples.json was created and has content
-RUN test -f public/examples.json && echo "✅ examples.json created" || (echo "❌ examples.json NOT FOUND" && exit 1)
-RUN test -s public/examples.json && echo "✅ examples.json has content" || (echo "❌ examples.json is empty" && exit 1)
-
-# Expose port
-EXPOSE 3000
-
-# Start Next.js dev server
-CMD ["npm", "run", "dev"]