opencode-nanobanana 0.1.0

package/dist/tools/design/mockup-to-code.js

@@ -0,0 +1,311 @@
+import { tool } from '@opencode-ai/plugin/tool';
+import { GeminiProvider } from '../../providers/gemini.js';
+import { loadImage } from '../../utils/file-handler.js';
+export const mockupToCodeTool = tool({
+    description: 'Convert design mockup images to component code. Supports React, Vue, SwiftUI, and HTML with various styling options.',
+    args: {
+        imagePath: tool.schema.string().describe('Path to the design mockup image'),
+        framework: tool.schema.enum(['react', 'vue', 'swiftui', 'html']).describe('Target framework for code generation'),
+        styling: tool.schema.enum(['tailwind', 'css', 'styled-components']).optional().describe('Styling approach (optional, defaults based on framework)'),
+        componentName: tool.schema.string().optional().describe('Name for the generated component (optional)'),
+    },
+    async execute(args, _context) {
+        try {
+            const { imagePath, framework, styling, componentName } = args;
+            // Load the mockup image
+            const imageBuffer = await loadImage(imagePath);
+            // Build comprehensive prompt for code generation
+            const prompt = buildCodeGenerationPrompt(framework, styling, componentName);
+            // Use Gemini to analyze mockup and generate code
+            const gemini = new GeminiProvider();
+            const generatedCode = await gemini.analyzeImage(imageBuffer, prompt);
+            // Format response
+            return `✓ Code generated from mockup: ${imagePath}
+
+Framework: ${framework}${styling ? ` with ${styling}` : ''}
+${componentName ? `Component: ${componentName}\n` : ''}
+${generatedCode}
+
+Note: Review and adjust the generated code to match your project's specific requirements and coding standards.`;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            if (errorMessage.includes('API key')) {
+                return '✗ Error: GEMINI_API_KEY environment variable not set. Please configure your API key.';
+            }
+            if (errorMessage.includes('ENOENT') || errorMessage.includes('no such file')) {
+                return `✗ Error: Image file not found at path: ${args.imagePath}`;
+            }
+            return `✗ Error generating code from mockup: ${errorMessage}`;
+        }
+    }
+});
+/**
+ * Build framework-specific code generation prompt
+ */
+function buildCodeGenerationPrompt(framework, styling, componentName) {
+    const name = componentName || getDefaultComponentName(framework);
+    // Base prompt common to all frameworks
+    let prompt = `Analyze this design mockup and generate clean, production-ready code that accurately recreates the design.
+
+Component Name: ${name}
+
+Focus on:
+1. Accurate layout and spacing
+2. Exact colors, fonts, and styling
+3. Proper component structure and hierarchy
+4. Semantic HTML/markup
+5. Responsive design considerations
+6. Accessibility (ARIA labels, semantic tags)
+
+`;
+    // Framework-specific instructions
+    switch (framework) {
+        case 'react':
+            prompt += generateReactPrompt(styling || 'tailwind', name);
+            break;
+        case 'vue':
+            prompt += generateVuePrompt(styling || 'css', name);
+            break;
+        case 'swiftui':
+            prompt += generateSwiftUIPrompt(name);
+            break;
+        case 'html':
+            prompt += generateHTMLPrompt(styling || 'css', name);
+            break;
+    }
+    prompt += `\n\nProvide only the code - no explanations or markdown formatting unless it's part of comments in the code.`;
+    return prompt;
+}
+/**
+ * Generate React-specific prompt
+ */
+function generateReactPrompt(styling, componentName) {
+    let prompt = `Generate React code with TypeScript.
+
+`;
+    if (styling === 'tailwind') {
+        prompt += `Use Tailwind CSS for styling:
+- Use Tailwind utility classes
+- Follow responsive design patterns (sm:, md:, lg:, xl:)
+- Use semantic color names from the design
+- Implement proper spacing with Tailwind's spacing scale
+
+Example structure:
+\`\`\`tsx
+interface ${componentName}Props {
+  // Define props here
+}
+
+export function ${componentName}({ }: ${componentName}Props) {
+  return (
+    <div className="...">
+      {/* Component content */}
+    </div>
+  );
+}
+\`\`\``;
+    }
+    else if (styling === 'styled-components') {
+        prompt += `Use styled-components for styling:
+- Create styled components for each major element
+- Use theme variables where appropriate
+- Implement responsive styles with media queries
+- Follow CSS-in-JS best practices
+
+Example structure:
+\`\`\`tsx
+import styled from 'styled-components';
+
+const Container = styled.div\`
+  /* styles */
+\`;
+
+interface ${componentName}Props {
+  // Define props here
+}
+
+export function ${componentName}({ }: ${componentName}Props) {
+  return (
+    <Container>
+      {/* Component content */}
+    </Container>
+  );
+}
+\`\`\``;
+    }
+    else {
+        prompt += `Use CSS Modules for styling:
+- Create separate styles object
+- Use className for styling
+- Implement BEM naming convention
+- Include responsive media queries
+
+Example structure:
+\`\`\`tsx
+import styles from './${componentName}.module.css';
+
+interface ${componentName}Props {
+  // Define props here
+}
+
+export function ${componentName}({ }: ${componentName}Props) {
+  return (
+    <div className={styles.container}>
+      {/* Component content */}
+    </div>
+  );
+}
+\`\`\``;
+    }
+    return prompt;
+}
+/**
+ * Generate Vue-specific prompt
+ */
+function generateVuePrompt(styling, componentName) {
+    let prompt = `Generate Vue 3 code with TypeScript and Composition API.
+
+`;
+    if (styling === 'tailwind') {
+        prompt += `Use Tailwind CSS for styling:
+- Use Tailwind utility classes in template
+- Follow Vue 3 best practices
+- Use <script setup> syntax
+
+Example structure:
+\`\`\`vue
+<template>
+  <div class="...">
+    <!-- Component content -->
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ${componentName}Props {
+  // Define props here
+}
+
+defineProps<${componentName}Props>();
+</script>
+\`\`\``;
+    }
+    else {
+        prompt += `Use scoped CSS for styling:
+- Use <style scoped> for component-specific styles
+- Follow Vue 3 best practices
+- Use <script setup> syntax
+
+Example structure:
+\`\`\`vue
+<template>
+  <div class="container">
+    <!-- Component content -->
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ${componentName}Props {
+  // Define props here
+}
+
+defineProps<${componentName}Props>();
+</script>
+
+<style scoped>
+.container {
+  /* styles */
+}
+</style>
+\`\`\``;
+    }
+    return prompt;
+}
+/**
+ * Generate SwiftUI-specific prompt
+ */
+function generateSwiftUIPrompt(componentName) {
+    return `Generate SwiftUI code for iOS/macOS.
+
+- Use SwiftUI Views and Modifiers
+- Implement proper spacing with padding, spacing in VStack/HStack
+- Use Color and Font from SwiftUI
+- Follow Apple's Human Interface Guidelines
+- Make the component reusable with proper parameters
+
+Example structure:
+\`\`\`swift
+import SwiftUI
+
+struct ${componentName}: View {
+    // Define properties here
+
+    var body: some View {
+        VStack {
+            // Component content
+        }
+    }
+}
+
+#Preview {
+    ${componentName}()
+}
+\`\`\``;
+}
+/**
+ * Generate HTML-specific prompt
+ */
+function generateHTMLPrompt(styling, _componentName) {
+    let prompt = `Generate semantic HTML5 code.
+
+`;
+    if (styling === 'tailwind') {
+        prompt += `Use Tailwind CSS for styling:
+- Use Tailwind utility classes
+- Follow responsive design patterns
+- Use semantic HTML5 tags
+
+Example structure:
+\`\`\`html
+<div class="...">
+  <!-- Component content -->
+</div>
+\`\`\``;
+    }
+    else {
+        prompt += `Use custom CSS for styling:
+- Use semantic HTML5 tags
+- Include CSS in <style> block
+- Follow BEM naming convention
+- Implement responsive design with media queries
+
+Example structure:
+\`\`\`html
+<div class="component">
+  <!-- Component content -->
+</div>
+
+<style>
+.component {
+  /* styles */
+}
+</style>
+\`\`\``;
+    }
+    return prompt;
+}
+/**
+ * Get default component name based on framework
+ */
+function getDefaultComponentName(framework) {
+    switch (framework) {
+        case 'react':
+        case 'vue':
+            return 'DesignComponent';
+        case 'swiftui':
+            return 'DesignView';
+        case 'html':
+            return 'design-component';
+    }
+}
+//# sourceMappingURL=mockup-to-code.js.map

package/dist/tools/design/mockup-to-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockup-to-code.js","sourceRoot":"","sources":["../../../src/tools/design/mockup-to-code.ts"],"names":[],"mappings":"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"}

package/dist/tools/design/sketch-to-code.d.ts

@@ -0,0 +1,3 @@
+import { type ToolDefinition } from '@opencode-ai/plugin/tool';
+export declare const sketchToCodeTool: ToolDefinition;
+//# sourceMappingURL=sketch-to-code.d.ts.map

package/dist/tools/design/sketch-to-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sketch-to-code.d.ts","sourceRoot":"","sources":["../../../src/tools/design/sketch-to-code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAIrE,eAAO,MAAM,gBAAgB,EAAE,cA4C7B,CAAC"}

package/dist/tools/design/sketch-to-code.js

@@ -0,0 +1,325 @@
+import { tool } from '@opencode-ai/plugin/tool';
+import { GeminiProvider } from '../../providers/gemini.js';
+import { loadImage } from '../../utils/file-handler.js';
+export const sketchToCodeTool = tool({
+    description: 'Convert hand-drawn sketches and rough wireframes to component code. Interprets sketchy, imprecise designs and generates production-ready code.',
+    args: {
+        imagePath: tool.schema.string().describe('Path to the sketch or wireframe image'),
+        framework: tool.schema.enum(['react', 'vue', 'swiftui', 'html']).describe('Target framework for code generation'),
+        styling: tool.schema.enum(['tailwind', 'css', 'styled-components']).optional().describe('Styling approach (optional, defaults based on framework)'),
+        componentName: tool.schema.string().optional().describe('Name for the generated component (optional)'),
+    },
+    async execute(args, _context) {
+        try {
+            const { imagePath, framework, styling, componentName } = args;
+            // Load the sketch image
+            const imageBuffer = await loadImage(imagePath);
+            // Build comprehensive prompt for code generation from sketch
+            const prompt = buildSketchCodePrompt(framework, styling, componentName);
+            // Use Gemini to analyze sketch and generate code
+            const gemini = new GeminiProvider();
+            const generatedCode = await gemini.analyzeImage(imageBuffer, prompt);
+            // Format response
+            return `✓ Code generated from sketch: ${imagePath}
+
+Framework: ${framework}${styling ? ` with ${styling}` : ''}
+${componentName ? `Component: ${componentName}\n` : ''}
+${generatedCode}
+
+Note: The code was generated from a sketch/wireframe. Review and refine the implementation to match your exact requirements.`;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            if (errorMessage.includes('API key')) {
+                return '✗ Error: GEMINI_API_KEY environment variable not set. Please configure your API key.';
+            }
+            if (errorMessage.includes('ENOENT') || errorMessage.includes('no such file')) {
+                return `✗ Error: Image file not found at path: ${args.imagePath}`;
+            }
+            return `✗ Error generating code from sketch: ${errorMessage}`;
+        }
+    }
+});
+/**
+ * Build framework-specific code generation prompt for sketches
+ */
+function buildSketchCodePrompt(framework, styling, componentName) {
+    const name = componentName || getDefaultComponentName(framework);
+    // Base prompt specifically for hand-drawn/rough sketches
+    let prompt = `Analyze this hand-drawn sketch or rough wireframe and generate clean, production-ready code.
+
+Component Name: ${name}
+
+IMPORTANT: This is a sketch/wireframe, not a polished design mockup. Interpret the intent:
+1. Boxes and rectangles represent containers/sections
+2. Lines and scribbles represent text content
+3. Circles or rounded shapes may represent buttons, icons, or avatars
+4. Hand-drawn elements should be converted to proper UI components
+5. Rough spacing should be translated to proper layout spacing
+6. Assume standard UI patterns where the sketch is ambiguous
+
+Focus on:
+1. Interpreting the layout structure and component hierarchy
+2. Using semantic component types (header, nav, button, card, etc.)
+3. Applying sensible defaults for colors (use neutral/modern palette)
+4. Implementing proper spacing and alignment
+5. Making the design responsive
+6. Following accessibility best practices
+
+`;
+    // Framework-specific instructions
+    switch (framework) {
+        case 'react':
+            prompt += generateReactPrompt(styling || 'tailwind', name);
+            break;
+        case 'vue':
+            prompt += generateVuePrompt(styling || 'css', name);
+            break;
+        case 'swiftui':
+            prompt += generateSwiftUIPrompt(name);
+            break;
+        case 'html':
+            prompt += generateHTMLPrompt(styling || 'css', name);
+            break;
+    }
+    prompt += `\n\nProvide only the code - no explanations or markdown formatting unless it's part of comments in the code.`;
+    return prompt;
+}
+/**
+ * Generate React-specific prompt
+ */
+function generateReactPrompt(styling, componentName) {
+    let prompt = `Generate React code with TypeScript.
+
+`;
+    if (styling === 'tailwind') {
+        prompt += `Use Tailwind CSS for styling:
+- Use Tailwind utility classes
+- Apply modern, neutral color palette (gray-50 through gray-900, blue for primary actions)
+- Follow responsive design patterns (sm:, md:, lg:, xl:)
+- Implement proper spacing with Tailwind's spacing scale
+- Use rounded corners and shadows for depth where appropriate
+
+Example structure:
+\`\`\`tsx
+interface ${componentName}Props {
+  // Define props here
+}
+
+export function ${componentName}({ }: ${componentName}Props) {
+  return (
+    <div className="...">
+      {/* Component content */}
+    </div>
+  );
+}
+\`\`\``;
+    }
+    else if (styling === 'styled-components') {
+        prompt += `Use styled-components for styling:
+- Create styled components for each major element
+- Use modern, neutral color palette
+- Implement responsive styles with media queries
+- Follow CSS-in-JS best practices
+
+Example structure:
+\`\`\`tsx
+import styled from 'styled-components';
+
+const Container = styled.div\`
+  /* styles */
+\`;
+
+interface ${componentName}Props {
+  // Define props here
+}
+
+export function ${componentName}({ }: ${componentName}Props) {
+  return (
+    <Container>
+      {/* Component content */}
+    </Container>
+  );
+}
+\`\`\``;
+    }
+    else {
+        prompt += `Use CSS Modules for styling:
+- Create separate styles object
+- Use className for styling
+- Implement BEM naming convention
+- Include responsive media queries
+- Apply modern, neutral color palette
+
+Example structure:
+\`\`\`tsx
+import styles from './${componentName}.module.css';
+
+interface ${componentName}Props {
+  // Define props here
+}
+
+export function ${componentName}({ }: ${componentName}Props) {
+  return (
+    <div className={styles.container}>
+      {/* Component content */}
+    </div>
+  );
+}
+\`\`\``;
+    }
+    return prompt;
+}
+/**
+ * Generate Vue-specific prompt
+ */
+function generateVuePrompt(styling, componentName) {
+    let prompt = `Generate Vue 3 code with TypeScript and Composition API.
+
+`;
+    if (styling === 'tailwind') {
+        prompt += `Use Tailwind CSS for styling:
+- Use Tailwind utility classes in template
+- Apply modern, neutral color palette
+- Follow Vue 3 best practices
+- Use <script setup> syntax
+
+Example structure:
+\`\`\`vue
+<template>
+  <div class="...">
+    <!-- Component content -->
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ${componentName}Props {
+  // Define props here
+}
+
+defineProps<${componentName}Props>();
+</script>
+\`\`\``;
+    }
+    else {
+        prompt += `Use scoped CSS for styling:
+- Use <style scoped> for component-specific styles
+- Apply modern, neutral color palette
+- Follow Vue 3 best practices
+- Use <script setup> syntax
+
+Example structure:
+\`\`\`vue
+<template>
+  <div class="container">
+    <!-- Component content -->
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ${componentName}Props {
+  // Define props here
+}
+
+defineProps<${componentName}Props>();
+</script>
+
+<style scoped>
+.container {
+  /* styles */
+}
+</style>
+\`\`\``;
+    }
+    return prompt;
+}
+/**
+ * Generate SwiftUI-specific prompt
+ */
+function generateSwiftUIPrompt(componentName) {
+    return `Generate SwiftUI code for iOS/macOS.
+
+- Use SwiftUI Views and Modifiers
+- Apply system colors and fonts for a native look
+- Implement proper spacing with padding, spacing in VStack/HStack
+- Follow Apple's Human Interface Guidelines
+- Make the component reusable with proper parameters
+
+Example structure:
+\`\`\`swift
+import SwiftUI
+
+struct ${componentName}: View {
+    // Define properties here
+
+    var body: some View {
+        VStack {
+            // Component content
+        }
+    }
+}
+
+#Preview {
+    ${componentName}()
+}
+\`\`\``;
+}
+/**
+ * Generate HTML-specific prompt
+ */
+function generateHTMLPrompt(styling, _componentName) {
+    let prompt = `Generate semantic HTML5 code.
+
+`;
+    if (styling === 'tailwind') {
+        prompt += `Use Tailwind CSS for styling:
+- Use Tailwind utility classes
+- Apply modern, neutral color palette
+- Follow responsive design patterns
+- Use semantic HTML5 tags
+
+Example structure:
+\`\`\`html
+<div class="...">
+  <!-- Component content -->
+</div>
+\`\`\``;
+    }
+    else {
+        prompt += `Use custom CSS for styling:
+- Use semantic HTML5 tags
+- Include CSS in <style> block
+- Follow BEM naming convention
+- Apply modern, neutral color palette
+- Implement responsive design with media queries
+
+Example structure:
+\`\`\`html
+<div class="component">
+  <!-- Component content -->
+</div>
+
+<style>
+.component {
+  /* styles */
+}
+</style>
+\`\`\``;
+    }
+    return prompt;
+}
+/**
+ * Get default component name based on framework
+ */
+function getDefaultComponentName(framework) {
+    switch (framework) {
+        case 'react':
+        case 'vue':
+            return 'SketchComponent';
+        case 'swiftui':
+            return 'SketchView';
+        case 'html':
+            return 'sketch-component';
+    }
+}
+//# sourceMappingURL=sketch-to-code.js.map

package/dist/tools/design/sketch-to-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sketch-to-code.js","sourceRoot":"","sources":["../../../src/tools/design/sketch-to-code.ts"],"names":[],"mappings":"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"}

package/dist/tools/docs/architecture-diagram.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Architecture Diagram Tool
+ *
+ * Generates architecture diagrams from text descriptions using Gemini.
+ * Supports multiple output formats: PNG (visual), SVG, or Mermaid (text-based).
+ */
+import { type ToolDefinition } from '@opencode-ai/plugin/tool';
+/**
+ * Tool definition for generate_architecture_diagram
+ */
+export declare const generateArchitectureDiagramTool: ToolDefinition;
+//# sourceMappingURL=architecture-diagram.d.ts.map

package/dist/tools/docs/architecture-diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"architecture-diagram.d.ts","sourceRoot":"","sources":["../../../src/tools/docs/architecture-diagram.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAmGrE;;GAEG;AACH,eAAO,MAAM,+BAA+B,EAAE,cAgG5C,CAAC"}