@bluefly/openstandardagents 0.2.5-RC → 0.2.7

package/website/app/schema/page.tsx

@@ -12,13 +12,13 @@ function getStableVersion(): string {
     const versionsPath = path.join(process.cwd(), 'lib', 'versions.json');
     if (fs.existsSync(versionsPath)) {
       const versions = JSON.parse(fs.readFileSync(versionsPath, 'utf8'));
-      return versions.stable || '0.2.4';
+      return versions.stable || '0.2.6';
     }
   } catch (error) {
     console.error('Error reading versions.json:', error);
   }
-  // Fallback to 0.2.4 if versions.json not available
-  return '0.2.4';
+  // Fallback to 0.2.6 if versions.json not available
+  return '0.2.6';
 }
 
 // Try to load schema dynamically - fallback to stable version

package/website/app/specification/page.tsx

@@ -225,7 +225,7 @@ spec:
 
               <div className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-md">
                 <div className="flex items-center justify-between mb-2">
-                  <h3 className="text-xl font-semibold text-gray-900">v0.2.2</h3>
+                  <h3 className="text-xl font-semibold text-gray-900">v0.2.6</h3>
                   <span className="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm font-medium">
                     Previous
                   </span>

package/website/components/layout/Header.tsx

@@ -1,16 +1,20 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 
 export function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+  
+  const isActive = (path: string) => pathname === path || pathname?.startsWith(path + '/');
 
   return (
     <header className="bg-white border-b border-gray-300 sticky top-0 z-50">
       <nav className="container mx-auto max-w-6xl px-4">
         <div className="flex items-center justify-between h-16">
-          <Link href="/" className="flex items-center space-x-3 group">
+          <Link href="/" className="flex items-center space-x-2 group">
             <img
               src="/assets/brand/ossa-logo.svg"
               alt="OSSA Logo"
@@ -23,25 +27,25 @@ export function Header() {
 
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-3 lg:space-x-6 text-sm lg:text-base">
-            <Link href="/about" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+            <Link href="/about" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/about') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               About
             </Link>
-            <Link href="/specification" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+            <Link href="/specification" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/specification') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Specification
             </Link>
-            <Link href="/schema" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+            <Link href="/schema" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/schema') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Schema
             </Link>
-            <Link href="/docs" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+            <Link href="/docs" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/docs') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Docs
             </Link>
-            <Link href="/blog" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+            <Link href="/blog" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/blog') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Blog
             </Link>
-            <Link href="/playground" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+            <Link href="/playground" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/playground') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Playground
             </Link>
-            <Link href="/examples" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+            <Link href="/examples" className={`px-3 py-2 rounded-lg transition-all font-medium whitespace-nowrap ${isActive('/examples') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}>
               Examples
             </Link>
             <a
@@ -91,58 +95,59 @@ export function Header() {
         </div>
 
         {/* Mobile Navigation */}
-        {mobileMenuOpen && (
-          <div
-            id="mobile-menu"
-            className="md:hidden py-4 border-t border-gray-300"
-            role="navigation"
-            aria-label="Mobile navigation"
-          >
+        <div
+          id="mobile-menu"
+          className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
+            mobileMenuOpen ? 'max-h-96 opacity-100 py-4 border-t border-gray-300' : 'max-h-0 opacity-0'
+          }`}
+          role="navigation"
+          aria-label="Mobile navigation"
+        >
             <Link
               href="/about"
-              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/about') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               About
             </Link>
             <Link
               href="/specification"
-              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/specification') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Specification
             </Link>
             <Link
               href="/schema"
-              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/schema') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Schema
             </Link>
             <Link
               href="/docs"
-              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/docs') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Docs
             </Link>
             <Link
               href="/blog"
-              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/blog') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Blog
             </Link>
             <Link
               href="/playground"
-              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/playground') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Playground
             </Link>
             <Link
               href="/examples"
-              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              className={`block px-3 py-2 rounded-lg transition-all font-medium ${isActive('/examples') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-primary/5'}`}
               onClick={() => setMobileMenuOpen(false)}
             >
               Examples
@@ -160,7 +165,6 @@ export function Header() {
               </svg>
             </a>
           </div>
-        )}
       </nav>
     </header>
   );

package/website/components/ui/Badge.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary';
+type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Badge content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: BadgeVariant;
+  /** Size variant */
+  size?: BadgeSize;
+  /** Icon to display before text */
+  icon?: React.ReactNode;
+  /** Dot indicator instead of full background */
+  dot?: boolean;
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: 'bg-gray-100 text-gray-800 border border-gray-300',
+  success: 'bg-success-100 text-success-800 border border-success-300',
+  warning: 'bg-warning-100 text-warning-800 border border-warning-300',
+  error: 'bg-error-100 text-error-800 border border-error-300',
+  info: 'bg-info-100 text-info-800 border border-info-300',
+  primary: 'bg-primary-100 text-primary-800 border border-primary-300',
+  secondary: 'bg-secondary-100 text-secondary-800 border border-secondary-300',
+};
+
+const sizeClasses: Record<BadgeSize, string> = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-3 py-1 text-sm',
+  lg: 'px-4 py-1.5 text-base',
+};
+
+const dotVariantClasses: Record<BadgeVariant, string> = {
+  default: 'bg-gray-500',
+  success: 'bg-success-500',
+  warning: 'bg-warning-500',
+  error: 'bg-error-500',
+  info: 'bg-info-500',
+  primary: 'bg-primary-500',
+  secondary: 'bg-secondary-500',
+};
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      className = '',
+      variant = 'default',
+      size = 'md',
+      children,
+      icon,
+      dot = false,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      'inline-flex items-center justify-center rounded-full font-semibold',
+      variantClasses[variant],
+      sizeClasses[size],
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <span ref={ref} className={classes} {...props}>
+        {dot && (
+          <span
+            className={`w-2 h-2 rounded-full mr-1.5 ${dotVariantClasses[variant]}`}
+            aria-hidden="true"
+          />
+        )}
+        {icon && <span className="mr-1">{icon}</span>}
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/website/components/ui/Button.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Button content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: ButtonVariant;
+  /** Size variant */
+  size?: ButtonSize;
+  /** Full width button */
+  fullWidth?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Icon to display before text */
+  iconLeft?: React.ReactNode;
+  /** Icon to display after text */
+  iconRight?: React.ReactNode;
+  /** Accessible label for screen readers */
+  ariaLabel?: string;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    'bg-gradient-to-r from-secondary via-primary to-accent text-white hover:shadow-lg hover:scale-105 focus:ring-primary/30',
+  secondary:
+    'bg-secondary text-white hover:bg-secondary/90 hover:shadow-md focus:ring-secondary/30',
+  outline:
+    'border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-white focus:ring-primary/30',
+  ghost:
+    'text-primary bg-transparent hover:bg-primary/10 focus:ring-primary/20',
+  danger:
+    'bg-error text-white hover:bg-error-600 hover:shadow-md focus:ring-error/30',
+  success:
+    'bg-success text-white hover:bg-success-600 hover:shadow-md focus:ring-success/30',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'px-4 py-2 text-sm min-h-[36px]',
+  md: 'px-6 py-3 text-base min-h-[44px]',
+  lg: 'px-8 py-4 text-lg min-h-[52px]',
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className = '',
+      variant = 'primary',
+      size = 'md',
+      fullWidth = false,
+      children,
+      loading = false,
+      iconLeft,
+      iconRight,
+      disabled,
+      ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const baseClasses =
+      'inline-flex items-center justify-center rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+
+    const classes = [
+      baseClasses,
+      variantClasses[variant],
+      sizeClasses[size],
+      fullWidth ? 'w-full' : 'w-auto',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <button
+        ref={ref}
+        className={classes}
+        disabled={disabled || loading}
+        aria-label={ariaLabel}
+        aria-busy={loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="animate-spin -ml-1 mr-3 h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {!loading && iconLeft && <span className="mr-2">{iconLeft}</span>}
+        {children}
+        {!loading && iconRight && <span className="ml-2">{iconRight}</span>}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/website/components/ui/Card.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+
+type CardVariant = 'default' | 'featured' | 'interactive' | 'ghost';
+type CardPadding = 'sm' | 'md' | 'lg';
+type CardElevation = 0 | 1 | 2 | 3;
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Card content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: CardVariant;
+  /** Padding size */
+  padding?: CardPadding;
+  /** Shadow elevation level */
+  elevation?: CardElevation;
+  /** Enable hover effects */
+  hover?: boolean;
+  /** Make card clickable */
+  onClick?: () => void;
+}
+
+const variantClasses: Record<CardVariant, string> = {
+  default: 'bg-white border border-gray-200 rounded-xl',
+  featured:
+    'bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-primary/20 rounded-xl',
+  interactive:
+    'bg-white border-2 border-gray-200 rounded-xl cursor-pointer hover:border-primary',
+  ghost: 'bg-transparent border-none',
+};
+
+const paddingClasses: Record<CardPadding, string> = {
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+};
+
+const elevationClasses: Record<CardElevation, string> = {
+  0: 'shadow-none',
+  1: 'shadow-sm',
+  2: 'shadow-md',
+  3: 'shadow-lg',
+};
+
+const hoverClasses = 'hover:shadow-xl hover:-translate-y-1 transition-all duration-300';
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className = '',
+      variant = 'default',
+      padding = 'md',
+      elevation = 1,
+      hover = false,
+      children,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      variantClasses[variant],
+      paddingClasses[padding],
+      elevationClasses[elevation],
+      hover || onClick ? hoverClasses : '',
+      onClick ? 'cursor-pointer' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <div
+        ref={ref}
+        className={classes}
+        onClick={onClick}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        onKeyDown={
+          onClick
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onClick();
+                }
+              }
+            : undefined
+        }
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+// Card sub-components for better composition
+export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={`mb-4 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <h3 className={`text-2xl font-semibold text-gray-900 ${className}`} {...props}>
+      {children}
+    </h3>
+  );
+};
+
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <p className={`text-gray-600 ${className}`} {...props}>
+      {children}
+    </p>
+  );
+};
+
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={className} {...props}>
+      {children}
+    </div>
+  );
+};
+
+CardContent.displayName = 'CardContent';
+
+export const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={`mt-4 pt-4 border-t border-gray-200 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+CardFooter.displayName = 'CardFooter';

package/website/components/ui/Checkbox.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import React, { InputHTMLAttributes, forwardRef } from 'react';
+
+// Simple className merger utility
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// ============================================================================
+// CHECKBOX COMPONENT
+// ============================================================================
+// Checkbox with label, error states, and accessibility
+// ============================================================================
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      className,
+      label,
+      error,
+      helperText,
+      id,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    // Generate ID if not provided
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    const errorId = `${checkboxId}-error`;
+    const helperId = `${checkboxId}-helper`;
+
+    // Base checkbox styles
+    const baseStyles = [
+      'w-5',
+      'h-5',
+      'rounded',
+      'border-2',
+      'transition-all',
+      'duration-200',
+      'cursor-pointer',
+      'focus:outline-none',
+      'focus:ring-2',
+      'focus:ring-offset-2',
+      'disabled:opacity-50',
+      'disabled:cursor-not-allowed',
+    ];
+
+    // State-based styles
+    const stateStyles = error
+      ? [
+          'border-error-500',
+          'text-error-600',
+          'focus:ring-error-500',
+        ]
+      : [
+          'border-gray-300',
+          'text-primary-600',
+          'focus:ring-primary-500',
+          'checked:bg-primary-600',
+          'checked:border-primary-600',
+        ];
+
+    return (
+      <div>
+        <div className="flex items-start gap-3">
+          {/* Checkbox */}
+          <input
+            ref={ref}
+            type="checkbox"
+            id={checkboxId}
+            className={cn(
+              ...baseStyles,
+              ...stateStyles,
+              className
+            )}
+            disabled={disabled}
+            aria-invalid={error ? 'true' : 'false'}
+            aria-describedby={cn(
+              error ? errorId : undefined,
+              helperText ? helperId : undefined
+            )}
+            {...props}
+          />
+
+          {/* Label and helper text */}
+          {(label || helperText) && (
+            <div className="flex-1">
+              {label && (
+                <label
+                  htmlFor={checkboxId}
+                  className={cn(
+                    'block',
+                    'text-sm',
+                    'font-medium',
+                    'cursor-pointer',
+                    error ? 'text-error-700' : 'text-gray-700',
+                    disabled && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  {label}
+                </label>
+              )}
+
+              {helperText && !error && (
+                <p
+                  id={helperId}
+                  className="mt-0.5 text-sm text-gray-500"
+                >
+                  {helperText}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Error message */}
+        {error && (
+          <p
+            id={errorId}
+            className="mt-1 ml-8 text-sm text-error-600"
+            role="alert"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };