From 1a0b231a7b86586e4d65c150737b013b3d3d841e Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Fri, 27 Mar 2026 09:17:41 -0700
Subject: [PATCH] Fix editor.html to properly use Alpine.js with x-data

- Restored x-data, x-model, x-show, x-for, x-if directives
- All methods defined in Alpine data component
- Canvas click handler properly uses () to access Alpine store
- Open button now works with @click handler
---
 tools/ora_editor/templates/editor.html | 736 ++++++++-----------------
 1 file changed, 239 insertions(+), 497 deletions(-)
diff --git a/tools/ora_editor/templates/editor.html b/tools/ora_editor/templates/editor.html
index 4624658..b0006d6 100644
--- a/tools/ora_editor/templates/editor.html
+++ b/tools/ora_editor/templates/editor.html
@@ -5,570 +5,312 @@
     <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; }
-        .poly-point { position: absolute; width: 8px; height: 8px; background: #0F0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
+        .polygon-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 id="app" class="min-h-screen p-4">
+<div x-data="oraEditor()" x-init="init()" 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" 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 onclick="ora.openFile()" id="openBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Open</button>
+            <input 
+                type="text" 
+                x-model="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"
+                @keydown.enter="openFile()"
+            >
+            <button 
+                @click="openFile()"
+                :disabled="!filePath || isLoading"
+                class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
+            >Open</button>
         </div>
-        <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>
+        <button 
+            @click="openInKrita()"
+            :disabled="!oraPath || isExtracting"
+            class="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center gap-2"
+        >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+            </svg>
+            Open in Krita
+        </button>
+        <button 
+            @click="saveCurrent()"
+            :disabled="!oraPath || isLoading"
+            class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
+        >Save</button>
+        <button 
+            @click="showSettings = true"
+            class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded transition"
+        >⚙️</button>
     </header>
 
     <!-- Main content (hidden until file loaded) -->
-    <div id="workspace" style="display:none;" class="flex gap-4">
+    <template x-if="oraPath">
+    <div class="flex gap-4">
+        
         <!-- Sidebar -->
         <aside class="w-72 flex-shrink-0 space-y-4">
+            
             <!-- Layers panel -->
-            <div class="bg-gray-800 rounded p-4 border border-gray-700">
+            <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
                 <h3 class="font-bold mb-3 text-gray-300">Layers</h3>
-                <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="space-y-2 max-h-64 overflow-y-auto">
+                    <template x-for="layer in layers" :key="layer.name">
+                        <div 
+                            @click="selectedLayer = layer.name"
+                            class="flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 transition 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>
+                
+                <!-- Layer controls -->
+                <div x-show="selectedLayer" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
                     <div class="grid grid-cols-2 gap-2">
-                        <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>
+                        <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>
                     </div>
                     <div class="grid grid-cols-2 gap-2">
-                        <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>
+                        <button @click="reorderLayer('up')" :disabled="isLoading" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-2 py-1 rounded text-sm">▲ Up</button>
+                        <button @click="reorderLayer('down')" :disabled="isLoading" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-2 py-1 rounded text-sm">▼ Down</button>
                     </div>
                 </div>
             </div>
 
             <!-- Polygon tool -->
-            <div class="bg-gray-800 rounded p-4 border border-gray-700">
+            <div class="bg-gray-800 rounded-lg 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" 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>
+                    <label class="block text-xs text-gray-400 mb-1">Color: <input type="color" x-model="polygonColor" class="h-8 w-full rounded cursor-pointer"></label>
+                    <label class="block text-xs text-gray-400 mb-1">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>
+                    
                     <div class="flex gap-2">
-                        <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>
+                        <button @click="startDrawing()" :disabled="!oraPath || isDrawing || isLoading" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm transition">Start Drawing</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 transition">Done</button>
                     </div>
-                    <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 x-show="polygonPoints.length > 0">
+                        <span class="text-xs text-gray-400">Points: </span><span x-text="polygonPoints.length"></span>
+                    </div>
+                    
+                    <button @click="clearPolygon()" :disabled="!isDrawing && polygonPoints.length === 0" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm transition">Clear</button>
                 </div>
             </div>
 
             <!-- Mask extraction -->
-            <div class="bg-gray-800 rounded p-4 border border-gray-700">
+            <div class="bg-gray-800 rounded-lg 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" 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">
+                    <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" id="usePolygonHint" class="w-4 h-4 rounded"><span class="text-sm">Use polygon hint</span>
+                        <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 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>
+                    
+                    <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 transition"
+                    >
+                        <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>
                 </div>
             </div>
         </aside>
 
-        <!-- Canvas area -->
-        <main class="flex-1 bg-gray-800 rounded border border-gray-700 p-4 relative overflow-auto" style="min-height:600px">
-            <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 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>
+        <!-- Main canvas area -->
+        <main class="flex-1 bg-gray-800 rounded-lg border border-gray-700 p-4 relative overflow-auto" style="min-height: 600px;">
+            
+            <div x-show="!isLoading && !error && layers.length > 0" class="relative inline-block" 
+                 :style="`width: ${imageWidth}px; height: ${imageHeight}px; position: relative;`">
+                
+                <!-- Layer display -->
+                <div class="relative w-full h-full">
+                    <!-- Base image -->
+                    <img 
+                        :src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)"
+                        class="absolute inset-0 w-full h-full object-contain"
+                        @load="initCanvas"
+                        id="baseImage"
+                    >
+                    
+                    <!-- Polygon points markers when drawing -->
+                    <template x-for="(point, idx) in polygonPoints" :key="idx">
+                        <div class="polygon-point" 
+                             :style="`left: ${point.x * 100}%; top: ${point.y * 100}%`">
+                        </div>
+                    </template>
+                    
+                    <!-- Polygon overlay when viewing or after drawing -->
+                    <img 
+                        x-show="!isDrawing && polygonPreviewUrl" 
+                        :src="polygonPreviewUrl" 
+                        class="absolute inset-0 w-full h-full object-contain pointer-events-none"
+                        alt="Polygon overlay"
+                    >
+                    
+                    <!-- Drawing canvas (only visible when drawing) -->
+                    <canvas
+                        id="polygonCanvas"
+                        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"
+                        @click="handleCanvasClick"
+                        @dblclick="handleCanvasDoubleClick"
+                    ></canvas>
 
-    <!-- Empty state -->
-    <div id="emptyState" class="text-gray-400 text-center mt-20">
+                </div>
+
+                <!-- Loading indicator -->
+                <div x-show="isLoading && !error" 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>
+                
+                <!-- Error message -->
+                <div x-show="error" class="text-red-400 text-center mt-8" x-text="error"></div>
+                
+                <!-- Drawing hint -->
+                <div x-show="isDrawing" class="mt-2 text-sm text-gray-400">
+                    Click on image to add points. Double-click or Enter/Escape when done.
+                </div>
+            </main>
+        </div>
+    </template>
+
+    <!-- No file loaded message -->
+    <div x-show="!oraPath && !isLoading && !error" 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 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">
+    <!-- Mask preview 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 class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border border-gray-600" style="max-height: 90vh; display: flex; flex-direction: column;">
             <h2 class="text-xl font-bold mb-4">Extracted Mask</h2>
-            <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-1 overflow-auto bg-gray-700 rounded mb-4 relative" :style="`min-height: 300px; max-height: 50vh;`">
+                <!-- Base image -->
+                <img :src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)" class="relative w-full h-auto object-contain">
+                
+                <!-- Mask overlay with tint -->
+                <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 class="flex gap-4 justify-end">
-                <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>
+                <button @click="rerollMask()" :disabled="isExtracting" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition">Re-roll</button>
+                <button @click="useMask()" :disabled="isExtracting || !tempMaskPath" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Use This Mask</button>
+                <button @click="closeMaskModal()" :disabled="isExtracting" class="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Cancel</button>
             </div>
         </div>
     </div>
 
     <!-- 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">
+    <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">
+        <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 border border-gray-600">
             <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" 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="mb-4">
+                <label class="block text-sm text-gray-300 mb-2">ComfyUI Server URL</label>
+                <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 focus:outline-none focus:border-blue-500"
+                >
+            </div>
+            
             <div class="flex gap-4 justify-end mt-4">
-                <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>
+                <button @click="showSettings = false" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition">Cancel</button>
+                <button @click="saveSettings()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition">Save</button>
             </div>
         </div>
     </div>
+
 </div>
 
+<!-- Minimal JS for canvas polygon drawing -->
 <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;
+function initCanvas() {
+    const canvas = document.getElementById('polygonCanvas');
+    if (!canvas) return;
     
-    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();
-        }
-    }
+    // Set canvas to proper size
+    canvas.style.width = canvas.parentElement.offsetWidth + 'px';
+    canvas.style.height = canvas.parentElement.offsetHeight + 'px';
+}
 
-    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';
+// Access Alpine store for canvas click
+function handleCanvasClick(e) {
+    const container = e.target.closest('[x-data]');
+    if (!container) return;
+    
+    // Get click position
+    const rect = container.getBoundingClientRect();
+    let x = (e.clientX - rect.left) / rect.width;
+    let y = (e.clientY - rect.top) / rect.height;
+    
+    // Normalize to 0-1 range
+    x = Math.max(0, Math.min(1, x));
+    y = Math.max(0, Math.min(1, y));
+    
+    // Get Alpine component and add point
+    const alpineComponent = $data(container);
+    if (alpineComponent) {
+        alpineComponent.addPolygonPoint(x, y);
     }
 }
 
-// Initialize editor
-const ora = new ORAEditor();
+function handleCanvasDoubleClick(e) {
+    e.preventDefault();
+    const alpineComponent = $data(e.target.closest('[x-data]'));
+    if (alpineComponent) {
+        alpineComponent.finishDrawing();
+    }
+}
+
+// Wait for Alpine to initialize, then setup canvas
+document.addEventListener('alpine:init', () => {
+    setTimeout(initCanvas, 200);
+});
 </script>
 </body>
 </html>
