aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/website-components/MotionAwareGlass.js

@@ -0,0 +1,170 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
+import { createMotionAwareVariants, createMotionAwareInteractive } from '../../lib/motionPrimitives.js';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
+import '../../tokens/glass.js';
+
+/**
+ * Motion-aware Glass component that automatically respects user's motion preferences
+ * Provides beautiful glass morphism effects while being fully accessible
+ */
+const MotionAwareGlass = /*#__PURE__*/forwardRef(({
+  variant = "base",
+  interactive = false,
+  animationType = "fadeInUp",
+  children,
+  className,
+  asButton = false,
+  disabled = false,
+  ...props
+}, ref) => {
+  const {
+    prefersReducedMotion,
+    isMotionSafe
+  } = useMotionPreferenceContext();
+  // Get appropriate glass variant classes
+  const getVariantClasses = () => {
+    const baseClasses = "backdrop-filter border border-opacity-20 glass-radius-lg";
+    switch (variant) {
+      case "subtle":
+        return cn(baseClasses, "glass-subtle bg-white/5 border-white/10");
+      case "strong":
+        return cn(baseClasses, "glass-strong bg-white/10 border-white/20");
+      case "card":
+        return cn(baseClasses, "glass-foundation-complete bg-white/8 border-white/15 glass-p-6 shadow-lg");
+      case "button":
+        return cn(baseClasses, "glass-button-secondary bg-white/8 border-white/15 glass-px-6 glass-py-3 cursor-pointer");
+      case "input":
+        return cn(baseClasses, "glass-input bg-white/5 border-white/10 glass-px-4 glass-py-2");
+      default:
+        return cn(baseClasses, "glass-foundation-complete bg-white/8 border-white/15");
+    }
+  };
+  // Get motion variants based on animation type and motion preference
+  const getAnimationVariants = () => {
+    switch (animationType) {
+      case "fadeInScale":
+        return createMotionAwareVariants.fadeInScale(prefersReducedMotion);
+      case "slideLeft":
+        return createMotionAwareVariants.slideIn("left", prefersReducedMotion);
+      case "slideRight":
+        return createMotionAwareVariants.slideIn("right", prefersReducedMotion);
+      default:
+        return createMotionAwareVariants.fadeInUp(prefersReducedMotion);
+    }
+  };
+  // Get interactive variants for hover/tap effects
+  const getInteractiveVariants = () => {
+    if (!interactive || disabled) return {};
+    if (variant === "button" || asButton) {
+      return createMotionAwareInteractive.button(prefersReducedMotion);
+    }
+    if (variant === "card") {
+      return createMotionAwareInteractive.card(prefersReducedMotion);
+    }
+    // Default interactive behavior
+    if (prefersReducedMotion) {
+      return {
+        hover: {
+          backgroundColor: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
+          borderColor: "var(--glass-bg-default)",
+          transition: {
+            duration: 0.001
+          }
+        }
+      };
+    }
+    return {
+      hover: {
+        backgroundColor: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
+        borderColor: "var(--glass-bg-default)",
+        y: -2,
+        transition: {
+          duration: 0.2
+        }
+      },
+      tap: {
+        y: -1,
+        transition: {
+          duration: 0.1
+        }
+      }
+    };
+  };
+  const combinedClassName = cn(getVariantClasses(), {
+    "glass-card-motion-aware": interactive && !prefersReducedMotion,
+    "cursor-pointer": (interactive || asButton) && !disabled,
+    "cursor-not-allowed opacity-50": disabled,
+    "focus:outline-none focus:ring-3 focus:ring-blue-500/50": asButton || interactive,
+    "transition-none": prefersReducedMotion
+  }, className);
+  const animationVariants = getAnimationVariants();
+  const interactiveVariants = getInteractiveVariants();
+  // Combine all motion props
+  ({
+    variants: animationVariants,
+    initial: "hidden",
+    animate: "visible",
+    ...(interactive && interactiveVariants && typeof interactiveVariants === "object" && {
+      whileHover: "hover" in interactiveVariants ? "hover" : undefined,
+      whileTap: "tap" in interactiveVariants ? "tap" : undefined
+    }),
+    ...props
+  });
+  // Add accessibility attributes for buttons
+  const accessibilityProps = asButton || interactive ? {
+    role: asButton ? "button" : undefined,
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled,
+    onKeyDown: e => {
+      if ((e.key === "Enter" || e.key === " ") && (asButton || interactive) && !disabled) {
+        e.preventDefault();
+        props?.onClick?.(e);
+      }
+    }
+  } : {};
+  return jsxs(motion.div, {
+    ref: ref,
+    className: combinedClassName,
+    variants: animationVariants,
+    initial: "hidden",
+    animate: "visible",
+    whileHover: interactive && "hover" in interactiveVariants ? "hover" : undefined,
+    whileTap: interactive && "tap" in interactiveVariants ? "tap" : undefined,
+    ...props,
+    ...accessibilityProps,
+    children: [children, prefersReducedMotion && jsx("span", {
+      className: 'sr-only',
+      children: "Motion reduced for accessibility"
+    })]
+  });
+});
+MotionAwareGlass.displayName = "MotionAwareGlass";
+// Specialized variants for common use cases
+const MotionAwareGlassCard = /*#__PURE__*/forwardRef((props, ref) => jsx(MotionAwareGlass, {
+  ref: ref,
+  variant: "card",
+  interactive: true,
+  ...props
+}));
+MotionAwareGlassCard.displayName = "MotionAwareGlassCard";
+const MotionAwareGlassButton = /*#__PURE__*/forwardRef((props, ref) => jsx(MotionAwareGlass, {
+  ref: ref,
+  variant: "button",
+  asButton: true,
+  interactive: true,
+  ...props
+}));
+MotionAwareGlassButton.displayName = "MotionAwareGlassButton";
+const MotionAwareGlassInput = /*#__PURE__*/forwardRef((props, ref) => jsx(MotionAwareGlass, {
+  ref: ref,
+  variant: "input",
+  ...props
+}));
+MotionAwareGlassInput.displayName = "MotionAwareGlassInput";
+
+export { MotionAwareGlass, MotionAwareGlassButton, MotionAwareGlassCard, MotionAwareGlassInput, MotionAwareGlass as default };
+//# sourceMappingURL=MotionAwareGlass.js.map

package/dist/esm/components/website-components/MotionAwareGlass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MotionAwareGlass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/contexts/AnimationContext.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useContext, createContext } from 'react';
+
+const defaultContextValue = {
+  reducedMotion: false,
+  setReducedMotion: () => {},
+  defaultSpring: {
+    stiffness: 100,
+    damping: 10,
+    mass: 1
+  }
+};
+const AnimationContext = /*#__PURE__*/createContext(defaultContextValue);
+const AnimationProvider = ({
+  children,
+  defaultReducedMotion = false,
+  defaultSpring = {
+    stiffness: 100,
+    damping: 10,
+    mass: 1
+  }
+}) => {
+  const [reducedMotion, setReducedMotion] = useState(defaultReducedMotion);
+  // Check for prefers-reduced-motion
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      setReducedMotion(mediaQuery.matches);
+      const handleChange = e => {
+        setReducedMotion(e.matches);
+      };
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+  }, []);
+  const contextValue = {
+    reducedMotion,
+    setReducedMotion,
+    defaultSpring
+  };
+  return jsx(AnimationContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+const useAnimation = () => {
+  const context = useContext(AnimationContext);
+  if (!context) {
+    // Instead of throwing, return default values to prevent crashes
+    console.warn('useAnimation must be used within an AnimationProvider. Using default values.');
+    return defaultContextValue;
+  }
+  return context;
+};
+const useAnimationContext = useAnimation;
+
+export { AnimationContext, AnimationProvider, useAnimation, useAnimationContext };
+//# sourceMappingURL=AnimationContext.js.map

package/dist/esm/contexts/AnimationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationContext.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/contexts/ConsciousnessStreamProvider.js

@@ -0,0 +1,141 @@
+import { jsx } from 'react/jsx-runtime';
+import { useReducer, useCallback, useMemo, useContext, createContext } from 'react';
+import { DEFAULT_CONSCIOUSNESS_CONFIG } from '../types/consciousness.js';
+
+const mergeConfigs = (base, update) => ({
+  ...base,
+  ...update,
+  features: {
+    ...base.features,
+    ...update.features
+  },
+  performance: {
+    ...base.performance,
+    ...update.performance
+  },
+  privacy: {
+    ...base.privacy,
+    ...update.privacy
+  },
+  accessibility: {
+    ...base.accessibility,
+    ...update.accessibility
+  }
+});
+const streamReducer = (state, action) => {
+  switch (action.type) {
+    case 'updateConfig':
+      return {
+        ...state,
+        config: mergeConfigs(state.config, action.payload)
+      };
+    case 'updateFeature':
+      return {
+        ...state,
+        config: {
+          ...state.config,
+          features: {
+            ...state.config.features,
+            [action.feature]: action.value
+          }
+        }
+      };
+    case 'logEvent':
+      return {
+        ...state,
+        events: [...state.events, action.event].slice(-200)
+      };
+    case 'clearEvents':
+      return {
+        ...state,
+        events: []
+      };
+    case 'mergeHandlers':
+      return {
+        ...state,
+        handlers: {
+          ...state.handlers,
+          ...action.handlers
+        }
+      };
+    default:
+      return state;
+  }
+};
+const createEventId = () => `cse-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+const ConsciousnessStreamContext = /*#__PURE__*/createContext(null);
+function ConsciousnessStreamProvider({
+  children,
+  config,
+  handlers,
+  initialEvents = []
+}) {
+  const [state, dispatch] = useReducer(streamReducer, {
+    config: mergeConfigs(DEFAULT_CONSCIOUSNESS_CONFIG, config ?? {}),
+    handlers: handlers ?? {},
+    events: initialEvents.slice(-200)
+  });
+  const updateConfig = useCallback(partial => {
+    dispatch({
+      type: 'updateConfig',
+      payload: partial
+    });
+  }, []);
+  const updateFeature = useCallback((feature, enabled) => {
+    dispatch({
+      type: 'updateFeature',
+      feature,
+      value: enabled
+    });
+  }, []);
+  const logEvent = useCallback(eventInput => {
+    const event = {
+      id: eventInput.id ?? createEventId(),
+      timestamp: eventInput.timestamp ?? Date.now(),
+      feature: eventInput.feature,
+      payload: eventInput.payload,
+      confidence: eventInput.confidence,
+      status: eventInput.status
+    };
+    dispatch({
+      type: 'logEvent',
+      event
+    });
+    return event;
+  }, []);
+  const clearEvents = useCallback(() => {
+    dispatch({
+      type: 'clearEvents'
+    });
+  }, []);
+  const registerHandlers = useCallback(partial => {
+    dispatch({
+      type: 'mergeHandlers',
+      handlers: partial
+    });
+  }, []);
+  const value = useMemo(() => ({
+    config: state.config,
+    handlers: state.handlers,
+    events: state.events,
+    updateConfig,
+    updateFeature,
+    logEvent,
+    clearEvents,
+    registerHandlers
+  }), [state.config, state.handlers, state.events, updateConfig, updateFeature, logEvent, clearEvents, registerHandlers]);
+  return jsx(ConsciousnessStreamContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function useConsciousnessStream() {
+  const context = useContext(ConsciousnessStreamContext);
+  if (!context) {
+    throw new Error('useConsciousnessStream must be used within a ConsciousnessStreamProvider');
+  }
+  return context;
+}
+
+export { ConsciousnessStreamProvider, useConsciousnessStream };
+//# sourceMappingURL=ConsciousnessStreamProvider.js.map

package/dist/esm/contexts/ConsciousnessStreamProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsciousnessStreamProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/contexts/MotionPreferenceContext.js

@@ -0,0 +1,85 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useState, useEffect, createContext } from 'react';
+
+const MotionPreferenceContext = /*#__PURE__*/createContext({
+  prefersReducedMotion: false,
+  isMotionSafe: true,
+  motionPolicy: 'auto'
+});
+/**
+ * Hook to access motion preferences from context
+ *
+ * IMPORTANT: Use this instead of useReducedMotion() when you want centralized
+ * motion preferences controlled by MotionPreferenceProvider at the app root.
+ */
+const useMotionPreferenceContext = () => {
+  const context = useContext(MotionPreferenceContext);
+  if (!context) {
+    console.warn('useMotionPreferenceContext must be used within a MotionPreferenceProvider. Using default values.');
+    return {
+      prefersReducedMotion: false,
+      isMotionSafe: true,
+      motionPolicy: 'auto'
+    };
+  }
+  return context;
+};
+/**
+ * MotionPreferenceProvider - Centralized motion preference management
+ *
+ * CRITICAL for SSR: Wrap your app root with this provider to:
+ * 1. Prevent hydration mismatches from motion detection
+ * 2. Centralize motion preferences across all AuraGlass components
+ * 3. Control SSR behavior via props
+ *
+ * Example (SSR-safe):
+ * ```tsx
+ * <MotionPreferenceProvider initialMotionPolicy="always-safe">
+ *   <App />
+ * </MotionPreferenceProvider>
+ * ```
+ *
+ * Example (respect user preference):
+ * ```tsx
+ * <MotionPreferenceProvider initialMotionPolicy="auto">
+ *   <App />
+ * </MotionPreferenceProvider>
+ * ```
+ */
+const MotionPreferenceProvider = ({
+  children,
+  initialMotionPolicy = 'auto',
+  initialPrefersReducedMotion = false
+}) => {
+  // CRITICAL FIX: Start with SSR-safe default to prevent hydration mismatch
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(initialPrefersReducedMotion);
+  const [motionPolicy] = useState(initialMotionPolicy);
+  useEffect(() => {
+    // Skip detection if motion policy is forced
+    if (motionPolicy !== 'auto') {
+      setPrefersReducedMotion(motionPolicy === 'never-safe');
+      return;
+    }
+    // Detect actual motion preference after hydration (client-side only)
+    if (typeof window === 'undefined') return;
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = event => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [motionPolicy]);
+  const value = {
+    prefersReducedMotion,
+    isMotionSafe: !prefersReducedMotion,
+    motionPolicy
+  };
+  return jsx(MotionPreferenceContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+export { MotionPreferenceProvider, useMotionPreferenceContext };
+//# sourceMappingURL=MotionPreferenceContext.js.map

package/dist/esm/contexts/MotionPreferenceContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MotionPreferenceContext.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/core/mixins/edgeEffects.js

@@ -0,0 +1,8 @@
+// Edge effects mixin
+const edgeHighlight = {
+  boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px rgba(0, 0, 0, 0.1)',
+  border: '1px solid rgba(255, 255, 255, 0.1)'
+};
+
+export { edgeHighlight };
+//# sourceMappingURL=edgeEffects.js.map

package/dist/esm/core/mixins/edgeEffects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edgeEffects.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/core/mixins/glassMixins.js

@@ -0,0 +1,139 @@
+import { glassTokenUtils, AURA_GLASS } from '../../tokens/glass.js';
+
+/**
+ * SINGLE PUBLIC API - Creates glass styles from canonical tokens
+ *
+ * This is the ONLY way to create glass styles going forward.
+ * All other methods are deprecated.
+ */
+function createGlassStyle(opts = {}) {
+  const {
+    intent = 'neutral',
+    elevation = 'level2',
+    tier = 'high',
+    interactive = false,
+    hoverLift = false,
+    focusRing = false,
+    press = false
+  } = opts;
+  // Get the base styles from canonical tokens
+  const styles = glassTokenUtils.buildSurfaceStyles(intent, elevation, tier);
+  if (!styles.backdropFilter) {
+    const surface = glassTokenUtils.getSurface(intent, elevation);
+    const fallbackFilter = glassTokenUtils.buildBackdropFilter(surface.backdropBlur.px, tier);
+    styles.backdropFilter = fallbackFilter;
+    styles.WebkitBackdropFilter = fallbackFilter;
+  }
+  if (!styles.background) {
+    const surface = glassTokenUtils.getSurface(intent, elevation);
+    styles.background = surface.surface.base;
+  }
+  // Add interactive enhancements if requested
+  if (interactive) {
+    styles.cursor = 'pointer';
+    styles.userSelect = 'none';
+    // Interactive surfaces get slightly enhanced shadows by default
+    if (styles.boxShadow && styles.boxShadow !== 'none') {
+      styles.transition = `all ${AURA_GLASS.motion.defaultMs}ms ease-out, transform ${AURA_GLASS.motion.defaultMs}ms ease-out`;
+    }
+  }
+  // Add hover lift capability (transform applied via CSS :hover)
+  if (hoverLift) {
+    styles.transition = `${styles.transition || 'all 200ms ease-out'}, transform ${AURA_GLASS.motion.defaultMs}ms ease-out`;
+  }
+  // Add focus ring capability (applied via CSS :focus-visible)
+  if (focusRing) {
+    // The actual focus ring is applied via CSS, but we ensure transitions are smooth
+    styles.transition = `${styles.transition || 'all 200ms ease-out'}, box-shadow ${AURA_GLASS.motion.defaultMs}ms ease-out`;
+  }
+  // Add press effect capability (applied via CSS :active)
+  if (press) {
+    // The actual press effect is applied via CSS, but we ensure transitions are smooth
+    styles.transition = `${styles.transition || 'all 200ms ease-out'}, transform ${AURA_GLASS.motion.defaultMs}ms ease-out`;
+  }
+  return styles;
+}
+/**
+ * DEPRECATED: Legacy hover mixin
+ * @deprecated Use CSS :hover with createGlassStyle({ hoverLift: true })
+ */
+function createGlassHoverMixin(options = {}) {
+  console.warn('[AuraGlass] createGlassHoverMixin is deprecated. Use CSS :hover with hoverLift option.');
+  return {
+    transform: 'translateY(-2px) scale(1.01)',
+    boxShadow: '0 12px 40px rgba(0,0,0,0.3)'
+  };
+}
+/**
+ * DEPRECATED: Legacy focus mixin
+ * @deprecated Use CSS :focus-visible with createGlassStyle({ focusRing: true })
+ */
+function createGlassFocusMixin(options = {}) {
+  console.warn('[AuraGlass] createGlassFocusMixin is deprecated. Use CSS :focus-visible with focusRing option.');
+  return {
+    outline: 'none',
+    boxShadow: '0 0 0 3px var(--glass-color-primary, 0.3)'
+  };
+}
+/**
+ * DEPRECATED: Legacy disabled mixin
+ * @deprecated Use CSS :disabled with reduced opacity
+ */
+function createGlassDisabledMixin() {
+  console.warn('[AuraGlass] createGlassDisabledMixin is deprecated. Use CSS :disabled with opacity: 0.6.');
+  return {
+    opacity: 0.6,
+    cursor: 'not-allowed',
+    pointerEvents: 'none'
+  };
+}
+/**
+ * Utility: Generate CSS custom properties for dynamic theming
+ * This creates CSS variables that can be overridden at runtime
+ */
+function generateGlassThemeVariables(options = {}) {
+  const {
+    intent = 'neutral',
+    elevation = 'level2'
+  } = options;
+  const surface = glassTokenUtils.getSurface(intent, elevation);
+  return {
+    '--glass-surface': surface.surface.base,
+    '--glass-border-color': surface.border.color,
+    '--glass-border-width': `${surface.border.width}px`,
+    '--glass-blur': `${surface.backdropBlur.px}px`,
+    '--glass-text-primary': surface.text.primary,
+    '--glass-text-secondary': surface.text.secondary,
+    '--glass-shadow': surface.outerShadow ? `${surface.outerShadow.x}px ${surface.outerShadow.y}px ${surface.outerShadow.blur}px ${surface.outerShadow.spread}px ${surface.outerShadow.color}` : 'none',
+    '--glass-radius': `${AURA_GLASS.radii.md}px`,
+    '--glass-transition': `all ${AURA_GLASS.motion.defaultMs}ms ease-out`
+  };
+}
+/**
+ * Utility: Create responsive glass styles for different screen sizes
+ *
+ * Returns CSS properties optimized for different performance tiers
+ * based on typical device capabilities.
+ */
+function createResponsiveGlassStyle(mobile, tablet, desktop) {
+  return {
+    // Mobile: use low tier for better performance
+    mobile: createGlassStyle({
+      ...mobile,
+      tier: 'low'
+    }),
+    // Tablet: use medium tier for balanced experience  
+    tablet: createGlassStyle({
+      ...tablet,
+      tier: 'medium'
+    }),
+    // Desktop: use high tier for full experience
+    desktop: createGlassStyle({
+      ...desktop,
+      tier: 'high'
+    })
+  };
+}
+
+export { createGlassDisabledMixin, createGlassFocusMixin, createGlassHoverMixin, createGlassStyle, createResponsiveGlassStyle, generateGlassThemeVariables };
+//# sourceMappingURL=glassMixins.js.map

package/dist/esm/core/mixins/glassMixins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glassMixins.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}