From 59277692effac90be0f2406d7b2d1d51a927348c Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Fri, 27 Mar 2026 09:10:52 -0700
Subject: [PATCH] Rewrite editor.html with vanilla JS ORAEditor class

- Removed Alpine.js dependency (wasn't loading properly)
- Clean vanilla JavaScript class-based implementation
- All core functionality preserved
- Simpler, more maintainable code
---
 tools/ora_editor/templates/editor.html | 609 ++++++++++++++++++++-----
 1 file changed, 502 insertions(+), 107 deletions(-)
diff --git a/tools/ora_editor/templates/editor.html b/tools/ora_editor/templates/editor.html
index 38f28cc..4624658 100644
--- a/tools/ora_editor/templates/editor.html
+++ b/tools/ora_editor/templates/editor.html
@@ -5,175 +5,570 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ORA Editor</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <style>
         ::-webkit-scrollbar { width: 8px; height: 8px; }
         ::-webkit-scrollbar-track { background: #374151; }
         ::-webkit-scrollbar-thumb { background: #6B7280; border-radius: 4px; }
-        .polygon-point { position: absolute; width: 8px; height: 8px; background: #0F0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
+        .poly-point { position: absolute; width: 8px; height: 8px; background: #0F0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
 
-<div x-data="oraEditor()" class="min-h-screen p-4">
+<div id="app" class="min-h-screen p-4">
+    <!-- Header -->
     <header class="mb-4 flex items-center gap-4">
         <div class="flex-1 flex items-center gap-2">
-            <input type="text" x-model="filePath" placeholder="Path (e.g., scenes/kq4_010/pic.png)" 
+            <input type="text" id="filePath" placeholder="Path (e.g., scenes/kq4_010/pic.png)" 
                    class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none">
-            <button @click="openFile()" :disabled="!filePath||isLoading" class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded">Open</button>
+            <button onclick="ora.openFile()" id="openBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Open</button>
         </div>
-        <button @click="openInKrita()" :disabled="!oraPath" class="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center gap-2">✓ Open in Krita</button>
-        <button @click="saveCurrent()" :disabled="!oraPath" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded">Save</button>
-        <button @click="showSettings=true" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded">⚙️</button>
+        <button onclick="ora.openInKrita()" id="kritaBtn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded flex items-center gap-2 disabled:bg-gray-600">Open in Krita</button>
+        <button onclick="ora.saveCurrent()" id="saveBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded disabled:bg-gray-600">Save</button>
+        <button onclick="ora.showSettings()" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded">⚙️</button>
     </header>
 
-    <div x-show="oraPath" class="flex gap-4">
+    <!-- Main content (hidden until file loaded) -->
+    <div id="workspace" style="display:none;" class="flex gap-4">
+        <!-- Sidebar -->
         <aside class="w-72 flex-shrink-0 space-y-4">
-            <!-- Layers -->
+            <!-- Layers panel -->
             <div class="bg-gray-800 rounded p-4 border border-gray-700">
                 <h3 class="font-bold mb-3 text-gray-300">Layers</h3>
-                <div class="space-y-2 max-h-64 overflow-y-auto">
-                    <template x-for="layer in layers">
-                        <div @click="selectedLayer=layer.name" class="flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 cursor-pointer" :class="{'bg-gray-600':selectedLayer===layer.name}">
-                            <input type="checkbox" :checked="layer.visible" @change="toggleVisibility(layer.name,$event.target.checked)" class="w-4 h-4 rounded">
-                            <span class="flex-1 text-sm truncate" x-text="layer.name"></span>
-                        </div>
-                    </template>
-                </div>
-                <div x-show="selectedLayer" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
+                <div id="layersList" class="space-y-2 max-h-64 overflow-y-auto"></div>
+                <div id="layerControls" style="display:none;" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
                     <div class="grid grid-cols-2 gap-2">
-                        <button @click="renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">Rename</button>
-                        <button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm">Delete</button>
+                        <button onclick="ora.renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">Rename</button>
+                        <button onclick="ora.deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm">Delete</button>
                     </div>
                     <div class="grid grid-cols-2 gap-2">
-                        <button @click="reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▲ Up</button>
-                        <button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▼ Down</button>
+                        <button onclick="ora.reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▲ Up</button>
+                        <button onclick="ora.reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▼ Down</button>
                     </div>
                 </div>
             </div>
 
-            <!-- Polygon -->
+            <!-- Polygon tool -->
             <div class="bg-gray-800 rounded p-4 border border-gray-700">
                 <h3 class="font-bold mb-3 text-gray-300">Polygon</h3>
                 <div class="space-y-3">
-                    <label class="block text-xs text-gray-400">Color: <input type="color" x-model="polygonColor" class="h-8 w-full rounded"></label>
-                    <label class="block text-xs text-gray-400">Width: <input type="number" x-model.number="polygonWidth" min="1" max="10" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1"></label>
+                    <label class="block text-xs text-gray-400">Color: <input type="color" id="polyColor" value="#FF0000" class="h-8 w-full rounded"></label>
+                    <label class="block text-xs text-gray-400">Width: <input type="number" id="polyWidth" min="1" max="10" value="2" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1"></label>
                     <div class="flex gap-2">
-                        <button @click="startDrawing()" :disabled="!oraPath||isDrawing" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm">Draw</button>
-                        <button @click="finishDrawing()" :disabled="!isDrawing||polygonPoints.length<3" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm">Done</button>
+                        <button onclick="ora.startDrawing()" id="drawBtn" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm">Draw</button>
+                        <button onclick="ora.finishDrawing()" id="doneBtn" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm" disabled>Done</button>
                     </div>
-                    <div x-show="polygonPoints.length" class="text-xs text-gray-400">Points: <span x-text="polygonPoints.length"></span></div>
-                    <button @click="clearPolygon()" :disabled="!isDrawing&&!polygonPoints.length" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm">Clear</button>
+                    <div id="pointCount" class="text-xs text-gray-400"></div>
+                    <button onclick="ora.clearPolygon()" id="clearBtn" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm" disabled>Clear</button>
                 </div>
             </div>
 
-            <!-- Mask -->
+            <!-- Mask extraction -->
             <div class="bg-gray-800 rounded p-4 border border-gray-700">
                 <h3 class="font-bold mb-3 text-gray-300">Mask Extraction</h3>
                 <div class="space-y-3">
-                    <input type="text" x-model="maskSubject" placeholder="e.g., 'the door'" :disabled="isExtracting||!oraPath" 
-                           class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none disabled:bg-gray-800">
-                    <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" x-model="usePolygonHint" :disabled="isExtracting||!oraPath" class="w-4 h-4 rounded"><span class="text-sm">Use polygon hint</span></label>
-                    <button @click="extractMask()" :disabled="!maskSubject.trim()||isExtracting||!oraPath" class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded">
-                        <span x-show="!isExtracting">Extract Mask</span><span x-show="isExtracting">Extracting...</span>
-                    </button>
-                    <div x-show="lastError" class="text-red-400 text-xs" x-text="lastError"></div>
+                    <input type="text" id="maskSubject" placeholder="e.g., 'the door'" 
+                           class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                        <input type="checkbox" id="usePolygonHint" class="w-4 h-4 rounded"><span class="text-sm">Use polygon hint</span>
+                    </label>
+                    <button onclick="ora.extractMask()" id="extractBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded">Extract Mask</button>
+                    <div id="maskError" class="text-red-400 text-xs" style="display:none;"></div>
                 </div>
             </div>
         </aside>
 
-        <!-- Canvas -->
+        <!-- Canvas area -->
         <main class="flex-1 bg-gray-800 rounded border border-gray-700 p-4 relative overflow-auto" style="min-height:600px">
-            <div x-show="oraPath&&!isLoading" class="relative inline-block" :style="`width:${imageWidth}px;height:${imageHeight}px;position:relative`">
-                <img :src="'/api/image/base?ora_path='+encodeURIComponent(oraPath)" class="absolute inset-0 w-full h-full object-contain">
-                <template x-for="(p,ix) in polygonPoints"><div class="polygon-point" :style="`left:${p.x*100}%;top:${p.y*100}%`"></div></template>
-                <img x-show="!isDrawing&&polygonPreviewUrl" :src="polygonPreviewUrl" class="absolute inset-0 w-full h-full object-contain pointer-events-none">
-                <canvas id="polyCanvas" x-show="isDrawing" :width="imageWidth" :height="imageHeight" 
-                        class="absolute inset-0 cursor-crosshair pointer-events-auto border-2 border-dashed border-blue-500 opacity-90"></canvas>
+            <div id="imageContainer" class="relative inline-block"></div>
+            <div id="loadingIndicator" style="display:none;" class="flex items-center justify-center h-full">
+                <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
             </div>
-            <div x-show="isLoading" class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div></div>
-            <div x-show="error" class="text-red-400 text-center mt-8" x-text="error"></div>
-            <div x-show="isDrawing" class="mt-2 text-sm text-gray-400">Click to add points. Double-click or Enter/Escape when done.</div>
+            <div id="errorMessage" class="text-red-400 text-center mt-8" style="display:none;"></div>
+            <div id="drawingHint" class="mt-2 text-sm text-gray-400">Click on image to add points. Double-click or Enter/Escape when done.</div>
         </main>
     </div>
 
-    <div x-show="!oraPath&&!isLoading" class="text-gray-400 text-center mt-20"><p class="text-xl">Open a PNG or ORA file to start editing</p></div>
+    <!-- Empty state -->
+    <div id="emptyState" class="text-gray-400 text-center mt-20">
+        <p class="text-xl">Open a PNG or ORA file to start editing</p>
+    </div>
 
     <!-- Mask modal -->
-    <div x-show="showMaskModal" @keydown.escape.window="closeMaskModal()" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
+    <div id="maskModal" style="display:none;" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75" onclick="if(event.target===this) ora.closeMaskModal()">
         <div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border" style="max-height:90vh;display:flex;flex-direction:column">
             <h2 class="text-xl font-bold mb-4">Extracted Mask</h2>
-            <div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 relative" style="min-height:300px;max-height:50vh">
-                <img :src="'/api/image/base?ora_path='+encodeURIComponent(oraPath)" class="relative w-full h-auto object-contain">
-                <div x-show="tempMaskUrl" class="absolute inset-0 bg-green-500 opacity-30 pointer-events-none"><img :src="tempMaskUrl" class="w-full h-auto object-contain mix-blend-screen"></div>
-            </div>
+            <div id="maskPreview" class="flex-1 overflow-auto bg-gray-700 rounded mb-4 relative" style="min-height:300px;max-height:50vh"></div>
             <div class="flex gap-4 justify-end">
-                <button @click="reroll()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Re-roll</button>
-                <button @click="useMask()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">Use Mask</button>
-                <button @click="closeMaskModal()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded">Cancel</button>
+                <button onclick="ora.reroll()" id="rerollBtn" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Re-roll</button>
+                <button onclick="ora.useMask()" id="useMaskBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">Use Mask</button>
+                <button onclick="ora.closeMaskModal()" id="cancelMaskBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded">Cancel</button>
             </div>
         </div>
     </div>
 
-    <!-- Settings -->
-    <div x-show="showSettings" @keydown.escape.window="showSettings=false" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
+    <!-- Settings modal -->
+    <div id="settingsModal" style="display:none;" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75" onclick="if(event.target===this) ora.hideSettings()">
         <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 border">
             <h2 class="text-xl font-bold mb-4">Settings</h2>
-            <label class="block text-sm text-gray-300 mb-2">ComfyUI URL: <input type="text" x-model="comfyUrl" placeholder="127.0.0.1:8188" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"></label>
+            <label class="block text-sm text-gray-300 mb-2">ComfyUI URL: <input type="text" id="comfyUrl" placeholder="127.0.0.1:8188" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"></label>
             <div class="flex gap-4 justify-end mt-4">
-                <button @click="showSettings=false" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Cancel</button>
-                <button @click="saveSettings()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Save</button>
+                <button onclick="ora.hideSettings()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Cancel</button>
+                <button onclick="ora.saveSettings()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Save</button>
             </div>
         </div>
     </div>
 </div>
 
-<script x-ignore>
-(function(){
-let dcTimer=null;
-function initCanvas(){
-var c=document.getElementById('polyCanvas');if(!c)return;
-var ctx=c.getContext('2d');
-c.onclick=function(e){
-var el=document.body.querySelector('[x-data]');if(el&&$data(el)&&!$data(el).isDrawing)return;
-var r=c.getBoundingClientRect();
-var x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;
-var s=$data(el);if(!s)return;
-s.polygonPoints.push({x:Math.max(0,Math.min(1,x)),y:Math.max(0,Math.min(1,y))});
-ctx.fillStyle='#0F0';ctx.beginPath();ctx.arc(e.offsetX,e.offsetY,4,0,Math.PI*2);ctx.fill();
-};
-c.ondblclick=function(){clearTimeout(dcTimer);var el=document.body.querySelector('[x-data]');if(el&&$data(el))$data(el).finishDrawing();};
+<script>
+class ORAEditor {
+    constructor() {
+        this.filePath = '';
+        this.oraPath = '';
+        this.layers = [];
+        this.imageWidth = 800;
+        this.imageHeight = 600;
+        this.selectedLayer = null;
+        this.isDrawing = false;
+        this.polygonPoints = [];
+        this.polygonPreviewUrl = null;
+        this.tempMaskPath = null;
+        this.tempMaskUrl = null;
+        this.showMaskModal = false;
+        this.isExtracting = false;
+        
+        // Load settings
+        this.comfyUrl = localStorage.getItem('ora_comfy_url') || '127.0.0.1:8188';
+        document.getElementById('comfyUrl').value = this.comfyUrl;
+
+        // Setup key handlers
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.isDrawing) this.clearPolygon();
+            if (e.key === 'Enter' && this.isDrawing && this.polygonPoints.length >= 3) this.finishDrawing();
+        });
+
+        // Bind inputs to state
+        document.getElementById('filePath').addEventListener('input', (e) => this.filePath = e.target.value);
+        
+        // Setup canvas click handler
+        this.setupCanvasClickHandler();
+
+        this.updateUI();
+    }
+
+    setupCanvasClickHandler() {
+        const canvasId = 'polyCanvas';
+        const that = this;
+        
+        // We'll set this up dynamically when drawing starts
+        window.addEventListener('click', (e) => {
+            if (!that.isDrawing) return;
+            
+            // Find the canvas element (it might not exist yet)
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+            
+            // Get click position relative to container
+            const container = document.getElementById('imageContainer');
+            if (!container || !container.contains(e.target)) return;
+            
+            const rect = container.getBoundingClientRect();
+            let x = (e.clientX - rect.left) / that.imageWidth;
+            let y = (e.clientY - rect.top) / that.imageHeight;
+            
+            x = Math.max(0, Math.min(1, x));
+            y = Math.max(0, Math.min(1, y));
+            
+            that.polygonPoints.push({x, y});
+            that.updatePolyPreview();
+            
+            // Draw marker
+            const marker = document.createElement('div');
+            marker.className = 'poly-point';
+            marker.style.left = (x * 100) + '%';
+            marker.style.top = (y * 100) + '%';
+            container.appendChild(marker);
+        });
+
+        // Double click to finish drawing  
+        window.addEventListener('dblclick', () => {
+            if (that.isDrawing && that.polygonPoints.length >= 3) {
+                that.finishDrawing();
+            }
+        });
+    }
+
+    updateUI() {
+        document.getElementById('emptyState').style.display = this.oraPath ? 'none' : 'block';
+        document.getElementById('workspace').style.display = this.oraPath ? 'flex' : 'none';
+        
+        document.getElementById('openBtn').disabled = !this.filePath || this.isLoading;
+        document.getElementById('saveBtn').disabled = !this.oraPath || this.isLoading;
+        document.getElementById('kritaBtn').disabled = !this.oraPath || !this.selectedLayer;
+        document.getElementById('drawBtn').disabled = !this.oraPath || this.isDrawing || this.isLoading;
+        
+        document.getElementById('maskSubject').disabled = this.isExtracting || !this.oraPath;
+        document.getElementById('usePolygonHint').disabled = this.isExtracting || !this.oraPath;
+        document.getElementById('extractBtn').disabled = (!document.getElementById('maskSubject').value.trim() || this.isExtracting || !this.oraPath);
+        
+        if (this.isDrawing) {
+            document.getElementById('doneBtn').disabled = this.polygonPoints.length < 3;
+            document.getElementById('clearBtn').disabled = false;
+        } else {
+            document.getElementById('doneBtn').disabled = true;
+            document.getElementById('clearBtn').disabled = this.polygonPoints.length === 0;
+        }
+        
+        document.getElementById('pointCount').innerHTML = this.polygonPoints.length ? 'Points: ' + this.polygonPoints.length : '';
+        document.getElementById('drawingHint').style.display = this.isDrawing ? 'block' : 'none';
+        
+        // Update layers list
+        this.renderLayers();
+    }
+
+    isLoading = false;
+    
+    async openFile() {
+        if (!this.filePath || this.isLoading) return;
+        this.isLoading = true;
+        this.updateUI();
+        
+        try {
+            const response = await fetch('/api/open', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ path: this.filePath })
+            });
+            
+            const data = await response.json();
+            
+            if (!data.success) throw new Error(data.error || 'Failed to open file');
+            
+            this.oraPath = data.ora_path;
+            this.layers = data.layers;
+            this.imageWidth = data.width;
+            this.imageHeight = data.height;
+            this.clearPolygon();
+            
+            // Render image
+            const container = document.getElementById('imageContainer');
+            container.innerHTML = '';
+            container.style.width = this.imageWidth + 'px';
+            container.style.height = this.imageHeight + 'px';
+            container.style.position = 'relative';
+            
+            // Base image
+            const baseImg = document.createElement('img');
+            baseImg.src = '/api/image/base?ora_path=' + encodeURIComponent(this.oraPath);
+            baseImg.className = 'absolute inset-0 w-full h-full object-contain';
+            container.appendChild(baseImg);
+            
+        } catch (e) {
+            this.showError(e.message);
+        } finally {
+            this.isLoading = false;
+            this.updateUI();
+        }
+    }
+
+    saveCurrent() {
+        if (!this.oraPath) return;
+        fetch('/api/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ora_path: this.oraPath })
+        });
+    }
+
+    renderLayers() {
+        const list = document.getElementById('layersList');
+        const controls = document.getElementById('layerControls');
+        
+        list.innerHTML = '';
+        
+        this.layers.forEach(layer => {
+            const div = document.createElement('div');
+            div.className = 'flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 cursor-pointer';
+            if (this.selectedLayer === layer.name) div.classList.add('bg-gray-600');
+            
+            div.innerHTML = `
+                <input type="checkbox" ${layer.visible ? 'checked' : ''} class="w-4 h-4 rounded">
+                <span class="flex-1 text-sm truncate">${layer.name}</span>
+            `;
+            
+            div.onclick = () => {
+                this.selectedLayer = layer.name;
+                controls.style.display = 'block';
+                this.updateUI();
+            };
+            
+            const checkbox = div.querySelector('input');
+            checkbox.addEventListener('change', async (e) => {
+                await this.toggleVisibility(layer.name, e.target.checked);
+            });
+            
+            list.appendChild(div);
+        });
+    }
+
+    async toggleVisibility(layerName, visible) {
+        const layer = this.layers.find(l => l.name === layerName);
+        if (layer) layer.visible = visible;
+        
+        await fetch('/api/layer/visibility', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ora_path: this.oraPath, layer_name: layerName, visible })
+        });
+        this.renderLayers();
+    }
+
+    renameLayer() {
+        const oldName = this.selectedLayer;
+        const newName = prompt('New name:', oldName);
+        if (!newName || newName === oldName) return;
+        
+        const layer = this.layers.find(l => l.name === oldName);
+        if (layer) layer.name = newName;
+        this.selectedLayer = newName;
+        
+        fetch('/api/layer/rename', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ora_path: this.oraPath, old_name: oldName, new_name: newName })
+        });
+        
+        this.renderLayers();
+    }
+
+    deleteLayer() {
+        const layerToDelete = this.selectedLayer;
+        if (!confirm('Delete ' + layerToDelete + '?')) return;
+        
+        const idx = this.layers.findIndex(l => l.name === layerToDelete);
+        if (idx > -1) this.layers.splice(idx, 1);
+        this.selectedLayer = null;
+        
+        fetch('/api/layer/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ora_path: this.oraPath, layer_name: layerToDelete })
+        });
+        
+        document.getElementById('layerControls').style.display = 'none';
+        this.renderLayers();
+    }
+
+    async reorderLayer(direction) {
+        const idx = this.layers.findIndex(l => l.name === this.selectedLayer);
+        if (idx < 0) return;
+        
+        const newIdx = direction === 'up' ? idx - 1 : idx + 1;
+        if (newIdx < 0 || newIdx >= this.layers.length) return;
+        
+        const layerName = this.selectedLayer;
+        [this.layers[idx], this.layers[newIdx]] = [this.layers[newIdx], this.layers[idx]];
+        
+        // Optional: call API to persist
+        fetch('/api/layer/reorder', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ora_path: this.oraPath, layer_name: layerName, direction })
+        });
+        
+        this.renderLayers();
+    }
+
+    startDrawing() {
+        this.isDrawing = true;
+        this.polygonPoints = [];
+        document.getElementById('imageContainer').innerHTML += '<div class="absolute inset-0 border-2 border-dashed border-blue-500 pointer-events-none opacity-90"></div>';
+        this.updateUI();
+    }
+
+    async updatePolyPreview() {
+        if (!this.oraPath || this.polygonPoints.length < 3) return;
+        
+        const response = await fetch('/api/polygon', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                ora_path: this.oraPath,
+                points: this.polygonPoints,
+                color: document.getElementById('polyColor').value,
+                width: parseInt(document.getElementById('polyWidth').value)
+            })
+        });
+        
+        if (response.ok) {
+            const data = await response.json();
+            this.polygonPreviewUrl = data.overlay_url;
+        }
+    }
+
+    finishDrawing() {
+        this.isDrawing = false;
+        if (this.polygonPoints.length >= 3) {
+            // Keep the polygon visible
+        } else {
+            this.clearPolygon();
+        }
+        this.updateUI();
+    }
+
+    clearPolygon() {
+        this.isDrawing = false;
+        this.polygonPoints = [];
+        this.polygonPreviewUrl = null;
+        
+        // Remove markers from container
+        const markers = document.querySelectorAll('.poly-point');
+        markers.forEach(m => m.remove());
+        
+        if (this.oraPath) {
+            fetch('/api/polygon/clear', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ ora_path: this.oraPath })
+            });
+        }
+        this.updateUI();
+    }
+
+    async extractMask() {
+        const subject = document.getElementById('maskSubject').value.trim();
+        if (!subject) return;
+        
+        this.isExtracting = true;
+        this.updateUI();
+        
+        try {
+            const response = await fetch('/api/mask/extract', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    subject: subject,
+                    use_polygon: document.getElementById('usePolygonHint').checked && this.polygonPoints.length >= 3,
+                    ora_path: this.oraPath,
+                    comfy_url: this.comfyUrl
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (!data.success) throw new Error(data.error || 'Failed');
+            
+            this.tempMaskPath = data.mask_path;
+            this.tempMaskUrl = data.mask_url || '/api/file/mask?path=' + encodeURIComponent(data.mask_path);
+            this.showMaskModal = true;
+            this.renderMaskPreview();
+            
+        } catch (e) {
+            document.getElementById('maskError').innerHTML = e.message;
+            document.getElementById('maskError').style.display = 'block';
+        } finally {
+            this.isExtracting = false;
+            this.updateUI();
+        }
+    }
+
+    renderMaskPreview() {
+        const preview = document.getElementById('maskPreview');
+        preview.innerHTML = '';
+        
+        const baseImg = document.createElement('img');
+        baseImg.src = '/api/image/base?ora_path=' + encodeURIComponent(this.oraPath);
+        baseImg.className = 'relative w-full h-auto object-contain';
+        preview.appendChild(baseImg);
+        
+        if (this.tempMaskUrl) {
+            const overlay = document.createElement('div');
+            overlay.className = 'absolute inset-0 bg-green-500 opacity-30 pointer-events-none';
+            
+            const maskImg = document.createElement('img');
+            maskImg.src = this.tempMaskUrl;
+            maskImg.className = 'w-full h-auto object-contain mix-blend-screen';
+            overlay.appendChild(maskImg);
+            
+            preview.appendChild(overlay);
+        }
+    }
+
+    reroll() {
+        this.extractMask();
+    }
+
+    async useMask() {
+        if (!this.tempMaskPath) return;
+        
+        await fetch('/api/layer/add', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                ora_path: this.oraPath,
+                entity_name: 'mask',
+                mask_path: this.tempMaskPath
+            })
+        });
+        
+        const response = await fetch('/api/layers?ora_path=' + encodeURIComponent(this.oraPath));
+        const data = await response.json();
+        if (data.success) {
+            this.layers = data.layers;
+            this.renderLayers();
+        }
+        
+        this.closeMaskModal();
+    }
+
+    closeMaskModal() {
+        this.showMaskModal = false;
+        this.tempMaskPath = null;
+        this.tempMaskUrl = null;
+        document.getElementById('maskModal').style.display = 'none';
+    }
+
+    async openInKrita() {
+        if (!this.selectedLayer) {
+            alert('Select a layer first');
+            return;
+        }
+        
+        const response = await fetch('/api/krita/open', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ora_path: this.oraPath, layer_name: this.selectedLayer })
+        });
+        
+        const data = await response.json();
+        if (data.success) {
+            window.open(data.file_url);
+        }
+    }
+
+    showSettings() {
+        document.getElementById('settingsModal').style.display = 'flex';
+        document.getElementById('comfyUrl').value = this.comfyUrl;
+    }
+
+    hideSettings() {
+        document.getElementById('settingsModal').style.display = 'none';
+    }
+
+    saveSettings() {
+        this.comfyUrl = document.getElementById('comfyUrl').value.trim();
+        localStorage.setItem('ora_comfy_url', this.comfyUrl);
+        this.hideSettings();
+    }
+
+    showError(msg) {
+        const el = document.getElementById('errorMessage');
+        el.innerHTML = msg;
+        el.style.display = 'block';
+    }
 }
-window.addEventListener('alpine:init',function(){setTimeout(initCanvas,100)});initCanvas();
-})();
+
+// Initialize editor
+const ora = new ORAEditor();
 </script>
-
-<script>Alpine.data('oraEditor',()=>({
-filePath:'',oraPath:'',layers:[],imageWidth:800,imageHeight:600,selectedLayer:null,isDrawing:false,polygonPoints:[],polygonColor:'#FF0000',polygonWidth:2,polygonPreviewUrl:null,maskSubject:'',usePolygonHint:true,isExtracting:false,showMaskModal:false,tempMaskPath:null,tempMaskUrl:null,lastError:'',showSettings:false,comfyUrl:'127.0.0.1:8188',isLoading:false,error:'',
-
-init(){localStorage.setItem('ora_comfy_url','127.0.0.1:8188');var self=this;document.addEventListener('keydown',function(e){if(e.key==='Escape'&&self.isDrawing)self.clearPolygon();if(e.key==='Enter'&&self.isDrawing&&self.polygonPoints.length>=3)self.finishDrawing();});},
-
-async openFile(){if(!this.filePath||this.isLoading)return;this.isLoading=true;this.error='';try{var r=await fetch('/api/open',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:this.filePath})});var d=await r.json();if(!d.success)throw new Error(d.error||'Failed');this.oraPath=d.ora_path;this.layers=d.layers;this.imageWidth=d.width;this.imageHeight=d.height;this.clearPolygon();}catch(e){this.error=e.message;}finally{this.isLoading=false;}},
-saveCurrent(){if(!this.oraPath)return;fetch('/api/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath})});},
-
-async toggleVisibility(ln,v){var l=this.layers.find(x=>x.name===ln);if(l)l.visible=v;await fetch('/api/layer/visibility',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,layer_name:ln,visible:v})});},
-renameLayer(){var on=this.selectedLayer,n=prompt('New name:',on);if(!n||n===on)return;var l=this.layers.find(x=>x.name===on);if(l)l.name=n;this.selectedLayer=n;fetch('/api/layer/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,old_name:on,new_name:n})});},
-deleteLayer(){var l=this.selectedLayer;if(!confirm('Delete '+l+'?'))return;var i=this.layers.findIndex(x=>x.name===l);if(i>-1)this.layers.splice(i,1);this.selectedLayer=null;fetch('/api/layer/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,layer_name:l})});},
-async reorderLayer(d){var i=this.layers.findIndex(x=>x.name===this.selectedLayer);if(i<0)return;var ni=d==='up'?i-1:i+1;if(ni<0||ni>=this.layers.length)return;[this.layers[i],this.layers[ni]]=[this.layers[ni],this.layers[i]];},
-
-startDrawing(){this.isDrawing=true;this.polygonPoints=[];var c=document.getElementById('polyCanvas');if(c){c.getContext('2d').clearRect(0,0,c.width,c.height);}},
-finishDrawing(){this.isDrawing=false;if(this.polygonPoints.length>=3)this.updatePolyPreview();else this.clearPolygon();},
-async updatePolyPreview(){if(!this.oraPath||this.polygonPoints.length<3)return;var r=await fetch('/api/polygon',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,points:this.polygonPoints,color:this.polygonColor,width:this.polygonWidth})});if(r.ok){var d=await r.json();this.polygonPreviewUrl=d.overlay_url;}},
-clearPolygon(){this.isDrawing=false;this.polygonPoints=[];this.polygonPreviewUrl=null;if(this.oraPath)fetch('/api/polygon/clear',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath})});},
-
-async extractMask(){if(!this.maskSubject.trim())return;this.isExtracting=true;this.lastError='';try{var r=await fetch('/api/mask/extract',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({subject:this.maskSubject,use_polygon:this.usePolygonHint&&this.polygonPoints.length>=3,ora_path:this.oraPath,comfy_url:this.comfyUrl})});var d=await r.json();if(!d.success)throw new Error(d.error||'Failed');this.tempMaskPath=d.mask_path;this.tempMaskUrl=d.mask_url||'/api/file/mask?path='+encodeURIComponent(d.mask_path);this.showMaskModal=true;}catch(e){this.lastError=e.message;}finally{this.isExtracting=false;}},
-reroll(){this.extractMask();},
-async useMask(){if(!this.tempMaskPath)return;await fetch('/api/layer/add',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,entity_name:'mask',mask_path:this.tempMaskPath})});var r=await fetch('/api/layers?ora_path='+encodeURIComponent(this.oraPath));var d=await r.json();if(d.success)this.layers=d.layers;this.closeMaskModal();},
-closeMaskModal(){this.showMaskModal=false;this.tempMaskPath=null;this.tempMaskUrl=null;},
-
-async openInKrita(){if(!this.selectedLayer){alert('Select a layer first');return;}var r=await fetch('/api/krita/open',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,layer_name:this.selectedLayer})});var d=await r.json();if(d.success)window.open(d.file_url);},
-
-saveSettings(){localStorage.setItem('ora_comfy_url',this.comfyUrl);this.showSettings=false;}
-}));</script>
 </body>
 </html>
