- {studio.name} -
- -+
{studio.description}
From 5bf61c52e99603601984b325c7765e4b9577c6aa Mon Sep 17 00:00:00 2001
From: SunilKumarKV RainbowCode
- Global design-to-code studio
+ Design-to-code workspace
- 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.
{value}
- {label}
-
- Design visually. Generate production-ready code.
+ Build the design system and the codebase together.
- {`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
+});