@flisk-sh/flisk 0.0.0-stage → 1.3.190

package/ext/ide-components/shared/syntax_highlighter.py

@@ -0,0 +1,142 @@
+#!/usr/bin/env python3
+# Copyright (c) 2026 Flisk Landscape contributors
+# SPDX-License-Identifier: MIT
+"""
+Syntax highlighting utilities using Pygments
+"""
+
+import sys
+from pathlib import Path
+
+# Try to import pygments
+try:
+    from pygments import highlight
+    from pygments.lexers import get_lexer_by_name, guess_lexer_for_filename, TextLexer
+    from pygments.formatters import HtmlFormatter
+    PYGMENTS_AVAILABLE = True
+except ImportError:
+    PYGMENTS_AVAILABLE = False
+
+
+class SyntaxHighlighter:
+    """Syntax highlighting using Pygments (if available) or fallback"""
+    
+    @staticmethod
+    def highlight_code(code: str, language: str = None, filename: str = None) -> str:
+        """
+        Highlight code and return HTML
+        
+        Args:
+            code: Source code to highlight
+            language: Language name (optional)
+            filename: Filename for guessing language (optional)
+        
+        Returns:
+            HTML string with highlighted code
+        """
+        if not PYGMENTS_AVAILABLE:
+            return SyntaxHighlighter._fallback_highlight(code)
+        
+        try:
+            # Try to get lexer by language name
+            if language:
+                try:
+                    lexer = get_lexer_by_name(language)
+                except (ValueError, TypeError):
+                    lexer = None
+            else:
+                lexer = None
+
+            # Try to guess from filename
+            if not lexer and filename:
+                try:
+                    lexer = guess_lexer_for_filename(filename, code)
+                except (ValueError, TypeError):
+                    lexer = None
+            
+            # Default to text lexer
+            if not lexer:
+                lexer = TextLexer()
+            
+            # Create formatter with custom CSS class
+            formatter = HtmlFormatter(
+                cssclass='syntax-highlighted',
+                style='monokai',
+                linenos=False,
+                wrapcode=True
+            )
+            
+            return highlight(code, lexer, formatter)
+            
+        except Exception as e:
+            return SyntaxHighlighter._fallback_highlight(code)
+    
+    @staticmethod
+    def _fallback_highlight(code: str) -> str:
+        """Simple fallback when Pygments is not available"""
+        import html
+        
+        # Escape HTML
+        escaped = html.escape(code)
+        
+        # Wrap in pre/code
+        return f'<pre class="syntax-highlighted"><code>{escaped}</code></pre>'
+    
+    @staticmethod
+    def get_styles() -> str:
+        """Get CSS styles for syntax highlighting"""
+        if not PYGMENTS_AVAILABLE:
+            return ''
+        
+        try:
+            from pygments.formatters import HtmlFormatter
+            formatter = HtmlFormatter(style='monokai')
+            return formatter.get_style_defs('.syntax-highlighted')
+        except (ImportError, AttributeError):
+            return ''
+    
+    @staticmethod
+    def get_language_from_ext(ext: str) -> str:
+        """Map file extension to Pygments language name"""
+        mapping = {
+            '.py': 'python',
+            '.js': 'javascript',
+            '.ts': 'typescript',
+            '.tsx': 'typescript',
+            '.jsx': 'javascript',
+            '.json': 'json',
+            '.yaml': 'yaml',
+            '.yml': 'yaml',
+            '.md': 'markdown',
+            '.sh': 'bash',
+            '.bash': 'bash',
+            '.star': 'python',  # Starlark is Python-like
+            '.go': 'go',
+            '.rs': 'rust',
+            '.java': 'java',
+            '.sql': 'sql',
+            '.css': 'css',
+            '.scss': 'scss',
+            '.html': 'html',
+            '.xml': 'xml',
+            '.dockerfile': 'docker',
+            '.prisma': 'sql',  # Close enough
+        }
+        
+        return mapping.get(ext.lower(), 'text')
+
+
+if __name__ == '__main__':
+    print(f"Pygments available: {PYGMENTS_AVAILABLE}")
+    
+    # Test
+    test_code = '''
+def hello_world():
+    """Say hello"""
+    print("Hello, World!")
+    return True
+'''
+    
+    result = SyntaxHighlighter.highlight_code(test_code, language='python')
+    print("\nHighlighted code:")
+    print(result[:500])

package/ext/ide-components/shared/template_engine.py

@@ -0,0 +1,125 @@
+#!/usr/bin/env python3
+# Copyright (c) 2026 Flisk Landscape contributors
+# SPDX-License-Identifier: MIT
+"""
+Simple template engine for IDE components
+"""
+
+import re
+from pathlib import Path
+
+
+class TemplateEngine:
+    """Simple template engine with variable substitution"""
+    
+    @staticmethod
+    def render(template: str, **kwargs) -> str:
+        """
+        Render a template with variable substitution
+        
+        Args:
+            template: Template string with {variable} placeholders
+            **kwargs: Variables to substitute
+        
+        Returns:
+            Rendered string
+        """
+        result = template
+        for key, value in kwargs.items():
+            placeholder = '{' + key + '}'
+            result = result.replace(placeholder, str(value))
+        return result
+    
+    @staticmethod
+    def render_file(template_path: Path, **kwargs) -> str:
+        """
+        Load template from file and render
+        
+        Args:
+            template_path: Path to template file
+            **kwargs: Variables to substitute
+        
+        Returns:
+            Rendered string
+        """
+        try:
+            with open(template_path, 'r', encoding='utf-8') as f:
+                template = f.read()
+            return TemplateEngine.render(template, **kwargs)
+        except Exception as e:
+            return f"<!-- Template error: {e} -->"
+    
+    @staticmethod
+    def render_conditional(template: str, conditions: dict) -> str:
+        """
+        Render template with conditional blocks
+        
+        Syntax:
+            {{if condition}}content{{endif}}
+        
+        Args:
+            template: Template with conditionals
+            conditions: Dict of condition names to boolean values
+        
+        Returns:
+            Rendered string with conditionals evaluated
+        """
+        result = template
+        
+        # Process each condition
+        for condition_name, condition_value in conditions.items():
+            pattern = rf'{{{{if {condition_name}}}}(.*?){{{{endif}}}}'
+            
+            if condition_value:
+                # Keep content, remove tags
+                result = re.sub(pattern, r'\1', result, flags=re.DOTALL)
+            else:
+                # Remove entire block
+                result = re.sub(pattern, '', result, flags=re.DOTALL)
+        
+        return result
+    
+    @staticmethod
+    def render_loop(template: str, items: list, item_template: str) -> str:
+        """
+        Render template with a loop
+        
+        Args:
+            template: Main template with {items} placeholder
+            items: List of dicts with item data
+            item_template: Template for each item
+        
+        Returns:
+            Rendered string
+        """
+        rendered_items = []
+        for item in items:
+            rendered = TemplateEngine.render(item_template, **item)
+            rendered_items.append(rendered)
+        
+        return template.replace('{items}', ''.join(rendered_items))
+
+
+if __name__ == '__main__':
+    # Test basic rendering
+    template = "Hello, {name}! Welcome to {place}."
+    result = TemplateEngine.render(template, name="World", place="Tilt IDE")
+    print(f"Basic: {result}")
+    
+    # Test conditionals
+    conditional_template = "{{if show_greeting}}Hello!{{endif}} {{if show_name}}{name}{{endif}}"
+    result = TemplateEngine.render_conditional(
+        conditional_template,
+        {'show_greeting': True, 'show_name': False}
+    )
+    print(f"Conditional: {result}")
+    
+    # Test loop
+    loop_template = "<ul>{items}</ul>"
+    item_template = "<li>{name}: {value}</li>"
+    items = [
+        {'name': 'File Browser', 'value': 'Port 9765'},
+        {'name': 'Code Viewer', 'value': 'Port 9766'},
+    ]
+    result = TemplateEngine.render_loop(loop_template, items, item_template)
+    print(f"Loop: {result}")

package/ext/ide-components/shared/templates/base.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{title} - Flisk Tilt IDE</title>
+  <link rel="stylesheet" href="/static/styles.css">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>{favicon}</text></svg>">
+  <script>
+    // Theme initialization - runs before page renders to prevent flash
+    (function() {{
+      const savedTheme = localStorage.getItem('tilt-ide-theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const theme = savedTheme || (prefersDark ? 'dark' : 'light');
+      if (theme === 'light') {{
+        document.documentElement.setAttribute('data-theme', 'light');
+      }}
+    }})();
+    
+    // Handle unavailable IDE services
+    document.addEventListener('DOMContentLoaded', function() {
+      const links = [
+        { id: 'filesLink', name: 'File Browser', port: 9765 },
+        { id: 'viewerLink', name: 'Code Viewer', port: 9766 },
+        { id: 'terminalLink', name: 'Terminal', port: 9768 }
+      ];
+      
+      links.forEach(function(link) {
+        const el = document.getElementById(link.id);
+        if (!el) return;
+        
+        const isAvailable = el.getAttribute('data-available') === 'true';
+        
+        if (!isAvailable) {
+          el.style.opacity = '0.5';
+          el.style.cursor = 'not-allowed';
+          el.title = link.name + ' not running (port ' + link.port + ')';
+          
+          el.addEventListener('click', function(e) {
+            e.preventDefault();
+            showServiceUnavailable(link.name, link.port);
+          });
+        }
+      });
+    });
+    
+    function showServiceUnavailable(name, port) {
+      const existing = document.querySelector('.notification-toast');
+      if (existing) existing.remove();
+      
+      const toast = document.createElement('div');
+      toast.className = 'notification-toast warning';
+      toast.innerHTML = '<strong>' + name + ' not running</strong><br>Start it with: <code>tilt up ' + name.toLowerCase().replace(' ', '-') + '</code> (port ' + port + ')';
+      document.body.appendChild(toast);
+      
+      setTimeout(() => toast.classList.add('show'), 10);
+      setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => toast.remove(), 300);
+      }, 4000);
+    }
+  </script>
+</head>
+<body>
+  <header class="header">
+    <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu">
+      ☰
+    </button>
+    <h1>
+      <span class="header-icon">{icon}</span>
+      {title}
+    </h1>
+    <nav class="nav">
+      <a href="//localhost:9765" class="{active_browser}" id="filesLink" data-available="{files_available}">📁 Files</a>
+      <a href="//localhost:9766" class="{active_viewer}" id="viewerLink" data-available="{viewer_available}">👁️ Code</a>
+      <a href="//localhost:9767" class="{active_inspector}">⚙️ Configs</a>
+      <a href="//localhost:9768" class="{active_terminal}" id="terminalLink" data-available="{terminal_available}">💻 Terminal</a>
+    </nav>
+    <button class="theme-toggle" id="themeToggle" title="Toggle theme">
+      🌓
+    </button>
+    {controls}
+  </header>
+  
+  <div class="container" id="mainContainer">
+    {sidebar}
+    <main class="content">
+      {content}
+    </main>
+  </div>
+  
+  <script>
+    // Theme toggle functionality
+    (function() {{
+      const themeToggle = document.getElementById('themeToggle');
+      if (themeToggle) {{
+        themeToggle.addEventListener('click', function() {{
+          const currentTheme = document.documentElement.getAttribute('data-theme');
+          const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+          if (newTheme === 'light') {{
+            document.documentElement.setAttribute('data-theme', 'light');
+          }} else {{
+            document.documentElement.removeAttribute('data-theme');
+          }}
+          localStorage.setItem('tilt-ide-theme', newTheme);
+        }});
+      }}
+      
+      // Mobile menu toggle
+      const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+      const container = document.getElementById('mainContainer');
+      if (mobileMenuToggle && container) {{
+        mobileMenuToggle.addEventListener('click', function() {{
+          container.classList.toggle('sidebar-open');
+        }});
+      }}
+    }})();
+  </script>
+  {scripts}
+</body>
+</html>