npm - snow-flow - Versions diffs - 3.4.36 → 3.4.39 - Mend

snow-flow 3.4.36 → 3.4.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/README.md +412 -287
package/dist/cli/deploy-artifact.js +2 -2
package/dist/mcp/servicenow-deployment-mcp.js +1 -1
package/dist/mcp/servicenow-mcp-server.js +2 -2
package/dist/queen/agent-factory.js +134 -52
package/dist/queen/servicenow-queen.d.ts +127 -2
package/dist/queen/servicenow-queen.js +978 -618
package/dist/services/widget-deployment-service.d.ts +1 -1
package/dist/services/widget-deployment-service.js +1 -1
package/dist/templates/claude-md-template.d.ts +1 -1
package/dist/templates/claude-md-template.js +2 -2
package/dist/types/servicenow.types.d.ts +1 -1
package/dist/utils/dependency-detector.d.ts +1 -1
package/dist/utils/dependency-detector.js +1 -1
package/dist/utils/servicenow-client.d.ts +1 -1
package/dist/utils/servicenow-client.js +4 -8
package/package.json +1 -1
package/website/components/README.md +419 -0
package/website/components/code-display/CodeDisplay.css +583 -0
package/website/components/code-display/CodeDisplay.html +200 -0
package/website/components/code-display/CodeDisplay.js +375 -0
package/website/components/code-display/CodeDisplay.jsx +268 -0
package/website/components/demo/ComponentLibraryDemo.html +845 -0
package/website/components/feature-cards/FeatureCards.css +573 -0
package/website/components/feature-cards/FeatureCards.html +247 -0
package/website/components/feature-cards/FeatureCards.js +382 -0
package/website/components/feature-cards/FeatureCards.jsx +235 -0
package/website/components/hero/Hero.css +558 -0
package/website/components/hero/Hero.html +98 -0
package/website/components/hero/Hero.js +415 -0
package/website/components/hero/Hero.jsx +214 -0
package/website/components/interactive/InteractiveElements.css +776 -0
package/website/components/interactive/InteractiveElements.html +283 -0
package/website/components/interactive/InteractiveElements.js +489 -0
package/website/components/interactive/InteractiveElements.jsx +444 -0
package/website/components/layout/LayoutComponents.css +697 -0
package/website/components/layout/LayoutComponents.html +374 -0
package/website/components/layout/LayoutComponents.js +447 -0
package/website/components/layout/LayoutComponents.jsx +379 -0
package/website/components/navigation/Navigation.css +383 -0
package/website/components/navigation/Navigation.html +89 -0
package/website/components/navigation/Navigation.js +248 -0
package/website/components/navigation/Navigation.jsx +124 -0
package/website/css/animations.css +854 -0
package/website/css/style.css +916 -948
package/website/index.html +394 -424
package/website/js/animations.js +707 -0
package/website/js/main.js +310 -383
package/website/mcp-servers.html +310 -0

package/website/components/code-display/CodeDisplay.html ADDED Viewed

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snow-Flow Code Display Component</title>
+    <link rel="stylesheet" href="CodeDisplay.css">
+    <style>
+        body {
+            background: #f5f5f5;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            padding: 2rem;
+            margin: 0;
+        }
+        .demo-container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .demo-title {
+            text-align: center;
+            margin-bottom: 2rem;
+            color: #333;
+        }
+        .demo-section {
+            margin-bottom: 3rem;
+        }
+        .demo-section h3 {
+            margin-bottom: 1rem;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <div class="demo-container">
+        <h1 class="demo-title">Snow-Flow Code Display Components</h1>
+        <!-- Demo Section 1: JavaScript Example -->
+        <div class="demo-section">
+            <h3>JavaScript Example</h3>
+            <div class="sf-code-display" id="sf-code-display-1">
+                <div class="sf-code-display__header">
+                    <div class="sf-code-display__window-controls">
+                        <span class="sf-code-display__control sf-code-display__control--close"></span>
+                        <span class="sf-code-display__control sf-code-display__control--minimize"></span>
+                        <span class="sf-code-display__control sf-code-display__control--maximize"></span>
+                    </div>
+                    <div class="sf-code-display__title">
+                        <span class="sf-code-display__icon">{}</span>
+                        <span class="sf-code-display__filename">snow-flow-example.js</span>
+                    </div>
+                    <button class="sf-code-display__copy" data-target="code-1">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+                        </svg>
+                        <span class="sf-code-display__copy-text">Copy</span>
+                    </button>
+                </div>
+                <div class="sf-code-display__body">
+                    <div class="sf-code-display__line-numbers" id="line-numbers-1">
+                        <!-- Line numbers will be generated by JavaScript -->
+                    </div>
+                    <div class="sf-code-display__content">
+                        <pre class="sf-code-display__pre">
+                            <code class="sf-code-display__code language-javascript" id="code-1">// Welcome to Snow-Flow
+const snowFlow = new SnowFlowFramework({
+  mode: 'development',
+  verbose: true
+});
+// Execute background script
+await snow_execute_script_with_output({
+  script: `
+    var gr = new GlideRecord('incident');
+    gr.addActiveQuery();
+    gr.query();
+    var count = 0;
+    while(gr.next()) {
+      count++;
+    }
+    gs.info('Total incidents: ' + count);
+  `,
+  description: 'Count active incidents'
+});
+console.log('Snow-Flow initialized successfully!');</code>
+                        </pre>
+                    </div>
+                </div>
+                <div class="sf-code-display__cursor"></div>
+            </div>
+        </div>
+        <!-- Demo Section 2: Shell/Bash Example -->
+        <div class="demo-section">
+            <h3>Shell Script Example</h3>
+            <div class="sf-code-display" id="sf-code-display-2">
+                <div class="sf-code-display__header">
+                    <div class="sf-code-display__window-controls">
+                        <span class="sf-code-display__control sf-code-display__control--close"></span>
+                        <span class="sf-code-display__control sf-code-display__control--minimize"></span>
+                        <span class="sf-code-display__control sf-code-display__control--maximize"></span>
+                    </div>
+                    <div class="sf-code-display__title">
+                        <span class="sf-code-display__icon">$</span>
+                        <span class="sf-code-display__filename">setup-snow-flow.sh</span>
+                    </div>
+                    <button class="sf-code-display__copy" data-target="code-2">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                            <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+                        </svg>
+                        <span class="sf-code-display__copy-text">Copy</span>
+                    </button>
+                </div>
+                <div class="sf-code-display__body">
+                    <div class="sf-code-display__line-numbers" id="line-numbers-2">
+                        <!-- Line numbers will be generated by JavaScript -->
+                    </div>
+                    <div class="sf-code-display__content">
+                        <pre class="sf-code-display__pre">
+                            <code class="sf-code-display__code language-bash" id="code-2">#!/bin/bash
+# Snow-Flow Installation Script
+echo "Installing Snow-Flow..."
+# Check if Node.js is installed
+if ! command -v node &> /dev/null; then
+    echo "Node.js is required but not installed."
+    exit 1
+fi
+# Install Snow-Flow globally
+npm install -g snow-flow
+# Initialize Snow-Flow in current directory
+snow-flow init
+# Authenticate with ServiceNow
+echo "Please authenticate with your ServiceNow instance:"
+snow-flow auth login
+echo "Snow-Flow setup complete! 🎉"</code>
+                        </pre>
+                    </div>
+                </div>
+                <div class="sf-code-display__cursor"></div>
+            </div>
+        </div>
+        <!-- Demo Section 3: Simple without header -->
+        <div class="demo-section">
+            <h3>Simple Code Block (No Header)</h3>
+            <div class="sf-code-display sf-code-display--simple" id="sf-code-display-3">
+                <div class="sf-code-display__body">
+                    <div class="sf-code-display__line-numbers" id="line-numbers-3">
+                        <!-- Line numbers will be generated by JavaScript -->
+                    </div>
+                    <div class="sf-code-display__content">
+                        <pre class="sf-code-display__pre">
+                            <code class="sf-code-display__code language-javascript" id="code-3">// Quick code snippet
+const result = await snow_query_table({
+  table: 'incident',
+  query: 'state=1^priority=1',
+  fields: ['number', 'short_description'],
+  limit: 10
+});
+console.log('Found incidents:', result.length);</code>
+                        </pre>
+                    </div>
+                </div>
+                <!-- Floating copy button -->
+                <button class="sf-code-display__copy sf-code-display__copy--floating" data-target="code-3">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                        <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script src="CodeDisplay.js"></script>
+</body>
+</html>

package/website/components/code-display/CodeDisplay.js ADDED Viewed

@@ -0,0 +1,375 @@
+// Snow-Flow Code Display Component JavaScript
+class SnowFlowCodeDisplay {
+    constructor(options = {}) {
+        // Configuration
+        this.config = {
+            selector: options.selector || '.sf-code-display',
+            theme: options.theme || 'dark',
+            showLineNumbers: options.showLineNumbers !== false,
+            enableCopy: options.enableCopy !== false,
+            enableSyntaxHighlighting: options.enableSyntaxHighlighting !== false,
+            // Animation settings
+            intersectionThreshold: options.intersectionThreshold || 0.1,
+            // State
+            instances: new Map()
+        };
+        this.init();
+    }
+    init() {
+        this.findAndInitializeCodeDisplays();
+        this.setupIntersectionObserver();
+    }
+    findAndInitializeCodeDisplays() {
+        const codeDisplays = document.querySelectorAll(this.config.selector);
+        codeDisplays.forEach((element, index) => {
+            const instance = this.initializeInstance(element, index);
+            this.config.instances.set(element, instance);
+        });
+    }
+    initializeInstance(element, index) {
+        const instance = {
+            element,
+            id: `sf-code-${index}`,
+            codeElement: element.querySelector('.sf-code-display__code'),
+            lineNumbersElement: element.querySelector('.sf-code-display__line-numbers'),
+            copyButtons: element.querySelectorAll('.sf-code-display__copy'),
+            isVisible: false
+        };
+        // Setup line numbers
+        if (this.config.showLineNumbers && instance.codeElement && instance.lineNumbersElement) {
+            this.generateLineNumbers(instance);
+        }
+        // Setup copy functionality
+        if (this.config.enableCopy) {
+            this.setupCopyButtons(instance);
+        }
+        // Apply syntax highlighting
+        if (this.config.enableSyntaxHighlighting && instance.codeElement) {
+            this.applySyntaxHighlighting(instance);
+        }
+        return instance;
+    }
+    generateLineNumbers(instance) {
+        const code = instance.codeElement.textContent || instance.codeElement.innerText;
+        const lines = code.split('\n');
+        const lineCount = lines.length;
+        // Clear existing line numbers
+        instance.lineNumbersElement.innerHTML = '';
+        // Generate line numbers
+        for (let i = 1; i <= lineCount; i++) {
+            const lineNumber = document.createElement('span');
+            lineNumber.className = 'sf-code-display__line-number';
+            lineNumber.textContent = i;
+            instance.lineNumbersElement.appendChild(lineNumber);
+        }
+    }
+    setupCopyButtons(instance) {
+        instance.copyButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                this.handleCopyClick(e, instance);
+            });
+        });
+    }
+    async handleCopyClick(e, instance) {
+        e.preventDefault();
+        const button = e.currentTarget;
+        const targetId = button.getAttribute('data-target');
+        let codeElement = instance.codeElement;
+        if (targetId) {
+            codeElement = document.getElementById(targetId);
+        }
+        if (!codeElement) return;
+        const code = codeElement.textContent || codeElement.innerText;
+        try {
+            await this.copyToClipboard(code);
+            this.showCopySuccess(button, instance);
+        } catch (err) {
+            console.error('Failed to copy code:', err);
+            this.showCopyError(button);
+        }
+    }
+    async copyToClipboard(text) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(text);
+        } else {
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            textArea.style.cssText = 'position:fixed;top:-999px;left:-999px;';
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        }
+    }
+    showCopySuccess(button, instance) {
+        // Update button state
+        const originalContent = button.innerHTML;
+        button.classList.add('sf-code-display__copy--copied');
+        // Update icon and text
+        const icon = button.querySelector('svg');
+        const text = button.querySelector('.sf-code-display__copy-text');
+        if (icon) {
+            icon.innerHTML = '<path d="M20 6L9 17L4 12"/>';
+        }
+        if (text) {
+            text.textContent = 'Copied!';
+        }
+        // Show feedback overlay
+        this.showCopyFeedback(instance);
+        // Reset button after 2 seconds
+        setTimeout(() => {
+            button.classList.remove('sf-code-display__copy--copied');
+            button.innerHTML = originalContent;
+        }, 2000);
+    }
+    showCopyError(button) {
+        // Simple error indication
+        button.style.background = 'rgba(255, 59, 48, 0.2)';
+        button.style.borderColor = '#ff3b30';
+        button.style.color = '#ff3b30';
+        setTimeout(() => {
+            button.style.background = '';
+            button.style.borderColor = '';
+            button.style.color = '';
+        }, 2000);
+    }
+    showCopyFeedback(instance) {
+        // Create feedback element
+        const feedback = document.createElement('div');
+        feedback.className = 'sf-code-display__copy-feedback';
+        feedback.innerHTML = `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M20 6L9 17L4 12"/>
+            </svg>
+            Copied to clipboard!
+        `;
+        instance.element.appendChild(feedback);
+        // Remove after animation
+        setTimeout(() => {
+            if (feedback.parentNode) {
+                feedback.parentNode.removeChild(feedback);
+            }
+        }, 2000);
+    }
+    applySyntaxHighlighting(instance) {
+        const codeElement = instance.codeElement;
+        let code = codeElement.textContent || codeElement.innerText;
+        // Get language from class
+        const classList = Array.from(codeElement.classList);
+        const languageClass = classList.find(cls => cls.startsWith('language-'));
+        const language = languageClass ? languageClass.replace('language-', '') : 'javascript';
+        // Apply highlighting based on language
+        const highlightedCode = this.highlightCode(code, language);
+        codeElement.innerHTML = highlightedCode;
+    }
+    highlightCode(code, language) {
+        // Define patterns for different languages
+        const patterns = this.getLanguagePatterns(language);
+        let highlightedCode = code;
+        // Apply patterns in sequence
+        patterns.forEach(({ pattern, replacement, className }) => {
+            highlightedCode = highlightedCode.replace(pattern, replacement);
+        });
+        return highlightedCode;
+    }
+    getLanguagePatterns(language) {
+        const basePatterns = [
+            // Comments
+            {
+                pattern: /(\/\/.*$|\/\*[\s\S]*?\*\/|#.*$)/gm,
+                replacement: '<span class="sf-code-comment">$1</span>'
+            },
+            // Strings
+            {
+                pattern: /(['"`])((?:\\.|(?!\1)[^\\\r\n])*?)\1/g,
+                replacement: '<span class="sf-code-string">$1$2$1</span>'
+            },
+            // Numbers
+            {
+                pattern: /\b(\d+\.?\d*)\b/g,
+                replacement: '<span class="sf-code-number">$1</span>'
+            }
+        ];
+        const languageSpecificPatterns = {
+            javascript: [
+                {
+                    pattern: /\b(async|await|const|let|var|function|return|if|else|for|while|try|catch|finally|class|extends|import|export|from|default|typeof|instanceof|new|this|super|static|public|private|protected)\b/g,
+                    replacement: '<span class="sf-code-keyword">$1</span>'
+                },
+                {
+                    pattern: /\b([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?=\()/g,
+                    replacement: '<span class="sf-code-function">$1</span>'
+                },
+                {
+                    pattern: /\.([a-zA-Z_$][a-zA-Z0-9_$]*)\b/g,
+                    replacement: '.<span class="sf-code-property">$1</span>'
+                }
+            ],
+            bash: [
+                {
+                    pattern: /\b(if|then|else|elif|fi|for|while|do|done|case|esac|function|return|local|export|alias|source|echo|cd|ls|cp|mv|rm|mkdir|chmod|chown|grep|awk|sed|sort|uniq|head|tail|cat|more|less)\b/g,
+                    replacement: '<span class="sf-code-keyword">$1</span>'
+                },
+                {
+                    pattern: /(\$[a-zA-Z_][a-zA-Z0-9_]*|\$\{[^}]*\})/g,
+                    replacement: '<span class="sf-code-property">$1</span>'
+                }
+            ],
+            python: [
+                {
+                    pattern: /\b(and|as|assert|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield|async|await)\b/g,
+                    replacement: '<span class="sf-code-keyword">$1</span>'
+                },
+                {
+                    pattern: /\b([a-zA-Z_][a-zA-Z0-9_]*)\s*(?=\()/g,
+                    replacement: '<span class="sf-code-function">$1</span>'
+                }
+            ]
+        };
+        // Operators (common to all languages)
+        const operatorPattern = {
+            pattern: /(\+|\-|\*|\/|%|=|==|===|!=|!==|<|>|<=|>=|&&|\|\||!|\?|:|&|\||\^|~|<<|>>)/g,
+            replacement: '<span class="sf-code-operator">$1</span>'
+        };
+        return [
+            ...basePatterns,
+            ...(languageSpecificPatterns[language] || languageSpecificPatterns.javascript),
+            operatorPattern
+        ];
+    }
+    setupIntersectionObserver() {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach(entry => {
+                    const instance = this.config.instances.get(entry.target);
+                    if (instance && entry.isIntersecting && !instance.isVisible) {
+                        instance.isVisible = true;
+                        entry.target.classList.add('sf-code-display--visible');
+                    }
+                });
+            },
+            { threshold: this.config.intersectionThreshold }
+        );
+        this.config.instances.forEach((instance) => {
+            observer.observe(instance.element);
+        });
+    }
+    // Public API methods
+    addCodeDisplay(element) {
+        const index = this.config.instances.size;
+        const instance = this.initializeInstance(element, index);
+        this.config.instances.set(element, instance);
+        // Setup intersection observer for the new element
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting && !instance.isVisible) {
+                    instance.isVisible = true;
+                    entry.target.classList.add('sf-code-display--visible');
+                }
+            },
+            { threshold: this.config.intersectionThreshold }
+        );
+        observer.observe(element);
+    }
+    updateCode(element, newCode) {
+        const instance = this.config.instances.get(element);
+        if (!instance || !instance.codeElement) return;
+        instance.codeElement.textContent = newCode;
+        // Re-apply highlighting and line numbers
+        if (this.config.enableSyntaxHighlighting) {
+            this.applySyntaxHighlighting(instance);
+        }
+        if (this.config.showLineNumbers) {
+            this.generateLineNumbers(instance);
+        }
+    }
+    setTheme(theme) {
+        this.config.theme = theme;
+        this.config.instances.forEach((instance) => {
+            if (theme === 'light') {
+                instance.element.classList.add('sf-code-display--light');
+            } else {
+                instance.element.classList.remove('sf-code-display--light');
+            }
+        });
+    }
+    destroy() {
+        // Cleanup method
+        this.config.instances.clear();
+    }
+}
+// Auto-initialize on DOM content loaded
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if code displays exist before initializing
+    const codeDisplays = document.querySelectorAll('.sf-code-display');
+    if (codeDisplays.length > 0) {
+        window.snowFlowCodeDisplay = new SnowFlowCodeDisplay();
+    }
+});
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = SnowFlowCodeDisplay;
+}
+// Global access
+window.SnowFlowCodeDisplay = SnowFlowCodeDisplay;