@banastechnologie/antcloud-sdk 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 BanasTechnologie
+
+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.

package/README.md

@@ -0,0 +1,213 @@
+# 🐜 AntCloud SDK
+
+**Robust WebAssembly module loading with caching and dynamic UI binding.**
+
+[![npm version](https://img.shields.io/npm/v/@banastechnologie/antcloud-sdk.svg)](https://www.npmjs.com/package/@banastechnologie/antcloud-sdk)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Quick Start
+
+```html
+<!-- Include SDK from CDN -->
+<script type="module" src="https://cdn.jsdelivr.net/gh/yannbanas/antcloud-sdk@main/ant-module.js"></script>
+
+<!-- Use the component -->
+<ant-module name="fibonacci"></ant-module>
+```
+
+**That's it!** The SDK automatically:
+- Fetches package info from registry
+- Caches WASM in IndexedDB (downloads only on new version)
+- Loads UI template
+- Binds all events
+- Executes WASM functions
+
+## CDN Links
+
+```html
+<!-- jsDelivr (recommended) -->
+<script type="module" src="https://cdn.jsdelivr.net/gh/yannbanas/antcloud-sdk@main/ant-module.js"></script>
+
+<!-- With specific version tag -->
+<script type="module" src="https://cdn.jsdelivr.net/gh/yannbanas/antcloud-sdk@v2.0.0/ant-module.js"></script>
+
+<!-- unpkg (after npm publish) -->
+<script type="module" src="https://unpkg.com/@banastechnologie/antcloud-sdk"></script>
+```
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| 📦 **IndexedDB Cache** | WASM downloaded only once per version |
+| ⚡ **Fast Reload** | Cached modules load instantly |
+| 🎨 **Dynamic UI** | Binds to `data-ant-*` attributes automatically |
+| 🔄 **Version Check** | Always uses latest version from registry |
+| 🔌 **Clean API** | Simple programmatic control |
+
+## How Caching Works
+
+```
+First visit:
+  └─► Fetch package info (check version)
+  └─► No cache → Download WASM → Store in IndexedDB
+  └─► Load UI → Render → Ready!
+
+Return visit (same version):
+  └─► Fetch package info → v1.2.0
+  └─► Cache exists with v1.2.0 → Use cached WASM ✅
+  └─► No download needed!
+
+After new version published:
+  └─► Fetch package info → v1.3.0 (new!)
+  └─► Cache has v1.2.0 → Download v1.3.0
+  └─► Update cache → Ready!
+```
+
+## Attributes
+
+| Attribute | Description | Default |
+|-----------|-------------|---------|
+| `name` | Package name (required) | - |
+| `registry` | Registry URL | `https://antcloud-registry.up.railway.app` |
+| `no-cache` | Disable caching (for development) | - |
+
+```html
+<!-- Basic usage -->
+<ant-module name="fibonacci"></ant-module>
+
+<!-- Custom registry -->
+<ant-module name="my-package" registry="https://my-registry.com"></ant-module>
+
+<!-- Disable cache (dev mode) -->
+<ant-module name="fibonacci" no-cache></ant-module>
+```
+
+## UI Template Attributes
+
+The SDK binds these `data-ant-*` attributes in your UI template:
+
+| Attribute | Description |
+|-----------|-------------|
+| `data-ant-function="name"` | Function selector (tab/button) |
+| `data-ant-inputs="name"` | Input group for a function |
+| `data-ant-input="n"` | Input field |
+| `data-ant-type="i32\|i64\|f32\|f64"` | Input type for conversion |
+| `data-ant-display="n"` | Display value (for sliders) |
+| `data-ant-execute` | Execute button |
+| `data-ant-output` | Result container |
+| `data-ant-value` | Result value |
+| `data-ant-time` | Execution time |
+| `data-ant-expr` | Expression called |
+| `data-ant-status-dot` | Status indicator |
+| `data-ant-status-text` | Status text |
+| `data-ant-true-label` | Label for true (bool functions) |
+| `data-ant-false-label` | Label for false (bool functions) |
+
+## Template Variables
+
+Use these in your UI HTML:
+
+```html
+{{name}}        → Package name
+{{version}}     → Latest version
+{{author}}      → Package author
+{{description}} → Package description
+{{license}}     → Package license
+{{downloads}}   → Download count
+{{stars}}       → Star count
+```
+
+## JavaScript API
+
+```javascript
+const module = document.querySelector('ant-module');
+
+// Wait for ready
+module.addEventListener('ant-ready', (e) => {
+  console.log(e.detail.name, e.detail.version, e.detail.functions);
+});
+
+// Listen for results
+module.addEventListener('ant-result', (e) => {
+  console.log(e.detail.function, e.detail.result, e.detail.time);
+});
+
+// Listen for errors
+module.addEventListener('ant-error', (e) => {
+  console.error(e.detail.error);
+});
+
+// Programmatic control
+module.setValues({ n: 42 });
+module.getValues();              // { n: "42" }
+module.setFunction('is_fibonacci');
+module.getFunction();            // "is_fibonacci"
+module.getFunctions();           // ["fibonacci", "is_fibonacci", ...]
+
+// Execute and get result
+const result = await module.invoke('fibonacci', { n: 50 });
+
+// Clear cache (force re-download)
+await module.clearCache();
+```
+
+## Publishing Packages
+
+Create a WASM module with UI and publish to AntHive registry:
+
+```bash
+# Publish package with UI
+curl -X POST https://antcloud-registry.up.railway.app/api/v1/packages \
+  -H "Authorization: Bearer YOUR_API_KEY" \
+  -F "manifest=@anthive.yaml" \
+  -F "wasm=@my-function.wasm" \
+  -F "ui=@ui.html"
+```
+
+### Example UI Template
+
+Your `ui.html` should be **HTML/CSS only** (no JavaScript). The SDK handles all logic:
+
+```html
+<style>
+  :host { display: block; font-family: system-ui; }
+  /* ... your styles ... */
+</style>
+
+<div class="card">
+  <h2>{{name}}</h2>
+  <p>{{description}}</p>
+  
+  <!-- Function tabs -->
+  <div class="tabs">
+    <button data-ant-function="calculate">calculate()</button>
+    <button data-ant-function="check">check()</button>
+  </div>
+  
+  <!-- Inputs -->
+  <div data-ant-inputs="calculate">
+    <input type="range" data-ant-input="n" data-ant-type="i32" min="0" max="100" value="10">
+    <span data-ant-display="n">10</span>
+  </div>
+  
+  <!-- Execute -->
+  <button data-ant-execute>▶ Execute</button>
+  
+  <!-- Result -->
+  <div data-ant-output>
+    <span data-ant-value></span>
+    <span data-ant-time></span>
+  </div>
+</div>
+```
+
+## Registry
+
+Default registry: [antcloud-registry.up.railway.app](https://antcloud-registry.up.railway.app)
+
+Browse available packages and documentation at the registry homepage.
+
+## License
+
+MIT © [BanasTechnologie](https://github.com/yannbanas)

package/ant-module.js

@@ -0,0 +1,997 @@
+/**
+ * 🐜 AntCloud SDK v2.0
+ * 
+ * Robust WebComponent for WASM modules with:
+ * - IndexedDB caching (downloads only on new version)
+ * - Dynamic UI binding via data-ant-* attributes
+ * - Full manifest/exports support
+ * 
+ * Architecture:
+ * - Registry = source of truth (manifest, WASM, UI)
+ * - SDK = engine (cache, binding, execution)
+ * - UI = presentation only (HTML/CSS + data-ant-*)
+ * 
+ * @author BanasTechnologie
+ * @license MIT
+ */
+
+const DEFAULT_REGISTRY = 'https://antcloud-registry.up.railway.app';
+const CACHE_DB_NAME = 'antcloud-cache';
+const CACHE_DB_VERSION = 1;
+
+class AntModule extends HTMLElement {
+  static get observedAttributes() {
+    return ['name', 'registry', 'runtime', 'no-cache'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    
+    this._packageInfo = null;
+    this._wasmModule = null;      // Compiled WebAssembly.Module
+    this._wasmInstance = null;    // WebAssembly.Instance
+    this._selectedFunction = null;
+    this._values = {};
+    this._state = 'loading';
+    this._db = null;
+  }
+
+  connectedCallback() {
+    this._showLoading();
+    this._init();
+  }
+
+  get name() { return this.getAttribute('name'); }
+  get registry() { return this.getAttribute('registry') || DEFAULT_REGISTRY; }
+  get noCache() { return this.hasAttribute('no-cache'); }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 🗄️ INDEXEDDB CACHE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  async _openDB() {
+    if (this._db) return this._db;
+    
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(CACHE_DB_NAME, CACHE_DB_VERSION);
+      
+      request.onerror = () => reject(request.error);
+      
+      request.onsuccess = () => {
+        this._db = request.result;
+        resolve(this._db);
+      };
+      
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        
+        // Store for WASM modules
+        if (!db.objectStoreNames.contains('modules')) {
+          const store = db.createObjectStore('modules', { keyPath: 'name' });
+          store.createIndex('version', 'version', { unique: false });
+        }
+        
+        // Store for UI templates
+        if (!db.objectStoreNames.contains('ui')) {
+          db.createObjectStore('ui', { keyPath: 'name' });
+        }
+        
+        // Store for package info
+        if (!db.objectStoreNames.contains('packages')) {
+          db.createObjectStore('packages', { keyPath: 'name' });
+        }
+      };
+    });
+  }
+
+  async _getCached(storeName, key) {
+    try {
+      const db = await this._openDB();
+      return new Promise((resolve, reject) => {
+        const tx = db.transaction(storeName, 'readonly');
+        const store = tx.objectStore(storeName);
+        const request = store.get(key);
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+      });
+    } catch (e) {
+      console.warn('🐜 Cache read failed:', e);
+      return null;
+    }
+  }
+
+  async _setCache(storeName, data) {
+    try {
+      const db = await this._openDB();
+      return new Promise((resolve, reject) => {
+        const tx = db.transaction(storeName, 'readwrite');
+        const store = tx.objectStore(storeName);
+        const request = store.put(data);
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(request.error);
+      });
+    } catch (e) {
+      console.warn('🐜 Cache write failed:', e);
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 📦 LOADING WITH CACHE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  async _init() {
+    try {
+      console.log(`🐜 Loading module: ${this.name}`);
+      
+      // 1. Get package info (always fetch to check version)
+      this._packageInfo = await this._fetchPackageInfo();
+      const latestVersion = this._packageInfo.latest_version;
+      console.log(`🐜 Registry version: ${latestVersion}`);
+      
+      // 2. Check cache for WASM
+      const cached = await this._getCached('modules', this.name);
+      
+      if (!this.noCache && cached && cached.version === latestVersion && cached.wasmBytes) {
+        // Use cached WASM
+        console.log(`🐜 Using cached WASM v${cached.version}`);
+        await this._instantiateWasm(cached.wasmBytes);
+      } else {
+        // Download new version
+        if (this.noCache) console.log(`🐜 Cache disabled, downloading fresh...`);
+        console.log(`🐜 Downloading WASM v${latestVersion}...`);
+        const wasmBytes = await this._downloadWasm(latestVersion);
+        await this._instantiateWasm(wasmBytes);
+        
+        // Cache it (unless no-cache)
+        if (!this.noCache) {
+          await this._setCache('modules', {
+            name: this.name,
+            version: latestVersion,
+            wasmBytes: wasmBytes,
+            cachedAt: Date.now()
+          });
+          console.log(`🐜 WASM cached`);
+        }
+      }
+      
+      // 3. Load UI (with cache)
+      const uiHtml = await this._loadUI(latestVersion);
+      
+      // 4. Render UI
+      this._renderUI(uiHtml);
+      
+      // 5. Init and bind
+      this._initFromManifest();
+      this._bindEvents();
+      
+      this._state = 'ready';
+      this._updateStatus('ready');
+      
+      console.log(`🐜 Ready! Functions: ${this.getFunctions().join(', ')}`);
+      
+      this.dispatchEvent(new CustomEvent('ant-ready', {
+        detail: { 
+          name: this.name, 
+          version: latestVersion,
+          functions: this.getFunctions()
+        }
+      }));
+      
+    } catch (err) {
+      console.error('🐜 Error:', err);
+      this._showError(err.message);
+    }
+  }
+
+  async _fetchPackageInfo() {
+    const url = `${this.registry}/api/v1/packages/${this.name}`;
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Package not found: ${this.name}`);
+    return res.json();
+  }
+
+  async _downloadWasm(version) {
+    const url = `${this.registry}/api/v1/packages/${this.name}/${version}/download`;
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`WASM download failed (${res.status})`);
+    return new Uint8Array(await res.arrayBuffer());
+  }
+
+  async _instantiateWasm(bytes) {
+    this._wasmModule = await WebAssembly.compile(bytes);
+    this._wasmInstance = await WebAssembly.instantiate(this._wasmModule, {
+      env: { abort: () => console.warn('WASM abort called') }
+    });
+  }
+
+  async _loadUI(version) {
+    // Check cache - but also check if it's not too old (max 1 hour for UI)
+    const cached = await this._getCached('ui', this.name);
+    const cacheMaxAge = 60 * 60 * 1000; // 1 hour
+    const isCacheValid = !this.noCache
+      && cached 
+      && cached.version === version 
+      && cached.cachedAt 
+      && (Date.now() - cached.cachedAt) < cacheMaxAge;
+    
+    if (isCacheValid) {
+      console.log(`🐜 Using cached UI`);
+      return cached.html;
+    }
+    
+    // Fetch from registry
+    let html = null;
+    try {
+      const res = await fetch(`${this.registry}/api/v1/packages/${this.name}/${version}/ui`);
+      if (res.ok) {
+        html = await res.text();
+        console.log(`🐜 UI loaded from registry`);
+      }
+    } catch (e) {}
+    
+    // Fallback to latest
+    if (!html) {
+      try {
+        const res = await fetch(`${this.registry}/api/v1/packages/${this.name}/ui`);
+        if (res.ok) {
+          html = await res.text();
+          console.log(`🐜 UI loaded from registry (latest)`);
+        }
+      } catch (e) {}
+    }
+    
+    // Fallback local
+    if (!html) {
+      try {
+        const res = await fetch(`./modules/${this.name}/ui.html`);
+        if (res.ok) {
+          html = await res.text();
+          console.log(`🐜 UI loaded from local`);
+        }
+      } catch (e) {}
+    }
+    
+    // Generate default if nothing found
+    if (!html) {
+      console.log(`🐜 Generating default UI`);
+      html = this._generateDefaultUI();
+    }
+    
+    // Cache UI (unless no-cache)
+    if (!this.noCache) {
+      await this._setCache('ui', {
+        name: this.name,
+        version: version,
+        html: html,
+        cachedAt: Date.now()
+      });
+    }
+    
+    return html;
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 🎨 RENDERING
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  _renderUI(html) {
+    const pkg = this._packageInfo;
+    
+    // Replace template variables
+    let rendered = html
+      .replace(/\{\{name\}\}/g, pkg?.name || this.name)
+      .replace(/\{\{version\}\}/g, pkg?.latest_version || '1.0.0')
+      .replace(/\{\{author\}\}/g, pkg?.author || 'unknown')
+      .replace(/\{\{description\}\}/g, pkg?.description || '')
+      .replace(/\{\{license\}\}/g, pkg?.license || 'MIT')
+      .replace(/\{\{downloads\}\}/g, pkg?.downloads || 0)
+      .replace(/\{\{stars\}\}/g, pkg?.stars || 0);
+    
+    // Remove any <script> tags - SDK handles all logic
+    rendered = rendered.replace(/<script[\s\S]*?<\/script>/gi, '');
+    
+    this.shadowRoot.innerHTML = rendered;
+  }
+
+  _showLoading() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; font-family: system-ui, sans-serif; }
+        .loading { padding: 40px; text-align: center; background: #111; border-radius: 12px; border: 1px solid rgba(245,158,11,0.2); }
+        .loading .icon { font-size: 48px; margin-bottom: 16px; animation: pulse 1.5s ease infinite; }
+        .loading .text { color: #888; }
+        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+      </style>
+      <div class="loading">
+        <div class="icon">🐜</div>
+        <div class="text">Loading ${this.name}...</div>
+      </div>
+    `;
+  }
+
+  _showError(message) {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; font-family: system-ui, sans-serif; }
+        .error { padding: 40px; text-align: center; background: #111; border-radius: 12px; border: 1px solid rgba(239,68,68,0.3); }
+        .error .icon { font-size: 48px; margin-bottom: 16px; }
+        .error .msg { color: #ef4444; margin-bottom: 16px; }
+        .error button { padding: 10px 20px; background: transparent; border: 1px solid rgba(245,158,11,0.3); border-radius: 8px; color: #e5e5e5; cursor: pointer; }
+        .error button:hover { background: rgba(245,158,11,0.1); }
+      </style>
+      <div class="error">
+        <div class="icon">⚠️</div>
+        <div class="msg">${message}</div>
+        <button onclick="this.getRootNode().host._init()">Retry</button>
+      </div>
+    `;
+  }
+
+  _generateDefaultUI() {
+    const pkg = this._packageInfo;
+    const funcs = this.getFunctions();
+    const version = pkg?.versions?.find(v => v.version === pkg.latest_version);
+    const exports = version?.exports || [];
+    
+    // Generate function tabs
+    const tabs = funcs.map((f, i) => {
+      const exp = exports.find(e => e.name === f);
+      const label = exp?.signature ? `${f}${exp.signature.split('->')[0].trim()}` : `${f}()`;
+      return `<button class="tab ${i === 0 ? 'active' : ''}" data-ant-function="${f}">${label}</button>`;
+    }).join('');
+    
+    // Generate input groups for each function
+    const inputGroups = funcs.map((f, i) => {
+      const exp = exports.find(e => e.name === f);
+      const params = this._parseSignature(exp?.signature);
+      
+      const inputs = params.map(p => `
+        <div class="field">
+          <label class="label">${p.name} <span class="type">${p.type}</span></label>
+          ${p.type === 'i64' || p.type === 'u64' 
+            ? `<input type="number" class="input" data-ant-input="${p.name}" data-ant-type="${p.type}" value="10">`
+            : `<div class="slider-row">
+                <input type="range" class="slider" data-ant-input="${p.name}" data-ant-type="${p.type}" min="0" max="92" value="10">
+                <span class="value-display" data-ant-display="${p.name}">10</span>
+              </div>`
+          }
+        </div>
+      `).join('');
+      
+      return `<div class="input-group ${i === 0 ? '' : 'hidden'}" data-ant-inputs="${f}">${inputs || '<p class="no-params">No parameters</p>'}</div>`;
+    }).join('');
+
+    return `
+      <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+        
+        :host {
+          --primary: #F59E0B;
+          --primary-dark: #D97706;
+          --bg: #0a0a0a;
+          --surface: #111;
+          --text: #e5e5e5;
+          --text-muted: #888;
+          --success: #22c55e;
+          --error: #ef4444;
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+        
+        .card {
+          background: linear-gradient(145deg, var(--surface), var(--bg));
+          border: 1px solid rgba(245,158,11,0.15);
+          border-radius: 16px;
+          overflow: hidden;
+        }
+        
+        .card::before {
+          content: '';
+          display: block;
+          height: 2px;
+          background: linear-gradient(90deg, transparent, var(--primary), transparent);
+        }
+        
+        .header {
+          padding: 20px;
+          background: rgba(0,0,0,0.3);
+          display: flex;
+          align-items: center;
+          gap: 16px;
+        }
+        
+        .logo {
+          width: 52px;
+          height: 52px;
+          background: linear-gradient(135deg, var(--primary-dark), var(--primary));
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 26px;
+          box-shadow: 0 4px 16px rgba(245,158,11,0.25);
+        }
+        
+        .info { flex: 1; }
+        .title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
+        .desc { font-size: 13px; color: var(--text-muted); margin: 0; }
+        
+        .badges { display: flex; gap: 8px; margin-top: 8px; }
+        .badge {
+          padding: 4px 10px;
+          background: rgba(245,158,11,0.1);
+          border-radius: 6px;
+          font-size: 11px;
+          font-family: 'JetBrains Mono', monospace;
+          color: var(--primary);
+        }
+        
+        .status {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 12px;
+          color: var(--text-muted);
+        }
+        
+        .status-dot {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background: var(--text-muted);
+        }
+        .status-dot.ready { background: var(--success); box-shadow: 0 0 8px var(--success); }
+        .status-dot.executing { background: var(--primary); animation: pulse 0.6s ease infinite; }
+        
+        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+        
+        .body { padding: 20px; }
+        
+        .tabs {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 20px;
+          flex-wrap: wrap;
+        }
+        
+        .tab {
+          padding: 10px 14px;
+          background: rgba(255,255,255,0.03);
+          border: 1px solid rgba(255,255,255,0.08);
+          border-radius: 8px;
+          color: var(--text-muted);
+          font-size: 12px;
+          font-family: 'JetBrains Mono', monospace;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .tab:hover { border-color: rgba(245,158,11,0.3); color: var(--text); }
+        .tab.active { background: rgba(245,158,11,0.15); border-color: var(--primary); color: var(--primary); }
+        
+        .input-group { margin-bottom: 16px; }
+        .input-group.hidden { display: none; }
+        
+        .field { margin-bottom: 14px; }
+        
+        .label {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 12px;
+          color: var(--text-muted);
+          text-transform: uppercase;
+          margin-bottom: 8px;
+        }
+        .type {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 10px;
+          padding: 2px 6px;
+          background: rgba(255,255,255,0.05);
+          border-radius: 4px;
+        }
+        
+        .slider-row {
+          display: flex;
+          align-items: center;
+          gap: 14px;
+        }
+        
+        .slider {
+          flex: 1;
+          -webkit-appearance: none;
+          height: 6px;
+          background: #222;
+          border-radius: 3px;
+        }
+        .slider::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          width: 20px;
+          height: 20px;
+          background: linear-gradient(135deg, var(--primary), #FBBF24);
+          border-radius: 50%;
+          cursor: pointer;
+          box-shadow: 0 4px 12px rgba(245,158,11,0.4);
+        }
+        
+        .value-display {
+          min-width: 50px;
+          padding: 10px 14px;
+          background: var(--bg);
+          border: 1px solid rgba(245,158,11,0.15);
+          border-radius: 8px;
+          text-align: center;
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--primary);
+        }
+        
+        .input {
+          width: 100%;
+          padding: 12px 16px;
+          background: var(--bg);
+          border: 1px solid rgba(245,158,11,0.15);
+          border-radius: 10px;
+          color: var(--text);
+          font-size: 15px;
+          font-family: 'JetBrains Mono', monospace;
+          outline: none;
+        }
+        .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,158,11,0.1); }
+        
+        .no-params {
+          color: var(--text-muted);
+          font-size: 13px;
+          font-style: italic;
+        }
+        
+        .execute {
+          width: 100%;
+          padding: 14px;
+          background: linear-gradient(135deg, var(--primary-dark), var(--primary));
+          border: none;
+          border-radius: 10px;
+          color: #000;
+          font-weight: 600;
+          font-size: 15px;
+          cursor: pointer;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+        .execute:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245,158,11,0.3); }
+        .execute:disabled { opacity: 0.5; cursor: wait; transform: none; }
+        .execute.loading .btn-text { display: none; }
+        .execute .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(0,0,0,0.2); border-top-color: #000; border-radius: 50%; animation: spin 0.6s linear infinite; }
+        .execute.loading .spinner { display: block; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        
+        .result {
+          margin-top: 20px;
+          padding: 18px;
+          background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
+          border: 1px solid rgba(34,197,94,0.25);
+          border-radius: 12px;
+          display: none;
+        }
+        .result.visible { display: block; animation: fadeIn 0.2s ease; }
+        .result.error { background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02)); border-color: rgba(239,68,68,0.25); }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
+        
+        .result-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
+        .result-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--success); }
+        .result.error .result-label { color: var(--error); }
+        .result-time { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #555; }
+        
+        .result-value {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 28px;
+          font-weight: 600;
+          color: var(--success);
+          word-break: break-all;
+        }
+        .result.error .result-value { color: var(--error); font-size: 14px; }
+        .result-value.bool-true { color: var(--success); font-size: 18px; }
+        .result-value.bool-false { color: var(--error); font-size: 18px; }
+        
+        .result-expr { margin-top: 10px; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: #444; }
+        
+        .footer {
+          padding: 14px 20px;
+          background: rgba(0,0,0,0.2);
+          border-top: 1px solid rgba(245,158,11,0.1);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .tags { display: flex; gap: 6px; flex-wrap: wrap; }
+        .tag { padding: 4px 10px; background: rgba(245,158,11,0.1); border-radius: 6px; font-size: 10px; color: var(--primary); }
+        
+        .mode { font-size: 11px; color: #555; display: flex; align-items: center; gap: 6px; }
+        
+        .hidden { display: none !important; }
+      </style>
+      
+      <div class="card">
+        <div class="header">
+          <div class="logo">🔢</div>
+          <div class="info">
+            <h2 class="title">{{name}}</h2>
+            <p class="desc">{{description}}</p>
+            <div class="badges">
+              <span class="badge">v{{version}}</span>
+              <span class="badge">by {{author}}</span>
+            </div>
+          </div>
+          <div class="status">
+            <span class="status-dot ready" data-ant-status-dot></span>
+            <span data-ant-status-text>Ready</span>
+          </div>
+        </div>
+        
+        <div class="body">
+          <div class="tabs">${tabs}</div>
+          ${inputGroups}
+          
+          <button class="execute" data-ant-execute>
+            <span class="btn-text">▶ Execute</span>
+            <span class="spinner"></span>
+          </button>
+          
+          <div class="result" data-ant-output>
+            <div class="result-header">
+              <span class="result-label">Result</span>
+              <span class="result-time" data-ant-time></span>
+            </div>
+            <div class="result-value" data-ant-value data-ant-format="locale"></div>
+            <div class="result-expr" data-ant-expr></div>
+            <span class="hidden" data-ant-true-label>✅ Yes!</span>
+            <span class="hidden" data-ant-false-label>❌ No</span>
+          </div>
+        </div>
+        
+        <div class="footer">
+          <div class="tags">
+            ${(pkg?.tags || ['wasm']).map(t => `<span class="tag">${t}</span>`).join('')}
+          </div>
+          <div class="mode">💻 Local WASM</div>
+        </div>
+      </div>
+    `;
+  }
+
+  _parseSignature(signature) {
+    if (!signature) return [{ name: 'n', type: 'i32' }];
+    
+    // Parse "(i32, i64) -> i64" or "(n: i32) -> i64"
+    const match = signature.match(/\(([^)]*)\)/);
+    if (!match) return [{ name: 'n', type: 'i32' }];
+    
+    const paramsStr = match[1].trim();
+    if (!paramsStr) return [];
+    
+    return paramsStr.split(',').map((p, i) => {
+      p = p.trim();
+      if (p.includes(':')) {
+        const [name, type] = p.split(':').map(s => s.trim());
+        return { name, type };
+      }
+      return { name: ['n', 'x', 'y', 'z'][i] || `arg${i}`, type: p };
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 🔗 EVENT BINDING
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  _initFromManifest() {
+    const funcs = this.getFunctions();
+    
+    // Select first function
+    if (funcs.length > 0) {
+      this._selectedFunction = funcs[0];
+    }
+    
+    // Init values from DOM
+    this._collectValues();
+  }
+
+  _collectValues() {
+    this._values = {};
+    
+    // Find visible input group
+    const visibleGroup = Array.from(this.shadowRoot.querySelectorAll('[data-ant-inputs]'))
+      .find(g => !g.classList.contains('hidden') && g.style.display !== 'none');
+    
+    const container = visibleGroup || this.shadowRoot;
+    container.querySelectorAll('[data-ant-input]').forEach(el => {
+      this._values[el.dataset.antInput] = el.value;
+    });
+  }
+
+  _bindEvents() {
+    const shadow = this.shadowRoot;
+
+    // Function tabs
+    shadow.querySelectorAll('[data-ant-function]').forEach(el => {
+      el.addEventListener('click', () => this._selectFunction(el.dataset.antFunction));
+    });
+
+    // Input changes
+    shadow.querySelectorAll('[data-ant-input]').forEach(el => {
+      el.addEventListener('input', (e) => {
+        const name = e.target.dataset.antInput;
+        this._values[name] = e.target.value;
+        
+        // Update display
+        const display = shadow.querySelector(`[data-ant-display="${name}"]`);
+        if (display) display.textContent = e.target.value;
+      });
+    });
+
+    // Execute
+    shadow.querySelectorAll('[data-ant-execute]').forEach(el => {
+      el.addEventListener('click', () => this.execute());
+    });
+    
+    // Keyboard shortcut
+    shadow.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        this.execute();
+      }
+    });
+  }
+
+  _selectFunction(funcName) {
+    this._selectedFunction = funcName;
+    
+    // Update tabs
+    this.shadowRoot.querySelectorAll('[data-ant-function]').forEach(el => {
+      el.classList.toggle('active', el.dataset.antFunction === funcName);
+    });
+
+    // Define function groups (which functions share inputs)
+    const sliderFuncs = ['fibonacci', 'fibonacci_checked', 'fibonacci_sum'];
+    const numberFuncs = ['is_fibonacci', 'fibonacci_index'];
+    
+    // Show/hide input groups
+    this.shadowRoot.querySelectorAll('[data-ant-inputs]').forEach(group => {
+      const forFunc = group.dataset.antInputs;
+      
+      let shouldShow = false;
+      
+      if (forFunc === 'all') {
+        shouldShow = true;
+      } else if (forFunc === funcName) {
+        shouldShow = true;
+      } else if (forFunc === 'fibonacci' && sliderFuncs.includes(funcName)) {
+        // fibonacci group is shared by all slider functions
+        shouldShow = true;
+      } else if (forFunc === 'is_fibonacci' && numberFuncs.includes(funcName)) {
+        // is_fibonacci group is shared by all number functions
+        shouldShow = true;
+      }
+      
+      group.classList.toggle('hidden', !shouldShow);
+      group.style.display = shouldShow ? '' : 'none';
+    });
+
+    // Re-collect values
+    this._collectValues();
+    
+    // Hide result
+    this._hideResult();
+  }
+
+  _updateStatus(status) {
+    const dot = this.shadowRoot.querySelector('[data-ant-status-dot]');
+    if (dot) {
+      dot.className = 'status-dot ' + status;
+    }
+    
+    const text = this.shadowRoot.querySelector('[data-ant-status-text]');
+    if (text) {
+      const labels = { loading: 'Loading...', ready: 'Ready', executing: 'Running...', error: 'Error' };
+      text.textContent = labels[status] || status;
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ⚡ EXECUTION
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  async execute() {
+    if (this._state === 'executing') return;
+    
+    this._state = 'executing';
+    this._updateStatus('executing');
+    this._setLoading(true);
+
+    const startTime = performance.now();
+
+    try {
+      const func = this._wasmInstance.exports[this._selectedFunction];
+      if (!func) throw new Error(`Function '${this._selectedFunction}' not found`);
+
+      const args = this._prepareArgs();
+      
+      console.log(`🐜 Execute: ${this._selectedFunction}(${args.map(a => typeof a === 'bigint' ? a.toString() + 'n' : a).join(', ')})`);
+      
+      let result = func(...args);
+      if (typeof result === 'bigint') result = result.toString();
+
+      const time = (performance.now() - startTime).toFixed(2);
+      
+      this._showResult(result, time, false);
+
+      this.dispatchEvent(new CustomEvent('ant-result', {
+        detail: { name: this.name, function: this._selectedFunction, result, time, args: this._values }
+      }));
+
+    } catch (err) {
+      console.error('🐜 Execution error:', err);
+      const time = (performance.now() - startTime).toFixed(2);
+      this._showResult(err.message, time, true);
+
+      this.dispatchEvent(new CustomEvent('ant-error', {
+        detail: { name: this.name, function: this._selectedFunction, error: err.message }
+      }));
+    }
+
+    this._state = 'ready';
+    this._updateStatus('ready');
+    this._setLoading(false);
+  }
+
+  _prepareArgs() {
+    const args = [];
+    
+    // Find visible input group
+    const visibleGroup = Array.from(this.shadowRoot.querySelectorAll('[data-ant-inputs]'))
+      .find(g => !g.classList.contains('hidden') && g.style.display !== 'none');
+    
+    const container = visibleGroup || this.shadowRoot;
+    
+    container.querySelectorAll('[data-ant-input]').forEach(el => {
+      const value = el.value;
+      const type = (el.dataset.antType || 'i32').toLowerCase();
+      
+      if (type === 'i64' || type === 'u64') {
+        args.push(BigInt(parseInt(value, 10) || 0));
+      } else if (type === 'f32' || type === 'f64') {
+        args.push(parseFloat(value) || 0);
+      } else if (type === 'bool') {
+        args.push(el.checked || value === 'true' || value === '1');
+      } else {
+        args.push(parseInt(value, 10) || 0);
+      }
+    });
+
+    return args;
+  }
+
+  _setLoading(loading) {
+    this.shadowRoot.querySelectorAll('[data-ant-execute]').forEach(btn => {
+      btn.disabled = loading;
+      btn.classList.toggle('loading', loading);
+    });
+  }
+
+  _showResult(value, time, isError) {
+    const container = this.shadowRoot.querySelector('[data-ant-output]');
+    if (container) {
+      container.classList.add('visible');
+      container.classList.toggle('error', isError);
+    }
+
+    const valueEl = this.shadowRoot.querySelector('[data-ant-value]');
+    if (valueEl) {
+      valueEl.textContent = this._formatValue(value, isError);
+      valueEl.className = 'result-value';
+      
+      if (isError) {
+        valueEl.classList.add('error');
+      } else if (this._isBoolFunction()) {
+        const isTruthy = value === 1 || value === '1' || value === true;
+        valueEl.classList.add(isTruthy ? 'bool-true' : 'bool-false');
+      }
+    }
+
+    const timeEl = this.shadowRoot.querySelector('[data-ant-time]');
+    if (timeEl) timeEl.textContent = `⚡ ${time}ms`;
+
+    const exprEl = this.shadowRoot.querySelector('[data-ant-expr]');
+    if (exprEl) {
+      const argsStr = Object.values(this._values).join(', ');
+      exprEl.textContent = `${this._selectedFunction}(${argsStr})`;
+    }
+  }
+
+  _hideResult() {
+    const container = this.shadowRoot.querySelector('[data-ant-output]');
+    if (container) {
+      container.classList.remove('visible', 'error');
+    }
+  }
+
+  _formatValue(value, isError) {
+    if (isError) return `Error: ${value}`;
+
+    if (this._isBoolFunction()) {
+      const trueLabel = this.shadowRoot.querySelector('[data-ant-true-label]')?.textContent || '✅ True';
+      const falseLabel = this.shadowRoot.querySelector('[data-ant-false-label]')?.textContent || '❌ False';
+      const isTruthy = value === 1 || value === '1' || value === true;
+      return isTruthy ? trueLabel : falseLabel;
+    }
+
+    // Locale formatting for numbers
+    try {
+      return BigInt(value).toLocaleString();
+    } catch {
+      return Number(value).toLocaleString();
+    }
+  }
+
+  _isBoolFunction() {
+    const boolPrefixes = ['is_', 'has_', 'can_', 'should_', 'check_'];
+    return boolPrefixes.some(p => this._selectedFunction.startsWith(p));
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 🔌 PUBLIC API
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  getFunctions() {
+    if (!this._wasmInstance) return [];
+    return Object.keys(this._wasmInstance.exports)
+      .filter(k => typeof this._wasmInstance.exports[k] === 'function' && !k.startsWith('_'));
+  }
+
+  setValues(values) {
+    Object.assign(this._values, values);
+    for (const [key, val] of Object.entries(values)) {
+      const el = this.shadowRoot.querySelector(`[data-ant-input="${key}"]`);
+      if (el) el.value = val;
+      const display = this.shadowRoot.querySelector(`[data-ant-display="${key}"]`);
+      if (display) display.textContent = val;
+    }
+  }
+
+  getValues() { return { ...this._values }; }
+  
+  setFunction(name) { this._selectFunction(name); }
+  
+  getFunction() { return this._selectedFunction; }
+
+  async invoke(funcName, values) {
+    if (funcName) this._selectFunction(funcName);
+    if (values) this.setValues(values);
+    await this.execute();
+    return this.shadowRoot.querySelector('[data-ant-value]')?.textContent;
+  }
+  
+  async clearCache() {
+    try {
+      const db = await this._openDB();
+      await Promise.all(['modules', 'ui', 'packages'].map(store => 
+        new Promise((resolve, reject) => {
+          const tx = db.transaction(store, 'readwrite');
+          const req = tx.objectStore(store).delete(this.name);
+          req.onsuccess = resolve;
+          req.onerror = reject;
+        })
+      ));
+      console.log(`🐜 Cache cleared for ${this.name}`);
+    } catch (e) {
+      console.warn('🐜 Failed to clear cache:', e);
+    }
+  }
+}
+
+customElements.define('ant-module', AntModule);
+
+export { AntModule };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@banastechnologie/antcloud-sdk",
+  "version": "2.0.0",
+  "description": "🐜 AntCloud WebComponents SDK - Robust WASM module loading with caching",
+  "main": "ant-module.js",
+  "module": "ant-module.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./ant-module.js",
+      "default": "./ant-module.js"
+    }
+  },
+  "files": [
+    "ant-module.js",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"No tests yet\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yannbanas/antcloud-sdk.git"
+  },
+  "keywords": [
+    "wasm",
+    "webassembly",
+    "webcomponents",
+    "custom-elements",
+    "antcloud",
+    "anthive",
+    "serverless",
+    "micro-frontend",
+    "sdk"
+  ],
+  "author": "banastechnologie",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/yannbanas/antcloud-sdk/issues"
+  },
+  "homepage": "https://github.com/yannbanas/antcloud-sdk#readme"
+}