2.0.2

Author: SuperBox64

.DS_Store

@@ -1,16 +1,32 @@
 # MultiLineDiff
 
 [![Swift 6.1](https://img.shields.io/badge/Swift-6.1-orange.svg)](https://swift.org)
-[![Website](https://img.shields.io/badge/website-xcf.ai-blue.svg)](https://xcf.ai)
-[![Version](https://img.shields.io/badge/version-2.0.1-green.svg)](https://github.com/toddbruss/swift-multi-line-diff)
+[![Website](https://img.shields.io/badge/website-d1f.ai-blue.svg)](https://d1f.ai)
+[![Live Demo](https://img.shields.io/badge/demo-interactive-green.svg)](https://d1f.ai#demo)
+[![Version](https://img.shields.io/badge/version-2.0.1-green.svg)](https://github.com/codefreezeai/swift-multi-line-diff)
 [![GitHub stars](https://img.shields.io/github/stars/codefreezeai/swift-multi-line-diff.svg?style=social)](https://github.com/codefreezeai/swift-multi-line-diff/stargazers)
 [![GitHub forks](https://img.shields.io/github/forks/codefreezeai/swift-multi-line-diff.svg?style=social)](https://github.com/codefreezeai/swift-multi-line-diff/network)
 
 # Swift MultiLineDiff Package Usage Guide
 
+## 🌐 Interactive Demo
+
+**🚀 Try the Live Demo**: [d1f.ai](https://d1f.ai)
+
+Experience the power of MultiLineDiff algorithms in real-time with our interactive JavaScript implementation:
+
+- **⚡ Flash Algorithm**: Lightning-fast prefix/suffix detection (14.5ms)
+- **🤖 Optimus Algorithm**: Line-aware CollectionDifference processing (43.7ms)  
+- **🧠 Megatron Algorithm**: Semantic analysis with balanced performance (47.8ms)
+- **🌟 Starscream Algorithm**: Swift-native line processing (45.1ms)
+- **🔍 Zoom Algorithm**: Simple character-based diffing (23.9ms)
+
+**Real-time Performance Monitoring**: Watch actual algorithm execution times as you type!
+
 ## 📦 Package Information
 
 **Repository**: [CodeFreezeAI/swift-multi-line-diff](https://github.com/CodeFreezeAI/swift-multi-line-diff.git)  
+**Website**: [d1f.ai](https://d1f.ai) - Interactive Demo & Documentation  
 **License**: MIT  
 **Language**: Swift 100%  
 **Latest Release**: v2.0.1 (May 26, 2025)  
@@ -525,12 +541,15 @@ This Swift library enables creating and applying diffs to multi-line text conten
 
 ## 🌟 Key Features
 
+- **🌐 Interactive Website Demo**: [d1f.ai](https://d1f.ai) with real JavaScript algorithms
+- **⚡ Five Powerful Algorithms**: Flash, Optimus, Megatron, Starscream, Zoom
+- **🎯 Real-time Performance**: Live timing display showing actual execution speeds
 - Create diffs between two strings
 - Apply diffs to transform source text
 - Handle multi-line content properly
 - Support for Unicode/UTF-8 strings
-- Multiple diff formats (JSON, Base64)
-- Two superior diff algorithms (Flash and Optimus)
+- Multiple diff formats (JSON, Base64, ASCII)
+- **🤖 AI-Native ASCII Format**: Perfect for LLM integration
 - **Automatic algorithm fallback with verification** 🛡️
 - **Auto-detection of truncated vs full source** 🤖
 - **Intelligent application without manual parameters** 🧠

README.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SuperBox64
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

website/LICENSE

@@ -599,9 +599,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--space-lg);
+    padding: var(--space-md) var(--space-lg);
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-primary);
+}
+
+.demo-output .panel-header {
     background: var(--bg-tertiary);
     border-bottom: 1px solid var(--border-primary);
+    padding: var(--space-md) var(--space-lg);
 }
 
 .panel-header h4 {
@@ -613,13 +619,13 @@
 .demo-textarea {
     flex: 1;
     min-height: 300px;
-    padding: var(--space-lg);
+    padding: var(--space-md);
     background: var(--bg-code);
     border: none;
     color: var(--text-primary);
     font-family: var(--font-mono);
-    font-size: 0.875rem;
-    line-height: 1.6;
+    font-size: 0.7rem;
+    line-height: 1.4;
     resize: none;
     outline: none;
 }
@@ -634,14 +640,52 @@
 
 .demo-output-content {
     flex: 1;
-    min-height: 300px;
-    padding: var(--space-lg);
+    padding: var(--space-md);
+    margin-top: 0;
     background: var(--bg-code);
     font-family: var(--font-mono);
-    font-size: 0.875rem;
-    line-height: 1.6;
+    font-size: 0.7rem;
+    line-height: 1.4;
     overflow-x: auto;
     white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-all;
+    display: flex;
+    flex-direction: column;
+}
+
+.demo-output-content pre {
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    overflow-x: auto;
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+}
+
+.demo-output-content pre code {
+    padding: 0 !important;
+    margin: 0 !important;
+    background: transparent !important;
+}
+
+/* Base64 output specific styling with text wrapping */
+.demo-output-content .base64-output {
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    word-break: break-all !important;
+    overflow-wrap: break-word !important;
+}
+
+.demo-output-content .base64-output code {
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    word-break: break-all !important;
+    overflow-wrap: break-word !important;
+    font-family: var(--font-mono);
+    line-height: 1.5;
 }
 
 .placeholder {
@@ -650,6 +694,7 @@
     align-items: center;
     justify-content: center;
     height: 100%;
+    min-height: 300px;
     color: var(--text-muted);
     text-align: center;
 }
@@ -661,12 +706,32 @@
 }
 
 .output-stats {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--space-md);
+    display: flex;
+    justify-content: center;
     font-size: 0.75rem;
 }
 
+.stats-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: var(--space-sm);
+    align-items: center;
+    justify-items: center;
+    width: 360px;
+    grid-template-areas: 
+        "button algorithm timing"
+        "accuracy format ops";
+}
+
+.diff-button { grid-area: button; }
+.algorithm-badge { grid-area: algorithm; }
+.timing-badge { grid-area: timing; }
+.success-badge { grid-area: accuracy; }
+.error-badge { grid-area: accuracy; }
+.format-badge { grid-area: format; }
+.ops-badge { grid-area: ops; }
+
 .output-stats .stat-badge {
     padding: var(--space-sm) var(--space-md);
     background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
@@ -678,6 +743,16 @@
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow-sm);
+    min-width: 110px;
+    width: 110px;
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .output-stats .stat-badge::before {
@@ -1174,24 +1249,38 @@
 /* AI Format - Uses Prism.js Swift syntax highlighting */
 /* No additional styling needed - Prism.js handles everything */
 
-/* Terminal Colors Format - Pure terminal colors with fade backgrounds */
-.terminal-colors {
-    color: var(--text-primary) !important; /* Default white text */
+
+
+/* Real-time diff output styling */
+.demo-output-content .ascii-diff {
+    font-family: var(--font-mono);
+    line-height: 1.6;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
-.terminal-colors .retain {
-    color: #60a5fa !important; /* Blue for terminal */
-    background: rgba(96, 165, 250, 0.1) !important; /* Subtle blue background */
+.demo-output-content .ascii-diff .retain {
+    color: #60a5fa;
+    background: rgba(96, 165, 250, 0.1);
+    display: block;
+    padding: 1px 4px;
+    margin: 1px 0;
 }
 
-.terminal-colors .delete {
-    color: #ef4444 !important; /* Red for terminal */
-    background: rgba(239, 68, 68, 0.1) !important; /* Subtle red background */
+.demo-output-content .ascii-diff .delete {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+    display: block;
+    padding: 1px 4px;
+    margin: 1px 0;
 }
 
-.terminal-colors .insert {
-    color: #10b981 !important; /* Green for terminal */
-    background: rgba(16, 185, 129, 0.1) !important; /* Subtle green background */
+.demo-output-content .ascii-diff .insert {
+    color: #10b981;
+    background: rgba(16, 185, 129, 0.1);
+    display: block;
+    padding: 1px 4px;
+    margin: 1px 0;
 }
 
 /* Loading States */

website/css/components.css

@@ -194,9 +194,11 @@ a:hover {
 }
 
 .btn-small {
-    padding: var(--space-sm) var(--space-md);
+    padding: var(--space-sm) var(--space-sm);
     font-size: 0.875rem;
     border-radius: var(--radius-md);
+    min-width: auto;
+    white-space: nowrap;
 }
 
 /* Navigation */