aura-glass 2.0.39 → 2.1.0

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

@@ -0,0 +1,828 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useRef, useState, useEffect, useCallback, useContext, createContext } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '../../lib/utilsComprehensive.js';
+
+// AI-powered layout generator
+class AILayoutGenerator {
+  constructor(config) {
+    this.config = config;
+    this.designTokens = this.initializeDesignTokens();
+    this.templateLibrary = new Map();
+    this.loadTemplateLibrary();
+  }
+  initializeDesignTokens() {
+    return {
+      colors: {
+        primary: "var(--glass-color-primary)",
+        secondary: "var(--glass-color-success)",
+        accent: "#8b5cf6",
+        background: '/* Use createGlassStyle({ intent: "primary", elevation: "level2" }) */',
+        surface: "var(--glass-bg-default)",
+        text: "var(--glass-white)",
+        textSecondary: "rgba(var(--glass-color-white) / var(--glass-opacity-70))"
+      },
+      spacing: {
+        xs: "0.25rem",
+        sm: "0.5rem",
+        md: "1rem",
+        lg: "1.5rem",
+        xl: "2rem",
+        "2xl": "3rem"
+      },
+      typography: {
+        fontSize: {
+          xs: "0.75rem",
+          sm: "0.875rem",
+          base: "1rem",
+          lg: "1.125rem",
+          xl: "1.25rem",
+          "2xl": "1.5rem"
+        },
+        fontWeight: {
+          light: 300,
+          normal: 400,
+          medium: 500,
+          semibold: 600,
+          bold: 700
+        }
+      },
+      shadows: {
+        sm: "0 1px 2px 0 rgba(var(--glass-color-black) / var(--glass-opacity-5))",
+        md: "0 4px 6px -1px rgba(var(--glass-color-black) / var(--glass-opacity-10))",
+        lg: "0 10px 15px -3px rgba(var(--glass-color-black) / var(--glass-opacity-10))",
+        glass: "0 8px 32px rgba(31, 38, 135, 0.37)"
+      },
+      borders: {
+        radius: "0.375rem"
+      },
+      animations: {
+        duration: {
+          fast: "0.15s",
+          normal: "0.3s",
+          slow: "0.5s"
+        },
+        easing: {
+          ease: "ease",
+          easeIn: "ease-in",
+          easeOut: "ease-out",
+          bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+        }
+      }
+    };
+  }
+  loadTemplateLibrary() {
+    this.templateLibrary.set("card", `
+      <div className="glass-surface-primary glass-elev-2 glass-radius-lg p-6">
+        {children}
+      </div>
+    `);
+    this.templateLibrary.set("button", `
+      <motion.button
+        className="glass-surface-secondary px-4 py-2 glass-radius-md text-primary"
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+      >
+        {children}
+      </motion.button>
+    `);
+    this.templateLibrary.set("input", `
+      <input
+        className="glass-surface-secondary border glass-radius-md px-3 py-2 text-primary glass-touch-target glass-contrast-guard"
+        placeholder={placeholder}
+      />
+    `);
+  }
+  async generateLayout(prompt) {
+    const startTime = Date.now();
+    // For demo, we'll use rule-based generation
+    // In practice, this would call an LLM API
+    const generatedJSX = await this.generateJSXFromPrompt(prompt);
+    const generatedCSS = await this.generateCSSFromPrompt(prompt);
+    const iterations = 1;
+    return {
+      id: `layout-${Date.now()}`,
+      prompt,
+      jsx: generatedJSX,
+      css: generatedCSS,
+      tokens: this.designTokens,
+      confidence: 0.85,
+      iterations,
+      timestamp: startTime
+    };
+  }
+  async generateJSXFromPrompt(prompt) {
+    // Simulate AI generation with template matching
+    const {
+      description,
+      purpose,
+      style = "standard"
+    } = prompt;
+    let jsx = "";
+    if (description.toLowerCase().includes("dashboard")) {
+      jsx = this.generateDashboardLayout(prompt);
+    } else if (description.toLowerCase().includes("form")) {
+      jsx = this.generateFormLayout(prompt);
+    } else if (description.toLowerCase().includes("card")) {
+      jsx = this.generateCardLayout(prompt);
+    } else if (description.toLowerCase().includes("list")) {
+      jsx = this.generateListLayout(prompt);
+    } else {
+      jsx = this.generateGenericLayout(prompt);
+    }
+    return jsx;
+  }
+  generateDashboardLayout(prompt) {
+    return `
+<div className="glass-min-h-screen glass-surface-primary p-6">
+  <div className="max-w-7xl mx-auto space-y-6">
+    {/* Header */}
+    <div className="flex items-center justify-between">
+      <h1 className="text-3xl font-bold text-primary">Dashboard</h1>
+      <div className="flex gap-4">
+        <motion.button className="glass-surface-secondary px-4 py-2 glass-radius-md">
+          Settings
+        </motion.button>
+        <motion.button className="glass-surface-accent px-4 py-2 glass-radius-md">
+          New Item
+        </motion.button>
+      </div>
+    </div>
+
+    {/* Stats Grid */}
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {stats.map((stat, index) => (
+        <motion.div
+          key={index}
+          className="glass-surface-secondary glass-elev-2 glass-radius-lg p-6"
+          initial={{ opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
+          transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.3 }}
+        >
+          <div className="text-2xl font-bold text-primary">{stat.value}</div>
+          <div className="text-sm glass-text-secondary">{stat.label}</div>
+        </motion.div>
+      ))}
+    </div>
+
+    {/* Main Content */}
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="lg:col-span-2">
+        <div className="glass-surface-secondary glass-elev-2 glass-radius-lg p-6">
+          <h2 className="text-xl font-semibold text-primary mb-4">Main Chart</h2>
+          {/* Chart component would go here */}
+        </div>
+      </div>
+      <div className="space-y-6">
+        <div className="glass-surface-secondary glass-elev-2 glass-radius-lg p-6">
+          <h3 className="text-lg font-semibold text-primary mb-4">Recent Activity</h3>
+          {/* Activity list would go here */}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`;
+  }
+  generateFormLayout(prompt) {
+    return `
+<div className="max-w-md mx-auto glass-surface-primary glass-elev-3 glass-radius-lg p-8">
+  <h2 className="text-2xl font-bold text-primary mb-6 text-center">Contact Form</h2>
+  
+  <form className="space-y-6">
+    <div>
+      <label className="block text-sm font-medium glass-text-secondary mb-2">
+        Full Name
+      </label>
+      <input
+        type="text"
+        className="w-full glass-surface-secondary border glass-radius-md px-3 py-2 text-primary placeholder-opacity-50 glass-touch-target glass-contrast-guard"
+        placeholder="Enter your full name"
+      />
+    </div>
+
+    <div>
+      <label className="block text-sm font-medium glass-text-secondary mb-2">
+        Email Address
+      </label>
+      <input
+        type="email"
+        className="w-full glass-surface-secondary border glass-radius-md px-3 py-2 text-primary placeholder-opacity-50 glass-touch-target glass-contrast-guard"
+        placeholder="Enter your email"
+      />
+    </div>
+
+    <div>
+      <label className="block text-sm font-medium glass-text-secondary mb-2">
+        Message
+      </label>
+      <textarea
+        rows={4}
+        className="w-full glass-surface-secondary border glass-radius-md px-3 py-2 text-primary placeholder-opacity-50 glass-touch-target glass-contrast-guard"
+        placeholder="Enter your message"
+      />
+    </div>
+
+    <motion.button
+      type="submit"
+      className="w-full glass-surface-accent glass-elev-2 glass-radius-md py-3 font-semibold text-primary"
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+    >
+      Send Message
+    </motion.button>
+  </form>
+</div>`;
+  }
+  generateCardLayout(prompt) {
+    return `
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+  {items.map((item, index) => (
+    <motion.div
+      key={item.id}
+      className="glass-surface-secondary glass-elev-2 glass-radius-lg overflow-hidden"
+      initial={{ opacity: 0, y: 20 }}
+      animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
+      transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.3 }}
+      whileHover={{ scale: 1.02 }}
+    >
+      {item.image && (
+        <div className="aspect-video glass-gradient-primary glass-gradient-primary glass-gradient-primary"></div>
+      )}
+      
+      <div className="p-6">
+        <h3 className="text-xl font-semibold text-primary mb-2">
+          {item.title}
+        </h3>
+        <p className="glass-text-secondary mb-4">
+          {item.description}
+        </p>
+        
+        <div className="flex items-center justify-between">
+          <span className="text-sm glass-text-tertiary">
+            {item.date}
+          </span>
+          <motion.button
+            className="glass-surface-accent px-3 py-1 glass-radius-sm text-sm"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            View
+          </motion.button>
+        </div>
+      </div>
+    </motion.div>
+  ))}
+</div>`;
+  }
+  generateListLayout(prompt) {
+    return `
+<div className="max-w-2xl mx-auto glass-surface-primary glass-elev-2 glass-radius-lg overflow-hidden">
+  <div className="p-6 border-b border">
+    <h2 className="text-2xl font-bold text-primary">List Items</h2>
+    <p className="glass-text-secondary glass-mt-1">Manage your items efficiently</p>
+  </div>
+  
+  <div className="divide-y glass-divide">
+    {items.map((item, index) => (
+      <motion.div
+        key={item.id}
+        className="p-4 hover:glass-surface-secondary transition-colors"
+        initial={{ opacity: 0, x: -20 }}
+        animate={prefersReducedMotion ? {} : { opacity: 1, x: 0 }}
+        transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.3 }}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 glass-surface-accent glass-radius-full flex items-center justify-center">
+              {item.icon}
+            </div>
+            <div>
+              <div className="font-medium text-primary">{item.title}</div>
+              <div className="text-sm glass-text-secondary">{item.subtitle}</div>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <motion.button
+              className="p-2 glass-surface-secondary glass-radius-md"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Edit
+            </motion.button>
+            <motion.button
+              className="p-2 glass-surface-secondary glass-radius-md"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Delete
+            </motion.button>
+          </div>
+        </div>
+      </motion.div>
+    ))}
+  </div>
+</div>`;
+  }
+  generateGenericLayout(prompt) {
+    return `
+<div className="glass-surface-primary glass-elev-2 glass-radius-lg p-6">
+  <div className="text-center gap-4">
+    <h1 className="text-3xl font-bold text-primary">
+      Generated Component
+    </h1>
+    <p className="glass-text-secondary max-w-md mx-auto">
+      This is a dynamically generated component based on your prompt: "${prompt.description}"
+    </p>
+    
+    <div className="flex justify-center gap-4 pt-4">
+      <motion.button
+        className="glass-surface-accent px-6 py-3 glass-radius-md font-medium"
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+      >
+        Primary Action
+      </motion.button>
+      <motion.button
+        className="glass-surface-secondary px-6 py-3 glass-radius-md font-medium"
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+      >
+        Secondary Action
+      </motion.button>
+    </div>
+  </div>
+</div>`;
+  }
+  async generateCSSFromPrompt(prompt) {
+    const {
+      style = "standard"
+    } = prompt;
+    const baseCSS = `
+.generated-component {
+  /* Base glassmorphism styles */
+  backdrop-filter: var(--glass-backdrop-blur);
+  -webkit-backdrop-filter: var(--glass-backdrop-blur);
+  background: var(--glass-bg-default);
+  border: 1px solid var(--glass-border-default);
+  border-radius: 12px;
+  box-shadow: var(--glass-elev-2);
+}
+
+.generated-component .glass-surface-primary {
+  background: var(--glass-bg-default);
+  backdrop-filter: var(--glass-backdrop-blur);
+}
+
+.generated-component .glass-surface-secondary {
+  background: var(--glass-bg-default);
+  backdrop-filter: var(--glass-backdrop-blur);
+}
+
+.generated-component .glass-text-primary {
+  color: var(--glass-text-primary);
+}
+
+.generated-component .glass-text-secondary {
+  color: var(--glass-text-secondary);
+}
+
+.generated-component .glass-border {
+  border: 1px solid var(--glass-border-default);
+}
+`;
+    let styleSpecificCSS = "";
+    switch (style) {
+      case "minimal":
+        styleSpecificCSS = `
+.generated-component {
+  --glass-blur: 5px;
+  --glass-opacity: 0.05;
+  --animation-duration: 0.2s;
+}
+`;
+        break;
+      case "detailed":
+        styleSpecificCSS = `
+.generated-component {
+  --glass-blur: 25px;
+  --glass-opacity: 0.15;
+  --animation-duration: 0.4s;
+  box-shadow: var(--glass-elev-2);
+}
+`;
+        break;
+      case "experimental":
+        styleSpecificCSS = `
+.generated-component {
+  --glass-blur: 30px;
+  --glass-opacity: 0.2;
+  --animation-duration: 0.6s;
+  background: var(--glass-bg-default);
+  animation: glowPulse 2s ease-in-out infinite alternate;
+}
+
+@keyframes glowPulse {
+  0% { box-shadow: var(--glass-elev-2); }
+  100% { box-shadow: var(--glass-elev-2); }
+}
+`;
+        break;
+    }
+    return baseCSS + styleSpecificCSS;
+  }
+}
+// Layout optimizer using genetic algorithms
+class LayoutOptimizer {
+  constructor() {
+    this.population = [];
+    this.fitnessScores = new Map();
+    this.generationCount = 0;
+  }
+  async optimizeLayout(baseLayout, userFeedback) {
+    // Initialize population if empty
+    if (this.population.length === 0) {
+      this.population = await this.createInitialPopulation(baseLayout);
+    }
+    // Calculate fitness scores
+    this.calculateFitnessScores(userFeedback);
+    // Evolve the population
+    this.population = await this.evolvePopulation();
+    this.generationCount++;
+    // Return the best layout
+    return this.getBestLayout();
+  }
+  async createInitialPopulation(baseLayout) {
+    const population = [baseLayout];
+    // Create variants
+    for (let i = 0; i < 9; i++) {
+      const variant = await this.createVariant(baseLayout);
+      population.push(variant);
+    }
+    return population;
+  }
+  async createVariant(layout) {
+    // Create variations in the layout
+    const mutations = ["spacing", "colors", "typography", "shadows", "animations"];
+    const randomMutation = mutations[Math.floor(Math.random() * mutations.length)];
+    const mutatedTokens = {
+      ...layout.tokens
+    };
+    // Apply random mutations
+    switch (randomMutation) {
+      case "colors":
+        const hue = Math.floor(Math.random() * 360);
+        mutatedTokens.colors.primary = `hsl(${hue}, 70%, 60%)`;
+        break;
+      case "spacing":
+        const scale = 0.8 + Math.random() * 0.4; // 0.8 to 1.2
+        Object.keys(mutatedTokens.spacing).forEach(key => {
+          const value = parseFloat(mutatedTokens.spacing[key]);
+          mutatedTokens.spacing[key] = `${value * scale}rem`;
+        });
+        break;
+    }
+    return {
+      ...layout,
+      id: `${layout.id}-variant-${Date.now()}`,
+      tokens: mutatedTokens,
+      confidence: layout.confidence * (0.8 + Math.random() * 0.4),
+      timestamp: Date.now()
+    };
+  }
+  calculateFitnessScores(feedback) {
+    this.population.forEach((layout, index) => {
+      const score = feedback[index] || 0.5; // Default neutral feedback
+      this.fitnessScores.set(layout.id, score);
+    });
+  }
+  async evolvePopulation() {
+    // Selection, crossover, and mutation
+    const selected = this.selection();
+    const offspring = await this.crossover(selected);
+    return this.mutation(offspring);
+  }
+  selection() {
+    // Tournament selection
+    const selected = [];
+    const tournamentSize = 3;
+    while (selected.length < this.population.length / 2) {
+      const tournament = [];
+      for (let i = 0; i < tournamentSize; i++) {
+        const randomIndex = Math.floor(Math.random() * this.population.length);
+        tournament.push(this.population[randomIndex]);
+      }
+      // Select the best from tournament
+      const winner = tournament.reduce((best, current) => {
+        const bestScore = this.fitnessScores.get(best.id) || 0;
+        const currentScore = this.fitnessScores.get(current.id) || 0;
+        return currentScore > bestScore ? current : best;
+      });
+      selected.push(winner);
+    }
+    return selected;
+  }
+  async crossover(parents) {
+    const offspring = [...parents];
+    // Create offspring by combining parent traits
+    while (offspring.length < this.population.length) {
+      const parent1 = parents[Math.floor(Math.random() * parents.length)];
+      const parent2 = parents[Math.floor(Math.random() * parents.length)];
+      const child = await this.combineLayouts(parent1, parent2);
+      offspring.push(child);
+    }
+    return offspring;
+  }
+  async combineLayouts(parent1, parent2) {
+    // Combine design tokens from both parents
+    const combinedTokens = {
+      colors: Math.random() > 0.5 ? parent1.tokens.colors : parent2.tokens.colors,
+      spacing: Math.random() > 0.5 ? parent1.tokens.spacing : parent2.tokens.spacing,
+      typography: Math.random() > 0.5 ? parent1.tokens.typography : parent2.tokens.typography,
+      shadows: Math.random() > 0.5 ? parent1.tokens.shadows : parent2.tokens.shadows,
+      borders: Math.random() > 0.5 ? parent1.tokens.borders : parent2.tokens.borders,
+      animations: Math.random() > 0.5 ? parent1.tokens.animations : parent2.tokens.animations
+    };
+    return {
+      id: `child-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      prompt: parent1.prompt,
+      jsx: Math.random() > 0.5 ? parent1.jsx : parent2.jsx,
+      css: parent1.css,
+      // Would need more sophisticated combination
+      tokens: combinedTokens,
+      confidence: (parent1.confidence + parent2.confidence) / 2,
+      iterations: Math.max(parent1.iterations, parent2.iterations) + 1,
+      timestamp: Date.now()
+    };
+  }
+  mutation(population) {
+    const mutationRate = 0.1;
+    return population.map(async layout => {
+      if (Math.random() < mutationRate) {
+        return await this.createVariant(layout);
+      }
+      return layout;
+    }); // Simplified for demo
+  }
+  getBestLayout() {
+    return this.population.reduce((best, current) => {
+      const bestScore = this.fitnessScores.get(best.id) || 0;
+      const currentScore = this.fitnessScores.get(current.id) || 0;
+      return currentScore > bestScore ? current : best;
+    });
+  }
+}
+// React Context
+const AutoComposerContext = /*#__PURE__*/createContext({
+  generator: null,
+  optimizer: null,
+  generateLayout: async () => ({}),
+  optimizeLayout: async () => ({}),
+  currentLayouts: []
+});
+// Provider component
+function GlassAutoComposerProvider({
+  children,
+  config = {
+    model: "claude",
+    temperature: 0.7,
+    maxTokens: 2000,
+    designSystem: "glass",
+    accessibility: true,
+    responsive: true
+  }
+}) {
+  useReducedMotion();
+  const generatorRef = useRef();
+  const optimizerRef = useRef();
+  const [currentLayouts, setCurrentLayouts] = useState([]);
+  useEffect(() => {
+    const fullConfig = {
+      model: "claude",
+      temperature: 0.7,
+      maxTokens: 2000,
+      designSystem: "glass",
+      accessibility: true,
+      responsive: true,
+      ...config
+    };
+    generatorRef.current = new AILayoutGenerator(fullConfig);
+    optimizerRef.current = new LayoutOptimizer();
+  }, [config]);
+  const generateLayout = useCallback(async prompt => {
+    if (!generatorRef.current) throw new Error("Generator not initialized");
+    const layout = await generatorRef.current.generateLayout(prompt);
+    setCurrentLayouts(prev => [...prev, layout]);
+    return layout;
+  }, []);
+  const optimizeLayout = useCallback(async (layout, feedback) => {
+    if (!optimizerRef.current) throw new Error("Optimizer not initialized");
+    const optimized = await optimizerRef.current.optimizeLayout(layout, feedback);
+    setCurrentLayouts(prev => [...prev, optimized]);
+    return optimized;
+  }, []);
+  const value = {
+    generator: generatorRef.current || null,
+    optimizer: optimizerRef.current || null,
+    generateLayout,
+    optimizeLayout,
+    currentLayouts
+  };
+  return jsx(AutoComposerContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+// Hook to use auto composer
+function useAutoComposer() {
+  const context = useContext(AutoComposerContext);
+  if (!context) {
+    throw new Error("useAutoComposer must be used within GlassAutoComposerProvider");
+  }
+  return context;
+}
+// Auto composer interface
+function GlassAutoComposerInterface({
+  className
+}) {
+  const {
+    generateLayout
+  } = useAutoComposer();
+  const [prompt, setPrompt] = useState("");
+  const [generatedLayout, setGeneratedLayout] = useState(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const handleGenerate = async () => {
+    if (!prompt.trim()) return;
+    setIsGenerating(true);
+    try {
+      const layout = await generateLayout({
+        description: prompt,
+        purpose: "user-requested",
+        style: "standard"
+      });
+      setGeneratedLayout(layout);
+    } catch (error) {
+      console.error("Failed to generate layout:", error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+  return jsxs("div", {
+    className: cn("space-y-6", className),
+    children: [jsxs("div", {
+      className: "glass-surface-primary glass-elev-2 glass-radius-lg glass-p-6",
+      children: [jsx("h2", {
+        className: 'glass-text-2xl font-bold text-primary mb-4',
+        children: "AI Layout Generator"
+      }), jsxs("div", {
+        className: "glass-gap-4",
+        children: [jsxs("div", {
+          children: [jsx("label", {
+            className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
+            children: "Describe the layout you want"
+          }), jsx("textarea", {
+            className: 'glass-w-full glass-surface-secondary glass-border glass-radius-md glass-px-3 glass-py-2 text-primary glass-touch-target glass-contrast-guard',
+            rows: 3,
+            value: prompt,
+            onChange: e => setPrompt(e.target.value),
+            placeholder: "e.g., Create a modern dashboard with charts, stats cards, and a sidebar navigation"
+          })]
+        }), jsx(motion.button, {
+          className: 'glass-surface-accent glass-px-6 glass-py-3 glass-radius-md font-medium',
+          onClick: handleGenerate,
+          disabled: isGenerating || !prompt.trim(),
+          whileHover: {
+            scale: 1.02
+          },
+          whileTap: {
+            scale: 0.98
+          },
+          children: isGenerating ? "Generating..." : "Generate Layout"
+        })]
+      })]
+    }), generatedLayout && jsxs("div", {
+      className: "glass-surface-primary glass-elev-2 glass-radius-lg glass-p-6",
+      children: [jsxs("div", {
+        className: 'glass-flex glass-items-center glass-justify-between mb-4',
+        children: [jsx("h3", {
+          className: 'glass-text-xl font-semibold text-primary',
+          children: "Generated Layout"
+        }), jsx("div", {
+          className: "glass-flex glass-items-center glass-gap-2",
+          children: jsxs("span", {
+            className: "glass-text-sm glass-text-secondary",
+            children: ["Confidence: ", (generatedLayout.confidence * 100).toFixed(0), "%"]
+          })
+        })]
+      }), jsxs("div", {
+        className: "glass-gap-4",
+        children: [jsxs("div", {
+          children: [jsx("h4", {
+            className: 'glass-text-sm font-medium glass-text-secondary mb-2',
+            children: "JSX Code"
+          }), jsx("pre", {
+            className: 'glass-surface-secondary glass-radius-md glass-p-4 glass-text-xs text-primary overflow-x-auto',
+            children: generatedLayout.jsx
+          })]
+        }), jsxs("div", {
+          children: [jsx("h4", {
+            className: 'glass-text-sm font-medium glass-text-secondary mb-2',
+            children: "CSS Styles"
+          }), jsx("pre", {
+            className: 'glass-surface-secondary glass-radius-md glass-p-4 glass-text-xs text-primary overflow-x-auto',
+            children: generatedLayout.css
+          })]
+        })]
+      })]
+    })]
+  });
+}
+// Layout renderer component
+function GlassGeneratedLayoutRenderer({
+  layout,
+  data = {},
+  className
+}) {
+  const renderJSX = useCallback(() => {
+    // In a real implementation, this would safely execute the generated JSX
+    // For demo purposes, we'll show a placeholder
+    return jsxs("div", {
+      className: 'generated-component glass-p-6 text-center',
+      children: [jsx("h3", {
+        className: 'glass-text-xl font-bold text-primary mb-2',
+        children: "Generated Component Preview"
+      }), jsxs("p", {
+        className: 'glass-text-secondary mb-4',
+        children: ["Based on: \"", layout.prompt.description, "\""]
+      }), jsxs("div", {
+        className: "glass-text-xs glass-text-tertiary",
+        children: ["Generated at: ", new Date(layout.timestamp).toLocaleString()]
+      })]
+    });
+  }, [layout]);
+  return jsxs("div", {
+    className: cn("generated-layout", className),
+    children: [jsx("style", {
+      children: layout.css
+    }), renderJSX()]
+  });
+}
+// Hook for layout generation
+function useLayoutGenerator() {
+  const {
+    generateLayout,
+    currentLayouts
+  } = useAutoComposer();
+  const generateFromDescription = useCallback(async description => {
+    return generateLayout({
+      description,
+      purpose: "user-generated",
+      style: "standard"
+    });
+  }, [generateLayout]);
+  return {
+    generateFromDescription,
+    currentLayouts,
+    hasLayouts: currentLayouts.length > 0
+  };
+}
+// Presets for different generation modes
+const autoComposerPresets = {
+  creative: {
+    temperature: 0.9,
+    style: "experimental",
+    iterations: 5
+  },
+  balanced: {
+    temperature: 0.7,
+    style: "standard",
+    iterations: 3
+  },
+  conservative: {
+    temperature: 0.3,
+    style: "minimal",
+    iterations: 1
+  },
+  accessibility: {
+    temperature: 0.5,
+    style: "standard",
+    accessibility: true,
+    iterations: 2
+  }
+};
+const GlassAutoComposer = ({
+  config,
+  ...interfaceProps
+}) => {
+  return jsx(GlassAutoComposerProvider, {
+    config: config,
+    children: jsx(GlassAutoComposerInterface, {
+      ...interfaceProps
+    })
+  });
+};
+
+export { GlassAutoComposer, GlassAutoComposerInterface, GlassAutoComposerProvider, GlassGeneratedLayoutRenderer, autoComposerPresets, useAutoComposer, useLayoutGenerator };
+//# sourceMappingURL=GlassAutoComposer.js.map