npm - @ramme-io/create-app - Versions diffs - 2.0.0 → 2.0.1 - Mend

@ramme-io/create-app 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/README.md +2 -2
package/index.js +1 -1
package/package.json +1 -1
package/template/index.html +1 -1
package/template/package.json +14 -5
package/template/public/_redirects +1 -0
package/template/src/App.tsx +3 -2
package/template/src/components/AppHeader.tsx +5 -0
package/template/src/components/ScrollToTop.tsx +6 -6
package/template/src/features/ai/pages/AiChat.tsx +136 -37
package/template/src/features/auth/AuthContext.tsx +16 -6
package/template/src/features/config/AppConfigContext.tsx +2 -2
package/template/src/features/docs/pages/EdgeTelemetryDemo.tsx +149 -0
package/template/src/features/onboarding/pages/AboutRamme.tsx +12 -12
package/template/src/features/onboarding/pages/PrototypeGallery.tsx +8 -6
package/template/src/features/onboarding/pages/RammeFeatures.tsx +18 -17
package/template/src/features/onboarding/pages/RammeTutorial.tsx +20 -11
package/template/src/features/onboarding/pages/Welcome.tsx +6 -6
package/template/src/features/styleguide/sections/tables/TablesSection.tsx +25 -5
package/template/src/features/theme/pages/ThemeCustomizerPage.tsx +344 -256
package/template/src/features/theme/utils/ThemeGenerator.logic.ts +587 -0
package/template/src/hooks/__tests__/useStudioHotkeys.test.ts +100 -0
package/template/src/hooks/useStudioHotkeys.ts +36 -0
package/template/src/index.css +91 -1
package/template/src/main.tsx +44 -2
package/template/src/templates/dashboard/DashboardLayout.tsx +6 -1
package/template/src/templates/dashboard/dashboard.sitemap.ts +1 -1
package/template/src/templates/docs/docs.sitemap.ts +8 -0
package/template/src/templates/settings/SettingsLayout.tsx +13 -26
package/template/src/test/setup.ts +1 -0
package/template/tsconfig.app.json +1 -0
package/template/vite.config.ts +7 -0

package/README.md CHANGED Viewed

@@ -15,9 +15,9 @@ This CLI scaffolds a production-ready React application with:
 Get started in seconds. No global installation required.
 ```bash
-npm create @ramme-io/app@latest my-app
+npm create @ramme-io/app my-app
 # or
-npx @ramme-io/create-app@latest my-app
+npm create @ramme-io/app my-app
 ```
 You will be prompted to name your project.

package/index.js CHANGED Viewed

@@ -19,7 +19,7 @@ const projectName = process.argv[2];
 if (!projectName) {
   console.error('❌ Error: Please specify the project directory.');
   console.log('\n📖 Usage:');
-  console.log('  npm create @ramme-io/app@latest <project-name>\n');
+  console.log('  npm create @ramme-io/app <project-name>\n');
   process.exit(1);
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "The official CLI to create Ramme applications.",
   "type": "module",
   "private": false,

package/template/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/orange.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ramme - App Starter</title>
+    <title>Ramme | The High-Fidelity Creator Framework</title>
   </head>
   <body>
     <div id="root"></div>

package/template/package.json CHANGED Viewed

@@ -7,14 +7,18 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@ai-sdk/google": "^0.0.10",
     "@google/generative-ai": "^0.24.1",
     "@radix-ui/react-slot": "^1.2.4",
-    "@ramme-io/kernel": "^2.0.0",
-    "@ramme-io/ui": "^2.0.0",
+    "@ramme-io/kernel": "workspace:*",
+    "@ramme-io/shared": "workspace:*",
+    "@ramme-io/ui": "workspace:*",
+    "ably": "^2.21.0",
     "ag-charts-community": "^13.0.0",
     "ag-charts-react": "^13.0.0",
     "ag-grid-community": "^31.3.1",
@@ -30,8 +34,8 @@
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
-    "react-router-dom": "6.22.3",
     "react-markdown": "^10.1.0",
+    "react-router-dom": "6.22.3",
     "react-select": "^5.8.0",
     "react-syntax-highlighter": "^16.1.0",
     "recharts": "^2.12.7",
@@ -41,14 +45,19 @@
     "zustand": "^5.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/ui": "^2",
     "autoprefixer": "^10.4.19",
+    "jsdom": "^29.0.0",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vitest": "^2.1.9"
   }
 }

package/template/public/_redirects ADDED Viewed

	@@ -0,0 +1 @@
1	+ /* /index.html 200

package/template/src/App.tsx CHANGED Viewed

@@ -15,8 +15,6 @@ import DashboardLayout from './templates/dashboard/DashboardLayout';
 import DocsLayout from './templates/docs/DocsLayout';
 import SettingsLayout from './templates/settings/SettingsLayout';
 // --- SITEMAPS ---
 import { dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
 import { docsSitemap } from './templates/docs/docs.sitemap';
@@ -24,6 +22,7 @@ import { settingsSitemap } from './templates/settings/settings.sitemap';
 // --- UTILS ---
 import ProtectedRoute from './components/ProtectedRoute';
+import { useStudioHotkeys } from './hooks/useStudioHotkeys';
 import NotFound from './components/NotFound';
 import ScrollToTop from './components/ScrollToTop';
 import HashLinkScroll from './components/HashLinkScroll';
@@ -82,6 +81,7 @@ const generateRoutes = (items: any[]) => {
 };
 function App() {
+  useStudioHotkeys();
   const liveDashboardRoutes = useDynamicSitemap(dashboardSitemap);
   return (
@@ -120,6 +120,7 @@ function App() {
             {/* Settings */}
             <Route path="/settings/*" element={<SettingsLayout />}>
+              <Route index element={<Navigate to="general" replace />} />
               {generateRoutes(settingsSitemap)}
             </Route>

package/template/src/components/AppHeader.tsx CHANGED Viewed

@@ -77,6 +77,11 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                 label="Documents"
                 onClick={() => navigate('/docs')}
               />
+              <ButtonItem
+                icon="cpu"
+                label="Bodewell"
+                onClick={() => navigate('/bodewell/fleet')}
+              />
               <ButtonItem
                 icon="refresh-cw"

package/template/src/components/ScrollToTop.tsx CHANGED Viewed

@@ -5,12 +5,12 @@ const ScrollToTop = () => {
   const { pathname } = useLocation();
   useEffect(() => {
-    // "instant" prevents the user from seeing the page scroll up
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: 'instant',
-    });
+    const container = document.getElementById('main-scroll-container');
+    if (container) {
+      container.scrollTo({ top: 0, left: 0, behavior: 'instant' as ScrollBehavior });
+    } else {
+      window.scrollTo({ top: 0, left: 0, behavior: 'instant' as ScrollBehavior });
+    }
   }, [pathname]);
   return null;

package/template/src/features/ai/pages/AiChat.tsx CHANGED Viewed

@@ -1,61 +1,160 @@
-// ramme-app-starter/template/src/pages/AiChat.tsx
-import React, { useState } from 'react';
-import {
-  Card,
-  PageHeader,
-  Conversation,
-  Message,
-  PromptInput,
+import React, { useState, useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import {
+  Card, Conversation, Message, PromptInput, PageHeader, Icon,
 } from '@ramme-io/ui';
-import { useMockChat } from '../../assistant/useMockChat'; // <--- The new brain
+const systemInstruction = `
+  You are the Ramme OS Assistant, part of the internal dev team.
+  Ramme is a high-performance, browser-native modular web-OS (Kernel + UI).
+  It is NOT the Instagram wrapper by Niklas Higle.
+  Answer as a Senior Engineer helping with a monorepo project.
+  Use numbered lists for steps and code blocks for commands.
+`;
 const AiChat: React.FC = () => {
-  const { messages, isLoading, sendMessage } = useMockChat();
   const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [apiHistory, setApiHistory] = useState<any[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [messages, setMessages] = useState([
+    { id: 'init', author: 'AI Agent', content: 'Ramme OS Assistant online. How can I help you build today?', isUser: false }
+  ]);
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, isLoading]);
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (!input.trim() || isLoading) return;
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    sendMessage(input);
+    const userText = input;
+    setMessages(prev => [...prev, { id: `u-${Date.now()}`, author: 'You', content: userText, isUser: true }]);
     setInput('');
+    setIsLoading(true);
+    try {
+      const apiKey = localStorage.getItem('ramme_vault_gemini_key');
+      if (!apiKey) {
+        setMessages(prev => [...prev, {
+          id: `err-${Date.now()}`,
+          author: 'System',
+          content: 'No API key found. Please configure your Gemini API key in Settings → Theme Engine.',
+          isUser: false
+        }]);
+        setIsLoading(false);
+        return;
+      }
+      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          contents: [
+            { role: "user", parts: [{ text: `INSTRUCTION: ${systemInstruction}` }] },
+            { role: "model", parts: [{ text: "Understood." }] },
+            ...apiHistory,
+            { role: "user", parts: [{ text: userText }] }
+          ]
+        })
+      });
+      const data = await response.json();
+      const aiText = data.candidates?.[0]?.content?.parts?.[0]?.text || "No response.";
+      setMessages(prev => [...prev, { id: `ai-${Date.now()}`, author: 'AI Agent', content: aiText, isUser: false }]);
+      setApiHistory([...apiHistory, { role: "user", parts: [{ text: userText }] }, { role: "model", parts: [{ text: aiText }] }]);
+    } catch (err: any) {
+      setMessages(prev => [...prev, { id: `err-${Date.now()}`, author: 'System', content: `Error: ${err.message}`, isUser: false }]);
+    } finally {
+      setIsLoading(false);
+    }
   };
   return (
-    <div className="p-4 sm:p-6 lg:p-8 space-y-8 h-[calc(100vh-64px)] flex flex-col">
+    <div className="p-4 sm:p-6 lg:p-8 space-y-6 h-[calc(100vh-64px)] flex flex-col">
       <PageHeader
         title="AI Assistant"
         description="Full-screen command center for Ramme AI."
       />
-      {/* We use flex-1 on the Card to make it fill the remaining screen space
-         perfectly, creating that immersive "ChatGPT" feel.
-      */}
-      <Card className="flex-1 flex flex-col min-h-0 shadow-sm border-border/50">
-        <div className="flex-1 overflow-hidden">
+      <Card className="flex-1 flex flex-col min-h-0 shadow-sm border-border/50 overflow-hidden">
+        <div className="px-4 py-2 border-b flex justify-between items-center bg-muted/20">
+          <div className="flex items-center gap-2">
+            <div className={`w-2 h-2 rounded-full ${isLoading ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500'}`} />
+            <span className="font-bold text-[10px] uppercase tracking-widest opacity-60">Ramme Assistant</span>
+          </div>
+        </div>
+        <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 custom-scrollbar">
           <Conversation>
             {messages.map((msg) => (
-              <Message
-                key={msg.id}
-                author={msg.author}
-                content={msg.content}
-                isUser={msg.isUser}
-                loading={msg.loading}
-                suggestions={msg.suggestions}
-                onSuggestionClick={(s) => sendMessage(s)}
-              />
+              <div key={msg.id} className={`flex ${msg.isUser ? 'justify-end' : 'justify-start'} mb-3`}>
+                <div className="max-w-[98%] w-full">
+                  <Message
+                    author={msg.author}
+                    isUser={msg.isUser}
+                    // @ts-ignore
+                    content={
+                      <div className="prose prose-sm dark:prose-invert max-w-none text-foreground leading-relaxed">
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          components={{
+                            p: ({children}) => <p className="mb-4 last:mb-0">{children}</p>,
+                            ol: ({children}) => <ol className="list-decimal pl-8 mb-4 space-y-2">{children}</ol>,
+                            ul: ({children}) => <ul className="list-disc pl-8 mb-4 space-y-2">{children}</ul>,
+                            li: ({children}) => <li className="pl-1">{children}</li>,
+                            code({ node, inline, className, children, ...props }: any) {
+                              const match = /language-(\w+)/.exec(className || '');
+                              return !inline && match ? (
+                                <div className="my-5 rounded-lg overflow-hidden border border-border bg-[#0d0d0d] shadow-xl">
+                                  <div className="px-3 py-1 bg-white/5 border-b border-white/10 flex justify-between">
+                                    <span className="text-[9px] text-muted-foreground uppercase">{match[1]}</span>
+                                  </div>
+                                  <SyntaxHighlighter
+                                    style={oneDark}
+                                    language={match[1]}
+                                    PreTag="div"
+                                    customStyle={{ margin: 0, padding: '1.2rem', fontSize: '0.8rem', background: 'transparent' }}
+                                    {...props}
+                                  >
+                                    {String(children).replace(/\n$/, '')}
+                                  </SyntaxHighlighter>
+                                </div>
+                              ) : (
+                                <code className="bg-muted px-1.5 py-0.5 rounded font-mono text-primary text-[0.9em]" {...props}>
+                                  {children}
+                                </code>
+                              );
+                            },
+                          }}
+                        >
+                          {msg.content}
+                        </ReactMarkdown>
+                      </div>
+                    }
+                  />
+                </div>
+              </div>
             ))}
-            {isLoading && <Message author="AI Agent" isUser={false} loading />}
           </Conversation>
         </div>
-        <div className="p-4 border-t bg-card">
-          <PromptInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={handleSubmit}
-            placeholder="Type a command or ask a question..."
-          />
+        <div className="p-4 border-t bg-card/40 backdrop-blur-sm">
+          <PromptInput value={input} onChange={(e) => setInput(e.target.value)} onSubmit={handleSubmit} placeholder="Ask about Ramme..." />
         </div>
       </Card>
+      <style dangerouslySetInnerHTML={{ __html: `
+        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--app-primary-color), 0.2); border-radius: 10px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--app-primary-color), 0.5); }
+      `}} />
     </div>
   );
 };

package/template/src/features/auth/AuthContext.tsx CHANGED Viewed

@@ -7,6 +7,19 @@ const EMERGENCY_ADMIN: User = {
   id: 'usr_admin_force',
   name: 'Alex Admin (Recovery)',
   email: 'alex@example.com',
+  password: 'admin',
+  role: 'admin',
+  status: 'active',
+  joinedAt: new Date().toISOString(),
+  lastActive: new Date().toISOString()
+};
+// 🌐 DEFAULT GUEST: Auto-login for frictionless marketing site experience
+const DEFAULT_GUEST: User = {
+  id: 'usr_guest',
+  name: 'Guest Creator',
+  email: 'guest@ramme.io',
+  password: 'guest',
   role: 'admin',
   status: 'active',
   joinedAt: new Date().toISOString(),
@@ -27,10 +40,10 @@ interface AuthContextType {
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [user, setUser] = useState<User | null>(DEFAULT_GUEST);
+  const [isLoading, setIsLoading] = useState(false);
-  // 1. Mount: Check for existing session
+  // 1. Mount: Check for existing session, fall back to guest
   useEffect(() => {
     const storedUser = localStorage.getItem(SESSION_KEY);
     if (storedUser) {
@@ -38,15 +51,12 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
         const parsed = JSON.parse(storedUser);
         if (parsed && parsed.id) {
           setUser(parsed);
-        } else {
-          localStorage.removeItem(SESSION_KEY);
         }
       } catch (e) {
         console.error("Failed to parse session", e);
         localStorage.removeItem(SESSION_KEY);
       }
     }
-    setIsLoading(false);
   }, []);
   // 2. Action: Login

package/template/src/features/config/AppConfigContext.tsx CHANGED Viewed

@@ -14,8 +14,8 @@ export const AppConfigProvider = ({ children }: { children: ReactNode }) => {
   const [enableCRT, setEnableCRT] = useState(() => {
       const stored = localStorage.getItem('app_enable_crt');
-      // Default to true for that retro-first experience
-      return stored !== null ? JSON.parse(stored) : true;
+      // Default to false for clean marketing site clarity
+      return stored !== null ? JSON.parse(stored) : false;
   });
   useEffect(() => {

package/template/src/features/docs/pages/EdgeTelemetryDemo.tsx ADDED Viewed

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useDevice } from '@ramme-io/kernel';
+import { CircularDial, WaterPumpControl, TelemetryLog } from '@ramme-io/ui';
+import type { TelemetryLogRow } from '@ramme-io/ui';
+import type { PumpMode } from '@ramme-io/ui';
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
+const EdgeTelemetryDemo: React.FC = () => {
+  const telemetry = useDevice();
+  const [fps, setFps] = useState(0);
+  const [pumpMode, setPumpMode] = useState<PumpMode>('AUTO');
+  const [targetMoisture, setTargetMoisture] = useState(40);
+  const [logData, setLogData] = useState<TelemetryLogRow[]>([]);
+  const logBuffer = useRef<TelemetryLogRow[]>([]);
+  const frameCount = useRef(0);
+  const rafId = useRef(0);
+  // Append incoming telemetry to the historical log buffer (capped at 100)
+  useEffect(() => {
+    if (!telemetry) return;
+    const row: TelemetryLogRow = {
+      timestamp: Date.now(),
+      soilMoisture: telemetry.soilMoisture,
+      ambientLight: telemetry.ambientLight,
+      temperature: telemetry.temperature,
+    };
+    logBuffer.current = [...logBuffer.current.slice(-99), row];
+    setLogData(logBuffer.current);
+  }, [telemetry]);
+  // Continuous RAF loop tallies frames; 1s interval reads & resets the tally
+  useEffect(() => {
+    const tick = () => {
+      frameCount.current += 1;
+      rafId.current = requestAnimationFrame(tick);
+    };
+    rafId.current = requestAnimationFrame(tick);
+    const interval = setInterval(() => {
+      setFps(frameCount.current);
+      frameCount.current = 0;
+    }, 1000);
+    return () => {
+      cancelAnimationFrame(rafId.current);
+      clearInterval(interval);
+    };
+  }, []);
+  return (
+    <StandardPageLayout
+      title="Edge Telemetry Engine"
+      description="Hardware-in-the-loop simulation testing 50Hz MQTT ingestion and Zero Jank UI rendering."
+    >
+      {/* Status Bar */}
+      <div className="flex items-center gap-4 p-4 rounded-2xl bg-card border border-border font-mono text-xs mb-8">
+        <div className="flex items-center gap-2">
+          <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+          <span className="font-bold text-foreground uppercase tracking-widest">Kernel Link Active</span>
+        </div>
+        <div className="ml-auto flex items-center gap-4">
+          <span className={fps > 20 ? "text-red-500 font-bold" : "text-green-500 font-bold"}>
+            {fps} FPS
+          </span>
+          <span className="text-muted-foreground">
+            Target: ~15 FPS | Simulator: 50Hz
+          </span>
+        </div>
+      </div>
+      {/* Telemetry Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {/* Soil Moisture Dial */}
+        <div className="flex flex-col items-center gap-4 p-8 rounded-3xl bg-card border border-border">
+          {telemetry ? (
+            <CircularDial
+              value={telemetry.soilMoisture ?? 0}
+              label="Soil Moisture"
+              unit="%"
+              size={180}
+            />
+          ) : (
+            <div className="text-muted-foreground text-sm">Awaiting telemetry...</div>
+          )}
+        </div>
+        {/* Ambient Light Dial */}
+        <div className="flex flex-col items-center gap-4 p-8 rounded-3xl bg-card border border-border">
+          {telemetry ? (
+            <CircularDial
+              value={telemetry.ambientLight ?? 0}
+              min={0}
+              max={100000}
+              label="Ambient Light"
+              unit=" lx"
+              size={180}
+            />
+          ) : (
+            <div className="text-muted-foreground text-sm">Awaiting telemetry...</div>
+          )}
+        </div>
+        {/* Temperature Dial */}
+        <div className="flex flex-col items-center gap-4 p-8 rounded-3xl bg-card border border-border">
+          {telemetry ? (
+            <CircularDial
+              value={telemetry.temperature ?? 0}
+              min={-40}
+              max={125}
+              label="Temperature"
+              unit="°C"
+              size={180}
+            />
+          ) : (
+            <div className="text-muted-foreground text-sm">Awaiting telemetry...</div>
+          )}
+        </div>
+      </div>
+      {/* Command: Water Pump Actuation */}
+      <div className="mt-8">
+        <WaterPumpControl
+          pumpMode={pumpMode}
+          targetMoisture={targetMoisture}
+          onCommand={(payload) => {
+            setPumpMode(payload.pumpMode);
+            setTargetMoisture(payload.targetMoisture);
+            console.log('[MQTT PUBLISH MOCK]', payload);
+          }}
+          className="max-w-md"
+        />
+      </div>
+      {/* Raw Payload Debug */}
+      <div className="mt-8 p-6 rounded-2xl bg-card border border-border">
+        <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-muted-foreground mb-3 font-bold">Raw Smoothed Payload</div>
+        <pre className="font-mono text-sm text-foreground/80 leading-relaxed tabular-nums">
+          {JSON.stringify(telemetry, null, 2)}
+        </pre>
+      </div>
+      {/* Telemetry Log — AG Grid virtualized scroll */}
+      <div className="mt-8">
+        <TelemetryLog rowData={logData} maxRows={100} height="320px" />
+      </div>
+    </StandardPageLayout>
+  );
+};
+export default EdgeTelemetryDemo;

package/template/src/features/onboarding/pages/AboutRamme.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ const AboutRamme: React.FC = () => {
         {/* --- 01: THE MANIFESTO --- */}
         <header className="space-y-8 pt-20 border-l-4 pl-12" style={{ borderColor: 'rgb(var(--app-primary-color))' }}>
-          <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">
             Core Philosophy
           </Badge>
           <h1 className="text-7xl md:text-[110px] font-black tracking-[-0.02em] leading-[0.8] text-foreground uppercase">
@@ -40,19 +40,19 @@ const AboutRamme: React.FC = () => {
             <p className="text-muted-foreground leading-relaxed text-lg">
               Traditional prototypes are fragile. They break when a user clicks outside a hotspot or refreshes the page. Ramme uses a <span style={{ color: 'rgb(var(--app-info-color))' }} className="font-bold underline decoration-info/20">Local-First Kernel</span> that simulates a real database, real authentication, and real logic.
             </p>
-            <div className="p-8 rounded-3xl bg-muted/5 border border-white/5 italic text-sm text-foreground/60 leading-relaxed shadow-inner">
+            <div className="p-8 rounded-3xl bg-muted/5 border border-border italic text-sm text-foreground/60 leading-relaxed shadow-inner">
               "We didn't just want a UI kit. We wanted an OS for ideas—a environment where the data lives and breathes alongside the design."
             </div>
           </div>
           <div className="grid grid-cols-2 gap-6">
-            <Card className="p-8 bg-black/40 border-white/5 flex flex-col gap-5 rounded-[2rem] hover:translate-y-[-4px] transition-transform">
+            <Card className="p-8 bg-card/60 border-border flex flex-col gap-5 rounded-[2rem] hover:translate-y-[-4px] transition-transform">
               <Icon name="database" style={{ color: 'rgb(var(--app-success-color))' }} size={28} />
               <div className="space-y-2">
                 <div className="text-[10px] font-black uppercase tracking-widest text-success/60">Local Engine</div>
                 <p className="text-xs text-muted-foreground font-medium leading-relaxed">Auto-persisted JSON state that lives in the browser's kernel.</p>
               </div>
             </Card>
-            <Card className="p-8 bg-black/40 border-white/5 flex flex-col gap-5 rounded-[2rem] hover:translate-y-[-4px] transition-transform">
+            <Card className="p-8 bg-card/60 border-border flex flex-col gap-5 rounded-[2rem] hover:translate-y-[-4px] transition-transform">
               <Icon name="shield-check" style={{ color: 'rgb(var(--app-primary-color))' }} size={28} />
               <div className="space-y-2">
                 <div className="text-[10px] font-black uppercase tracking-widest text-primary/60">Auth Simulation</div>
@@ -68,12 +68,12 @@ const AboutRamme: React.FC = () => {
             <div className="h-2 w-2 rounded-full shadow-[0_0_10px_rgba(var(--app-info-color),0.5)]" style={{ backgroundColor: 'rgb(var(--app-info-color))' }} />
             <h3 className="text-[10px] font-black uppercase tracking-widest opacity-40 text-foreground">Entry Point</h3>
           </div>
-          <Card className="p-0 overflow-hidden rounded-3xl border-white/5 shadow-2xl">
+          <Card className="p-0 overflow-hidden rounded-3xl border-border shadow-2xl">
             <RammeCodeBlock
               variant="info"
               title="Interactive Terminal"
               language="bash"
-              code="npx @ramme-io/create-app@latest my-prototype"
+              code="npm create @ramme-io/app my-prototype"
             />
           </Card>
         </section>
@@ -127,7 +127,7 @@ set({ lastLogin: new Date() });`}
                 { label: 'Tailwind CSS', icon: 'wind', color: 'text-sky-400' }
               ].map((tech) => (
                 <div key={tech.label} className="flex flex-col items-center gap-4 group cursor-default">
-                  <div className="p-5 rounded-2xl bg-white/5 border border-white/5 group-hover:border-white/10 transition-all">
+                  <div className="p-5 rounded-2xl bg-muted/10 border border-border group-hover:border-border/70 transition-all">
                     <Icon name={tech.icon as any} className={tech.color} size={32} />
                   </div>
                   <span className="font-bold tracking-tight text-sm opacity-50 group-hover:opacity-100 transition-opacity">{tech.label}</span>
@@ -137,18 +137,18 @@ set({ lastLogin: new Date() });`}
         </section>
         {/* --- FINAL CTA --- */}
-        <footer className="text-center space-y-12 bg-black/40 border border-white/5 p-20 rounded-[4rem] shadow-2xl relative overflow-hidden group">
+        <footer className="text-center space-y-12 bg-card/60 border border-border p-20 rounded-[4rem] shadow-2xl relative overflow-hidden group">
           <div className="relative z-10 space-y-8">
             <h2 className="text-6xl font-black tracking-tight text-foreground uppercase leading-[0.9]">
               Ready to bypass the <br/>
               <span style={{ color: 'rgb(var(--app-primary-color))' }}>boilerplate?</span>
             </h2>
             <div className="flex flex-col sm:flex-row justify-center gap-6 pt-4">
-              <Button size="lg" className="px-12 h-20 text-xl font-black rounded-full shadow-2xl hover:scale-105 transition-transform" onClick={() => navigate('/dashboard')}>
-                Initialize Kernel
+              <Button size="lg" className="px-12 h-20 text-xl font-black rounded-full shadow-2xl hover:scale-105 transition-transform" onClick={() => navigate('/docs/styleguide/templates')}>
+                Browse the Style Guide
               </Button>
-              <Button size="lg" variant="outline" className="px-12 h-20 text-xl font-black rounded-full border-white/10 hover:bg-white/5" onClick={() => navigate('/tutorial')}>
-                View Tutorial
+              <Button size="lg" variant="outline" className="px-12 h-20 text-xl font-black rounded-full border-border hover:bg-muted/10" onClick={() => navigate('/dashboard/tutorial')}>
+                Start Tutorial
               </Button>
             </div>
           </div>