@mayson-org/inject-script 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,6 @@
-# @mayson/inject-script
+# @mayson-org/inject-script
 
-A lightweight CLI tool and Node.js package designed for **Next.js App Router** applications. It dynamically locates the project's root layout file (regardless of whether it's stored in `app/layout.tsx`, `src/app/layout.tsx`, or inside route groups like `app/(main)/layout.js`) and injects a floating `<iframe>` pointing to `https://mayson.dev/`.
+A lightweight CLI tool and Node.js package designed for **Next.js App Router** applications. It dynamically locates the project's root layout file (e.g. `app/layout.tsx`, `src/app/layout.tsx`, or inside route groups like `app/(main)/layout.js`), generates standalone component files (`MaysonBadge.tsx`, `MaysonWatermark.tsx`, `MaysonAscii.tsx`, `MaysonMetadata.tsx`), and injects their imports and JSX tags into the layout tree.
 
 ---
 
@@ -9,63 +9,33 @@ A lightweight CLI tool and Node.js package designed for **Next.js App Router** a
 Run directly in any Next.js project root:
 
 ```bash
-npx @mayson/inject-script
+npx @mayson-org/inject-script
 ```
 
 Or pass optional flags:
 
 ```bash
-# Specify custom iframe URL
-npx @mayson/inject-script --url=https://mayson.dev/my-app
+# Specify component type (badge | watermark | ascii | metadata | all)
+npx @mayson-org/inject-script --type=badge
 
 # Dry-run mode (preview changes without modifying files)
-npx @mayson/inject-script --dry-run
+npx @mayson-org/inject-script --dry-run
 
 # Specify target project directory
-npx @mayson/inject-script --dir=./my-nextjs-app
-```
-
----
-
-## Adding to Next.js `package.json` Build Scripts
-
-You can automate this script during deployment builds (e.g. on Vercel, Netlify, Docker, or GitHub Actions) by adding it to `package.json`:
-
-```json
-{
-  "scripts": {
-    "dev": "next dev",
-    "prebuild": "npx @mayson/inject-script",
-    "build": "next build"
-  }
-}
+npx @mayson-org/inject-script --dir=./my-nextjs-app
 ```
 
 ---
 
 ## Programmatic API Usage
 
-You can also import and use `inject-script` in custom build scripts:
-
 ```javascript
-import { runAutoInject, findRootLayout, injectMaysonIframe } from 'inject-script';
+import { runAutoInject, findRootLayout, generateComponents, injectComponentsIntoLayout } from '@mayson-org/inject-script';
 
-// 1. Auto-detect and inject in one call
-const result = runAutoInject(process.cwd(), 'https://mayson.dev/');
+// Auto-detect layout, generate 'badge' component file, and inject into layout
+const result = runAutoInject(process.cwd(), ['badge', 'watermark']);
 
 if (result.success) {
-  console.log(`Injected to: ${result.filePath}`);
+  console.log('Injected components:', result.injectedComponents);
 }
-
-// 2. Or manually find layout and inspect
-const rootLayoutPath = findRootLayout('./my-project');
-console.log('Root Layout found at:', rootLayoutPath);
 ```
-
----
-
-## Features
-
-- 🔍 **Dynamic Root Layout Resolution**: Scans `app/`, `src/app/`, and nested route groups for layout files and scores candidates based on HTML/Body root tags.
-- ⚡ **Idempotent**: Safe to run multiple times without creating duplicate iframe injections.
-- 🛡️ **Zero Runtime Overhead**: Inserts a self-contained React `<iframe />` directly into the JSX tree.

package/bin/cli.mjs

@@ -50,11 +50,115 @@ function findRootLayout(projectRoot) {
   return candidates[0];
 }
 
+const TEMPLATES = {
+  badge: {
+    name: 'MaysonBadge',
+    code: `'use client';
+import React from 'react';
+
+export function MaysonBadge() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 99999,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '6px 12px',
+        backgroundColor: 'rgba(18, 18, 20, 0.9)',
+        color: '#ffffff',
+        borderRadius: '9999px',
+        fontSize: '12px',
+        fontWeight: 500,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        border: '1px solid rgba(255, 255, 255, 0.15)',
+        boxShadow: '0 4px 14px rgba(0, 0, 0, 0.25)',
+        backdropFilter: 'blur(8px)',
+        cursor: 'pointer',
+        userSelect: 'none',
+      }}
+    >
+      <span style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#6366f1' }} />
+      <span>Built with <strong>Mayson</strong></span>
+    </div>
+  );
+}
+`,
+  },
+  watermark: {
+    name: 'MaysonWatermark',
+    code: `'use client';
+import React from 'react';
+
+export function MaysonWatermark() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '12px',
+        left: '12px',
+        zIndex: 99999,
+        opacity: 0.4,
+        fontSize: '11px',
+        fontFamily: 'monospace',
+        color: '#888888',
+        pointerEvents: 'none',
+      }}
+    >
+      ⚡ Mayson Watermark
+    </div>
+  );
+}
+`,
+  },
+  ascii: {
+    name: 'MaysonAscii',
+    code: `'use client';
+import React from 'react';
+
+export function MaysonAscii() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: '8px',
+        right: '12px',
+        zIndex: 99999,
+        fontSize: '10px',
+        fontFamily: 'monospace',
+        color: 'rgba(255, 255, 255, 0.6)',
+        backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        pointerEvents: 'none',
+      }}
+    >
+      MAYSON :: RUNTIME ACTIVE
+    </div>
+  );
+}
+`,
+  },
+  metadata: {
+    name: 'MaysonMetadata',
+    code: `'use client';
+import React from 'react';
+
+export function MaysonMetadata() {
+  return <meta name="mayson-generator" content="Mayson App Platform" />;
+}
+`,
+  },
+};
+
 function parseArgs() {
   const args = process.argv.slice(2);
   const options = {
     projectRoot: process.cwd(),
-    url: 'https://mayson.dev/',
+    type: 'badge',
     dryRun: false,
     help: false,
   };
@@ -65,10 +169,10 @@ function parseArgs() {
       options.help = true;
     } else if (arg === '--dry-run') {
       options.dryRun = true;
-    } else if (arg.startsWith('--url=')) {
-      options.url = arg.split('=')[1];
-    } else if (arg === '--url' && args[i + 1]) {
-      options.url = args[++i];
+    } else if (arg.startsWith('--type=')) {
+      options.type = arg.split('=')[1];
+    } else if (arg === '--type' && args[i + 1]) {
+      options.type = args[++i];
     } else if (arg.startsWith('--dir=')) {
       options.projectRoot = path.resolve(arg.split('=')[1]);
     } else if (arg === '--dir' && args[i + 1]) {
@@ -82,15 +186,15 @@ const options = parseArgs();
 
 if (options.help) {
   console.log(`
-Inject Script CLI - Next.js App Router Root Layout Iframe Injector
+@mayson-org/inject-script CLI - Generate & Inject Mayson Components into Next.js App Router
 
 Usage:
-  npx inject-script [options]
+  npx @mayson-org/inject-script [options]
 
 Options:
   --dir <path>       Target project root directory (default: current working directory)
-  --url <url>        Iframe URL to inject (default: https://mayson.dev/)
-  --dry-run          Simulate layout detection and code injection without modifying files
+  --type <type>      Component type to inject: badge | watermark | ascii | metadata | all (default: badge)
+  --dry-run          Simulate component generation and layout injection without modifying files
   --help, -h         Show this help message
 `);
   process.exit(0);
@@ -107,53 +211,74 @@ if (!layoutFile) {
 
 console.log(`📍 Found Root Layout: ${path.relative(options.projectRoot, layoutFile)}`);
 
-const content = fs.readFileSync(layoutFile, 'utf-8');
-const INJECTION_MARKER = '/* @mayson-iframe-injected */';
+const layoutDir = path.dirname(layoutFile);
+const isTypeScript = layoutFile.endsWith('.tsx') || layoutFile.endsWith('.ts');
+const ext = isTypeScript ? '.tsx' : '.jsx';
 
-if (content.includes(INJECTION_MARKER) || content.includes(options.url)) {
-  console.log(`✅ Mayson iframe is already injected in ${path.basename(layoutFile)}.`);
-  process.exit(0);
-}
+const selectedTypes = options.type === 'all' ? ['badge', 'watermark', 'ascii', 'metadata'] : [options.type];
 
-const snippet = `
-      {${INJECTION_MARKER}}
-      <iframe
-        src="${options.url}"
-        style={{
-          position: 'fixed',
-          bottom: '20px',
-          right: '20px',
-          width: '400px',
-          height: '600px',
-          border: 'none',
-          borderRadius: '12px',
-          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)',
-          zIndex: 999999,
-        }}
-        title="Mayson Dev Overlay"
-      />`;
-
-let updatedContent = null;
-
-if (/<\/body>/i.test(content)) {
-  updatedContent = content.replace(/<\/body>/i, `${snippet}\n      </body>`);
-} else if (/<\/html>/i.test(content)) {
-  updatedContent = content.replace(/<\/html>/i, `${snippet}\n      </html>`);
-} else {
-  const lastIndex = content.lastIndexOf('</');
-  if (lastIndex !== -1) {
-    updatedContent = content.slice(0, lastIndex) + snippet + '\n      ' + content.slice(lastIndex);
+let content = fs.readFileSync(layoutFile, 'utf-8');
+const injectedNames = [];
+
+for (const t of selectedTypes) {
+  const template = TEMPLATES[t];
+  if (!template) {
+    console.warn(`⚠️ Unknown component type '${t}'. Skipping.`);
+    continue;
   }
-}
 
-if (!updatedContent) {
-  console.error(`❌ Error: Could not find suitable insertion point in ${layoutFile}`);
-  process.exit(1);
+  const { name, code } = template;
+  const compPath = path.join(layoutDir, `${name}${ext}`);
+
+  // Create Component File
+  if (options.dryRun) {
+    console.log(`🧪 [Dry Run] Would create component file: ${path.relative(options.projectRoot, compPath)}`);
+  } else {
+    fs.writeFileSync(compPath, code, 'utf-8');
+    console.log(`✨ Created Component File: ${path.relative(options.projectRoot, compPath)}`);
+  }
+
+  // Check if component already present in layout
+  if (content.includes(name)) {
+    console.log(`ℹ️ Component ${name} is already present in ${path.basename(layoutFile)}.`);
+    continue;
+  }
+
+  // Insert import statement
+  const importLine = `import { ${name} } from './${name}';\n`;
+  if (/import\s+.*?from\s+['"].*?['"];?/g.test(content)) {
+    const matches = Array.from(content.matchAll(/import\s+.*?from\s+['"].*?['"];?/g));
+    const last = matches[matches.length - 1];
+    const idx = last.index + last[0].length;
+    content = content.slice(0, idx) + '\n' + importLine + content.slice(idx);
+  } else {
+    content = importLine + content;
+  }
+
+  // Insert JSX snippet
+  const snippet = `\n      {/* @mayson-component-injected: ${name} */}\n      <${name} />`;
+
+  if (/<\/body>/i.test(content)) {
+    content = content.replace(/<\/body>/i, `${snippet}\n      </body>`);
+  } else if (/<\/html>/i.test(content)) {
+    content = content.replace(/<\/html>/i, `${snippet}\n      </html>`);
+  } else {
+    const lastIdx = content.lastIndexOf('</');
+    if (lastIdx !== -1) {
+      content = content.slice(0, lastIdx) + snippet + '\n      ' + content.slice(lastIdx);
+    }
+  }
+
+  injectedNames.push(name);
 }
 
-if (options.dryRun) {
-  console.log(`🧪 [Dry Run] Would inject iframe to ${layoutFile}`);
+if (injectedNames.length > 0) {
+  if (options.dryRun) {
+    console.log(`🧪 [Dry Run] Would inject components into ${path.relative(options.projectRoot, layoutFile)}: ${injectedNames.join(', ')}`);
+  } else {
+    fs.writeFileSync(layoutFile, content, 'utf-8');
+    console.log(`🎉 Injected components into ${path.relative(options.projectRoot, layoutFile)}: ${injectedNames.join(', ')}`);
+  }
 } else {
-  fs.writeFileSync(layoutFile, updatedContent, 'utf-8');
-  console.log(`🎉 Successfully injected Mayson iframe (${options.url}) into ${path.relative(options.projectRoot, layoutFile)}!`);
+  console.log(`✅ Root layout is up to date.`);
 }

package/dist/find-root-layout.d.ts

@@ -1,5 +1,2 @@
-/**
- * Finds the most likely Next.js App Router root layout file in a project.
- */
 export declare function findRootLayout(projectRoot?: string): string | null;
 //# sourceMappingURL=find-root-layout.d.ts.map

package/dist/find-root-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"find-root-layout.d.ts","sourceRoot":"","sources":["../src/find-root-layout.ts"],"names":[],"mappings":"AAyDA;;GAEG;AACH,wBAAgB,cAAc,CAAC,WAAW,GAAE,MAAsB,GAAG,MAAM,GAAG,IAAI,CA2BjF"}
+{"version":3,"file":"find-root-layout.d.ts","sourceRoot":"","sources":["../src/find-root-layout.ts"],"names":[],"mappings":"AAgDA,wBAAgB,cAAc,CAAC,WAAW,GAAE,MAAsB,GAAG,MAAM,GAAG,IAAI,CA0BjF"}

package/dist/find-root-layout.js

@@ -1,9 +1,6 @@
 import fs from 'fs';
 import path from 'path';
 const LAYOUT_EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js'];
-/**
- * Recursively search a directory for layout files.
- */
 function findLayoutFiles(dir, fileList = []) {
     if (!fs.existsSync(dir))
         return fileList;
@@ -11,7 +8,6 @@ function findLayoutFiles(dir, fileList = []) {
     for (const entry of entries) {
         const fullPath = path.join(dir, entry.name);
         if (entry.isDirectory()) {
-            // Don't traverse node_modules or hidden folders (.next, .git)
             if (entry.name === 'node_modules' || entry.name.startsWith('.')) {
                 continue;
             }
@@ -27,30 +23,21 @@ function findLayoutFiles(dir, fileList = []) {
     }
     return fileList;
 }
-/**
- * Scores a layout file candidate to determine if it is the root layout.
- * Higher score = higher likelihood of being the root layout.
- */
 function scoreLayoutCandidate(filePath, projectRoot) {
     const content = fs.readFileSync(filePath, 'utf-8');
     const relativePath = path.relative(projectRoot, filePath);
     const depth = relativePath.split(path.sep).length;
-    let score = 100 - depth; // Shorter path depth is preferred
-    // Check for HTML/Body root tags
+    let score = 100 - depth;
     if (/<html/i.test(content))
         score += 50;
     if (/<body/i.test(content))
         score += 50;
-    // Check if located directly under app/ or src/app/
     const isDirectAppChild = /^src[/\\]app[/\\]layout\.[jt]sx?$/.test(relativePath) ||
         /^app[/\\]layout\.[jt]sx?$/.test(relativePath);
     if (isDirectAppChild)
         score += 40;
     return score;
 }
-/**
- * Finds the most likely Next.js App Router root layout file in a project.
- */
 export function findRootLayout(projectRoot = process.cwd()) {
     const possibleAppDirs = [
         path.join(projectRoot, 'src', 'app'),
@@ -65,7 +52,6 @@ export function findRootLayout(projectRoot = process.cwd()) {
     if (candidateFiles.length === 0) {
         return null;
     }
-    // Score each candidate to pick the true root layout
     const scored = candidateFiles.map((filePath) => ({
         filePath,
         score: scoreLayoutCandidate(filePath, projectRoot),

package/dist/generators.d.ts

@@ -0,0 +1,13 @@
+export type ComponentType = 'badge' | 'watermark' | 'ascii' | 'metadata' | 'all';
+export interface ComponentGeneratorOptions {
+    outputDir: string;
+    isTypeScript?: boolean;
+}
+export interface GeneratedComponentInfo {
+    name: string;
+    filePath: string;
+    importStatement: string;
+    jsxTag: string;
+}
+export declare function generateComponents(types: ComponentType[] | undefined, options: ComponentGeneratorOptions): GeneratedComponentInfo[];
+//# sourceMappingURL=generators.d.ts.map

package/dist/generators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generators.d.ts","sourceRoot":"","sources":["../src/generators.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;AAEjF,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;CAChB;AA2GD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,aAAa,EAAE,YAAY,EAClC,OAAO,EAAE,yBAAyB,GACjC,sBAAsB,EAAE,CAkD1B"}

package/dist/generators.js

@@ -0,0 +1,147 @@
+import fs from 'fs';
+import path from 'path';
+const BADGE_TEMPLATE = `'use client';
+import React from 'react';
+
+export function MaysonBadge() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 99999,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '6px 12px',
+        backgroundColor: 'rgba(18, 18, 20, 0.9)',
+        color: '#ffffff',
+        borderRadius: '9999px',
+        fontSize: '12px',
+        fontWeight: 500,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        border: '1px solid rgba(255, 255, 255, 0.15)',
+        boxShadow: '0 4px 14px rgba(0, 0, 0, 0.25)',
+        backdropFilter: 'blur(8px)',
+        cursor: 'pointer',
+        userSelect: 'none',
+        transition: 'transform 0.2s ease',
+      }}
+    >
+      <span style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#6366f1' }} />
+      <span>Built with <strong>Mayson</strong></span>
+    </div>
+  );
+}
+`;
+const WATERMARK_TEMPLATE = `'use client';
+import React from 'react';
+
+export function MaysonWatermark() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '12px',
+        left: '12px',
+        zIndex: 99999,
+        opacity: 0.4,
+        fontSize: '11px',
+        fontFamily: 'monospace',
+        color: '#888888',
+        pointerEvents: 'none',
+        userSelect: 'none',
+      }}
+    >
+      ⚡ Mayson Watermark
+    </div>
+  );
+}
+`;
+const ASCII_TEMPLATE = `'use client';
+import React from 'react';
+
+/*
+  ███╗   ███╗██xA1██╗   ██╗███████╗██████╗ ██████╗ 
+  ████╗ ████║██║██║   ██║██╔════╝██╔═══██╗██╔══██╗
+  ██╔████╔██║██║██║   ██║███████╗██║   ██║██║  ██║
+  ██║╚██╔╝██║██║██║   ██║╚════██║██║   ██║██║  ██║
+  ██║ ╚═╝ ██║██║╚██████╔╝███████║╚██████╔╝██████╔╝
+*/
+
+export function MaysonAscii() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: '8px',
+        right: '12px',
+        zIndex: 99999,
+        fontSize: '10px',
+        fontFamily: 'monospace',
+        color: 'rgba(255, 255, 255, 0.6)',
+        backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        pointerEvents: 'none',
+      }}
+    >
+      MAYSON :: RUNTIME ACTIVE
+    </div>
+  );
+}
+`;
+const METADATA_TEMPLATE = `'use client';
+import React from 'react';
+
+export function MaysonMetadata() {
+  return (
+    <meta name="mayson-generator" content="Mayson App Platform" />
+  );
+}
+`;
+export function generateComponents(types = ['badge'], options) {
+    const { outputDir, isTypeScript = true } = options;
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    const results = [];
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    const selectedTypes = types.includes('all')
+        ? ['badge', 'watermark', 'ascii', 'metadata']
+        : types;
+    for (const type of selectedTypes) {
+        let name = '';
+        let code = '';
+        switch (type) {
+            case 'badge':
+                name = 'MaysonBadge';
+                code = BADGE_TEMPLATE;
+                break;
+            case 'watermark':
+                name = 'MaysonWatermark';
+                code = WATERMARK_TEMPLATE;
+                break;
+            case 'ascii':
+                name = 'MaysonAscii';
+                code = ASCII_TEMPLATE;
+                break;
+            case 'metadata':
+                name = 'MaysonMetadata';
+                code = METADATA_TEMPLATE;
+                break;
+        }
+        if (name && code) {
+            const filePath = path.join(outputDir, `${name}${ext}`);
+            fs.writeFileSync(filePath, code, 'utf-8');
+            results.push({
+                name,
+                filePath,
+                importStatement: `import { ${name} } from './${name}';`,
+                jsxTag: `<${name} />`,
+            });
+        }
+    }
+    return results;
+}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { findRootLayout } from './find-root-layout.js';
-import { injectMaysonIframe, InjectorOptions, InjectorResult } from './injector.js';
-export { findRootLayout, injectMaysonIframe };
-export type { InjectorOptions, InjectorResult };
+import { generateComponents, ComponentType, GeneratedComponentInfo } from './generators.js';
+import { injectComponentsIntoLayout, InjectorOptions, InjectorResult } from './injector.js';
+export { findRootLayout, generateComponents, injectComponentsIntoLayout };
+export type { ComponentType, GeneratedComponentInfo, InjectorOptions, InjectorResult };
 /**
- * Convenience function to automatically locate and inject the Mayson iframe into a Next.js project.
+ * Convenience function to auto-detect Next.js App Router root layout, generate component files, and inject them.
  */
-export declare function runAutoInject(projectRoot?: string, iframeUrl?: string, dryRun?: boolean): InjectorResult;
+export declare function runAutoInject(projectRoot?: string, types?: ComponentType[], dryRun?: boolean): InjectorResult;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAEhD;;GAEG;AACH,wBAAgB,aAAa,CAAC,WAAW,GAAE,MAAsB,EAAE,SAAS,GAAE,MAA8B,EAAE,MAAM,GAAE,OAAe,GAAG,cAAc,CAiBrJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC5F,OAAO,EAAE,0BAA0B,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE5F,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,CAAC;AAC1E,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAEvF;;GAEG;AACH,wBAAgB,aAAa,CAC3B,WAAW,GAAE,MAAsB,EACnC,KAAK,GAAE,aAAa,EAAc,EAClC,MAAM,GAAE,OAAe,GACtB,cAAc,CA0BhB"}

package/dist/index.js

@@ -1,22 +1,31 @@
+import path from 'path';
 import { findRootLayout } from './find-root-layout.js';
-import { injectMaysonIframe } from './injector.js';
-export { findRootLayout, injectMaysonIframe };
+import { generateComponents } from './generators.js';
+import { injectComponentsIntoLayout } from './injector.js';
+export { findRootLayout, generateComponents, injectComponentsIntoLayout };
 /**
- * Convenience function to automatically locate and inject the Mayson iframe into a Next.js project.
+ * Convenience function to auto-detect Next.js App Router root layout, generate component files, and inject them.
  */
-export function runAutoInject(projectRoot = process.cwd(), iframeUrl = 'https://mayson.dev/', dryRun = false) {
+export function runAutoInject(projectRoot = process.cwd(), types = ['badge'], dryRun = false) {
     const layoutPath = findRootLayout(projectRoot);
     if (!layoutPath) {
         return {
             success: false,
             filePath: '',
-            alreadyInjected: false,
-            error: `Could not locate Next.js App Router root layout file in ${projectRoot}`,
+            injectedComponents: [],
+            skippedComponents: [],
+            error: `Could not locate Next.js App Router root layout in ${projectRoot}`,
         };
     }
-    return injectMaysonIframe({
+    const isTypeScript = layoutPath.endsWith('.tsx') || layoutPath.endsWith('.ts');
+    const targetDir = path.dirname(layoutPath);
+    const generatedComponents = generateComponents(types, {
+        outputDir: targetDir,
+        isTypeScript,
+    });
+    return injectComponentsIntoLayout({
         filePath: layoutPath,
-        iframeUrl,
+        components: generatedComponents,
         dryRun,
     });
 }

package/dist/injector.d.ts

@@ -1,14 +1,16 @@
+import { GeneratedComponentInfo } from './generators.js';
 export interface InjectorOptions {
     filePath: string;
-    iframeUrl?: string;
+    components: GeneratedComponentInfo[];
     dryRun?: boolean;
 }
 export interface InjectorResult {
     success: boolean;
     filePath: string;
-    alreadyInjected: boolean;
+    injectedComponents: string[];
+    skippedComponents: string[];
     modifiedContent?: string;
     error?: string;
 }
-export declare function injectMaysonIframe(options: InjectorOptions): InjectorResult;
+export declare function injectComponentsIntoLayout(options: InjectorOptions): InjectorResult;
 //# sourceMappingURL=injector.d.ts.map

package/dist/injector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"injector.d.ts","sourceRoot":"","sources":["../src/injector.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,GAAG,cAAc,CAkF3E"}
+{"version":3,"file":"injector.d.ts","sourceRoot":"","sources":["../src/injector.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,sBAAsB,EAAE,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,eAAe,GAAG,cAAc,CAwFnF"}

package/dist/injector.js

@@ -1,76 +1,82 @@
 import fs from 'fs';
-const INJECTION_MARKER = '/* @mayson-iframe-injected */';
-export function injectMaysonIframe(options) {
-    const { filePath, iframeUrl = 'https://mayson.dev/', dryRun = false } = options;
+import path from 'path';
+export function injectComponentsIntoLayout(options) {
+    const { filePath, components, dryRun = false } = options;
     if (!fs.existsSync(filePath)) {
         return {
             success: false,
             filePath,
-            alreadyInjected: false,
-            error: `File not found: ${filePath}`,
+            injectedComponents: [],
+            skippedComponents: [],
+            error: `Layout file not found: ${filePath}`,
         };
     }
-    const content = fs.readFileSync(filePath, 'utf-8');
-    // Idempotency check: Don't inject twice
-    if (content.includes(INJECTION_MARKER) || content.includes(iframeUrl)) {
-        return {
-            success: true,
-            filePath,
-            alreadyInjected: true,
-        };
-    }
-    const snippet = `
-      {${INJECTION_MARKER}}
-      <iframe
-        src="${iframeUrl}"
-        style={{
-          position: 'fixed',
-          bottom: '20px',
-          right: '20px',
-          width: '400px',
-          height: '600px',
-          border: 'none',
-          borderRadius: '12px',
-          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)',
-          zIndex: 999999,
-        }}
-        title="Mayson Dev Overlay"
-      />`;
-    let updatedContent = null;
-    // Option 1: Inject before </body>
-    if (/<\/body>/i.test(content)) {
-        updatedContent = content.replace(/<\/body>/i, `${snippet}\n      </body>`);
-    }
-    // Option 2: Inject before </html>
-    else if (/<\/html>/i.test(content)) {
-        updatedContent = content.replace(/<\/html>/i, `${snippet}\n      </html>`);
-    }
-    // Option 3: Inject before the closing tag of the return block (e.g. </main> or </div>)
-    else {
-        const lastClosingTagIndex = content.lastIndexOf('</');
-        if (lastClosingTagIndex !== -1) {
-            updatedContent =
-                content.slice(0, lastClosingTagIndex) +
-                    snippet +
-                    '\n      ' +
-                    content.slice(lastClosingTagIndex);
+    let content = fs.readFileSync(filePath, 'utf-8');
+    const injectedComponents = [];
+    const skippedComponents = [];
+    for (const comp of components) {
+        const importMarker = comp.name;
+        const jsxMarker = `<${comp.name}`;
+        // Skip if already injected
+        if (content.includes(importMarker) || content.includes(jsxMarker)) {
+            skippedComponents.push(comp.name);
+            continue;
         }
+        // Determine component file import path relative to layout.tsx
+        const layoutDir = path.dirname(filePath);
+        const compDir = path.dirname(comp.filePath);
+        const compBaseName = path.basename(comp.filePath, path.extname(comp.filePath));
+        let relativeImportPath = path.relative(layoutDir, path.join(compDir, compBaseName));
+        if (!relativeImportPath.startsWith('.')) {
+            relativeImportPath = `./${relativeImportPath}`;
+        }
+        // Convert backslashes for Windows path consistency
+        relativeImportPath = relativeImportPath.replace(/\\/g, '/');
+        const importLine = `import { ${comp.name} } from '${relativeImportPath}';\n`;
+        // 1. Insert import statement
+        if (/import\s+.*?from\s+['"].*?['"];?/g.test(content)) {
+            // Insert after the last import statement
+            const importMatches = Array.from(content.matchAll(/import\s+.*?from\s+['"].*?['"];?/g));
+            const lastMatch = importMatches[importMatches.length - 1];
+            if (lastMatch && lastMatch.index !== undefined) {
+                const insertPos = lastMatch.index + lastMatch[0].length;
+                content = content.slice(0, insertPos) + '\n' + importLine + content.slice(insertPos);
+            }
+            else {
+                content = importLine + content;
+            }
+        }
+        else {
+            content = importLine + content;
+        }
+        // 2. Insert JSX tag into return block
+        const jsxSnippet = `\n      {/* @mayson-component-injected: ${comp.name} */}\n      ${comp.jsxTag}`;
+        if (/<\/body>/i.test(content)) {
+            content = content.replace(/<\/body>/i, `${jsxSnippet}\n      </body>`);
+        }
+        else if (/<\/html>/i.test(content)) {
+            content = content.replace(/<\/html>/i, `${jsxSnippet}\n      </html>`);
+        }
+        else {
+            const lastClosingIndex = content.lastIndexOf('</');
+            if (lastClosingIndex !== -1) {
+                content =
+                    content.slice(0, lastClosingIndex) +
+                        jsxSnippet +
+                        '\n      ' +
+                        content.slice(lastClosingIndex);
+            }
+        }
+        injectedComponents.push(comp.name);
     }
-    if (!updatedContent) {
-        return {
-            success: false,
-            filePath,
-            alreadyInjected: false,
-            error: 'Could not find suitable JSX insertion point in layout file.',
-        };
-    }
-    if (!dryRun) {
-        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+    if (injectedComponents.length > 0 && !dryRun) {
+        fs.writeFileSync(filePath, content, 'utf-8');
     }
     return {
         success: true,
         filePath,
-        alreadyInjected: false,
-        modifiedContent: updatedContent,
+        injectedComponents,
+        skippedComponents,
+        modifiedContent: content,
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mayson-org/inject-script",
-  "version": "1.0.0",
-  "description": "CLI tool and utility to dynamically locate Next.js App Router root layout files and inject the Mayson iframe script/component.",
+  "version": "1.0.1",
+  "description": "CLI tool and utility to dynamically locate Next.js App Router root layout files, generate component files (Badge, Watermark, ASCII, Metadata), and inject their imports.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -35,10 +35,12 @@
     "nextjs",
     "app-router",
     "layout",
-    "iframe",
+    "badge",
+    "watermark",
+    "metadata",
     "mayson",
     "cli"
   ],
   "author": "",
   "license": "MIT"
-}
+}

package/src/find-root-layout.ts

@@ -3,9 +3,6 @@ import path from 'path';
 
 const LAYOUT_EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js'];
 
-/**
- * Recursively search a directory for layout files.
- */
 function findLayoutFiles(dir: string, fileList: string[] = []): string[] {
   if (!fs.existsSync(dir)) return fileList;
 
@@ -15,7 +12,6 @@ function findLayoutFiles(dir: string, fileList: string[] = []): string[] {
     const fullPath = path.join(dir, entry.name);
 
     if (entry.isDirectory()) {
-      // Don't traverse node_modules or hidden folders (.next, .git)
       if (entry.name === 'node_modules' || entry.name.startsWith('.')) {
         continue;
       }
@@ -32,32 +28,24 @@ function findLayoutFiles(dir: string, fileList: string[] = []): string[] {
   return fileList;
 }
 
-/**
- * Scores a layout file candidate to determine if it is the root layout.
- * Higher score = higher likelihood of being the root layout.
- */
 function scoreLayoutCandidate(filePath: string, projectRoot: string): number {
   const content = fs.readFileSync(filePath, 'utf-8');
   const relativePath = path.relative(projectRoot, filePath);
   const depth = relativePath.split(path.sep).length;
 
-  let score = 100 - depth; // Shorter path depth is preferred
+  let score = 100 - depth;
 
-  // Check for HTML/Body root tags
   if (/<html/i.test(content)) score += 50;
   if (/<body/i.test(content)) score += 50;
 
-  // Check if located directly under app/ or src/app/
-  const isDirectAppChild = /^src[/\\]app[/\\]layout\.[jt]sx?$/.test(relativePath) ||
-                           /^app[/\\]layout\.[jt]sx?$/.test(relativePath);
+  const isDirectAppChild =
+    /^src[/\\]app[/\\]layout\.[jt]sx?$/.test(relativePath) ||
+    /^app[/\\]layout\.[jt]sx?$/.test(relativePath);
   if (isDirectAppChild) score += 40;
 
   return score;
 }
 
-/**
- * Finds the most likely Next.js App Router root layout file in a project.
- */
 export function findRootLayout(projectRoot: string = process.cwd()): string | null {
   const possibleAppDirs = [
     path.join(projectRoot, 'src', 'app'),
@@ -76,7 +64,6 @@ export function findRootLayout(projectRoot: string = process.cwd()): string | nu
     return null;
   }
 
-  // Score each candidate to pick the true root layout
   const scored = candidateFiles.map((filePath) => ({
     filePath,
     score: scoreLayoutCandidate(filePath, projectRoot),

package/src/generators.ts

@@ -0,0 +1,176 @@
+import fs from 'fs';
+import path from 'path';
+
+export type ComponentType = 'badge' | 'watermark' | 'ascii' | 'metadata' | 'all';
+
+export interface ComponentGeneratorOptions {
+  outputDir: string;
+  isTypeScript?: boolean;
+}
+
+export interface GeneratedComponentInfo {
+  name: string;
+  filePath: string;
+  importStatement: string;
+  jsxTag: string;
+}
+
+const BADGE_TEMPLATE = `'use client';
+import React from 'react';
+
+export function MaysonBadge() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 99999,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '6px 12px',
+        backgroundColor: 'rgba(18, 18, 20, 0.9)',
+        color: '#ffffff',
+        borderRadius: '9999px',
+        fontSize: '12px',
+        fontWeight: 500,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        border: '1px solid rgba(255, 255, 255, 0.15)',
+        boxShadow: '0 4px 14px rgba(0, 0, 0, 0.25)',
+        backdropFilter: 'blur(8px)',
+        cursor: 'pointer',
+        userSelect: 'none',
+        transition: 'transform 0.2s ease',
+      }}
+    >
+      <span style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#6366f1' }} />
+      <span>Built with <strong>Mayson</strong></span>
+    </div>
+  );
+}
+`;
+
+const WATERMARK_TEMPLATE = `'use client';
+import React from 'react';
+
+export function MaysonWatermark() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '12px',
+        left: '12px',
+        zIndex: 99999,
+        opacity: 0.4,
+        fontSize: '11px',
+        fontFamily: 'monospace',
+        color: '#888888',
+        pointerEvents: 'none',
+        userSelect: 'none',
+      }}
+    >
+      ⚡ Mayson Watermark
+    </div>
+  );
+}
+`;
+
+const ASCII_TEMPLATE = `'use client';
+import React from 'react';
+
+/*
+  ███╗   ███╗██xA1██╗   ██╗███████╗██████╗ ██████╗ 
+  ████╗ ████║██║██║   ██║██╔════╝██╔═══██╗██╔══██╗
+  ██╔████╔██║██║██║   ██║███████╗██║   ██║██║  ██║
+  ██║╚██╔╝██║██║██║   ██║╚════██║██║   ██║██║  ██║
+  ██║ ╚═╝ ██║██║╚██████╔╝███████║╚██████╔╝██████╔╝
+*/
+
+export function MaysonAscii() {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: '8px',
+        right: '12px',
+        zIndex: 99999,
+        fontSize: '10px',
+        fontFamily: 'monospace',
+        color: 'rgba(255, 255, 255, 0.6)',
+        backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        pointerEvents: 'none',
+      }}
+    >
+      MAYSON :: RUNTIME ACTIVE
+    </div>
+  );
+}
+`;
+
+const METADATA_TEMPLATE = `'use client';
+import React from 'react';
+
+export function MaysonMetadata() {
+  return (
+    <meta name="mayson-generator" content="Mayson App Platform" />
+  );
+}
+`;
+
+export function generateComponents(
+  types: ComponentType[] = ['badge'],
+  options: ComponentGeneratorOptions
+): GeneratedComponentInfo[] {
+  const { outputDir, isTypeScript = true } = options;
+  const ext = isTypeScript ? '.tsx' : '.jsx';
+  const results: GeneratedComponentInfo[] = [];
+
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  const selectedTypes = types.includes('all')
+    ? (['badge', 'watermark', 'ascii', 'metadata'] as ComponentType[])
+    : types;
+
+  for (const type of selectedTypes) {
+    let name = '';
+    let code = '';
+
+    switch (type) {
+      case 'badge':
+        name = 'MaysonBadge';
+        code = BADGE_TEMPLATE;
+        break;
+      case 'watermark':
+        name = 'MaysonWatermark';
+        code = WATERMARK_TEMPLATE;
+        break;
+      case 'ascii':
+        name = 'MaysonAscii';
+        code = ASCII_TEMPLATE;
+        break;
+      case 'metadata':
+        name = 'MaysonMetadata';
+        code = METADATA_TEMPLATE;
+        break;
+    }
+
+    if (name && code) {
+      const filePath = path.join(outputDir, `${name}${ext}`);
+      fs.writeFileSync(filePath, code, 'utf-8');
+
+      results.push({
+        name,
+        filePath,
+        importStatement: `import { ${name} } from './${name}';`,
+        jsxTag: `<${name} />`,
+      });
+    }
+  }
+
+  return results;
+}

package/src/index.ts

@@ -1,27 +1,42 @@
+import path from 'path';
 import { findRootLayout } from './find-root-layout.js';
-import { injectMaysonIframe, InjectorOptions, InjectorResult } from './injector.js';
+import { generateComponents, ComponentType, GeneratedComponentInfo } from './generators.js';
+import { injectComponentsIntoLayout, InjectorOptions, InjectorResult } from './injector.js';
 
-export { findRootLayout, injectMaysonIframe };
-export type { InjectorOptions, InjectorResult };
+export { findRootLayout, generateComponents, injectComponentsIntoLayout };
+export type { ComponentType, GeneratedComponentInfo, InjectorOptions, InjectorResult };
 
 /**
- * Convenience function to automatically locate and inject the Mayson iframe into a Next.js project.
+ * Convenience function to auto-detect Next.js App Router root layout, generate component files, and inject them.
  */
-export function runAutoInject(projectRoot: string = process.cwd(), iframeUrl: string = 'https://mayson.dev/', dryRun: boolean = false): InjectorResult {
+export function runAutoInject(
+  projectRoot: string = process.cwd(),
+  types: ComponentType[] = ['badge'],
+  dryRun: boolean = false
+): InjectorResult {
   const layoutPath = findRootLayout(projectRoot);
 
   if (!layoutPath) {
     return {
       success: false,
       filePath: '',
-      alreadyInjected: false,
-      error: `Could not locate Next.js App Router root layout file in ${projectRoot}`,
+      injectedComponents: [],
+      skippedComponents: [],
+      error: `Could not locate Next.js App Router root layout in ${projectRoot}`,
     };
   }
 
-  return injectMaysonIframe({
+  const isTypeScript = layoutPath.endsWith('.tsx') || layoutPath.endsWith('.ts');
+  const targetDir = path.dirname(layoutPath);
+
+  const generatedComponents = generateComponents(types, {
+    outputDir: targetDir,
+    isTypeScript,
+  });
+
+  return injectComponentsIntoLayout({
     filePath: layoutPath,
-    iframeUrl,
+    components: generatedComponents,
     dryRun,
   });
 }

package/src/injector.ts

@@ -1,101 +1,108 @@
 import fs from 'fs';
+import path from 'path';
+import { GeneratedComponentInfo } from './generators.js';
 
 export interface InjectorOptions {
   filePath: string;
-  iframeUrl?: string;
+  components: GeneratedComponentInfo[];
   dryRun?: boolean;
 }
 
 export interface InjectorResult {
   success: boolean;
   filePath: string;
-  alreadyInjected: boolean;
+  injectedComponents: string[];
+  skippedComponents: string[];
   modifiedContent?: string;
   error?: string;
 }
 
-const INJECTION_MARKER = '/* @mayson-iframe-injected */';
-
-export function injectMaysonIframe(options: InjectorOptions): InjectorResult {
-  const { filePath, iframeUrl = 'https://mayson.dev/', dryRun = false } = options;
+export function injectComponentsIntoLayout(options: InjectorOptions): InjectorResult {
+  const { filePath, components, dryRun = false } = options;
 
   if (!fs.existsSync(filePath)) {
     return {
       success: false,
       filePath,
-      alreadyInjected: false,
-      error: `File not found: ${filePath}`,
+      injectedComponents: [],
+      skippedComponents: [],
+      error: `Layout file not found: ${filePath}`,
     };
   }
 
-  const content = fs.readFileSync(filePath, 'utf-8');
+  let content = fs.readFileSync(filePath, 'utf-8');
+  const injectedComponents: string[] = [];
+  const skippedComponents: string[] = [];
 
-  // Idempotency check: Don't inject twice
-  if (content.includes(INJECTION_MARKER) || content.includes(iframeUrl)) {
-    return {
-      success: true,
-      filePath,
-      alreadyInjected: true,
-    };
-  }
+  for (const comp of components) {
+    const importMarker = comp.name;
+    const jsxMarker = `<${comp.name}`;
 
-  const snippet = `
-      {${INJECTION_MARKER}}
-      <iframe
-        src="${iframeUrl}"
-        style={{
-          position: 'fixed',
-          bottom: '20px',
-          right: '20px',
-          width: '400px',
-          height: '600px',
-          border: 'none',
-          borderRadius: '12px',
-          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.25)',
-          zIndex: 999999,
-        }}
-        title="Mayson Dev Overlay"
-      />`;
-
-  let updatedContent: string | null = null;
-
-  // Option 1: Inject before </body>
-  if (/<\/body>/i.test(content)) {
-    updatedContent = content.replace(/<\/body>/i, `${snippet}\n      </body>`);
-  }
-  // Option 2: Inject before </html>
-  else if (/<\/html>/i.test(content)) {
-    updatedContent = content.replace(/<\/html>/i, `${snippet}\n      </html>`);
-  }
-  // Option 3: Inject before the closing tag of the return block (e.g. </main> or </div>)
-  else {
-    const lastClosingTagIndex = content.lastIndexOf('</');
-    if (lastClosingTagIndex !== -1) {
-      updatedContent =
-        content.slice(0, lastClosingTagIndex) +
-        snippet +
-        '\n      ' +
-        content.slice(lastClosingTagIndex);
+    // Skip if already injected
+    if (content.includes(importMarker) || content.includes(jsxMarker)) {
+      skippedComponents.push(comp.name);
+      continue;
     }
-  }
 
-  if (!updatedContent) {
-    return {
-      success: false,
-      filePath,
-      alreadyInjected: false,
-      error: 'Could not find suitable JSX insertion point in layout file.',
-    };
+    // Determine component file import path relative to layout.tsx
+    const layoutDir = path.dirname(filePath);
+    const compDir = path.dirname(comp.filePath);
+    const compBaseName = path.basename(comp.filePath, path.extname(comp.filePath));
+
+    let relativeImportPath = path.relative(layoutDir, path.join(compDir, compBaseName));
+    if (!relativeImportPath.startsWith('.')) {
+      relativeImportPath = `./${relativeImportPath}`;
+    }
+    // Convert backslashes for Windows path consistency
+    relativeImportPath = relativeImportPath.replace(/\\/g, '/');
+
+    const importLine = `import { ${comp.name} } from '${relativeImportPath}';\n`;
+
+    // 1. Insert import statement
+    if (/import\s+.*?from\s+['"].*?['"];?/g.test(content)) {
+      // Insert after the last import statement
+      const importMatches = Array.from(content.matchAll(/import\s+.*?from\s+['"].*?['"];?/g));
+      const lastMatch = importMatches[importMatches.length - 1];
+      if (lastMatch && lastMatch.index !== undefined) {
+        const insertPos = lastMatch.index + lastMatch[0].length;
+        content = content.slice(0, insertPos) + '\n' + importLine + content.slice(insertPos);
+      } else {
+        content = importLine + content;
+      }
+    } else {
+      content = importLine + content;
+    }
+
+    // 2. Insert JSX tag into return block
+    const jsxSnippet = `\n      {/* @mayson-component-injected: ${comp.name} */}\n      ${comp.jsxTag}`;
+
+    if (/<\/body>/i.test(content)) {
+      content = content.replace(/<\/body>/i, `${jsxSnippet}\n      </body>`);
+    } else if (/<\/html>/i.test(content)) {
+      content = content.replace(/<\/html>/i, `${jsxSnippet}\n      </html>`);
+    } else {
+      const lastClosingIndex = content.lastIndexOf('</');
+      if (lastClosingIndex !== -1) {
+        content =
+          content.slice(0, lastClosingIndex) +
+          jsxSnippet +
+          '\n      ' +
+          content.slice(lastClosingIndex);
+      }
+    }
+
+    injectedComponents.push(comp.name);
   }
 
-  if (!dryRun) {
-    fs.writeFileSync(filePath, updatedContent, 'utf-8');
+  if (injectedComponents.length > 0 && !dryRun) {
+    fs.writeFileSync(filePath, content, 'utf-8');
   }
 
   return {
     success: true,
     filePath,
-    alreadyInjected: false,
-    modifiedContent: updatedContent,
+    injectedComponents,
+    skippedComponents,
+    modifiedContent: content,
   };
 }