popsite-ui 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+:root{--pk-primary: #6366f1;--pk-primary-hover: #4f46e5;--pk-primary-light: #e0e7ff;--pk-secondary: #0ea5e9;--pk-accent: #f43f5e;--pk-bg-main: #f8fafc;--pk-bg-card: #ffffff;--pk-bg-glass: rgba(255, 255, 255, .7);--pk-text-main: #0f172a;--pk-text-muted: #64748b;--pk-text-inverse: #ffffff;--pk-border: #e2e8f0;--pk-success: #10b981;--pk-warning: #f59e0b;--pk-danger: #ef4444;--pk-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--pk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--pk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--pk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--pk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--pk-shadow-hover: 0 20px 40px -5px rgba(99, 102, 241, .15), 0 10px 15px -5px rgba(0, 0, 0, .05);--pk-radius-sm: 8px;--pk-radius-md: 12px;--pk-radius-lg: 16px;--pk-radius-full: 9999px;--pk-transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--pk-transition-normal: .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--pk-font-family);background-color:var(--pk-bg-main);color:var(--pk-text-main);line-height:1.5;-webkit-font-smoothing:antialiased}.pk-glass{background:var(--pk-bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4)}.pk-heading-xl{font-size:3rem;font-weight:800;letter-spacing:-.025em;line-height:1.1}.pk-heading-lg{font-size:2.25rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}.pk-heading-md{font-size:1.5rem;font-weight:600;line-height:1.3}.pk-text-body{font-size:1rem;color:var(--pk-text-muted)}.pk-text-sm{font-size:.875rem;color:var(--pk-text-muted)}.pk-gradient-text{background:linear-gradient(135deg,var(--pk-primary),var(--pk-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pk-card{background-color:var(--pk-bg-card);border-radius:var(--pk-radius-lg);box-shadow:var(--pk-shadow-sm);transition:transform var(--pk-transition-normal),box-shadow var(--pk-transition-normal);overflow:hidden;border:1px solid var(--pk-border)}.pk-card-interactive:hover{transform:translateY(-4px);box-shadow:var(--pk-shadow-hover)}.pk-card-header{padding:1.5rem 1.5rem 0}.pk-card-body{padding:1.5rem}.pk-card-footer{padding:1rem 1.5rem;border-top:1px solid var(--pk-border);background-color:#f8fafc80}.pk-btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:var(--pk-radius-md);font-weight:600;font-size:.95rem;cursor:pointer;transition:all var(--pk-transition-fast);border:none;gap:.5rem}.pk-btn-primary{background:linear-gradient(135deg,var(--pk-primary),var(--pk-primary-hover));color:var(--pk-text-inverse);box-shadow:0 4px 10px #6366f14d}.pk-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #6366f166}.pk-btn-primary:active{transform:translateY(0)}.pk-btn-secondary{background-color:var(--pk-primary-light);color:var(--pk-primary-hover)}.pk-btn-secondary:hover{background-color:#c7d2fe}.pk-btn-outline{background-color:transparent;border:1px solid var(--pk-border);color:var(--pk-text-main)}.pk-btn-outline:hover{border-color:var(--pk-primary);color:var(--pk-primary)}.pk-input-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.pk-label{font-size:.875rem;font-weight:600;color:var(--pk-text-main)}.pk-input{padding:.75rem 1rem;border-radius:var(--pk-radius-md);border:1px solid var(--pk-border);background-color:var(--pk-bg-main);font-family:inherit;font-size:1rem;transition:border-color var(--pk-transition-fast),box-shadow var(--pk-transition-fast)}.pk-input:focus{outline:none;border-color:var(--pk-primary);box-shadow:0 0 0 3px var(--pk-primary-light)}.pk-container{max-width:1200px;margin:0 auto;padding:2rem}.pk-grid{display:grid;gap:2rem}.pk-grid-responsive{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.pk-flex{display:flex}.pk-flex-col{flex-direction:column}.pk-items-center{align-items:center}.pk-justify-between{justify-content:space-between}.pk-justify-center{justify-content:center}.pk-gap-4{gap:1rem}.pk-gap-6{gap:1.5rem}.pk-toast-container{position:fixed;bottom:2rem;right:2rem;display:flex;flex-direction:column;gap:1rem;z-index:50;pointer-events:none}.pk-toast{background-color:var(--pk-bg-card);border-radius:var(--pk-radius-md);box-shadow:var(--pk-shadow-xl);padding:1rem 1.5rem;display:flex;align-items:center;gap:.75rem;border-left:4px solid var(--pk-primary);animation:pk-slide-up .3s ease-out forwards;pointer-events:auto}.pk-toast.success{border-color:var(--pk-success)}.pk-toast.error{border-color:var(--pk-danger)}@keyframes pk-slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.pk-skeleton{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:pk-skeleton-loading 1.5s infinite;border-radius:var(--pk-radius-sm)}@keyframes pk-skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.pk-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:var(--pk-radius-full);font-size:.75rem;font-weight:600;background-color:var(--pk-primary-light);color:var(--pk-primary-hover)}.pk-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;background-color:#f8fafc80;border-radius:var(--pk-radius-lg);border:2px dashed var(--pk-border)}.pk-empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.7}.pk-nav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid rgba(226,232,240,.5)}.pk-text-center{text-align:center}.pk-w-full{width:100%}.pk-h-full{height:100%}.pk-object-cover{object-fit:cover}

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="PopSite UI - Zero config React component library" />
+    <title>PopSite UI Demo</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/library/index.js

@@ -0,0 +1,20 @@
+export { default as App } from '../App';
+export { default as MultiDomainBookingPortal } from '../App';
+
+export { default as systems } from '../data/systems';
+
+export { default as PortalHeader } from '../components/layout/PortalHeader';
+export { default as SystemSidebar } from '../components/layout/SystemSidebar';
+
+export { default as SystemHero } from '../components/system/SystemHero';
+export { default as DynamicSystemForm } from '../components/system/DynamicSystemForm';
+export { default as SystemSummaryCard } from '../components/system/SystemSummaryCard';
+
+export { default as SystemModuleRenderer } from '../components/modules/SystemModuleRenderer';
+export { default as systemModuleMap } from '../components/modules/systemModuleMap';
+export { default as ModuleContentDeck } from '../components/modules/ModuleContentDeck';
+export { default as moduleContentMap } from '../components/modules/moduleContentMap';
+export { default as moduleEnhancementsMap } from '../components/modules/moduleEnhancementsMap';
+export { default as SystemVisualWidget } from '../components/modules/SystemVisualWidget';
+
+export * from '../utils/systemEngine';

package/main.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+    throw new Error('Root element not found. Ensure index.html includes a #root element.');
+}
+
+createRoot(rootElement).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "popsite-ui",
+  "version": "1.0.0",
+  "description": "Zero-config, plug-and-play React component library for multi-view applications.",
+  "type": "module",
+  "main": "dist/popsite-ui.umd.js",
+  "module": "dist/popsite-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/popsite-ui.es.js",
+      "require": "./dist/popsite-ui.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --config vite.lib.config.js",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "library",
+    "zero-config",
+    "frontend"
+  ],
+  "author": "Elite React Architect",
+  "license": "MIT"
+}

package/src/App.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { EcommerceStoreModule } from './components/modules/EcommerceStoreModule';
+
+export function App() {
+  return (
+    <div>
+      <EcommerceStoreModule />
+    </div>
+  );
+}
+
+export default App;

package/src/components/modules/AnalyticsDashboardModule.jsx

@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from 'react';
+import { analyticsDashboardMockData } from '../../data/systems/analyticsDashboard';
+import { SystemSummaryCard } from '../system/SystemSummaryCard';
+import { useToast } from '../system/Toast';
+
+export function AnalyticsDashboardModule() {
+  const [currentView, setCurrentView] = useState('summary'); // summary, financial, logs
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { showToast, ToastContainer } = useToast();
+
+  const withDelay = (callback, delay = 1000) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleExportCSV = (dataArray, filename) => {
+    withDelay(() => {
+      if (!dataArray || dataArray.length === 0) {
+        showToast('No data to export', 'error');
+        return;
+      }
+      const headers = Object.keys(dataArray[0]).join(',');
+      const rows = dataArray.map(obj => 
+        Object.values(obj).map(v => typeof v === 'string' ? `"${v}"` : v).join(',')
+      ).join('\n');
+      
+      const blob = new Blob([`${headers}\n${rows}`], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${filename}_${Date.now()}.csv`;
+      a.click();
+      showToast('Export successful', 'success');
+    });
+  };
+
+  const renderNav = () => (
+    <div className="pk-card" style={{ marginBottom: '2rem', padding: '1rem', display: 'flex', gap: '1rem', overflowX: 'auto' }}>
+      <button 
+        className={currentView === 'summary' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+        onClick={() => setCurrentView('summary')}
+      >
+        Executive Summary
+      </button>
+      <button 
+        className={currentView === 'financial' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+        onClick={() => setCurrentView('financial')}
+      >
+        Financial Reports
+      </button>
+      <button 
+        className={currentView === 'logs' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+        onClick={() => setCurrentView('logs')}
+      >
+        System Logs
+      </button>
+    </div>
+  );
+
+  const renderSummary = () => {
+    const kpis = analyticsDashboardMockData.kpis;
+    const maxVal = Math.max(...analyticsDashboardMockData.chartData.map(d => d.value));
+
+    return (
+      <div className="animate-fade-in">
+        <h2 className="pk-heading-lg" style={{ marginBottom: '2rem' }}>Executive Overview</h2>
+        
+        <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', marginBottom: '2rem' }}>
+          <SystemSummaryCard title="Total Revenue" value={kpis.revenue.value} trend={kpis.revenue.trend} icon="💰" />
+          <SystemSummaryCard title="Active Users" value={kpis.users.value} trend={kpis.users.trend} icon="👥" />
+          <SystemSummaryCard title="Conversion Rate" value={kpis.conversionRate.value} trend={kpis.conversionRate.trend} icon="🔥" />
+          <SystemSummaryCard title="Bounce Rate" value={kpis.bounceRate.value} trend={kpis.bounceRate.trend} icon="📉" />
+        </div>
+
+        <div className="pk-card" style={{ padding: '2rem' }}>
+          <h3 className="pk-heading-md" style={{ marginBottom: '2rem' }}>Weekly Traffic Activity</h3>
+          
+          {/* CSS-only Bar Chart implementation, NO Tailwind */}
+          <div style={{ display: 'flex', alignItems: 'flex-end', height: '250px', gap: '2%', paddingBottom: '2rem', borderBottom: '1px solid var(--pk-border)' }}>
+            {analyticsDashboardMockData.chartData.map((data, i) => {
+               const heightPercent = (data.value / maxVal) * 100;
+               return (
+                 <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>
+                    <div style={{ opacity: 0, transition: 'opacity 0.2s', fontSize: '0.75rem', marginBottom: '0.25rem' }} className="chart-tooltip">{data.value}k</div>
+                    <div 
+                      style={{ 
+                        width: '100%', 
+                        height: `${heightPercent}%`, 
+                        background: 'linear-gradient(to top, var(--pk-primary), var(--pk-secondary))',
+                        borderRadius: '4px 4px 0 0',
+                        transition: 'height 1s cubic-bezier(0.1, 0.8, 0.2, 1)'
+                      }}
+                      className="chart-bar"
+                    ></div>
+                    <span style={{ marginTop: '1rem', fontSize: '0.875rem', color: 'var(--pk-text-muted)' }}>{data.label}</span>
+                 </div>
+               );
+            })}
+          </div>
+        </div>
+        
+        {/* Helper style for hover effect without utility classes */}
+        <style>{`
+          .chart-bar:hover { filter: brightness(1.2); cursor: pointer; }
+          .chart-bar:hover + span { font-weight: bold; color: var(--pk-text-main); }
+          .chart-bar:hover ~ .chart-tooltip, .chart-tooltip:focus { opacity: 1 !important; }
+        `}</style>
+      </div>
+    );
+  };
+
+  const renderFinancial = () => (
+    <div className="animate-fade-in">
+       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+         <h2 className="pk-heading-lg">Financial Reports</h2>
+         <button className="pk-btn pk-btn-primary" onClick={() => handleExportCSV(analyticsDashboardMockData.financialReports, 'Financial_Report')}>
+            ⬇️ Export CSV
+         </button>
+       </div>
+       
+       <div className="pk-card" style={{ overflowX: 'auto' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
+             <thead>
+                <tr style={{ background: 'var(--pk-bg-main)', borderBottom: '1px solid var(--pk-border)' }}>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)', fontWeight: 600 }}>Period</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)', fontWeight: 600 }}>Revenue</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)', fontWeight: 600 }}>Expenses</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)', fontWeight: 600 }}>Net Profit</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)', fontWeight: 600 }}>Status</th>
+                </tr>
+             </thead>
+             <tbody>
+                {analyticsDashboardMockData.financialReports.map((row, i) => (
+                   <tr key={i} style={{ borderBottom: '1px solid var(--pk-border)', transition: 'background 0.2s' }}>
+                      <td style={{ padding: '1rem 1.5rem', fontWeight: 600 }}>{row.period}</td>
+                      <td style={{ padding: '1rem 1.5rem', color: 'var(--pk-success)' }}>+${row.revenue.toLocaleString()}</td>
+                      <td style={{ padding: '1rem 1.5rem', color: 'var(--pk-danger)' }}>-${row.expenses.toLocaleString()}</td>
+                      <td style={{ padding: '1rem 1.5rem', fontWeight: 'bold' }}>${row.net.toLocaleString()}</td>
+                      <td style={{ padding: '1rem 1.5rem' }}>
+                        <span className="pk-badge">{row.status}</span>
+                      </td>
+                   </tr>
+                ))}
+             </tbody>
+          </table>
+       </div>
+    </div>
+  );
+
+  const renderLogs = () => {
+    const filtered = analyticsDashboardMockData.systemLogs.filter(log => 
+       log.message.toLowerCase().includes(searchQuery.toLowerCase()) || 
+       log.service.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return (
+      <div className="animate-fade-in">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem', flexWrap: 'wrap', gap: '1rem' }}>
+           <h2 className="pk-heading-lg">System Logs</h2>
+           <div style={{ display: 'flex', gap: '1rem' }}>
+             <input 
+               type="text" 
+               className="pk-input" 
+               placeholder="Search logs..." 
+               value={searchQuery}
+               onChange={e => setSearchQuery(e.target.value)}
+             />
+             <button className="pk-btn pk-btn-outline" onClick={() => handleExportCSV(filtered, 'System_Logs')}>
+                ⬇️ Export
+             </button>
+           </div>
+        </div>
+
+        <div className="pk-card" style={{ background: '#0f172a', color: '#e2e8f0', padding: '1rem', fontFamily: 'monospace', borderRadius: 'var(--pk-radius-lg)', overflowX: 'auto', maxHeight: '600px', overflowY: 'auto' }}>
+           {filtered.length === 0 ? (
+             <div style={{ padding: '2rem', textAlign: 'center' }}>No logs found matching query.</div>
+           ) : (
+             filtered.map(log => {
+               const color = log.level === 'ERROR' ? '#ef4444' : log.level === 'WARN' ? '#f59e0b' : '#38bdf8';
+               return (
+                 <div key={log.id} style={{ display: 'flex', gap: '1rem', padding: '0.75rem', borderBottom: '1px solid #1e293b' }}>
+                    <span style={{ color: '#64748b', whiteSpace: 'nowrap' }}>[{log.timestamp}]</span>
+                    <span style={{ color: color, fontWeight: 'bold', width: '60px' }}>{log.level}</span>
+                    <span style={{ color: '#cbd5e1', width: '120px' }}>[{log.service}]</span>
+                    <span style={{ flex: 1 }}>{log.message}</span>
+                 </div>
+               )
+             })
+           )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="pk-container" style={{ minHeight: '100vh' }}>
+       {isLoading && (
+         <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.8)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+           <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+           <h3 className="pk-heading-md">Processing Data...</h3>
+         </div>
+       )}
+
+       <div style={{ marginBottom: '2rem' }}>
+          <h1 className="pk-heading-xl">{analyticsDashboardMockData.organizationName} Engine</h1>
+          <p className="pk-text-body">Real-time metrics and system health monitoring.</p>
+       </div>
+
+       {renderNav()}
+
+       <div style={{ position: 'relative', minHeight: '500px' }}>
+         {currentView === 'summary' && renderSummary()}
+         {currentView === 'financial' && renderFinancial()}
+         {currentView === 'logs' && renderLogs()}
+       </div>
+
+       <ToastContainer />
+    </div>
+  );
+}

package/src/components/modules/ChatMessagingModule.jsx

@@ -0,0 +1,294 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { chatMessagingMockData } from '../../data/systems/chatMessaging';
+import { useToast } from '../system/Toast';
+
+export function ChatMessagingModule() {
+  const [conversations, setConversations] = useState(chatMessagingMockData.conversations);
+  const [activeChatId, setActiveChatId] = useState(chatMessagingMockData.conversations[0]?.id || null);
+  const [newMessage, setNewMessage] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  const messagesEndRef = useRef(null);
+  const { showToast, ToastContainer } = useToast();
+
+  const activeChat = conversations.find(c => c.id === activeChatId);
+
+  // Restore state hook simulation
+  useEffect(() => {
+    const saved = localStorage.getItem('popsite_chats');
+    if (saved) {
+      try { setConversations(JSON.parse(saved)); } catch (e) {}
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('popsite_chats', JSON.stringify(conversations));
+  }, [conversations]);
+
+  // Auto-scroll
+  useEffect(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [activeChat?.messages, isTyping]);
+
+  const withDelay = (callback, delay = 1500) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleSendMessage = (e) => {
+    e.preventDefault();
+    if (!newMessage.trim() || !activeChat) return;
+
+    const msg = {
+      id: `msg-${Date.now()}`,
+      senderId: chatMessagingMockData.currentUser.id,
+      text: newMessage.trim(),
+      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    };
+
+    const updatedConversations = conversations.map(c => 
+      c.id === activeChatId ? { ...c, messages: [...c.messages, msg], unread: 0 } : c
+    );
+    setConversations(updatedConversations);
+    setNewMessage('');
+
+    // Simulate AI / Mock Response delay
+    setIsTyping(true);
+    setTimeout(() => {
+      setIsTyping(false);
+      const replyPool = chatMessagingMockData.autoReplies;
+      const randomReply = replyPool[Math.floor(Math.random() * replyPool.length)];
+      
+      const botMsg = {
+        id: `msg-bot-${Date.now()}`,
+        senderId: activeChat.contact.id,
+        text: randomReply,
+        timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      };
+
+      setConversations(prev => prev.map(c => 
+        c.id === activeChatId ? { ...c, messages: [...c.messages, botMsg] } : c
+      ));
+      
+      // Randomly occasionally toast a notification if app was 'backgrounded'
+      if (Math.random() > 0.5) showToast(`New message from ${activeChat.contact.name}`, 'info');
+
+    }, 2000);
+  };
+
+  const markAsRead = (id) => {
+    setConversations(prev => prev.map(c => c.id === id ? { ...c, unread: 0 } : c));
+    setActiveChatId(id);
+    setShowProfile(false);
+  };
+
+  const handleSaveProfile = () => {
+    withDelay(() => {
+      showToast('Profile updated successfully', 'success');
+      setShowProfile(false);
+    });
+  };
+
+  const filteredConversations = conversations.filter(c => 
+    c.contact.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="pk-flex animate-fade-in" style={{ height: '100vh', backgroundColor: 'var(--pk-bg-main)', overflow: 'hidden' }}>
+       {isLoading && (
+         <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.7)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+           <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+           <h3 className="pk-heading-md">Processing...</h3>
+         </div>
+       )}
+
+       {/* Sidebar */}
+       <div className="pk-card" style={{ width: '350px', height: '100%', borderRadius: 0, borderRight: '1px solid var(--pk-border)', display: 'flex', flexDirection: 'column', zIndex: 10 }}>
+          <div className="pk-card-header pk-flex pk-justify-between pk-items-center" style={{ padding: '1.5rem', background: 'var(--pk-bg-glass)', backdropFilter: 'blur(10px)' }}>
+             <div className="pk-flex pk-items-center pk-gap-4" style={{ cursor: 'pointer' }} onClick={() => setShowProfile(true)}>
+                <img 
+                  src={chatMessagingMockData.currentUser.avatar} 
+                  alt="Me" 
+                  style={{ width: '40px', height: '40px', borderRadius: '50%', objectFit: 'cover' }} 
+                  onError={(e)=>{ e.target.style.display='none'; e.target.nextSibling.style.display='flex'}}
+                />
+                <div style={{ display: 'none', width: '40px', height: '40px', background: 'var(--pk-primary)', color: 'white', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', fontWeight: 'bold' }}>
+                  ME
+                </div>
+                <div>
+                   <h3 className="pk-label">{chatMessagingMockData.currentUser.name}</h3>
+                   <span className="pk-text-sm" style={{ color: 'var(--pk-success)' }}>● Online</span>
+                </div>
+             </div>
+             <button className="pk-btn pk-btn-outline" style={{ padding: '0.5rem', borderRadius: '50%' }}>+ 💬</button>
+          </div>
+
+          <div style={{ padding: '1rem' }}>
+             <input 
+               type="text" 
+               className="pk-input pk-w-full" 
+               placeholder="Search conversations..." 
+               value={searchQuery}
+               onChange={e => setSearchQuery(e.target.value)}
+             />
+          </div>
+
+          <div style={{ flex: 1, overflowY: 'auto' }}>
+            {filteredConversations.length === 0 ? (
+               <div className="pk-empty-state" style={{ padding: '2rem', border: 'none' }}>
+                  <div className="pk-text-sm">No chats found.</div>
+               </div>
+            ) : (
+               filteredConversations.map(conv => (
+                 <div 
+                   key={conv.id} 
+                   className={`pk-flex pk-items-center pk-gap-4 ${activeChatId === conv.id ? 'pk-bg-glass' : ''}`}
+                   style={{ padding: '1rem 1.5rem', cursor: 'pointer', borderBottom: '1px solid var(--pk-border)', transition: 'background 0.2s', background: activeChatId === conv.id ? 'var(--pk-primary-light)' : 'transparent' }}
+                   onClick={() => markAsRead(conv.id)}
+                 >
+                   <div style={{ position: 'relative' }}>
+                      <img src={conv.contact.avatar} alt="" style={{ width: '50px', height: '50px', borderRadius: '50%', objectFit: 'cover' }} 
+                        onError={(e)=>{ e.target.style.display='none'; e.target.nextSibling.style.display='flex'}} />
+                      <div style={{ display: 'none', width: '50px', height: '50px', background: 'var(--pk-secondary)', color: 'white', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', fontWeight: 'bold' }}>
+                        {conv.contact.name[0]}
+                      </div>
+                      <div style={{ position: 'absolute', bottom: 2, right: 2, width: 12, height: 12, borderRadius: '50%', background: conv.contact.status === 'online' ? 'var(--pk-success)' : 'var(--pk-text-muted)', border: '2px solid white' }}></div>
+                   </div>
+                   <div style={{ flex: 1, overflow: 'hidden' }}>
+                      <div className="pk-flex pk-justify-between pk-items-center">
+                         <h4 className="pk-label" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{conv.contact.name}</h4>
+                         {conv.messages.length > 0 && <span className="pk-text-sm" style={{ fontSize: '0.75rem' }}>{conv.messages[conv.messages.length - 1].timestamp}</span>}
+                      </div>
+                      <div className="pk-flex pk-justify-between pk-items-center">
+                         <p className="pk-text-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: conv.unread > 0 ? 600 : 400, color: conv.unread > 0 ? 'var(--pk-text-main)' : 'var(--pk-text-muted)' }}>
+                           {conv.messages[conv.messages.length - 1]?.text || 'No messages yet.'}
+                         </p>
+                         {conv.unread > 0 && <span className="pk-badge" style={{ background: 'var(--pk-primary)', color: 'white', minWidth: '20px', textAlign: 'center' }}>{conv.unread}</span>}
+                      </div>
+                   </div>
+                 </div>
+               ))
+            )}
+          </div>
+       </div>
+
+       {/* Main Content Area */}
+       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', backgroundColor: 'var(--pk-bg-main)', position: 'relative' }}>
+          {showProfile ? (
+            <div className="pk-container" style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+               <div className="pk-card" style={{ width: '100%', maxWidth: '500px', padding: '3rem' }}>
+                  <h2 className="pk-heading-lg" style={{ marginBottom: '2rem', textAlign: 'center' }}>My Profile</h2>
+                  <div className="pk-flex pk-justify-center" style={{ marginBottom: '2rem' }}>
+                     <img src={chatMessagingMockData.currentUser.avatar} alt="Profile" style={{ width: '120px', height: '120px', borderRadius: '50%', boxShadow: 'var(--pk-shadow-md)' }} />
+                  </div>
+                  <div className="pk-input-group">
+                     <label className="pk-label">Display Name</label>
+                     <input type="text" className="pk-input" defaultValue={chatMessagingMockData.currentUser.name} />
+                  </div>
+                  <div className="pk-input-group">
+                     <label className="pk-label">Status Message</label>
+                     <input type="text" className="pk-input" defaultValue="Building great UIs! 💻" />
+                  </div>
+                  <div className="pk-flex pk-justify-between" style={{ marginTop: '2rem' }}>
+                     <button className="pk-btn pk-btn-outline" onClick={() => setShowProfile(false)}>Cancel</button>
+                     <button className="pk-btn pk-btn-primary" onClick={handleSaveProfile}>Save Changes</button>
+                  </div>
+               </div>
+            </div>
+          ) : activeChat ? (
+            <>
+               <div className="pk-card" style={{ borderRadius: 0, padding: '1rem 2rem', display: 'flex', alignItems: 'center', gap: '1rem', borderBottom: '1px solid var(--pk-border)', zIndex: 5 }}>
+                  <img src={activeChat.contact.avatar} alt="" style={{ width: '40px', height: '40px', borderRadius: '50%' }} />
+                  <div>
+                     <h3 className="pk-heading-md" style={{ fontSize: '1.25rem' }}>{activeChat.contact.name}</h3>
+                     <span className="pk-text-sm">{activeChat.contact.status === 'online' ? 'Active Now' : 'Offline'}</span>
+                  </div>
+               </div>
+
+               <div style={{ flex: 1, padding: '2rem', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '1.5rem', background: 'linear-gradient(rgba(248, 250, 252, 0.9), rgba(248, 250, 252, 0.9)), url("https://www.transparenttextures.com/patterns/cubes.png")' }}>
+                  {activeChat.messages.length === 0 && (
+                    <div className="pk-empty-state" style={{ margin: 'auto', border: 'none', background: 'transparent' }}>
+                      Say Hello 👋
+                    </div>
+                  )}
+
+                  {activeChat.messages.map(msg => {
+                     const isMe = msg.senderId === chatMessagingMockData.currentUser.id;
+                     return (
+                        <div key={msg.id} className="pk-flex" style={{ justifyContent: isMe ? 'flex-end' : 'flex-start' }}>
+                           {!isMe && <img src={activeChat.contact.avatar} alt="" style={{ width: '32px', height: '32px', borderRadius: '50%', marginRight: '0.75rem', alignSelf: 'flex-end' }} />}
+                           <div style={{ maxWidth: '70%' }}>
+                              <div style={{ 
+                                 padding: '1rem 1.25rem', 
+                                 background: isMe ? 'linear-gradient(135deg, var(--pk-primary), var(--pk-primary-hover))' : 'var(--pk-bg-card)', 
+                                 color: isMe ? 'white' : 'var(--pk-text-main)', 
+                                 borderRadius: isMe ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
+                                 boxShadow: 'var(--pk-shadow-md)'
+                              }}>
+                                 {msg.text}
+                              </div>
+                              <div className="pk-text-sm" style={{ marginTop: '0.25rem', textAlign: isMe ? 'right' : 'left', fontSize: '0.75rem' }}>
+                                 {msg.timestamp}
+                              </div>
+                           </div>
+                        </div>
+                     )
+                  })}
+                  
+                  {isTyping && (
+                     <div className="pk-flex" style={{ justifyContent: 'flex-start' }}>
+                        <img src={activeChat.contact.avatar} alt="" style={{ width: '32px', height: '32px', borderRadius: '50%', marginRight: '0.75rem', alignSelf: 'flex-end' }} />
+                        <div style={{ padding: '1rem', background: 'var(--pk-bg-card)', borderRadius: '16px 16px 16px 4px', boxShadow: 'var(--pk-shadow-sm)', display: 'flex', gap: '4px' }}>
+                           <span className="typing-dot"></span>
+                           <span className="typing-dot" style={{ animationDelay: '0.2s' }}></span>
+                           <span className="typing-dot" style={{ animationDelay: '0.4s' }}></span>
+                        </div>
+                     </div>
+                  )}
+                  <div ref={messagesEndRef} />
+               </div>
+
+               <div className="pk-card" style={{ borderRadius: 0, padding: '1.5rem', borderTop: '1px solid var(--pk-border)' }}>
+                  <form onSubmit={handleSendMessage} className="pk-flex pk-gap-4 pk-items-center">
+                     <button type="button" className="pk-btn pk-btn-outline" style={{ borderRadius: '50%', padding: '0.75rem' }}>📎</button>
+                     <input 
+                       type="text" 
+                       className="pk-input" 
+                       style={{ flex: 1, borderRadius: 'var(--pk-radius-full)', padding: '1rem 1.5rem' }} 
+                       placeholder="Type your message..." 
+                       value={newMessage}
+                       onChange={e => setNewMessage(e.target.value)}
+                     />
+                     <button type="submit" className="pk-btn pk-btn-primary" style={{ borderRadius: '50%', padding: '0.75rem', aspectRatio: '1', width: '50px' }}>
+                        ➤
+                     </button>
+                  </form>
+               </div>
+            </>
+          ) : (
+            <div className="pk-flex pk-items-center pk-justify-center" style={{ flex: 1 }}>
+               <div className="pk-empty-state" style={{ border: 'none', background: 'transparent' }}>
+                  <div className="pk-empty-icon" style={{ fontSize: '5rem' }}>💬</div>
+                  <h3 className="pk-heading-md">Welcome to PopSite Messages</h3>
+                  <p className="pk-text-body">Select a conversation from the sidebar to begin.</p>
+               </div>
+            </div>
+          )}
+       </div>
+
+       <style>{`
+         .typing-dot { width: 8px; height: 8px; background-color: var(--pk-text-muted); border-radius: 50%; opacity: 0.5; animation: typingBounce 1.4s infinite ease-in-out; }
+         @keyframes typingBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+       `}</style>
+       <ToastContainer />
+    </div>
+  );
+}