firebase-os 1.1.4 → 1.1.6

package/src/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+import { ThemeProvider } from './lib/ThemeContext.tsx'
+import { ConfigProvider } from './lib/ConfigContext.tsx'
+
+// Keep body reset in standalone mode (FirebaseOS.tsx doesn't inject this)
+document.body.style.margin = '0';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ConfigProvider config={{}}>
+      <ThemeProvider>
+        <div className="firebase-os">
+          <App />
+        </div>
+      </ThemeProvider>
+    </ConfigProvider>
+  </StrictMode>,
+)

package/src/microcomponents/AdminExampleContent.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Users, Server, ShieldAlert, Activity } from 'lucide-react';
+
+export default function AdminExampleContent() {
+  return (
+    <div className="flex flex-col gap-6 p-4 md:p-8 w-full max-w-7xl mx-auto">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight text-foreground">System Overview</h2>
+          <p className="text-foreground/60 text-sm mt-1">Monitor your infrastructure and user metrics.</p>
+        </div>
+        <div className="flex bg-accent/10 text-accent px-4 py-2 rounded-xl text-sm font-bold border border-accent/20">
+          <Activity className="w-4 h-4 mr-2" />
+          System Healthy
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="glass-panel border border-[var(--panel-border)] p-6 rounded-3xl flex flex-col">
+          <div className="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-500 flex items-center justify-center mb-4">
+            <Users className="w-5 h-5" />
+          </div>
+          <p className="text-foreground/60 text-sm font-medium">Total Users</p>
+          <p className="text-3xl font-bold text-foreground mt-1">1,204</p>
+        </div>
+        <div className="glass-panel border border-[var(--panel-border)] p-6 rounded-3xl flex flex-col">
+          <div className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center mb-4">
+            <Server className="w-5 h-5" />
+          </div>
+          <p className="text-foreground/60 text-sm font-medium">Active Nodes</p>
+          <p className="text-3xl font-bold text-foreground mt-1">42</p>
+        </div>
+        <div className="glass-panel border border-[var(--panel-border)] p-6 rounded-3xl flex flex-col border-yellow-500/30">
+          <div className="w-10 h-10 rounded-xl bg-yellow-500/10 text-yellow-500 flex items-center justify-center mb-4">
+            <ShieldAlert className="w-5 h-5" />
+          </div>
+          <p className="text-foreground/60 text-sm font-medium">Security Alerts</p>
+          <p className="text-3xl font-bold text-yellow-500 mt-1">3 Needs Review</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/microcomponents/PrivateExampleContent.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { FileText, Clock, Star } from 'lucide-react';
+import { Button } from '../components/Button';
+
+export default function PrivateExampleContent() {
+  return (
+    <div className="flex flex-col gap-6 p-4 md:p-8 w-full max-w-5xl mx-auto">
+      <div className="glass-panel border border-[var(--panel-border)] p-8 rounded-3xl flex flex-col md:flex-row items-center justify-between gap-6">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight text-foreground">Welcome back!</h2>
+          <p className="text-foreground/60 text-sm mt-2 max-w-md">Here is your personal workspace. You can manage your private documents and settings here.</p>
+        </div>
+        <Button className="shrink-0 px-6 tracking-wide">Create New</Button>
+      </div>
+
+      <h3 className="text-lg font-bold text-foreground mt-4 ml-2">Recent Items</h3>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {[1, 2].map((i) => (
+          <div key={i} className="glass-panel border border-[var(--panel-border)] p-4 rounded-2xl flex items-center gap-4 hover:border-accent/40 transition-colors cursor-pointer group">
+            <div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center text-accent shrink-0 group-hover:scale-110 transition-transform">
+              <FileText className="w-6 h-6" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-foreground truncate">Private Document {i}</p>
+              <div className="flex items-center gap-2 mt-1 text-xs text-foreground/40 font-medium">
+                <Clock className="w-3 h-3" />
+                <span>Updated 2 days ago</span>
+              </div>
+            </div>
+            <button className="p-2 text-foreground/20 hover:text-yellow-400 transition-colors">
+              <Star className="w-5 h-5" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/microcomponents/Public.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight, Layers, Zap, Shield, Code, Layout, Sparkles, CheckCircle2 } from 'lucide-react';
+import { Button } from '../components/Button';
+
+// This is an example of what gets injected inside the PublicPageTemplate.tsx content box.
+// It relies on infinite height expansion native to the page container.
+export default function PublicExample() {
+  return (
+    <div className="flex flex-col gap-10 p-4 md:p-8 w-full max-w-5xl mx-auto">
+      
+      {/* Hero Section */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+        <div className="max-w-2xl">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 border border-accent/20 text-accent text-[12px] font-bold tracking-wide mb-4">
+            <Sparkles className="w-3.5 h-3.5" />
+            <span>v2.0 Architecture</span>
+          </div>
+          <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight text-foreground mb-4">
+            Custom Page Injection
+          </h2>
+          <p className="text-foreground/60 text-[15px] leading-relaxed max-w-xl font-medium">
+            Seamlessly build and deploy custom React components directly into the Firebase OS dashboard. 
+            Enjoy native theming, routing, and deep authentication out of the box.
+          </p>
+        </div>
+        <div className="flex shrink-0 gap-3">
+          <Button variant="secondary" className="px-6 py-2.5 rounded-xl font-bold shadow-sm">View Docs</Button>
+          <Button className="px-6 py-2.5 rounded-xl shadow-lg shadow-accent/20 font-bold">Start Building</Button>
+        </div>
+      </div>
+
+      {/* Code Banner */}
+      <motion.div 
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass-panel border border-[var(--panel-border)] rounded-3xl p-6 md:p-10 relative overflow-hidden bg-gradient-to-br from-background/50 to-foreground/[0.02]"
+      >
+        <div className="absolute top-0 right-0 p-8 opacity-[0.03] pointer-events-none transform translate-x-1/4 -translate-y-1/4">
+          <Code className="w-64 h-64" />
+        </div>
+        <div className="relative z-10 flex flex-col md:flex-row gap-10 items-center">
+          <div className="flex-1 space-y-4">
+            <h3 className="text-2xl font-bold text-foreground tracking-tight">Zero-Config Deployment</h3>
+            <p className="text-[14px] text-foreground/60 leading-relaxed max-w-md">
+              When you prompt the AI to generate a component for this page, it automatically wires up your component inside the <code className="bg-foreground/5 px-2 py-0.5 rounded-md text-accent font-mono text-[12px] border border-accent/10">src/components/pages/</code> directory and dynamically mounts it here.
+            </p>
+            <ul className="space-y-3 mt-6 pt-4 border-t border-[var(--panel-border)]/50">
+              {[
+                'Full access to global CSS variables & tokens',
+                'Native Light / Dark mode compatibility',
+                'Responsive mobile-first structural integrity'
+              ].map((item, i) => (
+                <li key={i} className="flex items-center gap-3 text-[13px] text-foreground/80 font-medium">
+                  <div className="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center shrink-0">
+                     <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
+                  </div>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+          
+          <div className="w-full md:w-5/12 bg-background border border-[var(--panel-border)] rounded-2xl p-5 shadow-2xl relative group">
+            <div className="absolute inset-0 bg-gradient-to-tr from-accent/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+            <div className="flex items-center gap-2 mb-4 pb-4 border-b border-[var(--panel-border)]">
+              <div className="w-3 h-3 rounded-full bg-red-400/80 shadow-[0_0_10px_rgba(248,113,113,0.5)]" />
+              <div className="w-3 h-3 rounded-full bg-yellow-400/80 shadow-[0_0_10px_rgba(250,204,21,0.5)]" />
+              <div className="w-3 h-3 rounded-full bg-green-400/80 shadow-[0_0_10px_rgba(74,222,128,0.5)]" />
+              <span className="ml-3 text-[10px] font-mono tracking-widest text-foreground/40 uppercase font-bold">page_content.tsx</span>
+            </div>
+            <pre className="font-mono text-[12px] text-foreground/70 leading-loose overflow-x-auto selection:bg-accent/20">
+              <span className="text-accent">export default function</span> <span className="text-blue-400 font-bold">CustomPage</span>() {'{\n'}
+              {'  '}<span className="text-accent">return</span> (<br/>
+              {'    '}&lt;<span className="text-emerald-500">div</span> <span className="text-purple-400">className</span>=<span className="text-orange-400">"glass-panel border-..."</span>&gt;<br/>
+              {'      '}<span className="text-foreground/40 italic">{'// Your injected logic here'}</span><br/>
+              {'    '}&lt;/<span className="text-emerald-500">div</span>&gt;<br/>
+              {'  '});<br/>
+              {'}'}
+            </pre>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Features Grid */}
+      <div className="pt-4">
+        <h3 className="text-xl font-bold mb-6 px-1 tracking-tight">Core Capabilities</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          {[
+            { icon: Layout, title: 'Glassmorphism', desc: 'Beautiful transparent blurred panels seamlessly mirroring system visuals globally.' },
+            { icon: Shield, title: 'Secure Context', desc: 'Components inherit active Firebase auth sessions and role states automatically.' },
+            { icon: Zap, title: 'Hot Loaded', desc: 'Every layout change updates instantly without disrupting the application state.' }
+          ].map((feature, idx) => (
+            <motion.div 
+              key={idx}
+              whileHover={{ y: -5 }}
+              className="glass-panel border border-[var(--panel-border)] bg-background/40 p-6 rounded-3xl flex flex-col group hover:border-accent/40 transition-all cursor-default shadow-sm hover:shadow-xl hover:shadow-accent/5"
+            >
+              <div className="w-12 h-12 rounded-xl bg-accent/10 border border-accent/20 flex items-center justify-center text-accent mb-5 group-hover:scale-110 transition-transform duration-300 shadow-inner">
+                <feature.icon className="w-6 h-6" />
+              </div>
+              <h4 className="text-[16px] font-bold tracking-tight mb-2 text-foreground">{feature.title}</h4>
+              <p className="text-[13.5px] text-foreground/60 leading-relaxed flex-1">
+                {feature.desc}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+      
+      {/* Bottom CTA */}
+      <div className="mt-6 flex flex-col items-center text-center p-10 glass-panel border border-[var(--panel-border)] rounded-3xl bg-gradient-to-b from-transparent to-accent/[0.03] relative overflow-hidden">
+        <div className="w-full h-1 bg-gradient-to-r from-transparent via-accent/30 to-transparent absolute top-0 left-0" />
+        <Layers className="w-12 h-12 text-accent/40 mb-5" />
+        <h3 className="text-2xl font-bold mb-3 tracking-tight">Ready to inject your custom code?</h3>
+        <p className="text-[15px] text-foreground/60 max-w-lg mx-auto mb-8 leading-relaxed font-medium">
+          Click the <strong className="text-foreground">robot icon</strong> at the top of this template to copy the exact AI prompt needed to scaffold your next integration.
+        </p>
+        <button className="flex items-center gap-2 group text-[14px] font-bold text-accent hover:text-accent/80 transition-colors bg-accent/10 hover:bg-accent/15 px-6 py-2.5 rounded-xl border border-accent/20">
+          Show documentation <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+        </button>
+      </div>
+
+    </div>
+  );
+}

package/src/microcomponents/SharedExampleContent.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { MessageSquare, ThumbsUp, User } from 'lucide-react';
+import { Button } from '../components/Button';
+import { Input } from '../components/Input';
+
+export default function SharedExampleContent() {
+  return (
+    <div className="flex flex-col gap-6 p-4 md:p-8 w-full max-w-4xl mx-auto">
+      <div className="glass-panel border border-[var(--panel-border)] p-6 rounded-3xl">
+        <h2 className="text-xl font-bold tracking-tight text-foreground mb-4">Community Discussion</h2>
+        <div className="flex gap-4">
+          <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center text-accent shrink-0 border border-accent/30">
+            <User className="w-5 h-5" />
+          </div>
+          <div className="flex-1 flex flex-col gap-3">
+             <Input placeholder="Share something with the team..." className="w-full" />
+             <div className="flex justify-end">
+                <Button className="px-6 rounded-xl">Post</Button>
+             </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4 mt-2">
+        {[1, 2].map((i) => (
+          <div key={i} className="glass-panel border border-[var(--panel-border)] p-5 rounded-2xl flex gap-4">
+            <div className="w-10 h-10 rounded-full bg-foreground/10 flex items-center justify-center text-foreground/60 shrink-0">
+               <User className="w-5 h-5" />
+            </div>
+            <div className="flex-1">
+               <div className="flex items-center gap-2 mb-1">
+                 <span className="font-bold text-[14px]">Team Member {i}</span>
+                 <span className="text-[12px] text-foreground/40 font-medium">2 hours ago</span>
+               </div>
+               <p className="text-foreground/80 text-[14px] leading-relaxed">
+                 This is an example of a shared component where all authenticated members can see and interact with the data. 
+               </p>
+               <div className="flex items-center gap-4 mt-4 text-foreground/50">
+                 <button className="flex items-center gap-1.5 text-[12px] font-bold hover:text-accent transition-colors">
+                   <ThumbsUp className="w-4 h-4" /> Like
+                 </button>
+                 <button className="flex items-center gap-1.5 text-[12px] font-bold hover:text-accent transition-colors">
+                   <MessageSquare className="w-4 h-4" /> Reply
+                 </button>
+               </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/pages/Dashboard.test.tsx

@@ -0,0 +1,98 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { Dashboard } from './Dashboard';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => ({ 
+    user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+    userWorkspaces: [], 
+    activeWorkspace: null,
+    activeOrg: null,
+    loading: false
+  })
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => ({ themeMode: 'light', setThemeMode: vi.fn(), activeConfig: {} })
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('Dashboard Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <Dashboard />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});

package/src/pages/Dashboard.tsx

@@ -0,0 +1,60 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { useAuth } from '../lib/AuthContext';
+import { Database, Zap } from 'lucide-react';
+import { DashboardNav } from '../components/DashboardNav';
+
+export function Dashboard() {
+  const { user } = useAuth();
+
+  const rawName = user?.displayName || user?.email?.split('@')[0] || 'there';
+  const firstName = rawName.split(' ')[0];
+  const capitalizedName = firstName.charAt(0).toUpperCase() + firstName.slice(1);
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mb-8"
+      >
+        <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+          Welcome back, {capitalizedName}.
+        </h1>
+        <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+          <span className="w-8 h-[1px] bg-foreground/10" />
+          /dashboard
+        </div>
+      </motion.div>
+
+      {/* Main Content Area */}
+      <div className="flex flex-col gap-4 flex-1 min-h-[500px]">
+        <div className="flex justify-start">
+          <DashboardNav />
+        </div>
+        {/* Content Box */}
+        <div className="w-full flex-1 glass-panel rounded-3xl p-8 md:p-12 flex items-center justify-center relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]">
+          {/* Subtle background glow */}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent/10 blur-[100px] rounded-full pointer-events-none" />
+          
+          <AnimatePresence mode="wait">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.3 }}
+              className="text-center z-10"
+            >
+              <div className="w-16 h-16 rounded-3xl bg-accent/10 border border-accent/20 flex items-center justify-center text-accent mx-auto mb-6 shadow-inner">
+                <Database className="w-6 h-6" />
+              </div>
+              <h2 className="text-2xl font-extrabold text-foreground mb-2">No data added here yet</h2>
+              <p className="text-foreground/40 font-medium">Keep moving forward, your data will appear here.</p>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </div>
+    </main>
+  );
+}