diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 0d86496..4913164 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,59 +1,27 @@ import Link from "next/link"; import { RbcBadge } from "@/components/ui/rbc-badge"; import { RbcButton } from "@/components/ui/rbc-button"; +import { studioNavItems } from "@/lib/navigation/studio-nav"; -const studios = [ - { - name: "Brand Studio", - status: "Next", - description: - "Create logo direction, color systems, typography, and reusable brand kits.", - }, +const workflow = [ { - name: "Theme Studio", - status: "Ready", - description: - "Build token-powered glass, neon, SaaS, luxury, gaming, and minimal themes.", + title: "Define brand foundations", + description: "Set naming, logo mark text, and palette values for the workspace.", }, { - name: "Component Studio", - status: "Ready", - description: - "Customize buttons, cards, inputs, badges, and future production UI blocks.", + title: "Tune validated tokens", + description: "Adjust theme colors and radii through the token engine.", }, { - name: "Canvas Studio", - status: "V1 Ready", - description: - "Design visually with nodes, groups, templates, snap grid, import/export, and generated code.", + title: "Build reusable UI", + description: "Configure components and design layouts on the canvas.", }, { - name: "Code Studio", - status: "Preview", - description: - "Generate React, Next.js, Tailwind, JSON tokens, and future RBC CLI assets.", + title: "Review generated artifacts", + description: "Export brand, theme, component, and canvas code from one place.", }, ] as const; -const workflow = [ - "Choose a brand direction", - "Customize tokens and components", - "Design visually on canvas", - "Export production-ready code", -] as const; - -function getStatusVariant(status: string): "neutral" | "success" | "warning" | "info" { - if (status.includes("Ready")) { - return "success"; - } - - if (status === "Next") { - return "info"; - } - - return "neutral"; -} - export default function HomePage() { return (
@@ -66,7 +34,7 @@ export default function HomePage() {

RainbowCode

- Global design-to-code studio + Design-to-code workspace

@@ -78,9 +46,6 @@ export default function HomePage() { Studios - - Code - @@ -91,25 +56,24 @@ export default function HomePage() {
- Founder Build - Canvas V1 Ready - Next.js + Tailwind Export + Production workspace + Local-first state

- Design visually. Generate production-ready code. + Build the design system and the codebase together.

- RainbowCode is a global design-to-code platform where teams create - brand systems, themes, components, visual layouts, and export clean - code through the studio and future RBC CLI. + RainbowCode brings brand, theme, components, canvas layouts, and + generated artifacts into one studio so the visual system and the + exported code stay in sync.

- Start Building + Open Workspace @@ -119,24 +83,6 @@ export default function HomePage() {
- -
- {[ - ["5", "Studios"], - ["V1", "Canvas Engine"], - ["100%", "Typed Foundation"], - ].map(([value, label]) => ( -
-

{value}

-

- {label} -

-
- ))} -
@@ -151,7 +97,7 @@ export default function HomePage() {
- rainbow-canvas.tsx + rainbowcode studio @@ -162,20 +108,18 @@ export default function HomePage() {

- {["Brand", "Theme", "Component", "Canvas", "Code"].map( - (item) => ( -
- {item} -
- ), - )} + {studioNavItems.slice(1).map((item, index) => ( +
+ {item.label} +
+ ))}
@@ -193,10 +137,10 @@ export default function HomePage() { 
-                  {`export function Hero() {
+                  {`export function RainbowCanvas() {
   return (
-    

-      
Build beautiful interfaces faster

+    

+      
Design system workspace

     

   );
 }`}
@@ -214,14 +158,14 @@ export default function HomePage() {
         

           Workflow
           

-            One pipeline from idea to installable UI.
+            One workspace from visual system to export.
           

         

 
         

           {workflow.map((item, index) => (
             

               
@@ -229,12 +173,11 @@ export default function HomePage() {
               
 
               

-                {item}
+                {item.title}
               

 
               

-                Each step updates preview, tokens, exports, and future project
-                install paths.
+                {item.description}
               

             

           ))}
@@ -249,7 +192,7 @@ export default function HomePage() {
           

             Studios
             

-              Built as a platform, not a toy editor.
+              Each product area maps to a real route in the app.
             

           

 
@@ -258,98 +201,23 @@ export default function HomePage() {
           
         

 
-        

-          {studios.map((studio) => (
+        

+          {studioNavItems.map((studio) => (
             

-              
-                {studio.status}
+              
+                {studio.label}
               
 
-              

-                {studio.name}
-              

-
-              

+              

                 {studio.description}
               

             

           ))}
         

       

-
-      

-        

-          

-            

-              Code Studio
-
-              

-                Export code your repo can actually use.
-              

-
-              

-                RainbowCode is being built with strict TypeScript, Next.js,
-                Tailwind, theme tokens, generated TSX, JSON import/export, and a
-                future RBC CLI installation workflow.
-              

-
-              

-                
-                  Try Canvas Studio
-                
-              

-            

-
-            
-              {`npx rbc init
-
-rbc add component button
-rbc install theme neon-saas
-rbc export canvas --format tsx
-
-// Generated from visual design
-export const theme = {
-  colors: {
-    primary: "#4f46e5",
-    background: "#ffffff"
-  },
-  radius: {
-    lg: "1rem"
-  }
-};`}
-            

-          

-        

-      

-
-      

-        

-          Founder Standard
-
-          

-            Start with Canvas. Build toward a full design system platform.
-          

-
-          

-            RainbowCode is moving step-by-step from working engine to
-            production-grade global startup product.
-          

-
-          

-            
-              
-                Open RainbowCode Studio
-              
-            
-          

-        

-
); -} \ No newline at end of file +} diff --git a/apps/web/src/components/app-shell/code-panel.tsx b/apps/web/src/components/app-shell/code-panel.tsx deleted file mode 100644 index 25df3e6..0000000 --- a/apps/web/src/components/app-shell/code-panel.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { RbcBadge } from "@/components/ui/rbc-badge"; - -export function CodePanel() { - return ( -
-
-
-

- Code Preview -

- Live -
- - React / Tailwind / JSON -
- -
-
-
- {""} -
- -

- Code output lives inside Canvas Studio -

- -

- Use generated-code controls from the canvas panel for TSX, JSON, - copy, import, and export flows. -

-
-
-
- ); -} \ No newline at end of file diff --git a/apps/web/src/components/app-shell/workspace.tsx b/apps/web/src/components/app-shell/workspace.tsx deleted file mode 100644 index 68c082b..0000000 --- a/apps/web/src/components/app-shell/workspace.tsx +++ /dev/null @@ -1,54 +0,0 @@ -"use client"; - -import { CommandPalette } from "@/components/app-shell/command-palette"; -import { CanvasStudioPanel } from "@/features/canvas-studio/components/canvas-studio-panel"; -import { useCanvasStore } from "@/features/canvas-studio/store/canvas-store"; - -export function Workspace() { - const nodes = useCanvasStore((state) => state.nodes); - const selectedNodeIds = useCanvasStore((state) => state.selectedNodeIds); - const zoom = useCanvasStore((state) => state.zoom); - const snapToGridEnabled = useCanvasStore((state) => state.snapToGridEnabled); - const canUndo = useCanvasStore((state) => state.canUndo); - const canRedo = useCanvasStore((state) => state.canRedo); - - return ( -
-
- - Canvas Studio - - - V1 Ready - - - Build visual layouts and export code - -
- -
- {nodes.length} nodes - - {selectedNodeIds.length} selected - - {Math.round(zoom * 100)}% - - Snap {snapToGridEnabled ? "On" : "Off"} - - Undo {canUndo ? "Ready" : "Empty"} - Redo {canRedo ? "Ready" : "Empty"} -
- -
-
- -
-
- - -
- ); -} \ No newline at end of file diff --git a/apps/web/src/components/theme-demo/theme-demo.tsx b/apps/web/src/components/theme-demo/theme-demo.tsx deleted file mode 100644 index c182ae9..0000000 --- a/apps/web/src/components/theme-demo/theme-demo.tsx +++ /dev/null @@ -1,66 +0,0 @@ -"use client"; - -import { Button } from "@/components/ui/button"; -import { useThemeStore } from "@/features/theme-engine/store/theme-store"; - -const demoColors = ["#2563eb", "#7c3aed", "#16a34a", "#dc2626"] as const; - -export function ThemeDemo() { - const updateColor = useThemeStore((state) => state.updateColor); - const resetTheme = useThemeStore((state) => state.resetTheme); - - return ( -
-

- Live Theme Preview -

- -

- Token-driven interface -

- -

- Change the primary token and RainbowCode updates the visual system using - CSS variables generated from the Theme Engine. -

- -
- {demoColors.map((color) => ( -
- -
- - - -
-
- ); -} \ No newline at end of file diff --git a/apps/web/src/features/canvas-studio/components/canvas-stage.tsx b/apps/web/src/features/canvas-studio/components/canvas-stage.tsx index a010526..c175be6 100644 --- a/apps/web/src/features/canvas-studio/components/canvas-stage.tsx +++ b/apps/web/src/features/canvas-studio/components/canvas-stage.tsx @@ -51,14 +51,14 @@ function CanvasEmptyState() {
applyTemplate("hero")}> - Use Hero Template + Use Intro Layout applyTemplate("pricing-card")} > - Pricing Card + Detail Card @@ -559,4 +559,4 @@ export function CanvasStage() {
); -} \ No newline at end of file +} diff --git a/apps/web/src/features/canvas-studio/components/canvas-toolbar.tsx b/apps/web/src/features/canvas-studio/components/canvas-toolbar.tsx index f8998bb..c178019 100644 --- a/apps/web/src/features/canvas-studio/components/canvas-toolbar.tsx +++ b/apps/web/src/features/canvas-studio/components/canvas-toolbar.tsx @@ -107,8 +107,8 @@ export function CanvasToolbar() { - - + + @@ -188,4 +188,4 @@ export function CanvasToolbar() { ); -} \ No newline at end of file +} diff --git a/apps/web/src/features/canvas-studio/templates/canvas-templates.ts b/apps/web/src/features/canvas-studio/templates/canvas-templates.ts index 05d66a8..22e15e1 100644 --- a/apps/web/src/features/canvas-studio/templates/canvas-templates.ts +++ b/apps/web/src/features/canvas-studio/templates/canvas-templates.ts @@ -12,8 +12,8 @@ export type CanvasTemplate = { export const canvasTemplates: readonly CanvasTemplate[] = [ { id: "hero", - name: "Hero Section", - description: "Landing page hero layout with background block and headline.", + name: "Feature Intro", + description: "Reusable intro layout with headline and supporting copy.", nodes: [ { id: "template-hero-bg", @@ -32,7 +32,7 @@ export const canvasTemplates: readonly CanvasTemplate[] = [ y: 135, width: 440, height: 64, - text: "Build beautiful interfaces faster", + text: "Section title", fontSize: 32, fill: "var(--color-background)", }, @@ -43,7 +43,7 @@ export const canvasTemplates: readonly CanvasTemplate[] = [ y: 215, width: 420, height: 48, - text: "Design visually. Export production-ready code.", + text: "Supporting copy", fontSize: 20, fill: "var(--color-background)", }, @@ -51,8 +51,8 @@ export const canvasTemplates: readonly CanvasTemplate[] = [ }, { id: "pricing-card", - name: "Pricing Card", - description: "Simple SaaS pricing card layout.", + name: "Detail Card", + description: "Reusable card layout with headline, value, and action.", nodes: [ { id: "template-pricing-card", @@ -71,7 +71,7 @@ export const canvasTemplates: readonly CanvasTemplate[] = [ y: 130, width: 240, height: 40, - text: "Pro Plan", + text: "Card title", fontSize: 28, fill: "var(--color-foreground)", }, @@ -82,7 +82,7 @@ export const canvasTemplates: readonly CanvasTemplate[] = [ y: 190, width: 220, height: 52, - text: "$19/mo", + text: "Key value", fontSize: 36, fill: "var(--color-primary)", }, @@ -103,7 +103,7 @@ export const canvasTemplates: readonly CanvasTemplate[] = [ y: 350, width: 140, height: 28, - text: "Get Started", + text: "Action", fontSize: 18, fill: "var(--color-background)", }, @@ -121,4 +121,4 @@ export function getCanvasTemplate( } return template; -} \ No newline at end of file +} diff --git a/apps/web/src/features/canvas-studio/tests/canvas-templates.test.ts b/apps/web/src/features/canvas-studio/tests/canvas-templates.test.ts index 17351fb..7073f50 100644 --- a/apps/web/src/features/canvas-studio/tests/canvas-templates.test.ts +++ b/apps/web/src/features/canvas-studio/tests/canvas-templates.test.ts @@ -12,14 +12,14 @@ describe("canvasTemplates", () => { it("returns hero template", () => { const template = getCanvasTemplate("hero"); - expect(template.name).toBe("Hero Section"); + expect(template.name).toBe("Feature Intro"); expect(template.nodes.length).toBeGreaterThan(0); }); it("returns pricing card template", () => { const template = getCanvasTemplate("pricing-card"); - expect(template.name).toBe("Pricing Card"); + expect(template.name).toBe("Detail Card"); expect(template.nodes.length).toBeGreaterThan(0); }); -}); \ No newline at end of file +}); diff --git a/apps/web/src/features/dashboard/components/activity-feed.tsx b/apps/web/src/features/dashboard/components/activity-feed.tsx index cad4598..f4d6a53 100644 --- a/apps/web/src/features/dashboard/components/activity-feed.tsx +++ b/apps/web/src/features/dashboard/components/activity-feed.tsx @@ -1,24 +1,36 @@ -import { activityItems } from "@/features/dashboard/data/studio-home-data"; +"use client"; + +import { useCanvasStore } from "@/features/canvas-studio/store/canvas-store"; export function ActivityFeed() { + const nodeCount = useCanvasStore((state) => state.nodes.length); + const exportItems = [ + "Brand kit JSON", + "Theme CSS variables", + "Theme JSON tokens", + "Theme Tailwind theme", + "Component TSX bundle", + nodeCount > 0 ? "Canvas TSX and JSON" : "Canvas TSX and JSON after first node", + ] as const; + return (

- Activity + Exports

- Latest studio updates + Export readiness

- {activityItems.map((item) => ( + {exportItems.map((item) => (
); -} \ No newline at end of file +} diff --git a/apps/web/src/features/dashboard/components/quick-actions.tsx b/apps/web/src/features/dashboard/components/quick-actions.tsx index 5c4a2e2..d1bec1e 100644 --- a/apps/web/src/features/dashboard/components/quick-actions.tsx +++ b/apps/web/src/features/dashboard/components/quick-actions.tsx @@ -1,4 +1,5 @@ -import { quickActions } from "@/features/dashboard/data/studio-home-data"; +import Link from "next/link"; +import { studioNavItems } from "@/lib/navigation/studio-nav"; export function QuickActions() { return ( @@ -9,33 +10,33 @@ export function QuickActions() {

- Command Center + Studios

- Start faster with one action. + Jump into the workspace you need.

- Create a brand kit, open the canvas, import work, or export - production-ready code. + Each studio updates the same local workspace, so brand, theme, + components, canvas, and exports stay aligned.

-
- {quickActions.map((action, index) => ( - + {item.label} + ))}
); -} \ No newline at end of file +} diff --git a/apps/web/src/features/dashboard/components/recent-projects.tsx b/apps/web/src/features/dashboard/components/recent-projects.tsx index 5464c09..4f9ec22 100644 --- a/apps/web/src/features/dashboard/components/recent-projects.tsx +++ b/apps/web/src/features/dashboard/components/recent-projects.tsx @@ -1,53 +1,83 @@ -import { recentProjects } from "@/features/dashboard/data/studio-home-data"; +"use client"; + +import { useBrandStore } from "@/features/brand-studio/store/brand-store"; +import { useCanvasStore } from "@/features/canvas-studio/store/canvas-store"; +import { useComponentStudioStore } from "@/features/component-studio/store/component-studio-store"; +import { useThemeStore } from "@/features/theme-engine/store/theme-store"; export function RecentProjects() { + const brand = useBrandStore((state) => state.brand); + const theme = useThemeStore((state) => state.theme); + const selectedComponent = useComponentStudioStore( + (state) => state.selectedComponent, + ); + const nodeCount = useCanvasStore((state) => state.nodes.length); + + const cards = [ + { + label: "Brand kit", + value: brand.name || "Unnamed workspace", + detail: `${brand.palette.length} palette colors`, + accent: "from-indigo-500 to-cyan-400", + }, + { + label: "Theme tokens", + value: `${Object.keys(theme.colors).length} colors`, + detail: `${Object.keys(theme.radius).length} radius tokens`, + accent: "from-fuchsia-500 to-indigo-500", + }, + { + label: "Component focus", + value: selectedComponent, + detail: "Bundle exports available", + accent: "from-emerald-500 to-cyan-400", + }, + { + label: "Canvas", + value: `${nodeCount} nodes`, + detail: nodeCount > 0 ? "Code export available" : "Ready for first layout", + accent: "from-amber-500 to-orange-400", + }, + ] as const; + return ( -
+

- Projects + Workspace

- Recent work + Current state

- -
- {recentProjects.map((project) => ( + {cards.map((card) => (
-
+

- {project.type} + {card.label}

- {project.name} + {card.value}

-

- {project.updatedAt} -

+

{card.detail}

))}
); -} \ No newline at end of file +} diff --git a/apps/web/src/features/dashboard/components/studio-home.tsx b/apps/web/src/features/dashboard/components/studio-home.tsx index 3a302ad..bee0449 100644 --- a/apps/web/src/features/dashboard/components/studio-home.tsx +++ b/apps/web/src/features/dashboard/components/studio-home.tsx @@ -1,9 +1,25 @@ -import { ActivityFeed } from "@/features/dashboard/components/activity-feed"; +"use client"; + +import { RbcBadge } from "@/components/ui/rbc-badge"; +import { useBrandStore } from "@/features/brand-studio/store/brand-store"; +import { useCanvasStore } from "@/features/canvas-studio/store/canvas-store"; +import { useComponentStudioStore } from "@/features/component-studio/store/component-studio-store"; import { QuickActions } from "@/features/dashboard/components/quick-actions"; import { RecentProjects } from "@/features/dashboard/components/recent-projects"; import { StudioModules } from "@/features/dashboard/components/studio-modules"; +import { ActivityFeed } from "@/features/dashboard/components/activity-feed"; +import { useThemeStore } from "@/features/theme-engine/store/theme-store"; export function StudioHome() { + const brand = useBrandStore((state) => state.brand); + const nodeCount = useCanvasStore((state) => state.nodes.length); + const selectedComponent = useComponentStudioStore( + (state) => state.selectedComponent, + ); + const colorTokenCount = useThemeStore( + (state) => Object.keys(state.theme.colors).length, + ); + return (
-

- RainbowCode Studio -

+
+ RainbowCode Studio + Single workspace +

- Build a design system before writing UI code. + Work from one live design system instead of scattered files.

- Start from brand kits, theme tokens, component variants, canvas - layouts, and export-ready code in one product workflow. + This overview reflects the current local workspace: brand + identity, validated theme tokens, component configuration, canvas + progress, and export availability.

-

Current milestone

-

Canvas V1 + Brand Kit

+

Workspace

+

+ {brand.name.trim().length > 0 ? brand.name : "Unnamed workspace"} +

- {["Brand", "Canvas", "Code"].map((item) => ( + {[ + `${colorTokenCount} tokens`, + `${selectedComponent}`, + `${nodeCount} nodes`, + ].map((item) => (

- Next builder + Workspace note

- Real Brand Studio Logo Builder + No fake projects, no seeded metrics

- The next production feature is visual logo generation with type, - symbol, gradients, palette sync, and exportable brand assets. + The studio starts from a clean local workspace. Create real brand, + theme, component, and canvas state here, then export the resulting + artifacts when you are ready.

@@ -72,4 +97,4 @@ export function StudioHome() {
); -} \ No newline at end of file +} diff --git a/apps/web/src/features/dashboard/components/studio-modules.tsx b/apps/web/src/features/dashboard/components/studio-modules.tsx index c386135..6c713d1 100644 --- a/apps/web/src/features/dashboard/components/studio-modules.tsx +++ b/apps/web/src/features/dashboard/components/studio-modules.tsx @@ -1,16 +1,5 @@ -import { studioModules } from "@/features/dashboard/data/studio-home-data"; - -function getStatusClass(status: string): string { - if (status.includes("Ready")) { - return "bg-emerald-50 text-emerald-700 ring-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:ring-emerald-900"; - } - - if (status === "Next") { - return "bg-indigo-50 text-indigo-700 ring-indigo-200 dark:bg-indigo-950 dark:text-indigo-300 dark:ring-indigo-900"; - } - - return "bg-slate-100 text-slate-700 ring-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:ring-slate-800"; -} +import Link from "next/link"; +import { studioNavItems } from "@/lib/navigation/studio-nav"; export function StudioModules() { return ( @@ -27,30 +16,29 @@ export function StudioModules() { -
- {studioModules.map((module) => ( +
+ {studioNavItems.map((module) => (
- - {module.status} - -

- {module.name} + {module.label}

{module.description}

+ + + Open +
))}
); -} \ No newline at end of file +} diff --git a/apps/web/src/features/dashboard/data/studio-home-data.ts b/apps/web/src/features/dashboard/data/studio-home-data.ts deleted file mode 100644 index 62cebb9..0000000 --- a/apps/web/src/features/dashboard/data/studio-home-data.ts +++ /dev/null @@ -1,68 +0,0 @@ -export const recentProjects = [ - { - name: "SaaS Brand System", - type: "Brand Kit", - updatedAt: "Updated 2 min ago", - accent: "from-indigo-500 to-cyan-400", - }, - { - name: "AI Landing Page", - type: "Canvas", - updatedAt: "Updated today", - accent: "from-fuchsia-500 to-indigo-500", - }, - { - name: "Dashboard UI Kit", - type: "Components", - updatedAt: "Updated yesterday", - accent: "from-emerald-500 to-cyan-400", - }, - { - name: "Neon Theme Pack", - type: "Theme", - updatedAt: "Updated 3 days ago", - accent: "from-purple-500 to-pink-500", - }, -] as const; - -export const studioModules = [ - { - name: "Brand Studio", - status: "Next", - description: "Logo direction, typography, palettes, and brand kits.", - }, - { - name: "Theme Studio", - status: "Ready", - description: "Token-powered themes for modern product interfaces.", - }, - { - name: "Component Studio", - status: "Ready", - description: "Buttons, cards, inputs, badges, and reusable UI primitives.", - }, - { - name: "Canvas Studio", - status: "V1 Ready", - description: "Visual layout builder with exportable React/Tailwind code.", - }, - { - name: "Code Studio", - status: "Preview", - description: "Generated TSX, JSON, Tailwind tokens, and future RBC CLI.", - }, -] as const; - -export const activityItems = [ - "Exported rainbow-canvas.tsx", - "Updated global theme tokens", - "Created default RainbowCode brand kit", - "Generated component bundle", -] as const; - -export const quickActions = [ - "Create Brand Kit", - "Open Canvas Studio", - "Import JSON", - "Export Code", -] as const; \ No newline at end of file diff --git a/apps/web/src/features/dashboard/tests/studio-home.test.tsx b/apps/web/src/features/dashboard/tests/studio-home.test.tsx index 15766de..461b83c 100644 --- a/apps/web/src/features/dashboard/tests/studio-home.test.tsx +++ b/apps/web/src/features/dashboard/tests/studio-home.test.tsx @@ -7,8 +7,8 @@ describe("StudioHome", () => { render(); expect(screen.getByText("RainbowCode Studio")).toBeDefined(); - expect(screen.getByText("Recent work")).toBeDefined(); + expect(screen.getByText("Current state")).toBeDefined(); expect(screen.getByText("RainbowCode studios")).toBeDefined(); - expect(screen.getByText("Latest studio updates")).toBeDefined(); + expect(screen.getByText("Export readiness")).toBeDefined(); }); -}); \ No newline at end of file +});