aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/accessibility/GlassA11y.js.map

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

package/dist/esm/components/accessibility/GlassFocusIndicators.js

@@ -0,0 +1,278 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState, useRef, useEffect } from 'react';
+import { useAccessibility } from './AccessibilityProvider.js';
+
+// Enhanced focus ring component
+function FocusRing({
+  element,
+  variant = "default"
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const [isVisible, setIsVisible] = useState(true);
+  useEffect(() => {
+    if (!element) return;
+    const updatePosition = () => {
+      const rect = element.getBoundingClientRect();
+      setPosition({
+        x: rect.left + window.scrollX,
+        y: rect.top + window.scrollY,
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    updatePosition();
+    const observer = new ResizeObserver(updatePosition);
+    observer.observe(element);
+    window.addEventListener("scroll", updatePosition);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [element]);
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "interactive":
+        return {
+          ring: "ring-4 ring-blue-400/60 ring-offset-2 ring-offset-slate-900",
+          glow: "shadow-[0_0_20px_rgba(96,165,250,0.6)]",
+          background: "bg-blue-400/10"
+        };
+      case "navigation":
+        return {
+          ring: "ring-3 ring-purple-400/60 ring-offset-2 ring-offset-slate-900",
+          glow: "shadow-[0_0_15px_rgba(167,139,250,0.6)]",
+          background: "bg-purple-400/10"
+        };
+      case "form":
+        return {
+          ring: "ring-3 ring-green-400/60 ring-offset-2 ring-offset-slate-900",
+          glow: "shadow-[0_0_15px_rgba(34,197,94,0.6)]",
+          background: "bg-green-400/10"
+        };
+      default:
+        return {
+          ring: "ring-3 ring-blue-400/60 ring-offset-2 ring-offset-slate-900",
+          glow: "shadow-[0_0_15px_rgba(96,165,250,0.5)]",
+          background: "bg-blue-400/8"
+        };
+    }
+  };
+  const styles = getVariantStyles();
+  return jsxs(motion.div, {
+    className: cn("glass-position-fixed glass-pointer-events-none glass-z-50 glass-radius-lg", styles.ring, styles.glow, styles.background),
+    style: {
+      left: position.x - 4,
+      top: position.y - 4,
+      width: position.width + 8,
+      height: position.height + 8
+    },
+    initial: {
+      opacity: 0,
+      scale: 0.8
+    },
+    animate: prefersReducedMotion ? {} : {
+      opacity: isVisible ? 1 : 0,
+      scale: 1
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.8
+    },
+    transition: {
+      type: "spring",
+      stiffness: 400,
+      damping: 25,
+      opacity: {
+        duration: 0.15
+      }
+    },
+    children: [jsx(motion.div, {
+      className: cn("glass-position-absolute glass-inset-0 glass-radius-lg glass-border-2 glass-border-transparent"),
+      style: {
+        background: `linear-gradient(45deg, ${variant === "interactive" ? "var(--glass-color-primary-light)" : variant === "navigation" ? "#A78BFA" : variant === "form" ? "#22C55E" : "var(--glass-color-primary-light)"}, transparent, ${variant === "interactive" ? "var(--glass-color-primary-light)" : variant === "navigation" ? "#A78BFA" : variant === "form" ? "#22C55E" : "var(--glass-color-primary-light)"})`,
+        backgroundSize: "200% 200%"
+      },
+      animate: prefersReducedMotion ? {} : {
+        backgroundPosition: ["0% 0%", "100% 100%", "0% 0%"]
+      },
+      transition: prefersReducedMotion ? {
+        duration: 0
+      } : {
+        duration: 2,
+        repeat: Infinity,
+        ease: "linear"
+      }
+    }), ["top-left", "top-right", "bottom-left", "bottom-right"].map(corner => jsx(motion.div, {
+      className: cn("glass-position-absolute glass-w-2 glass-h-2 glass-radius-full", variant === "interactive" ? "glass-surface-info" : variant === "navigation" ? "glass-surface-accent" : variant === "form" ? "bg-green-400" : "bg-blue-400", corner === "top-left" ? "-top-1 -left-1" : corner === "top-right" ? "-top-1 -right-1" : corner === "bottom-left" ? "-bottom-1 -left-1" : "-bottom-1 -right-1"),
+      animate: prefersReducedMotion ? {} : {
+        scale: [1, 1.5, 1],
+        opacity: [0.6, 1, 0.6]
+      },
+      transition: prefersReducedMotion ? {
+        duration: 0
+      } : {
+        duration: 1.5,
+        repeat: Infinity,
+        delay: corner === "top-right" ? 0.2 : corner === "bottom-right" ? 0.4 : corner === "bottom-left" ? 0.6 : 0
+      }
+    }, corner))]
+  });
+}
+// Main focus indicator system
+function GlassFocusIndicators() {
+  const {
+    settings
+  } = useAccessibility();
+  const [focusedElement, setFocusedElement] = useState(null);
+  const [focusVariant, setFocusVariant] = useState("default");
+  const lastFocusedRef = useRef(null);
+  useEffect(() => {
+    if (!settings.focusIndicators) return;
+    const handleFocus = event => {
+      const target = event.target;
+      if (!target || target === document.body) return;
+      // Determine focus variant based on element type and attributes
+      let variant = "default";
+      if (target.matches('button, [role="button"], [role="menuitem"], [role="tab"]')) {
+        variant = "interactive";
+      } else if (target.matches('a, [role="link"], nav a, [role="navigation"] *')) {
+        variant = "navigation";
+      } else if (target.matches('input, textarea, select, [role="textbox"], [role="combobox"], [role="listbox"]')) {
+        variant = "form";
+      }
+      setFocusedElement(target);
+      setFocusVariant(variant);
+      lastFocusedRef.current = target;
+      // Announce focus change to screen readers
+      if (settings.screenReaderOptimized && window.announceToScreenReader) {
+        const elementType = target.tagName.toLowerCase();
+        const elementText = target.textContent || target.getAttribute("aria-label") || target.getAttribute("aria-labelledby") || target.getAttribute("title") || "";
+        const roleText = target.getAttribute("role") || elementType;
+        window.announceToScreenReader(`Focused on ${roleText}${elementText ? ": " + elementText.slice(0, 50) : ""}`);
+      }
+    };
+    const handleBlur = event => {
+      // Small delay to prevent flicker when focus moves between elements
+      setTimeout(() => {
+        if (document.activeElement === document.body || !document.activeElement) {
+          setFocusedElement(null);
+        }
+      }, 10);
+    };
+    // Enhanced keyboard navigation
+    const handleKeyDown = event => {
+      if (!settings.keyboardNavigation) return;
+      const {
+        key,
+        ctrlKey,
+        altKey,
+        shiftKey
+      } = event;
+      // Skip navigation (Alt + S)
+      if (altKey && key === "s") {
+        event.preventDefault();
+        const mainContent = document.getElementById("main-content") || document.querySelector("main");
+        if (mainContent) {
+          mainContent.focus();
+          mainContent.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+        }
+      }
+      // Focus landmarks (Alt + L)
+      if (altKey && key === "l") {
+        event.preventDefault();
+        const landmarks = document.querySelectorAll('[role="banner"], [role="navigation"], [role="main"], [role="contentinfo"], header, nav, main, footer');
+        if (landmarks.length > 0) {
+          const currentIndex = Array.from(landmarks).findIndex(el => el === document.activeElement);
+          const nextIndex = (currentIndex + 1) % landmarks.length;
+          landmarks[nextIndex].focus();
+        }
+      }
+      // Focus headings (Alt + H)
+      if (altKey && key === "h") {
+        event.preventDefault();
+        const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+        if (headings.length > 0) {
+          const currentIndex = Array.from(headings).findIndex(el => el === document.activeElement);
+          const nextIndex = (currentIndex + 1) % headings.length;
+          headings[nextIndex].focus();
+        }
+      }
+      // Escape key to blur current element
+      if (key === "Escape" && focusedElement && focusedElement !== document.body) {
+        focusedElement.blur();
+        document.body.focus();
+      }
+    };
+    // Add event listeners
+    document.addEventListener("focusin", handleFocus, true);
+    document.addEventListener("focusout", handleBlur, true);
+    document.addEventListener("keydown", handleKeyDown);
+    // Focus visible elements on page load
+    const autoFocusElement = document.querySelector("[autofocus]");
+    if (autoFocusElement) {
+      setTimeout(() => autoFocusElement.focus(), 100);
+    }
+    return () => {
+      document.removeEventListener("focusin", handleFocus, true);
+      document.removeEventListener("focusout", handleBlur, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [settings.focusIndicators, settings.keyboardNavigation, settings.screenReaderOptimized, focusedElement]);
+  // Add focus trap for modals and overlays
+  useEffect(() => {
+    const handleFocusTrap = () => {
+      const modals = document.querySelectorAll('[role="dialog"], [aria-modal="true"], .modal, .overlay');
+      modals.forEach(modal => {
+        const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"]');
+        if (focusableElements.length === 0) return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const handleTabKey = event => {
+          if (event.key !== "Tab") return;
+          if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+              event.preventDefault();
+              lastElement.focus();
+            }
+          } else {
+            if (document.activeElement === lastElement) {
+              event.preventDefault();
+              firstElement.focus();
+            }
+          }
+        };
+        modal.addEventListener("keydown", handleTabKey);
+      });
+    };
+    if (settings.keyboardNavigation) {
+      handleFocusTrap();
+    }
+  }, [settings.keyboardNavigation, focusedElement]);
+  if (!settings.focusIndicators || !focusedElement) {
+    return null;
+  }
+  return jsx(AnimatePresence, {
+    children: jsx(FocusRing, {
+      element: focusedElement,
+      variant: focusVariant
+    })
+  });
+}
+
+export { GlassFocusIndicators, GlassFocusIndicators as default };
+//# sourceMappingURL=GlassFocusIndicators.js.map

package/dist/esm/components/accessibility/GlassFocusIndicators.js.map

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

package/dist/esm/components/advanced/BrandColorIntegration.js

@@ -0,0 +1,294 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { createGlassStyle } from '../../core/mixins/glassMixins.js';
+import { useIntelligentColor } from './IntelligentColorSystem.js';
+
+function BrandColorIntegration({
+  entityId,
+  brandColors,
+  fallbackColors = {
+    primary: "var(--glass-color-primary)",
+    secondary: "#1e40af"
+  },
+  animationDuration = 600,
+  className = "",
+  children
+}) {
+  const prefersReducedMotion = useReducedMotion();
+  const {
+    currentPalette,
+    adaptToBrand
+  } = useIntelligentColor();
+  const [entityColors, setEntityColors] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [colorTransition, setColorTransition] = useState(false);
+  // Mock brand color API - replace with actual API call
+  const fetchEntityBrandColors = async id => {
+    // Simulate API delay - reduced for better performance
+    await new Promise(resolve => setTimeout(resolve, 50));
+    // Mock data - replace with actual API response
+    const mockColors = {
+      apple: {
+        entityId: "apple",
+        primaryColor: "#007AFF",
+        secondaryColor: "#5856D6",
+        logoUrl: "/logos/apple.png",
+        colorHistory: [{
+          color: "#007AFF",
+          timestamp: Date.now() - 86400000,
+          confidence: 0.95
+        }, {
+          color: "#1D1D1F",
+          timestamp: Date.now() - 172800000,
+          confidence: 0.87
+        }]
+      },
+      google: {
+        entityId: "google",
+        primaryColor: "#4285F4",
+        secondaryColor: "#34A853",
+        logoUrl: "/logos/google.png",
+        colorHistory: [{
+          color: "#4285F4",
+          timestamp: Date.now() - 86400000,
+          confidence: 0.98
+        }, {
+          color: "#EA4335",
+          timestamp: Date.now() - 172800000,
+          confidence: 0.92
+        }]
+      },
+      microsoft: {
+        entityId: "microsoft",
+        primaryColor: "#0078D4",
+        secondaryColor: "#106EBE",
+        logoUrl: "/logos/microsoft.png",
+        colorHistory: [{
+          color: "#0078D4",
+          timestamp: Date.now() - 86400000,
+          confidence: 0.93
+        }, {
+          color: "#00BCF2",
+          timestamp: Date.now() - 172800000,
+          confidence: 0.89
+        }]
+      }
+    };
+    return mockColors[id] || {
+      entityId: id,
+      primaryColor: fallbackColors.primary,
+      secondaryColor: fallbackColors.secondary,
+      colorHistory: []
+    };
+  };
+  // Load entity colors when entityId changes
+  useEffect(() => {
+    if (!entityId) {
+      setEntityColors(null);
+      return;
+    }
+    let isMounted = true;
+    setIsLoading(true);
+    fetchEntityBrandColors(entityId).then(colors => {
+      if (isMounted) {
+        setEntityColors(colors);
+        setColorTransition(true);
+        // Transition reset handled via onAnimationComplete to avoid timers
+      }
+    }).catch(error => {
+      console.error("Failed to fetch brand colors:", error);
+      if (isMounted) {
+        setEntityColors({
+          entityId,
+          primaryColor: fallbackColors.primary,
+          secondaryColor: fallbackColors.secondary,
+          colorHistory: []
+        });
+      }
+    }).finally(() => {
+      if (isMounted) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [entityId, fallbackColors.primary, fallbackColors.secondary]); // Remove animationDuration from deps
+  // Adapt to brand colors when they change
+  useEffect(() => {
+    if (brandColors && brandColors.length > 0) {
+      adaptToBrand(brandColors);
+    }
+  }, [brandColors, adaptToBrand]);
+  // Generate CSS custom properties for brand colors
+  const getBrandColorVars = () => {
+    if (!entityColors) return {};
+    return {
+      "--brand-primary": entityColors.primaryColor,
+      "--brand-secondary": entityColors.secondaryColor,
+      "--brand-primary-rgb": hexToRgb(entityColors.primaryColor),
+      "--brand-secondary-rgb": hexToRgb(entityColors.secondaryColor),
+      "--brand-primary-alpha-10": `${entityColors.primaryColor}1A`,
+      "--brand-primary-alpha-20": `${entityColors.primaryColor}33`,
+      "--brand-primary-alpha-30": `${entityColors.primaryColor}4D`,
+      "--brand-secondary-alpha-10": `${entityColors.secondaryColor}1A`,
+      "--brand-secondary-alpha-20": `${entityColors.secondaryColor}33`,
+      "--brand-secondary-alpha-30": `${entityColors.secondaryColor}4D`
+    };
+  };
+  // Helper function to convert hex to RGB
+  const hexToRgb = hex => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : "0, 0, 0";
+  };
+  return jsxs(motion.div, {
+    className: `brand-color-integration ${className}`,
+    style: {
+      ...getBrandColorVars(),
+      position: "relative"
+    },
+    animate: colorTransition ? {
+      background: ["transparent", `${entityColors?.primaryColor}04`, "transparent"]
+    } : {},
+    transition: prefersReducedMotion ? {
+      duration: 0
+    } : {
+      duration: animationDuration / 1000,
+      ease: "easeInOut"
+    },
+    onAnimationComplete: () => {
+      if (colorTransition) setColorTransition(false);
+    },
+    children: [jsx(AnimatePresence, {
+      children: isLoading && jsx(motion.div, {
+        className: 'absolute inset-0 glass-flex glass-items-center glass-justify-center z-50',
+        style: createGlassStyle({
+          intent: "neutral",
+          elevation: "level2"
+        }),
+        initial: {
+          opacity: 0
+        },
+        animate: prefersReducedMotion ? {} : {
+          opacity: 1
+        },
+        exit: {
+          opacity: 0
+        },
+        children: jsxs(motion.div, {
+          className: cn("glass-flex glass-items-center glass-space-x-3 glass-text-primary"),
+          initial: {
+            y: 10,
+            opacity: 0
+          },
+          animate: prefersReducedMotion ? {} : {
+            y: 0,
+            opacity: 1
+          },
+          children: [jsx(motion.div, {
+            className: cn("glass-w-5 glass-h-5 glass-border-2 glass-border-primary glass-border-t-transparent glass-radius-full"),
+            animate: prefersReducedMotion ? {} : {
+              rotate: 360
+            },
+            transition: prefersReducedMotion ? {
+              duration: 0
+            } : {
+              duration: 1.5,
+              repeat: Infinity,
+              ease: "linear"
+            }
+          }), jsx("span", {
+            className: "glass-text-sm",
+            children: "Loading brand colors..."
+          })]
+        })
+      })
+    }), jsx(AnimatePresence, {
+      children: entityColors && !isLoading && jsx(motion.div, {
+        className: 'absolute glass-top-2 glass-right-2 z-10',
+        initial: {
+          opacity: 0,
+          scale: 0,
+          y: -10
+        },
+        animate: prefersReducedMotion ? {} : {
+          opacity: 1,
+          scale: 1,
+          y: 0
+        },
+        exit: {
+          opacity: 0,
+          scale: 0,
+          y: -10
+        },
+        transition: prefersReducedMotion ? {
+          duration: 0
+        } : {
+          delay: 0.2,
+          duration: 0.3
+        },
+        children: jsxs("div", {
+          className: cn("glass-flex glass-items-center glass-space-x-1 glass-px-2 glass-py-1 glass-radius-full glass-text-xs glass-font-medium glass-text-primary"),
+          style: createGlassStyle({
+            intent: "neutral",
+            elevation: "level2"
+          }),
+          children: [jsx("div", {
+            className: 'w-2 h-2 glass-radius-full',
+            style: {
+              backgroundColor: entityColors.primaryColor
+            }
+          }), jsx("span", {
+            children: "Brand"
+          })]
+        })
+      })
+    }), jsx(AnimatePresence, {
+      children: colorTransition && entityColors && jsx(motion.div, {
+        className: 'absolute inset-0 pointer-events-none',
+        style: {
+          background: `radial-gradient(circle at center, ${entityColors.primaryColor}20 0%, transparent 70%)`,
+          borderRadius: "inherit"
+        },
+        initial: {
+          opacity: 0,
+          scale: 0.8
+        },
+        animate: prefersReducedMotion ? {} : {
+          opacity: 1,
+          scale: 1.02
+        },
+        exit: {
+          opacity: 0,
+          scale: 1.05
+        },
+        transition: prefersReducedMotion ? {
+          duration: 0
+        } : {
+          duration: animationDuration / 1000,
+          ease: "easeOut"
+        }
+      })
+    }), children, jsx("style", {
+      dangerouslySetInnerHTML: {
+        __html: entityColors ? `
+          .brand-color-integration {
+            --brand-glass-primary: ${entityColors.primaryColor}1A;
+            --brand-glass-secondary: ${entityColors.secondaryColor}1A;
+            --brand-border-primary: ${entityColors.primaryColor}33;
+            --brand-border-secondary: ${entityColors.secondaryColor}33;
+            --brand-shadow-primary: 0 8px 32px ${entityColors.primaryColor}20;
+            --brand-shadow-secondary: 0 8px 32px ${entityColors.secondaryColor}20;
+          }
+        ` : ""
+      }
+    })]
+  });
+}
+
+export { BrandColorIntegration, BrandColorIntegration as default };
+//# sourceMappingURL=BrandColorIntegration.js.map

package/dist/esm/components/advanced/BrandColorIntegration.js.map

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