@ramme-io/create-app 2.0.0 → 2.0.1

package/template/src/features/onboarding/pages/PrototypeGallery.tsx

@@ -53,7 +53,7 @@ export const PrototypeGallery: React.FC = () => {
   const [activeVibe, setActiveVibe] = useState(VIBES[0]);
 
   return (
-    <div className="space-y-12 py-12">
+    <div className="space-y-12 py-12 bg-background">
       <div className="text-center space-y-4">
         <h3 className="text-4xl font-black tracking-tighter uppercase">One Prototype. Infinite Vibes.</h3>
         <p className="text-muted-foreground max-w-xl mx-auto font-medium">
@@ -61,10 +61,10 @@ export const PrototypeGallery: React.FC = () => {
         </p>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-8 lg:gap-10 items-start lg:items-center">
         
         {/* --- SELECTOR --- */}
-        <div className="lg:col-span-4 space-y-3">
+        <div className="sm:col-span-2 lg:col-span-4 space-y-3">
           {VIBES.map((vibe) => (
             <button
               key={vibe.id}
@@ -72,7 +72,7 @@ export const PrototypeGallery: React.FC = () => {
               className={`w-full text-left p-5 rounded-2xl border transition-all duration-500 group relative overflow-hidden ${
                 activeVibe.id === vibe.id 
                 ? 'border-primary bg-primary/10 shadow-2xl translate-x-3' 
-                : 'border-transparent opacity-40 hover:opacity-100 hover:bg-white/5'
+                : 'border-transparent opacity-40 hover:opacity-100 hover:bg-muted/10'
               }`}
             >
               <div className="flex items-center gap-4 relative z-10">
@@ -89,7 +89,7 @@ export const PrototypeGallery: React.FC = () => {
         </div>
 
         {/* --- DYNAMIC SIMULATION --- */}
-        <div className="lg:col-span-8 relative group">
+        <div className="sm:col-span-2 lg:col-span-8 relative group">
           <div 
             className="absolute -inset-10 blur-[120px] opacity-20 transition-colors duration-1000"
             style={{ backgroundColor: activeVibe.theme.accent }}
@@ -103,7 +103,9 @@ export const PrototypeGallery: React.FC = () => {
             }}
           >
             {/* Header Chrome */}
-            <div className="h-12 border-b border-white/5 flex items-center px-6 bg-black/20 justify-between">
+            <div 
+              className="h-12 border-b border-border flex items-center px-6 bg-muted/20 justify-between"
+            >
               <div className="flex gap-2">
                 <div className="w-2.5 h-2.5 rounded-full bg-red-500/20" />
                 <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/20" />

package/template/src/features/onboarding/pages/RammeFeatures.tsx

@@ -24,8 +24,8 @@ const RammeFeatures: React.FC = () => {
         
         {/* --- HERO: THE RADICAL TRANSPARENCY --- */}
         <header className="pt-24 space-y-10">
-          <Badge variant="primary" className="uppercase tracking-[0.4em] text-[10px] px-4 py-2 border-white/10 bg-white/5">
-            Core Engine v4.2 // Open Protocol
+          <Badge variant="primary" className="uppercase tracking-[0.4em] text-[10px] px-4 py-2 border-primary/40 bg-primary/10 text-primary">
+            Core Engine v2.0 // Open Protocol
           </Badge>
           <div className="space-y-6">
             <h1 className="text-7xl md:text-[120px] font-black tracking-[-0.06em] leading-[0.8] text-foreground uppercase italic">
@@ -51,7 +51,7 @@ const RammeFeatures: React.FC = () => {
                   Traditional prototypes "reset" when you refresh. Ramme’s kernel keeps your data alive by syncing state directly to the browser. Type once, keep it forever.
                  </p>
                </div>
-               <div className="rounded-3xl overflow-hidden border border-white/5 shadow-2xl">
+               <div className="rounded-3xl overflow-hidden border border-border shadow-2xl">
                  <RammeCodeBlock 
                     variant="success"
                     title="persistent_state.ts"
@@ -62,14 +62,14 @@ const RammeFeatures: React.FC = () => {
             </div>
             
             <div className="lg:col-span-5 grid grid-cols-1 gap-4">
-              <Card className="p-10 bg-white/[0.03] border-white/5 backdrop-blur-md rounded-[2.5rem] flex flex-col justify-between hover:bg-white/[0.06] hover:border-white/20 transition-all group">
+              <Card className="p-10 bg-muted/5 border-border backdrop-blur-md rounded-[2.5rem] flex flex-col justify-between hover:bg-muted/10 hover:border-border/70 transition-all group">
                 <Icon name={"refresh-cw" as any} style={{ color: successColor }} size={40} className="group-hover:rotate-180 transition-transform duration-700" />
                 <div className="mt-8 space-y-2">
                   <h5 className="font-black text-xl uppercase italic text-foreground tracking-tight">Hot-State Reload</h5>
                   <p className="text-sm text-muted-foreground leading-relaxed">Change code and watch the UI update <strong>without losing your current scroll position or form data.</strong></p>
                 </div>
               </Card>
-              <Card className="p-10 bg-white/[0.03] border-white/5 backdrop-blur-md rounded-[2.5rem] flex flex-col justify-between hover:bg-white/[0.06] hover:border-white/20 transition-all group">
+              <Card className="p-10 bg-muted/5 border-border backdrop-blur-md rounded-[2.5rem] flex flex-col justify-between hover:bg-muted/10 hover:border-border/70 transition-all group">
                 <Icon name={"hard-drive" as any} style={{ color: successColor }} size={40} />
                 <div className="mt-8 space-y-2">
                   <h5 className="font-black text-xl uppercase italic text-foreground tracking-tight">JSON Snapshots</h5>
@@ -87,8 +87,8 @@ const RammeFeatures: React.FC = () => {
           
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mt-12 items-center">
             <div className="order-2 lg:order-1">
-              <Card className="p-1.5 bg-gradient-to-br from-white/10 to-transparent rounded-[3.5rem] shadow-3xl overflow-hidden group/simulation">
-                 <div className="bg-[#0a0a0a] p-12 rounded-[3.2rem] space-y-8 border border-white/5">
+              <Card className="p-1.5 bg-gradient-to-br from-muted/10 to-transparent rounded-[3.5rem] shadow-3xl overflow-hidden group/simulation">
+                 <div className="bg-background p-12 rounded-[3.2rem] space-y-8 border border-border">
                     <div className="flex justify-between items-center">
                        <Badge className="bg-primary/10 text-primary border-primary/20 font-mono text-[10px]">DNA_INJECTION_ACTIVE</Badge>
                        <div className="flex gap-2">
@@ -97,11 +97,11 @@ const RammeFeatures: React.FC = () => {
                           <div className="h-2 w-2 rounded-full bg-primary/40 animate-pulse" />
                        </div>
                     </div>
-                    <div className="p-8 bg-white/5 rounded-3xl border border-white/10 italic text-lg leading-relaxed text-primary/80 font-medium">
+                    <div className="p-8 bg-muted/10 rounded-3xl border border-border italic text-lg leading-relaxed text-primary/80 font-medium">
                       "Morph the system into a high-density tactical interface. Use monospace fonts, slate-900 backgrounds, and neon-cyan borders."
                     </div>
-                    <Button className="w-full bg-primary text-black font-black uppercase tracking-[0.2em] h-16 rounded-2xl hover:brightness-110 transition-all shadow-lg">
-                       Apply Vibe Shift
+                    <Button className="w-full bg-primary text-black font-black uppercase tracking-[0.2em] h-16 rounded-2xl hover:brightness-110 transition-all shadow-lg" onClick={() => navigate('/settings/theme')}>
+                       Launch Theme Engine
                     </Button>
                  </div>
               </Card>
@@ -150,7 +150,7 @@ const RammeFeatures: React.FC = () => {
                  { title: "Atomic Shell", desc: "Pre-engineered sidebars and navs that handle their own logic and state.", icon: "sidebar", color: infoColor },
                  { title: "Mock Interceptors", desc: "Simulate real API traffic for production-ready testing without the backend.", icon: "terminal", color: primaryColor }
                ].map((feature, i) => (
-                 <Card key={i} className="p-10 border-white/5 bg-white/[0.03] backdrop-blur-md hover:bg-white/[0.08] hover:border-white/20 transition-all rounded-[3rem] group/card">
+                 <Card key={i} className="p-10 border-border bg-muted/5 backdrop-blur-md hover:bg-muted/15 hover:border-border/70 transition-all rounded-[3rem] group/card">
                     <Icon name={feature.icon as any} style={{ color: feature.color }} className="mb-8 group-hover/card:scale-110 transition-transform duration-500" size={32} />
                     <h5 className="font-black uppercase text-lg mb-3 italic text-foreground tracking-tight">{feature.title}</h5>
                     <p className="text-sm text-muted-foreground leading-relaxed font-medium">{feature.desc}</p>
@@ -161,7 +161,7 @@ const RammeFeatures: React.FC = () => {
         </section>
 
         {/* --- THE MANIFESTO FOOTER --- */}
-        <footer className="pt-32 text-center border-t border-white/5 relative">
+        <footer className="pt-32 text-center border-t border-border relative">
           <div className="space-y-12">
             <h2 className="text-8xl md:text-[140px] font-black tracking-[-0.06em] text-foreground leading-[0.8] uppercase italic">
               Build <br/> <span style={{ color: primaryColor }}>Better.</span>
@@ -171,20 +171,21 @@ const RammeFeatures: React.FC = () => {
                 size="lg" 
                 className="px-20 h-24 text-2xl font-black rounded-full shadow-[0_20px_50px_rgba(0,0,0,0.3)] hover:scale-105 transition-transform"
                 style={{ backgroundColor: primaryColor, color: '#000' }}
-                onClick={() => navigate('/dashboard')}
+                onClick={() => window.open('https://www.npmjs.com/package/@ramme-io/create-app', '_blank')}
               >
-                Launch Simulation
+                Get Started — It's Free
+                <Icon name="external-link" size={20} className="ml-3" />
               </Button>
               <Button 
                 variant="ghost"
                 className="text-foreground/60 hover:text-foreground font-black uppercase tracking-[0.3em] text-xs transition-colors group"
-                onClick={() => navigate('/tutorial')}
+                onClick={() => navigate('/dashboard/ai-chat')}
               >
-                Read the Manifesto
+                Ask the AI Assistant
                 <Icon name="arrow-right" size={16} className="ml-2 group-hover:translate-x-2 transition-transform" />
               </Button>
             </div>
-            <p className="font-mono text-[9px] text-foreground/20 tracking-[0.4em] uppercase">v.4.2.0-STABLE // SYSTEM READY</p>
+            <p className="font-mono text-[9px] text-foreground/20 tracking-[0.4em] uppercase">v.2.0.0 // SYSTEM READY</p>
           </div>
         </footer>
 

package/template/src/features/onboarding/pages/RammeTutorial.tsx

@@ -24,7 +24,7 @@ const RammeTutorial: React.FC = () => {
         
         {/* --- HERO SECTION --- */}
         <div className="text-center space-y-8 pt-20">
-          <Badge variant="primary" className="uppercase tracking-[0.3em] text-[10px] px-4 py-1.5 border-primary/20 bg-primary/5">
+          <Badge variant="primary" className="uppercase tracking-[0.3em] text-[10px] px-4 py-1.5 border-primary/40 bg-primary/10 text-primary">
             The Creator's Handbook
           </Badge>
           <h1 className="text-7xl md:text-[110px] font-black tracking-[-0.02em] leading-[0.8] text-foreground uppercase">
@@ -46,7 +46,7 @@ const RammeTutorial: React.FC = () => {
                <p className="text-lg leading-relaxed text-muted-foreground">
                 In Ramme, your "screens" are just containers. Drop your elements inside the <code style={{ color: infoColor }} className="font-bold italic px-2 py-0.5 bg-info/5 border border-info/10 rounded">StandardPageLayout</code>.
                </p>
-               <div className="rounded-2xl overflow-hidden border border-white/5 shadow-2xl">
+               <div className="rounded-2xl overflow-hidden border border-border shadow-2xl">
                  <RammeCodeBlock 
                     variant="info"
                     title="App.tsx"
@@ -56,7 +56,7 @@ const RammeTutorial: React.FC = () => {
                </div>
             </div>
             <div className="lg:col-span-2">
-              <Card className="p-8 bg-black/40 border-white/5 h-full rounded-[2rem] flex flex-col justify-center">
+              <Card className="p-8 bg-card/60 border-border h-full rounded-[2rem] flex flex-col justify-center">
                 <Icon name={"maximize" as any} style={{ color: infoColor }} className="mb-6" size={40} />
                 <h4 className="font-black mb-3 text-foreground text-xl uppercase tracking-tight">Auto-Responsive</h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
@@ -86,7 +86,7 @@ const RammeTutorial: React.FC = () => {
                    </div>
                 </div>
               </div>
-              <div className="rounded-2xl overflow-hidden border border-white/5 shadow-2xl">
+              <div className="rounded-2xl overflow-hidden border border-border shadow-2xl">
                 <RammeCodeBlock 
                   variant="success"
                   title="ProfileSetup.tsx"
@@ -103,7 +103,7 @@ const RammeTutorial: React.FC = () => {
           <div className="absolute -left-20 -top-10 text-[12rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.06] transition-opacity duration-700" style={{ color: secondaryColor }}>03</div>
           <SectionHeader title="Dynamic Smart Grids" icon={"grid" as any} />
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 mt-12">
-             <div className="lg:col-span-2 rounded-2xl overflow-hidden border border-white/5 shadow-2xl">
+             <div className="lg:col-span-2 rounded-2xl overflow-hidden border border-border shadow-2xl">
                 <RammeCodeBlock 
                   variant="secondary"
                   title="Dashboard.tsx"
@@ -116,7 +116,7 @@ const RammeTutorial: React.FC = () => {
                <p className="text-md text-muted-foreground leading-relaxed">
                  Use the <span style={{ color: secondaryColor }} className="font-bold">SmartGrid</span> to create layouts that auto-arrange based on information density.
                </p>
-               <Button variant="ghost" className="text-secondary p-0 h-auto hover:bg-transparent font-black uppercase text-[10px] tracking-widest group/btn" onClick={() => navigate('/dashboard')}>
+               <Button variant="ghost" className="text-secondary p-0 h-auto hover:bg-transparent font-black uppercase text-[10px] tracking-widest group/btn" onClick={() => navigate('/dashboard/dashboard_sample')}>
                  View Dashboard Sample 
                  <Icon name="external-link" size={12} className="ml-2 group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-transform" />
                </Button>
@@ -129,11 +129,11 @@ const RammeTutorial: React.FC = () => {
           <div className="absolute -left-20 -top-10 text-[12rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.06] transition-opacity duration-700" style={{ color: primaryColor }}>04</div>
           <SectionHeader title="AI Vibe Engine" icon={"sparkles" as any} />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-12">
-            <Card className="p-10 bg-black/40 border-white/5 flex flex-col gap-8 rounded-[3rem] shadow-2xl relative overflow-hidden group/card">
+            <Card className="p-10 bg-card/60 border-border flex flex-col gap-8 rounded-[3rem] shadow-2xl relative overflow-hidden group/card">
               <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[100px] pointer-events-none" />
               <div className="space-y-4">
                 <div className="text-[10px] font-black opacity-30 uppercase tracking-[0.3em] text-foreground">Global DNA Prompting</div>
-                <div className="p-6 bg-black/60 rounded-2xl border border-white/10 italic text-sm leading-relaxed" style={{ color: primaryColor }}>
+                <div className="p-6 bg-muted/15 rounded-2xl border border-border italic text-sm leading-relaxed" style={{ color: primaryColor }}>
                   "Redesign the entire OS to feel like a high-altitude cockpit: muted slates, tactical orange accents, and blurred glass depth."
                 </div>
               </div>
@@ -160,7 +160,7 @@ const RammeTutorial: React.FC = () => {
         </section>
 
         {/* --- FINISH LINE --- */}
-        <div className="pt-32 text-center border-t border-white/5 relative">
+        <div className="pt-32 text-center border-t border-border relative">
           <div className="space-y-8 relative z-10">
             <h2 className="text-7xl md:text-9xl font-black tracking-[-0.02em] text-foreground leading-[0.8] uppercase italic">
               Your Studio <br/> Is Ready.
@@ -173,9 +173,18 @@ const RammeTutorial: React.FC = () => {
                 size="lg" 
                 className="px-20 h-24 text-3xl font-black rounded-full shadow-[0_0_50px_rgba(var(--app-primary-color),0.2)] hover:scale-105 transition-transform"
                 style={{ backgroundColor: primaryColor, color: '#000' }}
-                onClick={() => navigate('/dashboard')}
+                onClick={() => navigate('/dashboard/ai-chat')}
               >
-                Enter Dashboard
+                Ask the AI Assistant
+              </Button>
+            <Button 
+                size="lg" 
+                variant="outline" 
+                className="px-12 h-20 text-xl font-black rounded-full border-border hover:bg-muted/10"
+                onClick={() => window.open('https://www.npmjs.com/package/@ramme-io/create-app', '_blank')}
+              >
+                Get the Package
+                <Icon name="external-link" size={16} className="ml-2" />
               </Button>
           </div>
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] blur-[150px] rounded-full opacity-[0.07] pointer-events-none" style={{ backgroundColor: primaryColor }} />

package/template/src/features/onboarding/pages/Welcome.tsx

@@ -15,7 +15,7 @@ const WelcomeRamme: React.FC = () => {
         {/* --- HERO: THE CREATOR HOOK --- */}
         <header className="text-center pt-24">
           <div className="inline-flex flex-col items-center space-y-8">
-            <Badge variant="primary" className="uppercase tracking-[0.3em] text-[10px] px-6 py-1.5 border-primary/20 bg-primary/5">
+            <Badge variant="primary" className="uppercase tracking-[0.3em] text-[10px] px-6 py-1.5 border-primary/40 bg-primary/10 text-primary">
               The Rapid Prototyping Engine
             </Badge>
             <h1 className="text-7xl md:text-[110px] font-[1000] leading-[0.8] tracking-[-0.05em] text-foreground uppercase">
@@ -42,7 +42,7 @@ const WelcomeRamme: React.FC = () => {
                   variant="info"
                   title="Starter Command"
                   language="bash"
-                  code="npx @ramme-io/create-app@latest"
+                  code="npm create @ramme-io/app"
                 />
               </div>
               
@@ -117,17 +117,17 @@ const WelcomeRamme: React.FC = () => {
             </p>
           </div>
           <div className="flex flex-col sm:flex-row justify-center gap-4">
-            <Button size="lg" className="px-16 h-20 text-2xl font-black shadow-2xl hover:scale-105 transition-transform" onClick={() => navigate('/dashboard')}>
-              Enter Dashboard
+            <Button size="lg" className="px-16 h-20 text-2xl font-black shadow-2xl hover:scale-105 transition-transform" onClick={() => navigate('/dashboard/features')}>
+              Explore Features
             </Button>
             <Button 
                 size="lg" 
                 variant="outline" 
                 className="px-12 h-20 text-xl font-bold border-secondary/20 hover:bg-secondary/5" 
                 style={{ color: 'rgb(var(--app-secondary-color))' }}
-                onClick={() => navigate('/tutorial')}
+                onClick={() => navigate('/settings/theme')}
             >
-              Start Tutorial
+              Try the Theme Engine
             </Button>
           </div>
         </footer>

package/template/src/features/styleguide/sections/tables/TablesSection.tsx

@@ -12,8 +12,8 @@ import {
   useDataFetch,
   type ColDef,
   type ICellRendererParams,
-  type IRowNode,
 } from '@ramme-io/ui';
+import { type IRowNode } from 'ag-grid-community';
 
 // --- Local Mock Data ---
 const mockLargeTableData = Array.from({ length: 23 }, (_, i) => ({
@@ -104,10 +104,22 @@ const TablesSection: React.FC = () => {
       </Card>
 
       <Card id="tables-aggrid" className="p-6 scroll-mt-20">
-        <h3 className="text-2xl font-semibold mb-4 text-text">AG Grid Data Table (Advanced)</h3>
-        <p className="text-muted-foreground mb-4">
-          A powerful grid with sorting, filtering, and row selection, powered by AG Grid.
-        </p>
+        <div className="mb-6">
+          <h3 className="text-2xl font-semibold mb-2 text-foreground">AG Grid Data Table (Advanced)</h3>
+          <p className="text-muted-foreground mb-4">
+            Powered by AG Grid Enterprise with <code className="text-primary bg-muted px-2 py-0.5 rounded text-sm">ag-theme-ramme</code> - 
+            a custom theme that syncs perfectly with Ramme's light/dark modes using semantic CSS variables.
+          </p>
+          <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
+            <Badge variant="outline">✓ Instant theme switching</Badge>
+            <Badge variant="outline">✓ Row selection</Badge>
+            <Badge variant="outline">✓ Column sorting</Badge>
+            <Badge variant="outline">✓ Advanced filtering</Badge>
+            <Badge variant="outline">✓ Pagination</Badge>
+            <Badge variant="outline">✓ Custom cell renderers</Badge>
+          </div>
+        </div>
+
         <div className="flex flex-col md:flex-row md:items-center gap-4 mb-6">
           <Input
             type="text"
@@ -131,6 +143,14 @@ const TablesSection: React.FC = () => {
             rowSelection="multiple"
           />
         )}
+
+        <div className="mt-4 p-4 bg-muted/30 rounded-lg border border-border">
+          <p className="text-sm text-muted-foreground">
+            <strong className="text-foreground">Theme Architecture:</strong> The grid uses <code className="text-primary">ag-theme-ramme</code> which maps AG Grid's CSS variables 
+            to Ramme's semantic tokens (<code>--background</code>, <code>--foreground</code>, <code>--primary</code>, etc.). 
+            This ensures zero-jank theme synchronization across light/dark modes without page reloads.
+          </p>
+        </div>
       </Card>
     </div>
   );