your-ai-workflow-firebase-os 1.2.21 → 1.2.23

package/src/microcomponents/Public.tsx

@@ -1,126 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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>
-  );
-}