@ramme-io/create-app 1.3.19 → 2.0.0-alpha.2

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

@@ -1,164 +1,140 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { 
-  Card, 
-  Button, 
-  Icon, 
-  Badge,
-  SectionHeader 
-} from '@ramme-io/ui';
+import { Card, Icon, Badge, Button } from '@ramme-io/ui';
 import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
+import { PrototypeGallery } from './PrototypeGallery';
+import { RammeCodeBlock } from '../../../components/RammeCodeBlock';
 
-const Welcome: React.FC = () => {
+const WelcomeRamme: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <StandardPageLayout >
-    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
-      
-      {/* HERO */}
-      <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-primary to-violet-600 text-primary-foreground p-8 md:p-12">
-        <div className="relative z-10 max-w-2xl">
-          <Badge variant="secondary" className="mb-4 bg-white/20 text-white border-none backdrop-blur-sm">
-            v1.2.0 Starter Kit
-          </Badge>
-          <h1 className="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight">
-            Your Ramme App is Ready.
-          </h1>
-          <p className="text-lg md:text-xl text-primary-foreground/90 mb-8 leading-relaxed">
-            You have successfully scaffolded a production-ready prototype environment. 
-            This kit comes pre-wired with Authentication, Mock Data, and the A.D.A.P.T. architecture.
-          </p>
-          <div className="flex flex-wrap gap-4">
-            <Button 
-              size="lg" 
-              variant="secondary" 
-              className="font-semibold"
-              iconLeft="layout-dashboard"
-              onClick={() => navigate('/dashboard/app')}
-            >
-              Open Live Dashboard
-            </Button>
-            <Button 
-              size="lg" 
-              variant="outline" 
-              className="bg-transparent border-white/30 text-white hover:bg-white/10 hover:text-white"
-              iconLeft="book-open"
-              onClick={() => navigate('/docs')}
-            >
-              Read Documentation
-            </Button>
-          </div>
-        </div>
+    <StandardPageLayout>
+      <div className="max-w-5xl mx-auto space-y-32 pb-32 animate-in fade-in duration-700">
         
-        {/* Decorative Background Icon */}
-        <div className="absolute -right-10 -bottom-10 opacity-10 rotate-12">
-          <Icon name="box" size={300} />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-        
-        {/* SECTION 1: ARCHITECTURE */}
-        <div className="space-y-4">
-          <SectionHeader title="Project Architecture" />
-          <div className="grid gap-4">
-            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
-              <div className="p-3 rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 h-fit">
-                <Icon name="database" size={24} />
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground">Data Lake</h3>
-                <p className="text-sm text-muted-foreground mt-1">
-                  Mock data is seeded into <code>localStorage</code> on boot. 
-                  Edit <code>src/data/mockData.ts</code> to change the schema.
-                </p>
-              </div>
-            </Card>
-
-            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
-              <div className="p-3 rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400 h-fit">
-                <Icon name="git-branch" size={24} />
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground">Logic Engine</h3>
-                <p className="text-sm text-muted-foreground mt-1">
-                  Workflows and signals are processed in real-time by 
-                  <code>useWorkflowEngine.ts</code>. Supports MQTT and simulated sensors.
-                </p>
-              </div>
-            </Card>
-
-            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
-              <div className="p-3 rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 h-fit">
-                <Icon name="layout" size={24} />
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground">Dynamic Routing</h3>
-                <p className="text-sm text-muted-foreground mt-1">
-                  Pages are generated from <code>app.manifest.ts</code>. 
-                  Visual blocks connect automatically to data sources.
-                </p>
-              </div>
-            </Card>
+        {/* --- 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">
+              The Rapid Prototyping Engine
+            </Badge>
+            <h1 className="text-7xl md:text-[110px] font-[1000] leading-[0.8] tracking-[-0.05em] text-foreground uppercase">
+              ZERO TO PRODUCT.<br/>
+              <span style={{ color: 'rgb(var(--app-primary-color))' }}>BEFORE LUNCH.</span>
+            </h1>
+            <p className="text-muted-foreground text-xl md:text-2xl max-w-2xl leading-relaxed font-medium mt-6">
+              Ramme automates the infrastructure, giving you a <span className="text-foreground">Living OS</span> for your product ideas in a single command.
+            </p>
           </div>
-        </div>
+        </header>
 
-        {/* SECTION 2: RESOURCES */}
-        <div className="space-y-4">
-          <SectionHeader title="Developer Resources" />
+        {/* --- SECTION 1: THE LAUNCHPAD (FIXED RGB) --- */}
+        <section className="space-y-6">
+          <div className="flex items-center gap-2 px-2">
+            <div className="h-2 w-2 rounded-full" style={{ backgroundColor: 'rgb(var(--app-info-color))' }} />
+            <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-40 text-foreground">Launch Sequence</h3>
+          </div>
           
-          <Card className="p-6 space-y-6">
-            <div>
-              <h4 className="font-semibold flex items-center gap-2 mb-2">
-                <Icon name="palette" size={16} className="text-muted-foreground" />
-                Component Library
-              </h4>
-              <p className="text-sm text-muted-foreground mb-3">
-                Browse the full suite of accessible UI components available in this project.
-              </p>
-              <Button variant="outline" size="sm" onClick={() => navigate('/styleguide')}>
-                View Style Guide
-              </Button>
+          <Card className="p-0 border-border overflow-hidden bg-card/50 backdrop-blur-sm">
+            <div className="grid grid-cols-1 md:grid-cols-4">
+              <div className="md:col-span-3 p-4">
+                <RammeCodeBlock 
+                  variant="info"
+                  title="Starter Command"
+                  language="bash"
+                  code="npx @ramme-io/create-app@latest"
+                />
+              </div>
+              
+              <div className="bg-muted/20 p-8 border-t md:border-t-0 md:border-l border-border flex flex-col justify-center">
+                <span className="text-[10px] font-bold uppercase tracking-widest opacity-30 text-foreground mb-4">Quick Setup</span>
+                <div className="space-y-4 font-mono text-[11px] text-foreground/80">
+                  <div className="flex gap-3"><span style={{ color: 'rgb(var(--app-info-color))' }} className="font-bold">01</span> cd my-prototype</div>
+                  <div className="flex gap-3"><span style={{ color: 'rgb(var(--app-info-color))' }} className="font-bold">02</span> pnpm install</div>
+                  <div className="flex gap-3"><span style={{ color: 'rgb(var(--app-info-color))' }} className="font-bold">03</span> pnpm dev</div>
+                </div>
+              </div>
             </div>
+          </Card>
+        </section>
 
-            <div className="border-t border-border pt-6">
-              <h4 className="font-semibold flex items-center gap-2 mb-2">
-                <Icon name="settings" size={16} className="text-muted-foreground" />
-                Configuration
-              </h4>
-              <p className="text-sm text-muted-foreground mb-3">
-                Manage global settings, user profile templates, and billing layouts.
-              </p>
-              <Button variant="outline" size="sm" onClick={() => navigate('/settings')}>
-                Open Settings
-              </Button>
+        {/* --- SECTION 2: THE DIFFERENTIATOR (FIXED RGB) --- */}
+        <section className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+          <div className="space-y-8">
+            <h2 className="text-5xl font-black leading-none tracking-tight text-foreground uppercase">
+              State that <br/>
+              <span style={{ color: 'rgb(var(--app-success-color))' }}>actually stays.</span>
+            </h2>
+            <p className="text-lg text-muted-foreground leading-relaxed">
+              Why build a backend for a prototype? Ramme uses <span className="text-foreground font-bold underline decoration-success/20">Local-First Persistence</span> to ensure every action is saved instantly to the browser's kernel.
+            </p>
+            <div className="grid grid-cols-2 gap-4">
+               <div className="p-5 rounded-2xl border border-border bg-success/5 flex flex-col gap-3">
+                  <Icon name={"database" as any} style={{ color: 'rgb(var(--app-success-color))' }} size={20} />
+                  <div className="font-bold text-sm">Kernel Sync</div>
+                  <p className="text-[10px] text-muted-foreground leading-tight uppercase font-bold tracking-tight">Zero-Config Persistence</p>
+               </div>
+               <div className="p-5 rounded-2xl border border-border bg-success/5 flex flex-col gap-3">
+                  <Icon name={"refresh-cw" as any} style={{ color: 'rgb(var(--app-success-color))' }} size={20} />
+                  <div className="font-bold text-sm">Session Flow</div>
+                  <p className="text-[10px] text-muted-foreground leading-tight uppercase font-bold tracking-tight">Auto-Saves on Refresh</p>
+               </div>
             </div>
+          </div>
+
+          <div className="relative group">
+            <div 
+              className="absolute -inset-4 blur-3xl rounded-full opacity-20 transition-opacity duration-700" 
+              style={{ backgroundColor: 'rgb(var(--app-success-color))' }}
+            />
+            <RammeCodeBlock 
+              variant="success"
+              title="KernelStore.tsx"
+              language="tsx"
+              code={`// Your logic becomes permanent\nconst [settings, setSettings] = \n  usePersistedState('app_vibe', 'dark');`}
+            />
+          </div>
+        </section>
 
-            <div className="border-t border-border pt-6">
-              <h4 className="font-semibold flex items-center gap-2 mb-2">
-                <Icon name="github" size={16} className="text-muted-foreground" />
-                Community
-              </h4>
-              <p className="text-sm text-muted-foreground mb-3">
-                Need help? Check the docs or open an issue on GitHub.
-              </p>
-              <a 
-                href="https://github.com/ramme-io/create-app" 
-                target="_blank" 
-                rel="noreferrer"
-                className="inline-flex"
-              >
-                <Button variant="ghost" size="sm">GitHub Repo &rarr;</Button>
-              </a>
+        {/* --- SECTION 3: THE BLUEPRINTS (FIXED RGB) --- */}
+        <div className="space-y-8">
+          <div className="flex justify-between items-end px-2">
+            <div className="space-y-1">
+              <h3 className="text-3xl font-black text-foreground">Blueprint Gallery</h3>
+              <p className="text-muted-foreground text-sm font-medium">Pre-engineered components and full-page simulations.</p>
             </div>
-          </Card>
+            <Icon name={"layers" as any} style={{ color: 'rgb(var(--app-secondary-color))' }} size={32} className="opacity-40" />
+          </div>
+          <PrototypeGallery />
         </div>
 
+        {/* --- FOOTER: FINAL CALL --- */}
+        <footer className="pt-32 pb-16 text-center space-y-12 border-t border-border/50 relative">
+          <div className="space-y-6">
+            <h2 className="text-6xl font-black tracking-tight text-foreground italic uppercase">Build the Future.</h2>
+            <p className="text-muted-foreground max-w-lg mx-auto text-xl leading-relaxed">
+              Stop fighting with the plumbing. Your next big idea is <span className="text-foreground underline decoration-primary/30">one command away</span>.
+            </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>
+            <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')}
+            >
+              Start Tutorial
+            </Button>
+          </div>
+        </footer>
+
       </div>
-    </div>
     </StandardPageLayout>
   );
 };
 
-export default Welcome;
+export default WelcomeRamme;

package/template/src/features/settings/pages/GeneralSettings.tsx

@@ -1,17 +1,22 @@
 import React, { useState } from 'react';
 import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
-import { Card, Input, Button, Label } from '@ramme-io/ui'; // Assuming these UI components exist
+import { Card, Input, Button, Label, Icon } from '@ramme-io/ui'; 
 import { useAppConfig } from '../../../features/config/AppConfigContext';
 import { Save } from 'lucide-react';
 
 const GeneralSettings = () => {
-  const { appName, setAppName } = useAppConfig();
+  const { appName, setAppName, enableCRT, setEnableCRT } = useAppConfig();
   const [tempName, setTempName] = useState(appName);
+  const [tempCrt, setTempCrt] = useState(enableCRT); // Local state for the toggle
   const [isSaved, setIsSaved] = useState(false);
 
   const handleSave = (e: React.FormEvent) => {
     e.preventDefault();
+    
+    // Commit changes to global context
     setAppName(tempName);
+    setEnableCRT(tempCrt); // 🟢 Apply the CRT setting
+
     setIsSaved(true);
     setTimeout(() => setIsSaved(false), 2000);
   };
@@ -23,9 +28,10 @@ const GeneralSettings = () => {
     >
       <div className="max-w-2xl">
         <Card className="p-6">
-          <form onSubmit={handleSave} className="space-y-6">
+          <form onSubmit={handleSave} className="space-y-8">
             
-            <div className="space-y-2">
+            {/* App Name Section */}
+            <div className="space-y-3">
               <Label htmlFor="appName">Application Name</Label>
               <Input
                 id="appName"
@@ -38,6 +44,32 @@ const GeneralSettings = () => {
               </p>
             </div>
 
+            <div className="border-t border-border" />
+
+            {/* 🟢 CRT Toggle Section */}
+            <div className="flex flex-row items-center justify-between rounded-lg border p-4 shadow-sm">
+                <div className="space-y-0.5">
+                    <Label className="text-base font-bold flex items-center gap-2">
+                       <Icon name="monitor" size={16} /> Retro CRT Mode
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                       Enable scanlines and pixel-grid overlay for that 1980s terminal aesthetic.
+                    </p>
+                </div>
+                <div>
+                   {/* Custom Toggle Switch */}
+                   <label className="relative inline-flex items-center cursor-pointer">
+                      <input 
+                        type="checkbox" 
+                        className="sr-only peer" 
+                        checked={tempCrt}
+                        onChange={(e) => setTempCrt(e.target.checked)} 
+                      />
+                      <div className="w-11 h-6 bg-zinc-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 rounded-full peer dark:bg-zinc-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
+                   </label>
+                </div>
+            </div>
+
             <div className="flex items-center gap-4 pt-4">
               <Button type="submit" disabled={isSaved}>
                 <Save size={16} className="mr-2" />

package/template/src/features/styleguide/Styleguide.tsx

@@ -3,6 +3,22 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { Sidebar, type SidebarItem, type IconName, Icon } from '@ramme-io/ui';
 import { useSitemap } from '@ramme-io/kernel';
 
+// 🟢 Icon Mapping Dictionary
+const STYLEGUIDE_ICONS: Record<string, IconName> = {
+  'templates': 'layout-template',
+  'layout': 'grid-3x3',
+  'theming': 'palette',
+  'navigation': 'menu',
+  'tables': 'table',
+  'charts': 'bar-chart-3',
+  'elements': 'component',
+  'forms': 'form-input',
+  'feedback': 'message-square',
+  'utilities': 'wrench',
+  'colors': 'droplets',
+  'icons': 'box',
+};
+
 const Styleguide: React.FC = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -13,19 +29,24 @@ const Styleguide: React.FC = () => {
     return sitemap.find(item => item.id === 'styleguide');
   }, [sitemap]);
 
-  // 2. Transform to Sidebar Items
+  // 2. Transform to Sidebar Items with Icons
   const navItems = useMemo<SidebarItem[]>(() => {
     if (!styleguideSection?.children) return [];
 
-    return styleguideSection.children.map((child) => ({
-      id: child.id,
-      label: child.title,
-      icon: (child.icon as IconName) || 'hash', 
-      href: child.path ? `/docs/styleguide/${child.path}` : '/docs/styleguide',
-    }));
+    return styleguideSection.children.map((child) => {
+      const iconKey = (child.id || child.path || '').toLowerCase();
+      const resolvedIcon = STYLEGUIDE_ICONS[iconKey] || (child.icon as IconName) || 'hash';
+
+      return {
+        id: child.id,
+        label: child.title,
+        icon: resolvedIcon, 
+        href: child.path ? `/docs/styleguide/${child.path}` : '/docs/styleguide',
+      };
+    });
   }, [styleguideSection]);
 
-  // 3. Determine Active Item
+  // 🟢 FIX: Restored the missing activeItemId logic
   const activeItemId = useMemo(() => {
     const active = navItems.find(item => 
       location.pathname === item.href || 
@@ -34,6 +55,7 @@ const Styleguide: React.FC = () => {
     return active?.id;
   }, [location.pathname, navItems]);
 
+  // Handle cases where we shouldn't show the sidebar (e.g. mobile or top-level docs)
   if (!location.pathname.startsWith('/docs') || !styleguideSection) {
     return <Outlet />;
   }
@@ -43,27 +65,24 @@ const Styleguide: React.FC = () => {
       {/* SIDEBAR */}
       <div className="sticky top-[7rem] h-[calc(100vh-7rem)] z-20 hidden md:block">
         <Sidebar
-          // ✅ FIX 1: Removed 'w-64'. Let the Sidebar component manage its own width.
-          // ✅ FIX 2: Added 'h-full' so it fills the sticky container perfectly.
           className="h-full border-r border-border bg-card/50 backdrop-blur-sm"
           items={navItems}
-          activeItemId={activeItemId}
+          activeItemId={activeItemId} // ✅ Now defined!
           onNavigate={(item) => {
             if (item.href) navigate(item.href);
           }}
           logo={
-            <div className="flex items-center gap-2 px-1 py-2 text-muted-foreground">
-              <Icon name="book-open" className="h-4 w-4" />
-              <span className="font-semibold text-xs uppercase tracking-wider">Reference</span>
+            <div className="flex items-center gap-2 px-3 py-4 text-muted-foreground border-b border-border/50 mb-2">
+              <Icon name="library" className="h-4 w-4 text-primary" />
+              <span className="font-bold text-[10px] uppercase tracking-[0.2em]">Design System</span>
             </div>
           }
         />
       </div>
 
       {/* MAIN CONTENT */}
-      {/* ✅ FIX 3: Re-added padding (p-6) so content doesn't hit the edges. */}
       <main className="flex-1 min-w-0 bg-background overflow-x-hidden p-6 md:p-10">
-        <div className="max-w-7xl mx-auto">
+        <div className="max-w-4xl mx-auto">
            <Outlet />
         </div>
       </main>

package/template/src/features/theme/index.ts

@@ -0,0 +1 @@
+export { default as ThemeCustomizerPage } from './pages/ThemeCustomizerPage';