sonance-brand-mcp 1.3.1 → 1.3.2

package/dist/index.js

@@ -274,6 +274,222 @@ const BUNDLED_ASSETS = path.join(__dirname, "assets");
 const IS_BUNDLED = fs.existsSync(BUNDLED_ASSETS);
 // Development paths (when running from source)
 const DEV_PROJECT_ROOT = path.resolve(__dirname, "../..");
+/**
+ * Run the installer for DevTools Plugin (copies files to user project)
+ */
+function runDevToolsInstaller() {
+    console.log("");
+    console.log("  ┌─────────────────────────────────────────────────┐");
+    console.log("  │                                                 │");
+    console.log("  │   🎨  Sonance DevTools Plugin - Installer       │");
+    console.log("  │                                                 │");
+    console.log("  └─────────────────────────────────────────────────┘");
+    console.log("");
+    const targetDir = process.cwd();
+    // Paths
+    const libDir = path.join(targetDir, "src/lib");
+    const devToolsDir = path.join(targetDir, "src/components/dev-tools");
+    const stylesDir = path.join(targetDir, "src/styles");
+    const apiThemeDir = path.join(targetDir, "src/app/api/sonance-theme");
+    const apiComponentsDir = path.join(targetDir, "src/app/api/sonance-components");
+    const apiSaveLogoDir = path.join(targetDir, "src/app/api/sonance-save-logo");
+    const apiAssetsDir = path.join(targetDir, "src/app/api/sonance-assets");
+    const apiInjectIdDir = path.join(targetDir, "src/app/api/sonance-inject-id");
+    const apiAnalyzeDir = path.join(targetDir, "src/app/api/sonance-analyze");
+    const themeDir = path.join(targetDir, "src/theme");
+    // Source resolution
+    let sourceBrandSystem;
+    let sourceDevTools;
+    let sourceBrandOverridesCss;
+    let sourceApiTheme;
+    let sourceApiComponents;
+    let sourceApiSaveLogo;
+    let sourceApiAssets;
+    let sourceApiInjectId;
+    let sourceApiAnalyze;
+    if (IS_BUNDLED) {
+        sourceBrandSystem = path.join(BUNDLED_ASSETS, "brand-system.ts");
+        sourceDevTools = path.join(BUNDLED_ASSETS, "dev-tools");
+        sourceBrandOverridesCss = path.join(BUNDLED_ASSETS, "styles/brand-overrides.css");
+        sourceApiTheme = path.join(BUNDLED_ASSETS, "api/sonance-theme/route.ts");
+        sourceApiComponents = path.join(BUNDLED_ASSETS, "api/sonance-components/route.ts");
+        sourceApiSaveLogo = path.join(BUNDLED_ASSETS, "api/sonance-save-logo/route.ts");
+        sourceApiAssets = path.join(BUNDLED_ASSETS, "api/sonance-assets/route.ts");
+        sourceApiInjectId = path.join(BUNDLED_ASSETS, "api/sonance-inject-id/route.ts");
+        sourceApiAnalyze = path.join(BUNDLED_ASSETS, "api/sonance-analyze/route.ts");
+    }
+    else {
+        sourceBrandSystem = path.join(DEV_PROJECT_ROOT, "src/lib/brand-system.ts");
+        sourceDevTools = path.join(DEV_PROJECT_ROOT, "src/components/dev-tools");
+        sourceBrandOverridesCss = path.join(DEV_PROJECT_ROOT, "src/styles/brand-overrides.css");
+        sourceApiTheme = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-theme/route.ts");
+        sourceApiComponents = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-components/route.ts");
+        sourceApiSaveLogo = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-save-logo/route.ts");
+        sourceApiAssets = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-assets/route.ts");
+        sourceApiInjectId = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-inject-id/route.ts");
+        sourceApiAnalyze = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-analyze/route.ts");
+    }
+    // Verify sources exist
+    if (!fs.existsSync(sourceBrandSystem)) {
+        console.error("  ❌ Error: Could not find brand-system.ts source file.");
+        console.error(`     Path: ${sourceBrandSystem}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceDevTools)) {
+        console.error("  ❌ Error: Could not find dev-tools source directory.");
+        console.error(`     Path: ${sourceDevTools}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceApiTheme)) {
+        console.error("  ❌ Error: Could not find sonance-theme API route source file.");
+        console.error(`     Path: ${sourceApiTheme}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceApiComponents)) {
+        console.error("  ❌ Error: Could not find sonance-components API route source file.");
+        console.error(`     Path: ${sourceApiComponents}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceApiSaveLogo)) {
+        console.error("  ❌ Error: Could not find sonance-save-logo API route source file.");
+        console.error(`     Path: ${sourceApiSaveLogo}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceApiAssets)) {
+        console.error("  ❌ Error: Could not find sonance-assets API route source file.");
+        console.error(`     Path: ${sourceApiAssets}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceApiInjectId)) {
+        console.error("  ❌ Error: Could not find sonance-inject-id API route source file.");
+        console.error(`     Path: ${sourceApiInjectId}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceApiAnalyze)) {
+        console.error("  ❌ Error: Could not find sonance-analyze API route source file.");
+        console.error(`     Path: ${sourceApiAnalyze}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(sourceBrandOverridesCss)) {
+        console.error("  ❌ Error: Could not find brand-overrides.css source file.");
+        console.error(`     Path: ${sourceBrandOverridesCss}`);
+        process.exit(1);
+    }
+    console.log("  📂 Installing files...");
+    // 1. Install brand-system.ts
+    if (!fs.existsSync(libDir)) {
+        fs.mkdirSync(libDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceBrandSystem, path.join(libDir, "brand-system.ts"));
+    console.log("  ✓ Created src/lib/brand-system.ts");
+    // 2. Install DevTools components
+    if (!fs.existsSync(devToolsDir)) {
+        fs.mkdirSync(devToolsDir, { recursive: true });
+    }
+    // Copy directory contents
+    const entries = fs.readdirSync(sourceDevTools, { withFileTypes: true });
+    for (const entry of entries) {
+        if (entry.isFile()) {
+            fs.copyFileSync(path.join(sourceDevTools, entry.name), path.join(devToolsDir, entry.name));
+        }
+    }
+    console.log("  ✓ Created src/components/dev-tools/");
+    // 3. Install API route for saving theme
+    if (!fs.existsSync(apiThemeDir)) {
+        fs.mkdirSync(apiThemeDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceApiTheme, path.join(apiThemeDir, "route.ts"));
+    console.log("  ✓ Created src/app/api/sonance-theme/route.ts");
+    // 4. Install API route for component detection
+    if (!fs.existsSync(apiComponentsDir)) {
+        fs.mkdirSync(apiComponentsDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceApiComponents, path.join(apiComponentsDir, "route.ts"));
+    console.log("  ✓ Created src/app/api/sonance-components/route.ts");
+    // 5. Install API route for saving logo configuration
+    if (!fs.existsSync(apiSaveLogoDir)) {
+        fs.mkdirSync(apiSaveLogoDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceApiSaveLogo, path.join(apiSaveLogoDir, "route.ts"));
+    console.log("  ✓ Created src/app/api/sonance-save-logo/route.ts");
+    // 7. Install API route for listing logo assets
+    if (!fs.existsSync(apiAssetsDir)) {
+        fs.mkdirSync(apiAssetsDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceApiAssets, path.join(apiAssetsDir, "route.ts"));
+    console.log("  ✓ Created src/app/api/sonance-assets/route.ts");
+    // 8. Install API route for auto-fixing logo IDs
+    if (!fs.existsSync(apiInjectIdDir)) {
+        fs.mkdirSync(apiInjectIdDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceApiInjectId, path.join(apiInjectIdDir, "route.ts"));
+    console.log("  ✓ Created src/app/api/sonance-inject-id/route.ts");
+    // 9. Install API route for project analysis
+    if (!fs.existsSync(apiAnalyzeDir)) {
+        fs.mkdirSync(apiAnalyzeDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceApiAnalyze, path.join(apiAnalyzeDir, "route.ts"));
+    console.log("  ✓ Created src/app/api/sonance-analyze/route.ts");
+    // 11. Install brand-overrides.css for production logo sizing
+    if (!fs.existsSync(stylesDir)) {
+        fs.mkdirSync(stylesDir, { recursive: true });
+    }
+    fs.copyFileSync(sourceBrandOverridesCss, path.join(stylesDir, "brand-overrides.css"));
+    console.log("  ✓ Created src/styles/brand-overrides.css");
+    // 12. Create theme directory with initial files
+    if (!fs.existsSync(themeDir)) {
+        fs.mkdirSync(themeDir, { recursive: true });
+        // Create initial theme CSS
+        const initialCss = `/**
+ * Sonance Theme - Auto-generated by DevTools
+ * Do not edit manually - use the DevTools plugin to make changes.
+ */
+
+:root {
+  /* Use DevTools to customize and apply your theme */
+}
+`;
+        fs.writeFileSync(path.join(themeDir, "sonance-theme.css"), initialCss, "utf-8");
+        // Create initial config
+        const initialConfig = {
+            baseColor: "#333F48",
+            accentColor: "#00A3E1",
+            radius: "sm",
+            headingWeight: 600,
+            bodyWeight: 400,
+            typographyScale: "default",
+            spacing: "default"
+        };
+        fs.writeFileSync(path.join(themeDir, "sonance-config.json"), JSON.stringify(initialConfig, null, 2), "utf-8");
+        console.log("  ✓ Created src/theme/ with initial files");
+    }
+    console.log("");
+    console.log("  ✅ Sonance DevTools installed successfully!");
+    console.log("");
+    console.log("  ┌──────────────────────────────────────────────────────────────────┐");
+    console.log("  │  Next steps:                                                     │");
+    console.log("  │                                                                  │");
+    console.log("  │  1. Add to your globals.css:                                     │");
+    console.log("  │     @import \"../styles/brand-overrides.css\";                     │");
+    console.log("  │     @import \"../theme/sonance-theme.css\";                        │");
+    console.log("  │                                                                  │");
+    console.log("  │  2. Add to your layout.tsx:                                      │");
+    console.log("  │     import { SonanceDevTools } from '@/components/dev-tools';    │");
+    console.log("  │                                                                  │");
+    console.log("  │  3. Add to your render function:                                 │");
+    console.log("  │     {process.env.NODE_ENV === 'development' && <SonanceDevTools />}│");
+    console.log("  │                                                                  │");
+    console.log("  │  4. Apply CSS variables to your logo components:                 │");
+    console.log("  │     style={{ transform: `scale(var(--sonance-logo-scale, 1))` }} │");
+    console.log("  │                                                                  │");
+    console.log("  └──────────────────────────────────────────────────────────────────┘");
+    console.log("");
+}
+// Check for install-devtools command
+if (process.argv.includes("install-devtools") || process.argv.includes("--install-devtools")) {
+    runDevToolsInstaller();
+    process.exit(0);
+}
 // Resolve paths based on environment
 function getAssetPath(assetType) {
     if (IS_BUNDLED) {
@@ -536,6 +752,610 @@ function getBrandColorsForDocsMulti(brand = "sonance") {
         black: hexToFormats("#000000"),
     };
 }
+// ============================================
+// COMPONENT CATEGORIES
+// ============================================
+/**
+ * Component categories matching the sidebar navigation
+ * Used for category-based retrieval and feature-to-component mapping
+ */
+const COMPONENT_CATEGORIES = {
+    forms: [
+        "button", "input", "textarea", "checkbox", "checkbox-group", "radio-group",
+        "switch", "select", "slider", "number-input", "autocomplete", "listbox",
+        "form", "input-otp", "calendar", "date-input", "date-picker",
+        "date-range-picker", "time-input", "range-calendar", "command", "toggle", "toggle-group"
+    ],
+    navigation: [
+        "breadcrumbs", "dropdown", "link", "navbar", "pagination", "tabs",
+        "context-menu", "dropdown-menu", "menubar", "navigation-menu"
+    ],
+    feedback: ["alert", "badge", "toast", "progress", "spinner", "skeleton"],
+    overlays: ["dialog", "drawer", "tooltip", "popover", "alert-dialog", "hover-card"],
+    "data-display": [
+        "avatar", "user", "accordion", "table", "card", "image",
+        "aspect-ratio", "carousel", "chart", "collapsible", "scroll-area"
+    ],
+    layout: ["resizable", "sidebar"],
+    utilities: ["code", "kbd", "divider", "spacer", "scroll-shadow"]
+};
+/**
+ * Maps app features to required component categories/components
+ */
+const FEATURE_TO_COMPONENTS = {
+    auth: ["button", "input", "form", "card", "alert"],
+    sidebar: ["sidebar", "button", "tooltip", "dropdown-menu", "separator"],
+    "dark-mode": ["switch", "dropdown-menu"], // Theme toggle components
+    tables: ["table", "pagination", "button", "badge", "dropdown-menu"],
+    forms: ["input", "textarea", "checkbox", "radio-group", "select", "button", "form", "alert"],
+    charts: ["chart", "card", "badge"],
+    dashboard: ["card", "chart", "table", "badge", "button", "tabs"],
+    navigation: ["navbar", "breadcrumbs", "tabs", "dropdown-menu", "link"]
+};
+/**
+ * Page layout templates for different app types
+ */
+const PAGE_LAYOUTS = {
+    dashboard: {
+        description: "Data overview with metrics, charts, and quick actions",
+        structure: `## Page Structure
+1. **Header** - Page title, breadcrumbs, primary action button
+2. **Metrics Row** - 3-4 stat cards showing KPIs
+3. **Main Content** - Split into primary and secondary columns
+   - Primary (2/3): Main chart or data table
+   - Secondary (1/3): Activity feed, quick links
+4. **Footer** (optional) - Pagination or additional actions`,
+        components: ["card", "chart", "table", "badge", "button", "dropdown-menu", "tabs"],
+        gridLayout: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6",
+        spacing: "py-8 px-6 lg:py-12 lg:px-8",
+        template: `// Dashboard page template
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-light text-foreground">Dashboard</h1>
+            <p className="text-sm text-muted-foreground">Overview of your activity</p>
+          </div>
+          <Button>New Report</Button>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="p-6 lg:p-8 space-y-8">
+        {/* Metrics row */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <Card className="p-6">
+            <p className="text-sm text-muted-foreground">Total Revenue</p>
+            <p className="text-3xl font-light">$45,231</p>
+          </Card>
+          {/* Add more metric cards */}
+        </div>
+
+        {/* Main content grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2">
+            <Card className="p-6">
+              <h2 className="text-lg font-medium mb-4">Analytics</h2>
+              {/* Chart component here */}
+            </Card>
+          </div>
+          <div>
+            <Card className="p-6">
+              <h2 className="text-lg font-medium mb-4">Recent Activity</h2>
+              {/* Activity list here */}
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}`
+    },
+    settings: {
+        description: "Configuration page with grouped settings sections",
+        structure: `## Page Structure
+1. **Header** - Page title, save button
+2. **Navigation** - Tabs or sidebar for setting categories
+3. **Content Area** - Form sections with dividers
+4. **Footer** - Save/Cancel buttons (sticky on mobile)`,
+        components: ["tabs", "input", "switch", "select", "button", "card", "divider", "form"],
+        gridLayout: "max-w-4xl mx-auto",
+        spacing: "py-8 px-6",
+        template: `// Settings page template
+export default function SettingsPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-4xl mx-auto py-8 px-6">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-light text-foreground">Settings</h1>
+          <p className="text-sm text-muted-foreground">Manage your preferences</p>
+        </div>
+
+        {/* Settings tabs */}
+        <Tabs defaultValue="general" className="space-y-8">
+          <TabsList>
+            <TabsTrigger value="general">General</TabsTrigger>
+            <TabsTrigger value="notifications">Notifications</TabsTrigger>
+            <TabsTrigger value="security">Security</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="general" className="space-y-6">
+            <Card className="p-6">
+              <h2 className="text-lg font-medium mb-4">Profile</h2>
+              <div className="space-y-4">
+                <div>
+                  <Label htmlFor="name">Name</Label>
+                  <Input id="name" placeholder="Enter your name" />
+                </div>
+                <div>
+                  <Label htmlFor="email">Email</Label>
+                  <Input id="email" type="email" placeholder="Enter your email" />
+                </div>
+              </div>
+            </Card>
+          </TabsContent>
+        </Tabs>
+
+        {/* Footer actions */}
+        <div className="mt-8 flex justify-end gap-4">
+          <Button variant="outline">Cancel</Button>
+          <Button>Save Changes</Button>
+        </div>
+      </div>
+    </div>
+  );
+}`
+    },
+    landing: {
+        description: "Marketing landing page with hero, features, and CTA sections",
+        structure: `## Page Structure
+1. **Hero Section** - Large headline, subtext, CTA buttons
+2. **Features Section** - 3-4 feature cards or grid
+3. **Social Proof** - Testimonials or logos
+4. **CTA Section** - Final call to action
+5. **Footer** - Links, legal`,
+        components: ["button", "card", "badge", "image", "divider"],
+        gridLayout: "max-w-7xl mx-auto",
+        spacing: "py-20 px-6 lg:py-24 lg:px-8",
+        template: `// Landing page template
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Hero */}
+      <section className="py-20 px-6 lg:py-32 lg:px-8 text-center">
+        <div className="max-w-4xl mx-auto">
+          <Badge className="mb-4">New Release</Badge>
+          <h1 className="text-4xl lg:text-6xl font-light text-foreground mb-6">
+            Designed to Disappear
+          </h1>
+          <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Premium audio solutions that blend seamlessly into your architecture.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Button size="lg">Get Started</Button>
+            <Button size="lg" variant="outline">Learn More</Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="py-20 px-6 lg:py-24 lg:px-8 bg-muted/50">
+        <div className="max-w-7xl mx-auto">
+          <h2 className="text-3xl font-light text-center mb-12">Features</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <Card className="p-6">
+              <h3 className="text-lg font-medium mb-2">Feature One</h3>
+              <p className="text-muted-foreground">Description of the feature.</p>
+            </Card>
+            {/* More feature cards */}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 px-6 lg:py-24 lg:px-8 text-center">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-light mb-4">Ready to get started?</h2>
+          <p className="text-muted-foreground mb-8">Join thousands of satisfied customers.</p>
+          <Button size="lg">Start Free Trial</Button>
+        </div>
+      </section>
+    </div>
+  );
+}`
+    },
+    auth: {
+        description: "Authentication page with centered form card",
+        structure: `## Page Structure
+1. **Centered Container** - Max-width card
+2. **Logo** - Brand logo at top
+3. **Form** - Email, password, submit
+4. **Links** - Forgot password, sign up`,
+        components: ["card", "input", "button", "form", "alert", "divider"],
+        gridLayout: "min-h-screen flex items-center justify-center",
+        spacing: "p-6",
+        template: `// Auth page template
+export default function AuthPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-6">
+      <Card className="w-full max-w-md p-8">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <Image src="/logo.svg" alt="Logo" width={120} height={40} className="mx-auto" />
+        </div>
+
+        <h1 className="text-2xl font-light text-center mb-2">Welcome back</h1>
+        <p className="text-sm text-muted-foreground text-center mb-8">
+          Sign in to your account
+        </p>
+
+        <form className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" placeholder="name@example.com" />
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input id="password" type="password" placeholder="Enter your password" />
+          </div>
+          <Button className="w-full">Sign In</Button>
+        </form>
+
+        <div className="mt-6 text-center text-sm">
+          <a href="#" className="text-primary hover:underline">Forgot password?</a>
+        </div>
+
+        <Divider className="my-6" />
+
+        <p className="text-center text-sm text-muted-foreground">
+          Don't have an account?{" "}
+          <a href="#" className="text-primary hover:underline">Sign up</a>
+        </p>
+      </Card>
+    </div>
+  );
+}`
+    },
+    list: {
+        description: "List/table page with filters and pagination",
+        structure: `## Page Structure
+1. **Header** - Title, primary action
+2. **Filters** - Search, dropdown filters
+3. **Table/List** - Data display
+4. **Pagination** - Page controls`,
+        components: ["table", "input", "select", "button", "badge", "pagination", "dropdown-menu"],
+        gridLayout: "max-w-7xl mx-auto",
+        spacing: "py-8 px-6",
+        template: `// List page template
+export default function ListPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto py-8 px-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-2xl font-light text-foreground">Users</h1>
+            <p className="text-sm text-muted-foreground">Manage your team members</p>
+          </div>
+          <Button>Add User</Button>
+        </div>
+
+        {/* Filters */}
+        <div className="flex gap-4 mb-6">
+          <Input placeholder="Search users..." className="max-w-sm" />
+          <Select>
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder="Role" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Roles</SelectItem>
+              <SelectItem value="admin">Admin</SelectItem>
+              <SelectItem value="user">User</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Table */}
+        <Card>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {/* Table rows */}
+            </TableBody>
+          </Table>
+        </Card>
+
+        {/* Pagination */}
+        <div className="mt-6 flex justify-center">
+          <Pagination>
+            {/* Pagination controls */}
+          </Pagination>
+        </div>
+      </div>
+    </div>
+  );
+}`
+    },
+    detail: {
+        description: "Detail/profile page with header and content sections",
+        structure: `## Page Structure
+1. **Header** - Back button, title, actions
+2. **Main Content** - Primary information
+3. **Sidebar** - Related info, metadata`,
+        components: ["card", "button", "badge", "tabs", "avatar", "divider"],
+        gridLayout: "max-w-7xl mx-auto",
+        spacing: "py-8 px-6",
+        template: `// Detail page template
+export default function DetailPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto py-8 px-6">
+        {/* Header */}
+        <div className="mb-8">
+          <Button variant="ghost" size="sm" className="mb-4">
+            ← Back
+          </Button>
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-4">
+              <Avatar className="h-16 w-16" />
+              <div>
+                <h1 className="text-2xl font-light text-foreground">Item Name</h1>
+                <p className="text-sm text-muted-foreground">Description or subtitle</p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline">Edit</Button>
+              <Button>Action</Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Content grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Main content */}
+          <div className="lg:col-span-2 space-y-6">
+            <Card className="p-6">
+              <h2 className="text-lg font-medium mb-4">Details</h2>
+              {/* Detail content */}
+            </Card>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            <Card className="p-6">
+              <h2 className="text-lg font-medium mb-4">Metadata</h2>
+              {/* Sidebar content */}
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}`
+    }
+};
+/**
+ * Detect the component type from a description
+ */
+function detectComponentType(description) {
+    const lower = description.toLowerCase();
+    if (/button|input|form|checkbox|radio|switch|select|slider|date|time|calendar|toggle|textarea|autocomplete/i.test(lower))
+        return "forms";
+    if (/nav|menu|tab|breadcrumb|pagination|link|dropdown/i.test(lower))
+        return "navigation";
+    if (/alert|badge|toast|notification|progress|spinner|loading|skeleton/i.test(lower))
+        return "feedback";
+    if (/modal|dialog|drawer|tooltip|popover|overlay|sheet/i.test(lower))
+        return "overlays";
+    if (/card|table|avatar|user|accordion|list|chart|carousel|image|data/i.test(lower))
+        return "data-display";
+    if (/sidebar|layout|grid|container|resizable|panel|split/i.test(lower))
+        return "layout";
+    if (/code|kbd|divider|spacer|utility/i.test(lower))
+        return "utilities";
+    return "general";
+}
+/**
+ * Get component-type-specific implementation guidance
+ */
+const COMPONENT_TYPE_GUIDANCE = {
+    forms: `## Forms Component Implementation
+
+### Key Rules
+- Always include label associations (htmlFor/id)
+- Support disabled, error, and loading states
+- Use ring-based focus indicators: \`focus-visible:ring-2 focus-visible:ring-primary\`
+- Maintain consistent sizing: h-10 for inputs, px-6 py-3 for buttons
+- Include aria-invalid and aria-describedby for error states
+
+### Required States
+- Default, Hover, Focus, Disabled, Error, Loading
+
+### Common Patterns
+\`\`\`tsx
+// Button with proper states
+<button className="bg-primary text-primary-foreground px-6 py-3 rounded-sm font-medium
+  hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
+  disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+
+// Input with error state
+<input className="h-10 px-4 border border-input rounded-sm bg-background
+  focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
+  aria-[invalid=true]:border-destructive" />
+\`\`\`
+
+### Anti-Patterns
+- Missing focus states (CRITICAL)
+- No error state styling
+- Inconsistent heights across form elements
+- Using font-bold (use font-medium)`,
+    navigation: `## Navigation Component Implementation
+
+### Key Rules
+- Clear active state indication: bg-primary or border-b-2
+- Keyboard navigation support: arrow keys, Home/End
+- ARIA roles: navigation, menubar, menu, menuitem
+- Consistent icon sizing: h-4 w-4 with text
+
+### Required States
+- Default, Hover, Active, Disabled
+
+### Common Patterns
+\`\`\`tsx
+// Nav item with active state
+<a className="px-4 py-2 text-sm font-medium text-muted-foreground
+  hover:text-foreground hover:bg-muted rounded-sm transition-colors
+  data-[active=true]:text-foreground data-[active=true]:bg-muted">
+
+// Tab with indicator
+<button className="px-4 py-2 text-sm font-medium border-b-2 border-transparent
+  hover:border-muted data-[state=active]:border-primary transition-colors">
+\`\`\`
+
+### Anti-Patterns
+- Missing aria-current for active items
+- No keyboard navigation
+- Inconsistent spacing between items`,
+    feedback: `## Feedback Component Implementation
+
+### Key Rules
+- Use semantic colors: destructive for errors, success for positive
+- Include appropriate icons (checkmark, X, info, warning)
+- Support dismissible variants where appropriate
+- Consider auto-dismiss for toasts
+
+### Common Patterns
+\`\`\`tsx
+// Alert with variants
+<div role="alert" className="p-4 rounded-sm border
+  data-[variant=error]:bg-destructive/10 data-[variant=error]:border-destructive
+  data-[variant=success]:bg-green-500/10 data-[variant=success]:border-green-500">
+
+// Badge
+<span className="px-2 py-0.5 text-xs font-medium rounded-sm
+  bg-primary text-primary-foreground">
+\`\`\`
+
+### Anti-Patterns
+- Missing role="alert" for alerts
+- No icon to reinforce message type
+- Overly large badges`,
+    overlays: `## Overlay Component Implementation
+
+### Key Rules
+- Focus trap within modals
+- Close on Escape key
+- Backdrop click to close (optional)
+- Proper z-index management
+- Animate in/out smoothly
+
+### Common Patterns
+\`\`\`tsx
+// Dialog backdrop
+<div className="fixed inset-0 bg-black/50 z-50" />
+
+// Dialog content
+<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+  bg-background border border-border rounded-sm shadow-lg p-6 z-50
+  animate-in fade-in zoom-in-95">
+\`\`\`
+
+### Anti-Patterns
+- Missing focus trap
+- No Escape key handler
+- Forgetting to portal the overlay`,
+    "data-display": `## Data Display Component Implementation
+
+### Key Rules
+- Handle empty states gracefully
+- Support loading skeletons
+- Consider responsive behavior
+- Maintain data hierarchy through typography
+
+### Common Patterns
+\`\`\`tsx
+// Card
+<div className="bg-card border border-border rounded-sm p-6 shadow-sm">
+
+// Table
+<table className="w-full">
+  <thead className="border-b border-border">
+    <tr>
+      <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
+\`\`\`
+
+### Anti-Patterns
+- No empty state handling
+- Missing loading states
+- Cramped spacing in tables`,
+    layout: `## Layout Component Implementation
+
+### Key Rules
+- Use CSS Grid or Flexbox appropriately
+- Support responsive breakpoints
+- Consider collapsible/expandable states
+- Use semantic HTML (aside, main, nav)
+
+### Common Patterns
+\`\`\`tsx
+// Sidebar layout
+<div className="flex min-h-screen">
+  <aside className="w-64 border-r border-border bg-background">
+  <main className="flex-1 p-6">
+</div>
+
+// Resizable panel
+<div className="flex" style={{ resize: 'horizontal' }}>
+\`\`\`
+
+### Anti-Patterns
+- Fixed widths without responsiveness
+- Missing semantic landmarks
+- No mobile consideration`,
+    utilities: `## Utility Component Implementation
+
+### Key Rules
+- Keep utilities simple and focused
+- Provide sensible defaults
+- Support customization via props/className
+
+### Common Patterns
+\`\`\`tsx
+// Divider
+<hr className="border-t border-border my-6" />
+
+// Spacer
+<div className="h-8" aria-hidden="true" />
+
+// Kbd
+<kbd className="px-2 py-1 text-xs font-mono bg-muted rounded-sm border border-border">
+\`\`\``,
+    general: `## General Component Implementation
+
+### Key Rules
+- Follow brand guidelines for colors and typography
+- Use semantic CSS variables
+- Support light and dark mode
+- Include hover and focus states
+
+### Quick Reference
+- Primary: bg-primary text-primary-foreground
+- Border radius: rounded-sm (2px)
+- Font weights: font-light (300), font-medium (500)
+- Spacing: generous (py-20 for sections)`
+};
 /**
  * Get regex patterns to detect brand colors in code
  */
@@ -824,6 +1644,11 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                             type: "string",
                             description: "What the user wants to design (e.g., 'hero section', 'pricing card', 'navigation bar', 'proposal PDF', 'email template')",
                         },
+                        component_type: {
+                            type: "string",
+                            enum: ["forms", "navigation", "feedback", "overlays", "data-display", "layout", "utilities", "general"],
+                            description: "Type of component for specialized guidance. Auto-detected from description if not specified. 'forms' = buttons/inputs/selects, 'navigation' = tabs/menus/breadcrumbs, 'feedback' = alerts/badges/toasts, 'overlays' = dialogs/modals/popovers, 'data-display' = cards/tables/avatars, 'layout' = sidebar/resizable/grid, 'utilities' = dividers/spacers.",
+                        },
                     },
                     required: ["component_description"],
                 },
@@ -923,6 +1748,111 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
                     required: ["source_format"],
                 },
             },
+            // ============================================
+            // NEW APP DEVELOPMENT TOOLS
+            // ============================================
+            {
+                name: "design_app",
+                description: "USE FOR NEW APP DEVELOPMENT: Returns a complete starter kit for building a new application with Sonance, IPORT, or Blaze branding. Includes: globals.css with brand CSS variables, component library source code filtered by features needed, page layout templates, and step-by-step build instructions. Use when user asks to 'create', 'build', or 'start' a new branded application.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        brand: {
+                            type: "string",
+                            enum: ["sonance", "iport", "blaze"],
+                            description: "Target brand for the app. Defaults to 'sonance'.",
+                        },
+                        app_type: {
+                            type: "string",
+                            enum: ["dashboard", "marketing", "saas", "internal-tool", "general"],
+                            description: "Type of application - affects page layout recommendations. Defaults to 'general'.",
+                        },
+                        features: {
+                            type: "array",
+                            items: {
+                                type: "string",
+                                enum: ["auth", "sidebar", "dark-mode", "tables", "forms", "charts", "navigation", "dashboard"],
+                            },
+                            description: "Features the app will have - returns only relevant components. If omitted, returns core components.",
+                        },
+                        framework: {
+                            type: "string",
+                            enum: ["nextjs", "react"],
+                            description: "Target framework. Defaults to 'nextjs'.",
+                        },
+                    },
+                },
+            },
+            {
+                name: "redesign_app",
+                description: "USE FOR REDESIGNING EXISTING APPS: Analyzes code patterns and returns specific transformation instructions to rebrand an application to Sonance, IPORT, or Blaze. Provide existing code and get: identified brand violations with line numbers, specific fixes with before/after code, step-by-step transformation plan. Use when user asks to 'redesign', 'rebrand', 'restyle', or 'update' an existing application.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        brand: {
+                            type: "string",
+                            enum: ["sonance", "iport", "blaze"],
+                            description: "Target brand for redesign. Defaults to 'sonance'.",
+                        },
+                        existing_code: {
+                            type: "string",
+                            description: "The existing component/page code to analyze. Tool will identify what needs changing.",
+                        },
+                        file_type: {
+                            type: "string",
+                            enum: ["globals.css", "tailwind.config", "component", "page", "layout", "unknown"],
+                            description: "Type of file being analyzed - helps provide targeted fixes.",
+                        },
+                        file_path: {
+                            type: "string",
+                            description: "Optional file path for context (e.g., 'src/components/Button.tsx').",
+                        },
+                    },
+                    required: ["existing_code"],
+                },
+            },
+            {
+                name: "analyze_for_redesign",
+                description: "BATCH CODEBASE ANALYSIS: Accepts multiple file contents and returns a prioritized transformation plan for rebranding. Returns which files need changes, in what order, and what changes each needs. Use when redesigning multiple files or an entire codebase.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        brand: {
+                            type: "string",
+                            enum: ["sonance", "iport", "blaze"],
+                            description: "Target brand for redesign. Defaults to 'sonance'.",
+                        },
+                        files: {
+                            type: "array",
+                            items: {
+                                type: "object",
+                                properties: {
+                                    path: { type: "string", description: "File path" },
+                                    content: { type: "string", description: "File content" },
+                                },
+                                required: ["path", "content"],
+                            },
+                            description: "Array of files to analyze",
+                        },
+                    },
+                    required: ["files"],
+                },
+            },
+            {
+                name: "get_components_by_category",
+                description: "Returns all components in a specific category with their full source code. More efficient than get_full_library when you only need certain types of components. Categories: forms, navigation, feedback, overlays, data-display, layout, utilities.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        category: {
+                            type: "string",
+                            enum: ["forms", "navigation", "feedback", "overlays", "data-display", "layout", "utilities"],
+                            description: "The component category to retrieve",
+                        },
+                    },
+                    required: ["category"],
+                },
+            },
         ],
     };
 });
@@ -1222,6 +2152,11 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             if (!rawArgs.output_type) {
                 defaultsUsed.push(`output type → ${detectedOutputType} (auto-detected)`);
             }
+            // Smart component type detection (only for UI outputs)
+            const detectedComponentType = rawArgs.component_type || (detectedOutputType === "ui" ? detectComponentType(component_description) : "general");
+            if (!rawArgs.component_type && detectedOutputType === "ui") {
+                defaultsUsed.push(`component type → ${detectedComponentType} (auto-detected)`);
+            }
             // Dual-theme mode: For UI outputs without explicit theme, provide BOTH themes by default
             const isDualThemeMode = detectedOutputType === "ui" && !rawArgs.theme;
             const theme = rawArgs.theme || "light";
@@ -1603,7 +2538,8 @@ const example = "Sonance";
 
 **Brand**: ${brand.toUpperCase()}
 **Theme**: Light AND Dark Mode (automatically implemented)
-**Output Type**: ${detectedOutputType.toUpperCase()}
+**Output Type**: ${detectedOutputType.toUpperCase()}${detectedComponentType !== "general" ? `
+**Component Type**: ${detectedComponentType.charAt(0).toUpperCase() + detectedComponentType.slice(1)}` : ""}
 **Logo**: ${logoPreferenceLabel}
 ${defaultsNotice}
 
@@ -1691,6 +2627,15 @@ function Logo() {
 
 ${outputTypeGuidance[detectedOutputType]}
 
+${detectedComponentType !== "general" ? `---
+
+## Component Type: ${detectedComponentType.charAt(0).toUpperCase() + detectedComponentType.slice(1)}
+
+${COMPONENT_TYPE_GUIDANCE[detectedComponentType]}
+
+### Related Components in This Category
+${COMPONENT_CATEGORIES[detectedComponentType]?.slice(0, 8).join(", ") || "See component library"}` : ""}
+
 ## Typography (All Brands)
 - **Font Family**: Montserrat
 - **Headlines**: font-weight 300 (Light) or 500 (Medium)
@@ -1713,13 +2658,23 @@ Now design the **${component_description}** with **BOTH light and dark mode supp
 
 **Brand**: ${brand.toUpperCase()}
 **Theme**: ${theme.charAt(0).toUpperCase() + theme.slice(1)}
-**Output Type**: ${detectedOutputType.toUpperCase()}
+**Output Type**: ${detectedOutputType.toUpperCase()}${detectedComponentType !== "general" && detectedOutputType === "ui" ? `
+**Component Type**: ${detectedComponentType.charAt(0).toUpperCase() + detectedComponentType.slice(1)}` : ""}
 **Logo**: ${logoPreferenceLabel}
 ${defaultsNotice}
 ${singleThemeTokens}
 
 ${outputTypeGuidance[detectedOutputType]}
 
+${detectedComponentType !== "general" && detectedOutputType === "ui" ? `---
+
+## Component Type: ${detectedComponentType.charAt(0).toUpperCase() + detectedComponentType.slice(1)}
+
+${COMPONENT_TYPE_GUIDANCE[detectedComponentType]}
+
+### Related Components in This Category
+${COMPONENT_CATEGORIES[detectedComponentType]?.slice(0, 8).join(", ") || "See component library"}` : ""}
+
 ## Typography (All Brands)
 - **Font Family**: Montserrat
 - **Headlines**: font-weight 300 (Light) or 500 (Medium)
@@ -2039,10 +2994,148 @@ Now design the **${component_description}** following these tokens and principle
                 tierLabel = "Rebuild Required";
                 deliverable = false;
             }
-            // Build gaps list from failed checks
-            const gaps = checkResults
+            // Fix suggestions for common issues by check key
+            const fixSuggestions = {
+                // UI fixes
+                usesSemantic: `**Fix: Use Semantic Colors**
+\`\`\`jsx
+// Instead of: bg-[#343d46] or bg-blue-500
+// Use: bg-primary or bg-background
+<div className="bg-primary text-primary-foreground">
+<div className="bg-background text-foreground">
+\`\`\``,
+                noHardcodedColors: `**Fix: Replace Hardcoded Hex Colors**
+\`\`\`jsx
+// Instead of: className="bg-[#343d46] text-[#ffffff]"
+// Use CSS variables: className="bg-primary text-primary-foreground"
+// Or in CSS: var(--primary), var(--foreground)
+\`\`\``,
+                usesCorrectRadius: `**Fix: Use Sharp Corners**
+\`\`\`jsx
+// Instead of: rounded-lg, rounded-xl, rounded-full
+// Use: rounded-sm (2px) or rounded-none
+<button className="rounded-sm bg-primary px-6 py-3">
+\`\`\``,
+                usesMontserrat: `**Fix: Configure Montserrat Font**
+\`\`\`jsx
+// In globals.css or layout:
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
+
+// In Tailwind config:
+fontFamily: { sans: ['Montserrat', 'sans-serif'] }
+\`\`\``,
+                noFontBold: `**Fix: Use Lighter Font Weights**
+\`\`\`jsx
+// Instead of: font-bold (700)
+// Use: font-light (300), font-normal (400), or font-medium (500)
+<h1 className="font-light text-4xl">Heading</h1>
+<h2 className="font-medium text-2xl">Subheading</h2>
+\`\`\``,
+                hasDarkMode: `**Fix: Add Dark Mode Support**
+\`\`\`jsx
+// Use Tailwind dark: prefix
+<div className="bg-white dark:bg-sonance-charcoal text-gray-900 dark:text-white">
+
+// Or use CSS variables that change with theme
+<div className="bg-background text-foreground">
+\`\`\``,
+                hasGenerousSpacing: `**Fix: Add Generous Spacing**
+\`\`\`jsx
+// For sections: py-20 or py-24 (80-96px)
+<section className="py-20 px-6 lg:py-24 lg:px-8">
+
+// For buttons: px-6 py-3
+<button className="px-6 py-3">
+
+// For cards: p-6 or p-8
+<div className="p-6 lg:p-8">
+\`\`\``,
+                hasHoverStates: `**Fix: Add Hover States**
+\`\`\`jsx
+<button className="bg-primary hover:bg-primary/90 transition-colors">
+<a className="text-primary hover:text-primary/80 hover:underline">
+\`\`\``,
+                hasFocusStates: `**Fix: Add Focus States**
+\`\`\`jsx
+<button className="focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
+<input className="focus-visible:ring-2 focus-visible:ring-primary focus-visible:border-primary">
+\`\`\``,
+                hasAccessibility: `**Fix: Add Accessibility Attributes**
+\`\`\`jsx
+<button aria-label="Close dialog">
+<img alt="Product image description" />
+<nav role="navigation" aria-label="Main menu">
+\`\`\``,
+                hasTransitions: `**Fix: Add Smooth Transitions**
+\`\`\`jsx
+// For color changes
+<button className="transition-colors duration-200">
+
+// For all properties
+<div className="transition-all duration-300 ease-out">
+\`\`\``,
+                // Doc fixes
+                usesPrimaryColor: `**Fix: Use ${evalPalette.name} Primary Color**
+\`\`\`python
+# python-docx
+from docx.shared import RGBColor
+CHARCOAL = RGBColor(0x34, 0x3D, 0x46)
+run.font.color.rgb = CHARCOAL
+
+# ReportLab
+from reportlab.lib.colors import HexColor
+CHARCOAL = HexColor('#343d46')
+\`\`\``,
+                hasFontConfig: `**Fix: Configure Montserrat Font**
+\`\`\`python
+# python-docx
+run.font.name = 'Montserrat'
+# Or fallback
+run.font.name = 'Arial'
+
+# ReportLab
+from reportlab.pdfbase.ttfonts import TTFont
+pdfmetrics.registerFont(TTFont('Montserrat', 'Montserrat-Regular.ttf'))
+\`\`\``,
+                usesProperWeights: `**Fix: Use Correct Font Weights**
+\`\`\`python
+# DON'T use bold=True for headings
+# Instead, use medium weight or increase font size
+
+# python-docx
+run.font.bold = False  # Use font size for hierarchy instead
+heading_run.font.size = Pt(24)  # Large size = visual weight
+\`\`\``,
+                // Marketing fixes
+                usesInlineColors: `**Fix: Use Inline Brand Colors**
+\`\`\`html
+<td style="background-color: #343d46; color: #ffffff;">
+<a style="color: #00A3E1;">
+\`\`\``,
+                hasFallbackFonts: `**Fix: Add Font Fallbacks**
+\`\`\`html
+style="font-family: 'Montserrat', Arial, Helvetica, sans-serif;"
+\`\`\``,
+                usesTableLayout: `**Fix: Use Table-Based Layout**
+\`\`\`html
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
+  <tr>
+    <td align="center" style="padding: 20px;">
+      Content here
+    </td>
+  </tr>
+</table>
+\`\`\``,
+            };
+            // Build gaps list from failed checks with fix suggestions
+            const gapsWithFixes = checkResults
                 .filter(c => !c.passed)
-                .map(c => c.description);
+                .map(c => ({
+                description: c.description,
+                key: c.check,
+                fix: fixSuggestions[c.check] || null
+            }));
+            const gaps = gapsWithFixes.map(g => g.description);
             // Group results by category
             const byCategory = {};
             for (const result of checkResults) {
@@ -2085,7 +3178,8 @@ ${categoryScores.map(c => `| ${c.category} | ${c.earned} | ${c.max} | ${c.checkM
 
 ${gaps.length > 0 ? `## Gaps to Address
 
-${gaps.map((gap, i) => `${i + 1}. ${gap}`).join('\n')}
+${gapsWithFixes.map((gap, i) => `### ${i + 1}. ${gap.description}
+${gap.fix ? `\n${gap.fix}\n` : ""}`).join('\n')}
 
 ---` : "## No major gaps identified — excellent work!"}
 
@@ -2093,7 +3187,9 @@ ${gaps.map((gap, i) => `${i + 1}. ${gap}`).join('\n')}
 
 ${deliverable
                 ? "This output meets Sonance brand standards. Consider polish improvements for Tier 5."
-                : `Iterate on the gaps above to reach Tier 4 (85+). Current gap: ${85 - totalScore} points.`}
+                : `Iterate on the gaps above to reach Tier 4 (85+). Current gap: ${85 - totalScore} points.
+
+> **Tip**: Use \`design_component\` or \`redesign_app\` tools for comprehensive guidance on implementing these fixes.`}
 `;
             return {
                 content: [{ type: "text", text: evalResponse }],
@@ -2943,6 +4039,679 @@ ${rebrandArgs.source_format === "word" ? `
                 content: rebrandContentBlocks,
             };
         }
+        // ============================================
+        // NEW APP DEVELOPMENT TOOLS
+        // ============================================
+        case "design_app": {
+            const designAppArgs = args;
+            const brand = designAppArgs.brand || "sonance";
+            const appType = designAppArgs.app_type || "general";
+            const features = designAppArgs.features || ["forms", "navigation"]; // Core features by default
+            const framework = designAppArgs.framework || "nextjs";
+            const palette = BRAND_PALETTES[brand];
+            // Determine which components to include based on features
+            const neededComponents = new Set();
+            // Always include core components
+            neededComponents.add("button");
+            neededComponents.add("card");
+            for (const feature of features) {
+                const featureComponents = FEATURE_TO_COMPONENTS[feature] || [];
+                for (const comp of featureComponents) {
+                    neededComponents.add(comp);
+                }
+            }
+            // Add app-type specific components
+            if (appType === "dashboard") {
+                ["card", "chart", "table", "badge", "tabs"].forEach(c => neededComponents.add(c));
+            }
+            else if (appType === "marketing") {
+                ["button", "card", "badge", "image"].forEach(c => neededComponents.add(c));
+            }
+            // Read the components
+            const componentsDir = getAssetPath("components");
+            const componentSources = [];
+            for (const compName of neededComponents) {
+                const filePath = path.join(componentsDir, `${compName}.tsx`);
+                if (fs.existsSync(filePath)) {
+                    try {
+                        const source = fs.readFileSync(filePath, "utf-8");
+                        componentSources.push({ name: compName, source });
+                    }
+                    catch {
+                        // Skip if can't read
+                    }
+                }
+            }
+            // Read CSS theme
+            let cssTheme = "";
+            try {
+                cssTheme = fs.readFileSync(getAssetPath("css"), "utf-8");
+            }
+            catch {
+                cssTheme = "/* Could not load CSS theme */";
+            }
+            // Read utils
+            let utils = "";
+            try {
+                utils = fs.readFileSync(getAssetPath("utils"), "utf-8");
+            }
+            catch {
+                utils = "/* Could not load utils */";
+            }
+            // Get page layout template
+            const layout = PAGE_LAYOUTS[appType] || PAGE_LAYOUTS.dashboard;
+            // Build the response
+            const setupInstructions = framework === "nextjs" ? `
+## Setup Instructions (Next.js)
+
+1. Create a new Next.js project:
+\`\`\`bash
+npx create-next-app@latest my-${brand}-app --typescript --tailwind --eslint --app
+cd my-${brand}-app
+\`\`\`
+
+2. Install dependencies:
+\`\`\`bash
+npm install clsx tailwind-merge class-variance-authority lucide-react
+npm install @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-dropdown-menu
+\`\`\`
+
+3. Copy the globals.css content below to \`src/app/globals.css\`
+4. Copy the utils to \`src/lib/utils.ts\`
+5. Create \`src/components/ui/\` and add the component files
+` : `
+## Setup Instructions (React + Vite)
+
+1. Create a new React project:
+\`\`\`bash
+npm create vite@latest my-${brand}-app -- --template react-ts
+cd my-${brand}-app
+npm install
+\`\`\`
+
+2. Install Tailwind CSS:
+\`\`\`bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+\`\`\`
+
+3. Install dependencies:
+\`\`\`bash
+npm install clsx tailwind-merge class-variance-authority lucide-react
+npm install @radix-ui/react-slot @radix-ui/react-dialog
+\`\`\`
+
+4. Copy the CSS and component files as described below
+`;
+            const response = `# ${palette.name} App Starter Kit
+
+**App Type:** ${appType}
+**Framework:** ${framework}
+**Brand:** ${palette.name}
+**Features:** ${features.join(", ")}
+**Components Included:** ${componentSources.length}
+
+---
+
+${setupInstructions}
+
+---
+
+## Global Styles (copy to globals.css)
+
+\`\`\`css
+${cssTheme}
+\`\`\`
+
+---
+
+## Utility Functions (copy to lib/utils.ts)
+
+\`\`\`typescript
+${utils}
+\`\`\`
+
+---
+
+## Required Components (${componentSources.length} total)
+
+${componentSources.map(c => `### ${c.name}.tsx
+
+\`\`\`tsx
+${c.source}
+\`\`\``).join("\n\n")}
+
+---
+
+## Page Template: ${appType}
+
+${layout.description}
+
+${layout.structure}
+
+**Recommended Layout Classes:**
+- Grid: \`${layout.gridLayout}\`
+- Spacing: \`${layout.spacing}\`
+
+\`\`\`tsx
+${layout.template}
+\`\`\`
+
+---
+
+## Quick Reference
+
+### ${palette.name} Brand Colors
+- **Primary:** ${palette.primary} (bg-primary, text-primary)
+- **Secondary:** ${palette.secondary}
+- **Accent:** ${palette.accent}
+- **Preferred Theme:** ${palette.preferredTheme}
+
+### Typography
+- Font: Montserrat
+- Headlines: font-light (300) or font-medium (500)
+- Body: font-normal (400)
+- **Never use font-bold (700) for headlines**
+
+### Spacing
+- Section padding: py-20 or py-24
+- Component gaps: gap-4 to gap-8
+- Card padding: p-6
+
+### Border Radius
+- Use rounded-sm (2px) or rounded-none
+- **Never use rounded-lg or rounded-xl**
+
+---
+
+Now you have everything needed to build a ${palette.name}-branded ${appType} application!
+`;
+            // Embed logos
+            const logoMap = {
+                sonance: {
+                    light: "/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Dark.png",
+                    dark: "/logos/sonance-james-iport/Sonance_James_IPORT_Lockup_Light.png",
+                },
+                iport: {
+                    light: "/logos/iport/IPORT_Sonance_LockUp_2C_Dark_RGB.png",
+                    dark: "/logos/iport/IPORT_Sonance_LockUp_2C_Light_RGB.png",
+                },
+                blaze: {
+                    light: "/logos/blaze/BlazeBySonance_Logo_Lockup_3C_Dark_RGB_05162025.png",
+                    dark: "/logos/blaze/BlazeBySonance_Logo_Lockup_2C_Light_RGB_05162025.png",
+                },
+            };
+            const contentBlocks = [];
+            const lightLogo = await embedLogo(logoMap[brand].light);
+            const darkLogo = await embedLogo(logoMap[brand].dark);
+            if (lightLogo) {
+                contentBlocks.push({ type: "text", text: `## Logo for Light Backgrounds\n**Path:** \`${logoMap[brand].light}\`` });
+                contentBlocks.push(lightLogo);
+            }
+            if (darkLogo) {
+                contentBlocks.push({ type: "text", text: `## Logo for Dark Backgrounds\n**Path:** \`${logoMap[brand].dark}\`` });
+                contentBlocks.push(darkLogo);
+            }
+            contentBlocks.push({ type: "text", text: response });
+            return {
+                content: contentBlocks,
+            };
+        }
+        case "redesign_app": {
+            const redesignArgs = args;
+            if (!redesignArgs.existing_code) {
+                return {
+                    content: [{ type: "text", text: "Error: existing_code is required" }],
+                    isError: true,
+                };
+            }
+            const brand = redesignArgs.brand || "sonance";
+            const code = redesignArgs.existing_code;
+            const fileType = redesignArgs.file_type || "component";
+            const filePath = redesignArgs.file_path || "unknown file";
+            const palette = BRAND_PALETTES[brand];
+            const violations = [];
+            const lines = code.split("\n");
+            // Check for hardcoded colors
+            const hardcodedColorPatterns = [
+                { pattern: /bg-\[#[0-9a-fA-F]{6}\]/g, fix: "bg-primary or bg-secondary" },
+                { pattern: /text-\[#[0-9a-fA-F]{6}\]/g, fix: "text-foreground or text-primary" },
+                { pattern: /border-\[#[0-9a-fA-F]{6}\]/g, fix: "border-border or border-primary" },
+                { pattern: /#[0-9a-fA-F]{6}/g, fix: "Use CSS variable: var(--primary), var(--secondary), etc." },
+            ];
+            // Check for non-brand Tailwind colors
+            const nonBrandColors = [
+                { pattern: /bg-(blue|red|green|yellow|purple|pink|indigo|orange)-\d{2,3}/g, fix: "bg-primary or bg-accent" },
+                { pattern: /text-(blue|red|green|yellow|purple|pink|indigo|orange)-\d{2,3}/g, fix: "text-foreground or text-primary" },
+                { pattern: /border-(blue|red|green|yellow|purple|pink|indigo|orange)-\d{2,3}/g, fix: "border-border" },
+            ];
+            // Check for wrong border radius
+            const radiusPatterns = [
+                { pattern: /rounded-(lg|xl|2xl|3xl|full)/g, fix: "rounded-sm (2px) or rounded-none" },
+            ];
+            // Check for wrong font weights
+            const fontPatterns = [
+                { pattern: /font-bold/g, fix: "font-medium (500) or font-light (300) for headlines" },
+            ];
+            // Check for missing dark mode
+            const hasDarkMode = /dark:|\.dark\s|data-theme/i.test(code);
+            // Check for missing hover states
+            const hasHoverStates = /hover:/i.test(code);
+            const hasFocusStates = /focus:|focus-visible:/i.test(code);
+            // Scan each line
+            lines.forEach((line, index) => {
+                const lineNum = index + 1;
+                for (const { pattern, fix } of hardcodedColorPatterns) {
+                    const matches = line.match(pattern);
+                    if (matches) {
+                        for (const match of matches) {
+                            violations.push({
+                                type: "hardcoded_color",
+                                severity: "critical",
+                                line: lineNum,
+                                match,
+                                fix,
+                            });
+                        }
+                    }
+                }
+                for (const { pattern, fix } of nonBrandColors) {
+                    const matches = line.match(pattern);
+                    if (matches) {
+                        for (const match of matches) {
+                            violations.push({
+                                type: "non_brand_color",
+                                severity: "critical",
+                                line: lineNum,
+                                match,
+                                fix,
+                            });
+                        }
+                    }
+                }
+                for (const { pattern, fix } of radiusPatterns) {
+                    const matches = line.match(pattern);
+                    if (matches) {
+                        for (const match of matches) {
+                            violations.push({
+                                type: "wrong_radius",
+                                severity: "critical",
+                                line: lineNum,
+                                match,
+                                fix,
+                            });
+                        }
+                    }
+                }
+                for (const { pattern, fix } of fontPatterns) {
+                    const matches = line.match(pattern);
+                    if (matches) {
+                        for (const match of matches) {
+                            violations.push({
+                                type: "wrong_font",
+                                severity: "critical",
+                                line: lineNum,
+                                match,
+                                fix,
+                            });
+                        }
+                    }
+                }
+            });
+            // Add warnings
+            if (!hasDarkMode) {
+                violations.push({
+                    type: "missing_dark_mode",
+                    severity: "warning",
+                    match: "No dark mode support",
+                    fix: "Add dark: variants for theme switching",
+                });
+            }
+            if (!hasHoverStates) {
+                violations.push({
+                    type: "missing_hover",
+                    severity: "warning",
+                    match: "No hover states found",
+                    fix: "Add hover: variants to interactive elements",
+                });
+            }
+            if (!hasFocusStates) {
+                violations.push({
+                    type: "missing_focus",
+                    severity: "warning",
+                    match: "No focus states found",
+                    fix: "Add focus-visible:ring-2 focus-visible:ring-primary to interactive elements",
+                });
+            }
+            // Group violations
+            const criticalViolations = violations.filter(v => v.severity === "critical");
+            const warnings = violations.filter(v => v.severity === "warning");
+            // Generate transformation code
+            let transformedCode = code;
+            // Apply fixes
+            transformedCode = transformedCode
+                .replace(/rounded-(lg|xl|2xl|3xl)/g, "rounded-sm")
+                .replace(/rounded-full/g, "rounded-sm")
+                .replace(/font-bold/g, "font-medium")
+                .replace(/bg-blue-\d{2,3}/g, "bg-primary")
+                .replace(/bg-red-\d{2,3}/g, "bg-destructive")
+                .replace(/bg-green-\d{2,3}/g, "bg-primary")
+                .replace(/text-blue-\d{2,3}/g, "text-primary")
+                .replace(/text-gray-900/g, "text-foreground")
+                .replace(/text-gray-500/g, "text-muted-foreground")
+                .replace(/border-gray-\d{2,3}/g, "border-border");
+            const response = `# Redesign Analysis: ${filePath}
+
+**Target Brand:** ${palette.name}
+**File Type:** ${fileType}
+**Issues Found:** ${violations.length} (${criticalViolations.length} critical, ${warnings.length} warnings)
+
+---
+
+## Detected Issues
+
+### Critical (Must Fix)
+
+${criticalViolations.length > 0 ? criticalViolations.map(v => `
+**${v.type.replace(/_/g, " ")}**
+- Line ${v.line}: \`${v.match}\`
+- Fix: ${v.fix}
+`).join("\n") : "No critical issues found."}
+
+### Warnings
+
+${warnings.length > 0 ? warnings.map(v => `
+- **${v.type.replace(/_/g, " ")}**: ${v.match}
+  - Fix: ${v.fix}
+`).join("\n") : "No warnings."}
+
+---
+
+## Transformation Code
+
+### Before
+\`\`\`tsx
+${code.substring(0, 500)}${code.length > 500 ? "\n// ... (truncated)" : ""}
+\`\`\`
+
+### After
+\`\`\`tsx
+${transformedCode.substring(0, 500)}${transformedCode.length > 500 ? "\n// ... (truncated)" : ""}
+\`\`\`
+
+---
+
+## Required CSS Variables
+
+Add these to your globals.css if not present:
+
+\`\`\`css
+:root {
+  --background: #ffffff;
+  --foreground: ${palette.primary};
+  --primary: ${palette.primary};
+  --primary-foreground: #ffffff;
+  --secondary: ${palette.secondary};
+  --secondary-foreground: ${palette.primary};
+  --muted: ${palette.secondary};
+  --muted-foreground: #64748b;
+  --accent: ${palette.accent};
+  --accent-foreground: #ffffff;
+  --destructive: #ef4444;
+  --border: ${palette.secondary};
+  --input: ${palette.secondary};
+  --ring: ${palette.accent};
+  --radius: 0.125rem; /* 2px - sharp corners */
+}
+
+.dark {
+  --background: ${palette.preferredTheme === "dark" ? palette.primary : "#1a1a1a"};
+  --foreground: #ffffff;
+  --primary: ${palette.accent};
+  --primary-foreground: ${palette.primary};
+  --muted: #333333;
+  --border: rgba(255, 255, 255, 0.1);
+}
+\`\`\`
+
+---
+
+## Step-by-Step Transformation Plan
+
+### Step 1: Update globals.css
+Copy the CSS variables above to your globals.css file.
+
+### Step 2: Find and Replace Colors
+Use your editor's find/replace to apply these changes:
+
+| Find | Replace |
+|------|---------|
+| \`bg-blue-*\` | \`bg-primary\` |
+| \`bg-gray-100\` | \`bg-muted\` |
+| \`text-gray-900\` | \`text-foreground\` |
+| \`text-gray-500\` | \`text-muted-foreground\` |
+| \`border-gray-*\` | \`border-border\` |
+
+### Step 3: Fix Border Radius
+| Find | Replace |
+|------|---------|
+| \`rounded-lg\` | \`rounded-sm\` |
+| \`rounded-xl\` | \`rounded-sm\` |
+| \`rounded-2xl\` | \`rounded-sm\` |
+
+### Step 4: Fix Font Weights
+| Find | Replace |
+|------|---------|
+| \`font-bold\` (in headlines) | \`font-medium\` or \`font-light\` |
+
+### Step 5: Add Dark Mode
+Add \`dark:\` variants to your classes:
+\`\`\`tsx
+className="bg-white dark:bg-background text-foreground dark:text-white"
+\`\`\`
+
+### Step 6: Add Hover/Focus States
+\`\`\`tsx
+className="hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary"
+\`\`\`
+
+---
+
+## Verification Checklist
+
+- [ ] All hardcoded colors replaced with semantic variables
+- [ ] Border radius is rounded-sm or rounded-none
+- [ ] Font weights are 300, 400, or 500 (no 700/bold for headlines)
+- [ ] Dark mode support added
+- [ ] Hover states on interactive elements
+- [ ] Focus states for accessibility
+`;
+            return {
+                content: [{ type: "text", text: response }],
+            };
+        }
+        case "analyze_for_redesign": {
+            const analyzeArgs = args;
+            if (!analyzeArgs.files || analyzeArgs.files.length === 0) {
+                return {
+                    content: [{ type: "text", text: "Error: files array is required with at least one file" }],
+                    isError: true,
+                };
+            }
+            const brand = analyzeArgs.brand || "sonance";
+            const palette = BRAND_PALETTES[brand];
+            const files = analyzeArgs.files;
+            const analyses = [];
+            for (const file of files) {
+                const issues = [];
+                const content = file.content;
+                // Check for various issues
+                if (/#[0-9a-fA-F]{6}/.test(content)) {
+                    issues.push("hardcoded colors");
+                }
+                if (/bg-(blue|red|green|yellow|purple|pink|indigo|orange)-\d{2,3}/.test(content)) {
+                    issues.push("non-brand Tailwind colors");
+                }
+                if (/rounded-(lg|xl|2xl|3xl|full)/.test(content)) {
+                    issues.push("wrong border radius");
+                }
+                if (/font-bold/.test(content)) {
+                    issues.push("wrong font weight");
+                }
+                if (!/dark:/.test(content) && /className/.test(content)) {
+                    issues.push("missing dark mode");
+                }
+                // Determine priority based on file path and issues
+                let priority = "low";
+                if (file.path.includes("globals.css") || file.path.includes("tailwind.config")) {
+                    priority = "critical";
+                }
+                else if (issues.length >= 3) {
+                    priority = "high";
+                }
+                else if (issues.length >= 1) {
+                    priority = "medium";
+                }
+                analyses.push({
+                    path: file.path,
+                    priority,
+                    issues: issues.length,
+                    issueTypes: issues,
+                });
+            }
+            // Sort by priority
+            const priorityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
+            analyses.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
+            const totalIssues = analyses.reduce((sum, a) => sum + a.issues, 0);
+            const filesNeedingChanges = analyses.filter(a => a.issues > 0).length;
+            const response = `# Codebase Redesign Plan: ${palette.name}
+
+## Summary
+
+- **Files Analyzed:** ${files.length}
+- **Files Needing Changes:** ${filesNeedingChanges}
+- **Total Issues:** ${totalIssues}
+- **Target Brand:** ${palette.name}
+
+---
+
+## Priority Order
+
+${analyses.filter(a => a.issues > 0).map((a, i) => `
+### ${i + 1}. ${a.path} (${a.priority.toUpperCase()})
+
+**Issues Found:** ${a.issues}
+${a.issueTypes.map(t => `- ${t}`).join("\n")}
+**Action:** ${a.priority === "critical" ? "Update first - affects entire app" : a.priority === "high" ? "Update after critical files" : "Update when convenient"}
+`).join("\n")}
+
+---
+
+## Recommended Workflow
+
+### Phase 1: Foundation (Critical)
+${analyses.filter(a => a.priority === "critical").map(a => `1. Update \`${a.path}\``).join("\n") || "No critical files identified."}
+
+### Phase 2: Components (High Priority)
+${analyses.filter(a => a.priority === "high").map(a => `- Update \`${a.path}\` (${a.issues} issues)`).join("\n") || "No high priority files."}
+
+### Phase 3: Polish (Medium/Low)
+${analyses.filter(a => a.priority === "medium" || a.priority === "low").map(a => `- Update \`${a.path}\``).join("\n") || "No remaining files."}
+
+---
+
+## Global Search/Replace Commands
+
+Run these across your codebase:
+
+\`\`\`bash
+# Fix border radius
+find . -name "*.tsx" -exec sed -i 's/rounded-lg/rounded-sm/g' {} \\;
+find . -name "*.tsx" -exec sed -i 's/rounded-xl/rounded-sm/g' {} \\;
+
+# Fix font weights
+find . -name "*.tsx" -exec sed -i 's/font-bold/font-medium/g' {} \\;
+
+# Fix common color patterns
+find . -name "*.tsx" -exec sed -i 's/bg-blue-500/bg-primary/g' {} \\;
+find . -name "*.tsx" -exec sed -i 's/text-gray-900/text-foreground/g' {} \\;
+\`\`\`
+
+---
+
+## CSS Variables Needed
+
+Ensure your globals.css includes:
+
+\`\`\`css
+:root {
+  --primary: ${palette.primary};
+  --secondary: ${palette.secondary};
+  --accent: ${palette.accent};
+  --background: #ffffff;
+  --foreground: ${palette.primary};
+  --border: ${palette.secondary};
+  --radius: 0.125rem;
+}
+\`\`\`
+
+---
+
+## Next Steps
+
+1. Start with \`globals.css\` or \`tailwind.config\` to set up brand colors
+2. Work through high-priority component files
+3. Test each component after updating
+4. Verify dark mode works correctly
+5. Run \`evaluate_design\` on key components to verify brand compliance
+
+Use \`redesign_app\` tool on individual files for detailed transformation instructions.
+`;
+            return {
+                content: [{ type: "text", text: response }],
+            };
+        }
+        case "get_components_by_category": {
+            const categoryArgs = args;
+            const category = categoryArgs.category;
+            if (!category || !COMPONENT_CATEGORIES[category]) {
+                return {
+                    content: [{
+                            type: "text",
+                            text: `Error: Invalid category '${category}'. Available categories: ${Object.keys(COMPONENT_CATEGORIES).join(", ")}`,
+                        }],
+                    isError: true,
+                };
+            }
+            const components = COMPONENT_CATEGORIES[category];
+            const componentsDir = getAssetPath("components");
+            let response = `# ${category.charAt(0).toUpperCase() + category.slice(1)} Components (${components.length} components)\n\n`;
+            response += `Use these components for ${category === "forms" ? "building forms and capturing user input" :
+                category === "navigation" ? "navigation and menus" :
+                    category === "feedback" ? "user feedback and notifications" :
+                        category === "overlays" ? "modals, dialogs, and overlays" :
+                            category === "data-display" ? "displaying data and content" :
+                                category === "layout" ? "page structure and layouts" :
+                                    "utility purposes"}.\n\n---\n\n`;
+            for (const compName of components) {
+                const filePath = path.join(componentsDir, `${compName}.tsx`);
+                if (fs.existsSync(filePath)) {
+                    try {
+                        const content = fs.readFileSync(filePath, "utf-8");
+                        response += `## ${compName}\n\nFile: \`components/ui/${compName}.tsx\`\n\n\`\`\`tsx\n${content}\n\`\`\`\n\n---\n\n`;
+                    }
+                    catch {
+                        response += `## ${compName}\n\n*Could not read component file*\n\n---\n\n`;
+                    }
+                }
+                else {
+                    response += `## ${compName}\n\n*Component file not found*\n\n---\n\n`;
+                }
+            }
+            return {
+                content: [{ type: "text", text: response }],
+            };
+        }
         default:
             return {
                 content: [{ type: "text", text: `Unknown tool: ${name}` }],