feat: per-task image/annotations, annotation editor toolbar, Tailwind compiled

- Add per-task file upload with image preview in task editor
- Add dedicated annotation editor page (task_drawing.html) with Fabric.js
- Add color picker, stroke width, and line dash controls to annotation toolbar
- Apply property changes to selected objects in real-time
- Disable style controls until a drawing tool or object is selected
- Remove zoom/pan from annotation toolbar (simplified UX)
- Auto-switch to select mode after placing annotation elements
- Show annotation overlay on task image previews (read-only canvas)
- Add file proxy route in measure blueprint for task file access
- Add file_path/file_type fields to TaskCreate/TaskUpdate Pydantic schemas
- Replace Tailwind CDN with compiled CSS (tailwind.config.js with full shades)
- Fix Alpine.js x-init crash: extract annotations JSON to <script> tags
  (recipe_preview.html, task_execute.html) to avoid HTML attribute breakage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

client/blueprints/maker.py

@@ -107,6 +107,30 @@ def task_editor(recipe_id: int):
     return render_template("maker/task_editor.html", recipe=recipe)
 
 
+@maker_bp.route("/recipes/<int:recipe_id>/tasks/<int:task_id>/drawing")
+@login_required
+@role_required("Maker")
+def task_drawing(recipe_id: int, task_id: int):
+    """Annotation editor for a specific task."""
+    # Load recipe for breadcrumb context
+    recipe_resp = api_client.get(f"/api/recipes/{recipe_id}")
+    if recipe_resp.get("error"):
+        flash(_("Errore nel caricamento della ricetta: %(error)s", error=recipe_resp.get("detail", "")), "error")
+        return redirect(url_for("maker.recipe_list"))
+
+    # Load task details
+    task_resp = api_client.get(f"/api/tasks/{task_id}")
+    if task_resp.get("error"):
+        flash(_("Task non trovato: %(error)s", error=task_resp.get("detail", "")), "error")
+        return redirect(url_for("maker.task_editor", recipe_id=recipe_id))
+
+    return render_template(
+        "maker/task_drawing.html",
+        recipe=recipe_resp,
+        task=task_resp,
+    )
+
+
 @maker_bp.route("/recipes/<int:recipe_id>/preview")
 @login_required
 @role_required("Maker")

client/blueprints/measure.py

@@ -1,11 +1,14 @@
 """MeasurementTec blueprint - recipe selection and measurement execution."""
+import requests as http_requests
+
 from flask import (
-    Blueprint, flash, jsonify, redirect, render_template,
+    Blueprint, Response, flash, jsonify, redirect, render_template,
     request, session, url_for,
 )
 from flask_babel import gettext as _
 
 from blueprints.auth import login_required, role_required
+from config import Config
 from services.api_client import api_client
 
 measure_bp = Blueprint("measure", __name__)
@@ -272,3 +275,25 @@ def save_measurement():
         }), status_code if status_code >= 400 else 500
 
     return jsonify(resp), 201
+
+
+# ---------------------------------------------------------------------------
+# Route: File proxy (browser can't send X-API-Key directly)
+# ---------------------------------------------------------------------------
+@measure_bp.route("/api/files/<path:file_path>", methods=["GET"])
+@login_required
+def api_get_file(file_path: str):
+    """Proxy: Serve file from API server (browser can't send X-API-Key)."""
+    api_key = session.get("api_key", "")
+    base_url = Config.API_SERVER_URL.rstrip("/")
+    resp = http_requests.get(
+        f"{base_url}/api/files/{file_path}",
+        headers={"X-API-Key": api_key},
+        timeout=30,
+    )
+    if resp.status_code != 200:
+        return Response(resp.text, status=resp.status_code)
+    return Response(
+        resp.content,
+        content_type=resp.headers.get("content-type", "application/octet-stream"),
+    )

client/static/js/annotation-editor.js

@@ -52,21 +52,27 @@ function annotationEditor() {
     /** @type {HTMLCanvasElement|null} */
     canvasEl: null,
 
-    /** Current interaction mode: 'select' | 'marker' | 'arrow' | 'rect' | 'pan' */
+    /** Current interaction mode: 'select' | 'marker' | 'arrow' | 'rect' */
     activeMode: 'select',
 
     /** Next auto-assigned marker number */
     nextMarkerNumber: 1,
 
-    /** Current zoom level (1 = 100%) */
-    zoomLevel: 1,
-
     /** Whether a background image has been loaded */
     imageLoaded: false,
 
     /** Whether the canvas has unsaved changes */
     isDirty: false,
 
+    /** Current color for new annotations */
+    currentColor: '#2563EB',
+
+    /** Current stroke width for arrows and rectangles */
+    currentStrokeWidth: 2,
+
+    /** Current line dash pattern: [] = solid, [5,3] = dashed, [2,2] = dotted */
+    currentLineDash: [],
+
     // ----------------------------------------------------------------
     // Initialization
     // ----------------------------------------------------------------
@@ -82,11 +88,21 @@ function annotationEditor() {
         return;
       }
 
+      if (typeof fabric === 'undefined') {
+        console.error('AnnotationEditor: Fabric.js not loaded');
+        return;
+      }
+
+      try {
         this.canvas = new fabric.Canvas(this.canvasEl, {
           selection: true,
           preserveObjectStacking: true,
           backgroundColor: '#f1f5f9',
         });
+      } catch (err) {
+        console.error('AnnotationEditor: failed to create canvas:', err);
+        return;
+      }
 
       this.setupEvents();
       this.setupKeyboard();
@@ -109,19 +125,76 @@ function annotationEditor() {
       };
       window.addEventListener('anno-delete-selected', this._onDeleteSelected);
 
-      this._onZoom = function (e) {
+      this._onColorChange = function (e) {
-        if (e.detail && e.detail.delta > 0) {
+        if (e.detail && e.detail.color) {
-          self.zoomIn();
+          self.currentColor = e.detail.color;
-        } else {
+          // Update selected object
-          self.zoomOut();
+          var active = self.canvas ? self.canvas.getActiveObject() : null;
+          if (active) {
+            if (active.objectType === 'marker') {
+              var items = active.getObjects();
+              if (items[0]) items[0].set('fill', e.detail.color);
+              active.markerColor = e.detail.color;
+            } else if (active.objectType === 'arrow') {
+              var items = active.getObjects();
+              if (items[0]) items[0].set('stroke', e.detail.color);
+              if (items[1]) items[1].set('fill', e.detail.color);
+              active.arrowColor = e.detail.color;
+            } else if (active.objectType === 'area') {
+              active.set('stroke', e.detail.color);
+              active.areaColor = e.detail.color;
+            }
+            self.canvas.renderAll();
+            self.isDirty = true;
+            window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
+          }
         }
       };
-      window.addEventListener('anno-zoom', this._onZoom);
+      window.addEventListener('anno-color-change', this._onColorChange);
 
-      this._onZoomReset = function () {
+      this._onStrokeWidthChange = function (e) {
-        self.resetZoom();
+        if (e.detail && e.detail.width) {
+          self.currentStrokeWidth = e.detail.width;
+          var active = self.canvas ? self.canvas.getActiveObject() : null;
+          if (active) {
+            if (active.objectType === 'arrow') {
+              var items = active.getObjects();
+              if (items[0]) items[0].set('strokeWidth', e.detail.width);
+              if (items[1]) items[1].set({ width: 8 + e.detail.width * 2, height: 8 + e.detail.width * 2 });
+              active.arrowStrokeWidth = e.detail.width;
+            } else if (active.objectType === 'area') {
+              active.set('strokeWidth', e.detail.width);
+              active.areaStrokeWidth = e.detail.width;
+            }
+            self.canvas.renderAll();
+            self.isDirty = true;
+            window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
+          }
+        }
       };
-      window.addEventListener('anno-zoom-reset', this._onZoomReset);
+      window.addEventListener('anno-stroke-width-change', this._onStrokeWidthChange);
+
+      this._onLineDashChange = function (e) {
+        if (e.detail) {
+          self.currentLineDash = e.detail.dash || [];
+          var active = self.canvas ? self.canvas.getActiveObject() : null;
+          if (active) {
+            var dashArr = self.currentLineDash.length > 0 ? self.currentLineDash.slice() : null;
+            if (active.objectType === 'arrow') {
+              var items = active.getObjects();
+              if (items[0]) items[0].set('strokeDashArray', dashArr);
+              active.arrowLineDash = self.currentLineDash.slice();
+            } else if (active.objectType === 'area') {
+              active.set('strokeDashArray', dashArr);
+              active.areaLineDash = self.currentLineDash.slice();
+            }
+            self.canvas.renderAll();
+            self.isDirty = true;
+            window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
+          }
+        }
+      };
+      window.addEventListener('anno-line-dash-change', this._onLineDashChange);
 
       this._onImageLoaded = function (e) {
         if (e.detail && e.detail.path) {
@@ -307,7 +380,7 @@ function annotationEditor() {
 
       var circle = new fabric.Circle({
         radius: 16,
-        fill: '#2563EB',
+        fill: this.currentColor,
         originX: 'center',
         originY: 'center',
         stroke: '#ffffff',
@@ -334,6 +407,7 @@ function annotationEditor() {
         // Custom properties
         objectType: 'marker',
         markerNumber: markerNumber,
+        markerColor: this.currentColor,
       });
 
       this.canvas.add(marker);
@@ -358,8 +432,9 @@ function annotationEditor() {
      */
     addArrow(x1, y1, x2, y2) {
       var line = new fabric.Line([x1, y1, x2, y2], {
-        stroke: '#DC2626',
+        stroke: this.currentColor,
-        strokeWidth: 2,
+        strokeWidth: this.currentStrokeWidth,
+        strokeDashArray: this.currentLineDash.length > 0 ? this.currentLineDash.slice() : null,
         originX: 'center',
         originY: 'center',
       });
@@ -371,9 +446,9 @@ function annotationEditor() {
         top: y2,
         originX: 'center',
         originY: 'center',
-        width: 12,
+        width: 8 + this.currentStrokeWidth * 2,
-        height: 12,
+        height: 8 + this.currentStrokeWidth * 2,
-        fill: '#DC2626',
+        fill: this.currentColor,
         angle: angle + 90,
       });
 
@@ -385,6 +460,9 @@ function annotationEditor() {
         arrowY1: y1,
         arrowX2: x2,
         arrowY2: y2,
+        arrowColor: this.currentColor,
+        arrowStrokeWidth: this.currentStrokeWidth,
+        arrowLineDash: this.currentLineDash.slice(),
       });
 
       this.canvas.add(arrow);
@@ -412,12 +490,15 @@ function annotationEditor() {
         top: y,
         width: width || 150,
         height: height || 100,
-        fill: 'rgba(37, 99, 235, 0.1)',
+        fill: 'rgba(0, 0, 0, 0)',
-        stroke: '#2563EB',
+        stroke: this.currentColor,
-        strokeWidth: 2,
+        strokeWidth: this.currentStrokeWidth,
-        strokeDashArray: [5, 3],
+        strokeDashArray: this.currentLineDash.length > 0 ? this.currentLineDash.slice() : null,
         selectable: true,
         objectType: 'area',
+        areaColor: this.currentColor,
+        areaStrokeWidth: this.currentStrokeWidth,
+        areaLineDash: this.currentLineDash.slice(),
       });
 
       this.canvas.add(rect);
@@ -433,7 +514,7 @@ function annotationEditor() {
     /**
      * Set the current interaction mode.
      *
-     * @param {'select'|'marker'|'arrow'|'rect'|'pan'} mode
+     * @param {'select'|'marker'|'arrow'|'rect'} mode
      */
     setMode(mode) {
       this.activeMode = mode;
@@ -444,12 +525,6 @@ function annotationEditor() {
         this.canvas.forEachObject(function (o) {
           o.selectable = true;
         });
-      } else if (mode === 'pan') {
-        this.canvas.selection = false;
-        this.canvas.defaultCursor = 'grab';
-        this.canvas.forEachObject(function (o) {
-          o.selectable = false;
-        });
       } else {
         // marker, arrow, rect
         this.canvas.selection = false;
@@ -465,8 +540,7 @@ function annotationEditor() {
     // ----------------------------------------------------------------
 
     /**
-     * Wire up all Fabric.js mouse events for drawing, panning, selection,
+     * Wire up all Fabric.js mouse events for drawing and selection.
-     * and zoom.
      */
     setupEvents() {
       var self = this;
@@ -475,9 +549,6 @@ function annotationEditor() {
       var drawStartY = 0;
       var tempRect = null;
       var tempLine = null;
-      var isPanning = false;
-      var lastPanX = 0;
-      var lastPanY = 0;
 
       // ---- mouse:down ----
 
@@ -487,6 +558,7 @@ function annotationEditor() {
         if (self.activeMode === 'marker') {
           self.addMarker(pointer.x, pointer.y);
           self.setMode('select');
+          window.dispatchEvent(new CustomEvent('anno-mode-changed', { detail: { mode: 'select' } }));
         } else if (self.activeMode === 'arrow') {
           isDrawing = true;
           drawStartX = pointer.x;
@@ -523,27 +595,12 @@ function annotationEditor() {
             objectType: '_temp',
           });
           self.canvas.add(tempRect);
-        } else if (self.activeMode === 'pan') {
-          isPanning = true;
-          lastPanX = opt.e.clientX;
-          lastPanY = opt.e.clientY;
-          self.canvas.defaultCursor = 'grabbing';
         }
       });
 
       // ---- mouse:move ----
 
       this.canvas.on('mouse:move', function (opt) {
-        if (isPanning) {
-          var vpt = self.canvas.viewportTransform;
-          vpt[4] += opt.e.clientX - lastPanX;
-          vpt[5] += opt.e.clientY - lastPanY;
-          lastPanX = opt.e.clientX;
-          lastPanY = opt.e.clientY;
-          self.canvas.requestRenderAll();
-          return;
-        }
-
         if (!isDrawing) return;
         var pointer = self.canvas.getPointer(opt.e);
 
@@ -595,18 +652,16 @@ function annotationEditor() {
 
           isDrawing = false;
           self.setMode('select');
-        }
+          window.dispatchEvent(new CustomEvent('anno-mode-changed', { detail: { mode: 'select' } }));
-
-        if (isPanning) {
-          isPanning = false;
-          self.canvas.defaultCursor = 'grab';
         }
       });
 
       // ---- Selection events ----
 
       this.canvas.on('selection:created', function (e) {
-        window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true } }));
+        var sel = e.selected && e.selected[0];
+        var objType = sel ? sel.objectType : null;
+        window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true, objectType: objType } }));
         var selected = e.selected;
         if (selected && selected.length === 1 && selected[0].objectType === 'marker') {
           window.dispatchEvent(new CustomEvent('marker-selected', {
@@ -616,7 +671,9 @@ function annotationEditor() {
       });
 
       this.canvas.on('selection:updated', function (e) {
-        window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true } }));
+        var sel = e.selected && e.selected[0];
+        var objType = sel ? sel.objectType : null;
+        window.dispatchEvent(new CustomEvent('annotation-selected', { detail: { selected: true, objectType: objType } }));
         var selected = e.selected;
         if (selected && selected.length === 1 && selected[0].objectType === 'marker') {
           window.dispatchEvent(new CustomEvent('marker-selected', {
@@ -642,21 +699,6 @@ function annotationEditor() {
         window.dispatchEvent(new CustomEvent('annotations-changed', { detail: { json: self.getAnnotationsJson() } }));
       });
 
-      // ---- Zoom with mouse wheel ----
-
-      this.canvas.on('mouse:wheel', function (opt) {
-        var delta = opt.e.deltaY;
-        var zoom = self.canvas.getZoom();
-        zoom *= Math.pow(0.999, delta);
-        zoom = Math.max(0.25, Math.min(5, zoom));
-        self.canvas.zoomToPoint(
-          { x: opt.e.offsetX, y: opt.e.offsetY },
-          zoom
-        );
-        self.zoomLevel = zoom;
-        opt.e.preventDefault();
-        opt.e.stopPropagation();
-      });
     },
 
     // ----------------------------------------------------------------
@@ -728,37 +770,6 @@ function annotationEditor() {
       this.canvas.renderAll();
     },
 
-    // ----------------------------------------------------------------
-    // Zoom controls
-    // ----------------------------------------------------------------
-
-    /**
-     * Zoom in by 20%.
-     */
-    zoomIn() {
-      var zoom = Math.min(this.canvas.getZoom() * 1.2, 5);
-      this.canvas.setZoom(zoom);
-      this.zoomLevel = zoom;
-    },
-
-    /**
-     * Zoom out by 20%.
-     */
-    zoomOut() {
-      var zoom = Math.max(this.canvas.getZoom() / 1.2, 0.25);
-      this.canvas.setZoom(zoom);
-      this.zoomLevel = zoom;
-    },
-
-    /**
-     * Reset zoom and pan to default (1:1, origin at top-left).
-     */
-    resetZoom() {
-      this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
-      this.canvas.setZoom(1);
-      this.zoomLevel = 1;
-    },
-
     // ----------------------------------------------------------------
     // Canvas sizing
     // ----------------------------------------------------------------
@@ -811,6 +822,15 @@ function annotationEditor() {
           markerNumber: obj.markerNumber || null,
         };
 
+        // Color and stroke width
+        if (obj.markerColor) data.fill = obj.markerColor;
+        if (obj.arrowColor) data.stroke = obj.arrowColor;
+        if (obj.areaColor) data.stroke = obj.areaColor;
+        if (obj.arrowStrokeWidth) data.strokeWidth = obj.arrowStrokeWidth;
+        if (obj.areaStrokeWidth) data.strokeWidth = obj.areaStrokeWidth;
+        if (obj.arrowLineDash) data.lineDash = obj.arrowLineDash;
+        if (obj.areaLineDash) data.lineDash = obj.areaLineDash;
+
         // Arrow-specific: store original endpoints
         if (obj.objectType === 'arrow') {
           data.x1 = obj.arrowX1 != null ? Math.round(obj.arrowX1 * 100) / 100 : null;
@@ -860,18 +880,41 @@ function annotationEditor() {
           var obj = objects[i];
 
           if (obj.type === 'marker') {
+            var savedColor = this.currentColor;
+            if (obj.fill) this.currentColor = obj.fill;
             this.addMarker(obj.left, obj.top, obj.markerNumber);
+            this.currentColor = savedColor;
           } else if (obj.type === 'arrow') {
+            var savedColor2 = this.currentColor;
+            var savedWidth = this.currentStrokeWidth;
+            var savedDash = this.currentLineDash.slice();
+            if (obj.stroke) this.currentColor = obj.stroke;
+            if (obj.strokeWidth) this.currentStrokeWidth = obj.strokeWidth;
+            if (obj.lineDash) this.currentLineDash = obj.lineDash;
+            else this.currentLineDash = [];
             // Reconstruct arrow from stored endpoints or from position/size
             var x1 = obj.x1 != null ? obj.x1 : obj.left;
             var y1 = obj.y1 != null ? obj.y1 : obj.top;
             var x2 = obj.x2 != null ? obj.x2 : obj.left + (obj.width || 100);
             var y2 = obj.y2 != null ? obj.y2 : obj.top + (obj.height || 50);
             this.addArrow(x1, y1, x2, y2);
+            this.currentColor = savedColor2;
+            this.currentStrokeWidth = savedWidth;
+            this.currentLineDash = savedDash;
           } else if (obj.type === 'area') {
+            var savedColor3 = this.currentColor;
+            var savedWidth2 = this.currentStrokeWidth;
+            var savedDash2 = this.currentLineDash.slice();
+            if (obj.stroke) this.currentColor = obj.stroke;
+            if (obj.strokeWidth) this.currentStrokeWidth = obj.strokeWidth;
+            if (obj.lineDash) this.currentLineDash = obj.lineDash;
+            else this.currentLineDash = [];
             var w = (obj.width || 150) * (obj.scaleX || 1);
             var h = (obj.height || 100) * (obj.scaleY || 1);
             this.addRect(obj.left, obj.top, w, h);
+            this.currentColor = savedColor3;
+            this.currentStrokeWidth = savedWidth2;
+            this.currentLineDash = savedDash2;
           }
         }
 
@@ -959,11 +1002,14 @@ function annotationEditor() {
       if (this._onDeleteSelected) {
         window.removeEventListener('anno-delete-selected', this._onDeleteSelected);
       }
-      if (this._onZoom) {
+      if (this._onColorChange) {
-        window.removeEventListener('anno-zoom', this._onZoom);
+        window.removeEventListener('anno-color-change', this._onColorChange);
       }
-      if (this._onZoomReset) {
+      if (this._onStrokeWidthChange) {
-        window.removeEventListener('anno-zoom-reset', this._onZoomReset);
+        window.removeEventListener('anno-stroke-width-change', this._onStrokeWidthChange);
+      }
+      if (this._onLineDashChange) {
+        window.removeEventListener('anno-line-dash-change', this._onLineDashChange);
       }
       if (this._onImageLoaded) {
         window.removeEventListener('image-loaded', this._onImageLoaded);

client/static/js/annotation-viewer.js

@@ -314,3 +314,197 @@ function annotationViewer() {
     }
   };
 }
+
+/**
+ * Standalone function to render an image with annotations overlay.
+ * For use in read-only previews (e.g. task cards) without Alpine.js.
+ *
+ * @param {HTMLCanvasElement} canvas - the canvas element to draw on
+ * @param {string} imageUrl - URL of the image to load
+ * @param {Object|string|null} annotationsJson - annotations data from the editor
+ * @param {Object} [options] - optional settings
+ * @param {number} [options.maxHeight=192] - max canvas height in pixels
+ */
+function renderAnnotationPreview(canvas, imageUrl, annotationsJson, options) {
+  if (!canvas || !imageUrl) return;
+
+  var opts = options || {};
+  var maxHeight = opts.maxHeight || 192;
+  var ctx = canvas.getContext('2d');
+
+  var annotations = null;
+  if (annotationsJson) {
+    try {
+      annotations = (typeof annotationsJson === 'string')
+        ? JSON.parse(annotationsJson)
+        : annotationsJson;
+    } catch (e) {
+      console.error('renderAnnotationPreview: invalid annotations JSON');
+    }
+  }
+
+  var isPdf = imageUrl.toLowerCase().replace(/\?.*$/, '').endsWith('.pdf');
+
+  if (isPdf && typeof pdfjsLib !== 'undefined') {
+    pdfjsLib.getDocument(imageUrl).promise.then(function (pdf) {
+      return pdf.getPage(1);
+    }).then(function (page) {
+      var viewport = page.getViewport({ scale: 2 });
+      var offCanvas = document.createElement('canvas');
+      offCanvas.width = viewport.width;
+      offCanvas.height = viewport.height;
+      var offCtx = offCanvas.getContext('2d');
+      page.render({ canvasContext: offCtx, viewport: viewport }).promise.then(function () {
+        _drawPreview(canvas, ctx, offCanvas, viewport.width, viewport.height, annotations, maxHeight);
+      });
+    }).catch(function (err) {
+      console.error('renderAnnotationPreview: PDF load failed:', err);
+    });
+  } else {
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = function () {
+      _drawPreview(canvas, ctx, img, img.width, img.height, annotations, maxHeight);
+    };
+    img.onerror = function () {
+      console.error('renderAnnotationPreview: image load failed:', imageUrl);
+    };
+    img.src = imageUrl;
+  }
+}
+
+/**
+ * Internal: draw image + annotations on canvas, scaled to fit.
+ */
+function _drawPreview(canvas, ctx, source, srcW, srcH, annotations, maxHeight) {
+  var container = canvas.parentElement;
+  var containerWidth = container ? container.clientWidth : 400;
+  var scale = Math.min(containerWidth / srcW, maxHeight / srcH, 1);
+
+  canvas.width = Math.round(srcW * scale);
+  canvas.height = Math.round(srcH * scale);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(source, 0, 0, canvas.width, canvas.height);
+
+  if (annotations && annotations.objects) {
+    var annoScale = canvas.width / (annotations.width || srcW);
+    _drawEditorAnnotations(ctx, annotations, annoScale);
+  } else if (annotations && annotations.markers) {
+    _drawLegacyAnnotations(ctx, annotations, scale);
+  }
+}
+
+/**
+ * Draw annotations in the editor format (objects: marker/arrow/area).
+ */
+function _drawEditorAnnotations(ctx, data, scale) {
+  var objects = data.objects || [];
+
+  // Calculate annotation scale: annotations were placed on a canvas of
+  // data.width x data.height, but we're drawing on a scaled canvas.
+  // The image was scaled to fit data.width x data.height in the editor,
+  // and now we scale again for preview. Use overall scale factor.
+  var annoScale = scale;
+
+  for (var i = 0; i < objects.length; i++) {
+    var obj = objects[i];
+
+    if (obj.type === 'marker') {
+      _drawPreviewMarker(ctx, obj, annoScale);
+    } else if (obj.type === 'arrow') {
+      _drawPreviewArrow(ctx, obj, annoScale);
+    } else if (obj.type === 'area') {
+      _drawPreviewArea(ctx, obj, annoScale);
+    }
+  }
+}
+
+function _drawPreviewMarker(ctx, obj, scale) {
+  var x = obj.left * scale;
+  var y = obj.top * scale;
+  var color = obj.fill || '#2563EB';
+  var radius = 14 * Math.min(scale, 1);
+
+  ctx.beginPath();
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.globalAlpha = 0.85;
+  ctx.fill();
+  ctx.globalAlpha = 1;
+
+  ctx.strokeStyle = '#ffffff';
+  ctx.lineWidth = 2;
+  ctx.stroke();
+
+  if (obj.markerNumber) {
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold ' + Math.max(10, Math.round(12 * Math.min(scale, 1))) + 'px Inter, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(obj.markerNumber.toString(), x, y);
+  }
+}
+
+function _drawPreviewArrow(ctx, obj, scale) {
+  var x1 = (obj.x1 != null ? obj.x1 : obj.left) * scale;
+  var y1 = (obj.y1 != null ? obj.y1 : obj.top) * scale;
+  var x2 = (obj.x2 != null ? obj.x2 : (obj.left + (obj.width || 100))) * scale;
+  var y2 = (obj.y2 != null ? obj.y2 : (obj.top + (obj.height || 50))) * scale;
+  var color = obj.stroke || '#DC2626';
+  var lineWidth = obj.strokeWidth || 2;
+
+  var lineDash = obj.lineDash || [];
+  ctx.setLineDash(lineDash);
+
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.stroke();
+
+  ctx.setLineDash([]);
+
+  // Arrowhead
+  var angle = Math.atan2(y2 - y1, x2 - x1);
+  var headLen = 8 + lineWidth * 2;
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - headLen * Math.cos(angle - Math.PI / 6), y2 - headLen * Math.sin(angle - Math.PI / 6));
+  ctx.lineTo(x2 - headLen * Math.cos(angle + Math.PI / 6), y2 - headLen * Math.sin(angle + Math.PI / 6));
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+
+function _drawPreviewArea(ctx, obj, scale) {
+  var x = obj.left * scale;
+  var y = obj.top * scale;
+  var w = (obj.width || 150) * (obj.scaleX || 1) * scale;
+  var h = (obj.height || 100) * (obj.scaleY || 1) * scale;
+  var color = obj.stroke || '#2563EB';
+  var lineWidth = obj.strokeWidth || 2;
+
+  var lineDash = obj.lineDash || [5, 3];
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.setLineDash(lineDash);
+  ctx.strokeRect(x, y, w, h);
+  ctx.setLineDash([]);
+}
+
+/**
+ * Draw annotations in the legacy format (markers: point/rectangle).
+ */
+function _drawLegacyAnnotations(ctx, data, scale) {
+  var markers = data.markers || [];
+  for (var i = 0; i < markers.length; i++) {
+    var m = markers[i];
+    if (m.type === 'point') {
+      _drawPreviewMarker(ctx, { left: m.x, top: m.y, markerNumber: m.marker_number, fill: '#64748B' }, scale);
+    } else if (m.type === 'rectangle') {
+      _drawPreviewArea(ctx, { left: m.x, top: m.y, width: m.width, height: m.height, stroke: '#64748B' }, scale);
+    }
+  }
+}

client/tailwind.config.js

@@ -12,11 +12,31 @@ module.exports = {
           DEFAULT: '#2563EB',
           dark: '#1E40AF',
           light: '#3B82F6',
+          50: '#EFF6FF',
+          100: '#DBEAFE',
+          200: '#BFDBFE',
+          300: '#93C5FD',
+          400: '#60A5FA',
+          500: '#3B82F6',
+          600: '#2563EB',
+          700: '#1D4ED8',
+          800: '#1E40AF',
+          900: '#1E3A8A',
         },
         steel: {
           DEFAULT: '#64748B',
           light: '#94A3B8',
           dark: '#475569',
+          50: '#F8FAFC',
+          100: '#F1F5F9',
+          200: '#E2E8F0',
+          300: '#CBD5E1',
+          400: '#94A3B8',
+          500: '#64748B',
+          600: '#475569',
+          700: '#334155',
+          800: '#1E293B',
+          900: '#0F172A',
         },
         measure: {
           pass: '#059669',

client/templates/base.html

@@ -18,56 +18,8 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 
-  <!-- TailwindCSS CDN -->
+  <!-- TailwindCSS (compiled) -->
-  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.css') }}">
-  <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          colors: {
-            primary: {
-              DEFAULT: '#2563EB',
-              dark: '#1E40AF',
-              light: '#3B82F6',
-              50: '#EFF6FF',
-              100: '#DBEAFE',
-              200: '#BFDBFE',
-              500: '#3B82F6',
-              600: '#2563EB',
-              700: '#1D4ED8',
-              800: '#1E40AF',
-              900: '#1E3A8A',
-            },
-            steel: {
-              DEFAULT: '#64748B',
-              light: '#94A3B8',
-              dark: '#475569',
-              50: '#F8FAFC',
-              100: '#F1F5F9',
-              200: '#E2E8F0',
-              300: '#CBD5E1',
-              400: '#94A3B8',
-              500: '#64748B',
-              600: '#475569',
-              700: '#334155',
-              800: '#1E293B',
-              900: '#0F172A',
-            },
-            measure: {
-              pass: '#059669',
-              warning: '#D97706',
-              fail: '#DC2626',
-            },
-          },
-          fontFamily: {
-            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-            mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
-          },
-        },
-      },
-    }
-  </script>
 
   <!-- Theme CSS Variables -->
   <link rel="stylesheet" href="{{ url_for('static', filename='css/themes.css') }}">

client/templates/maker/recipe_editor.html

@@ -10,7 +10,6 @@
 
 {% block extra_head %}
 <style>
-  /* Drag-and-drop overlay */
   .drop-zone {
     border: 2px dashed var(--border-color);
     border-radius: 0.75rem;
@@ -23,50 +22,6 @@
   .dark .drop-zone.drag-over {
     background-color: rgba(59, 130, 246, 0.08);
   }
-
-  /* Annotation toolbar button */
-  .anno-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.375rem 0.625rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    border-radius: 0.375rem;
-    border: 1px solid var(--border-color);
-    background: var(--bg-card);
-    color: var(--text-secondary);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    gap: 0.25rem;
-  }
-  .anno-btn:hover {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border-color: var(--text-muted);
-  }
-  .anno-btn.active {
-    background: var(--color-primary);
-    color: #fff;
-    border-color: var(--color-primary);
-  }
-  .anno-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  /* Canvas container */
-  .canvas-container {
-    position: relative;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 0.5rem;
-    overflow: hidden;
-    min-height: 400px;
-  }
-  .canvas-container canvas {
-    display: block;
-  }
 </style>
 {% endblock %}
 
@@ -131,7 +86,7 @@
         <p class="text-sm text-[var(--text-secondary)]" x-text="name"></p>
         {% else %}
         <p class="text-sm text-[var(--text-secondary)]">
-          {{ _('Compila i dati della ricetta e carica il disegno tecnico') }}
+          {{ _('Compila i dati della ricetta') }}
         </p>
         {% endif %}
       </div>
@@ -281,7 +236,7 @@
   </div>
 
   <!-- ============================================================
-       2. Card: Upload / Annotazioni (Canvas Fabric.js)
+       2. Card: Immagine Anteprima (thumbnail ricetta)
        ============================================================ -->
   <div class="tmf-card mb-6">
     <div class="tmf-card-header flex items-center justify-between">
@@ -290,151 +245,36 @@
           <path stroke-linecap="round" stroke-linejoin="round"
                 d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
         </svg>
-        {{ _('Disegno Tecnico e Annotazioni') }}
+        {{ _('Immagine Anteprima') }}
       </div>
-      <!-- File indicator -->
+      <span x-show="currentFilePath" class="badge badge-pass text-xs">
-      <template x-if="currentFilePath">
-        <span class="badge badge-pass text-xs">
         <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
         </svg>
         {{ _('Immagine caricata') }}
       </span>
-      </template>
     </div>
 
     <div class="tmf-card-body space-y-4">
 
-      <!-- Annotation Toolbar -->
+      <!-- Current image preview -->
       <div x-show="currentFilePath"
-           x-transition
+           class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
-           class="flex flex-wrap items-center gap-1.5 p-2 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
+        <img x-bind:src="currentFilePath ? ('/maker/api/files/' + currentFilePath) : ''"
-
+             class="block mx-auto max-h-64 object-contain p-2"
-        <!-- Select Tool -->
+             loading="lazy">
-        <button type="button"
+        <!-- Remove button -->
-                class="anno-btn"
+        <button @click.stop="currentFilePath = ''"
-                :class="{ 'active': annoTool === 'select' }"
+                type="button"
-                @click="setAnnoTool('select')"
+                class="absolute top-2 right-2 p-1.5 rounded-full bg-red-500/80 hover:bg-red-600 text-white transition-colors"
-                title="{{ _('Seleziona') }}">
+                title="{{ _('Rimuovi immagine') }}">
           <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
           </svg>
-          <span class="hidden sm:inline">{{ _('Seleziona') }}</span>
-        </button>
-
-        <!-- Marker Tool -->
-        <button type="button"
-                class="anno-btn"
-                :class="{ 'active': annoTool === 'marker' }"
-                @click="setAnnoTool('marker')"
-                title="{{ _('Marker numerato') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
-          </svg>
-          <span class="hidden sm:inline">{{ _('Marker') }} #</span>
-        </button>
-
-        <!-- Arrow Tool -->
-        <button type="button"
-                class="anno-btn"
-                :class="{ 'active': annoTool === 'arrow' }"
-                @click="setAnnoTool('arrow')"
-                title="{{ _('Freccia') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M17 8l4 4m0 0l-4 4m4-4H3"/>
-          </svg>
-          <span class="hidden sm:inline">{{ _('Freccia') }}</span>
-        </button>
-
-        <!-- Rectangle Tool -->
-        <button type="button"
-                class="anno-btn"
-                :class="{ 'active': annoTool === 'rect' }"
-                @click="setAnnoTool('rect')"
-                title="{{ _('Rettangolo') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-          </svg>
-          <span class="hidden sm:inline">{{ _('Rettangolo') }}</span>
-        </button>
-
-        <!-- Separator -->
-        <div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
-
-        <!-- Delete -->
-        <button type="button"
-                class="anno-btn text-red-500 hover:text-red-600"
-                @click="deleteAnnotation()"
-                :disabled="!annoSelected"
-                title="{{ _('Elimina selezionato') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-          </svg>
-          <span class="hidden sm:inline">{{ _('Elimina') }}</span>
-        </button>
-
-        <!-- Separator -->
-        <div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
-
-        <!-- Zoom Controls -->
-        <span class="text-xs text-[var(--text-muted)] hidden sm:inline mr-1">{{ _('Zoom') }}:</span>
-        <button type="button"
-                class="anno-btn"
-                @click="zoomCanvas(-0.1)"
-                title="{{ _('Zoom indietro') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/>
-          </svg>
-        </button>
-        <button type="button"
-                class="anno-btn"
-                @click="zoomCanvas(0.1)"
-                title="{{ _('Zoom avanti') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
-          </svg>
-        </button>
-        <button type="button"
-                class="anno-btn"
-                @click="resetZoom()"
-                title="{{ _('Reset zoom') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-          </svg>
-        </button>
-
-        <!-- Separator -->
-        <div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
-
-        <!-- Pan Mode -->
-        <button type="button"
-                class="anno-btn"
-                :class="{ 'active': annoTool === 'pan' }"
-                @click="setAnnoTool('pan')"
-                title="{{ _('Trascina') }}">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-2V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"/>
-          </svg>
-          <span class="hidden sm:inline">{{ _('Pan') }}</span>
         </button>
       </div>
 
-      <!-- Canvas Area (shown when image loaded) -->
+      <!-- Upload area -->
-      <div x-show="currentFilePath"
-           x-transition
-           x-data="annotationEditor()"
-           class="canvas-container"
-           id="annotationCanvasContainer">
-        <canvas id="annotationCanvas" x-ref="fabricCanvas"></canvas>
-      </div>
-
-      <!-- Drop Zone (always visible for uploading/replacing) -->
       <div class="drop-zone p-6 text-center cursor-pointer relative"
            :class="{ 'drag-over': dragOver }"
            @dragover.prevent="dragOver = true"
@@ -449,40 +289,37 @@
                class="hidden">
 
         <!-- Uploading spinner -->
-        <template x-if="uploadingFile">
+        <div x-show="uploadingFile" class="flex flex-col items-center gap-3 py-4">
-          <div class="flex flex-col items-center gap-3 py-4">
           <svg class="w-8 h-8 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
           </svg>
-            <p class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</p>
+          <span class="text-sm text-[var(--text-secondary)]">{{ _('Caricamento in corso...') }}</span>
         </div>
-        </template>
 
         <!-- Upload prompt -->
-        <template x-if="!uploadingFile">
+        <div x-show="!uploadingFile" class="flex flex-col items-center gap-3 py-4">
-          <div class="flex flex-col items-center gap-3 py-4">
           <div class="w-12 h-12 rounded-full bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center">
             <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round"
                     d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
             </svg>
           </div>
-            <div>
+          <div class="text-center">
-              <p class="text-sm font-medium text-[var(--text-primary)]">
+            <span x-show="!currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold mb-2">
-                <template x-if="!currentFilePath">
+              {{ _('Carica Immagine o PDF') }}
-                  <span>{{ _('Trascina qui il disegno tecnico oppure clicca per selezionare') }}</span>
+            </span>
-                </template>
+            <span x-show="currentFilePath" class="inline-block px-4 py-2 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-primary)] text-sm font-semibold mb-2 border border-[var(--border-color)]">
-                <template x-if="currentFilePath">
+              {{ _('Sostituisci Immagine') }}
-                  <span>{{ _('Trascina qui per sostituire il disegno tecnico') }}</span>
+            </span>
-                </template>
+            <p class="text-xs text-[var(--text-muted)]">
+              {{ _('Trascina qui oppure clicca. Formati: PNG, JPG, WebP, PDF (max 50MB)') }}
             </p>
             <p class="text-xs text-[var(--text-muted)] mt-1">
-                {{ _('Formati supportati: PNG, JPG, PDF') }}
+              {{ _('Usata come thumbnail nella lista ricette') }}
             </p>
           </div>
         </div>
-        </template>
       </div>
 
     </div>
@@ -549,7 +386,7 @@
   {% endif %}
 
   <!-- ============================================================
-       4. Footer Action Buttons
+       3. Footer Action Buttons
        ============================================================ -->
   <div class="flex flex-col sm:flex-row items-center gap-3 pt-4 pb-8">
     <button @click="saveRecipe()"
@@ -579,12 +416,6 @@
 {% endblock %}
 
 {% block extra_js %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-<script>
-  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-</script>
-<script src="{{ url_for('static', filename='js/annotation-editor.js') }}?v=5"></script>
 <script>
 function recipeEditor() {
   return {
@@ -598,16 +429,6 @@ function recipeEditor() {
     description: {{ (recipe.description if recipe and recipe.description else '')|tojson }},
     changeNotes: '',
 
-    // ---- File upload ----
-    currentFilePath: {{ (recipe.current_version.tasks[0].file_path if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 else None)|tojson }},
-    uploadingFile: false,
-    dragOver: false,
-
-    // ---- Annotation state (managed by annotation-editor.js) ----
-    annotationsJson: {{ (recipe.current_version.tasks[0].annotations_json if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 and recipe.current_version.tasks[0].annotations_json else None)|tojson }},
-    annoTool: 'select',
-    annoSelected: false,
-
     // ---- Save state ----
     saving: false,
     saved: false,
@@ -617,20 +438,10 @@ function recipeEditor() {
     versions: {{ (recipe.versions if recipe and recipe.versions else [])|tojson }},
     currentVersion: {{ (recipe.current_version.version_number if recipe and recipe.current_version else 0)|tojson }},
 
-    // ============================================================
+    // ---- File upload (thumbnail) ----
-    // Init
+    currentFilePath: {{ (recipe.current_version.tasks[0].file_path if recipe and recipe.current_version and recipe.current_version.tasks and recipe.current_version.tasks|length > 0 and recipe.current_version.tasks[0].file_path else '')|tojson }},
-    // ============================================================
+    uploadingFile: false,
-    init() {
+    dragOver: false,
-      // Listen for annotation selection events from annotation-editor.js
-      window.addEventListener('annotation-selected', (e) => {
-        this.annoSelected = e.detail.selected;
-      });
-
-      // Listen for annotation data changes
-      window.addEventListener('annotations-changed', (e) => {
-        this.annotationsJson = e.detail.json;
-      });
-    },
 
     // ============================================================
     // Save Recipe
@@ -648,23 +459,16 @@ function recipeEditor() {
         description: this.description.trim(),
       };
 
+      // Include file_path for thumbnail
+      if (this.currentFilePath) {
+        payload.file_path = this.currentFilePath;
+      }
+
       // Include change notes if editing
       if (!this.isNew && this.changeNotes.trim()) {
         payload.change_notes = this.changeNotes.trim();
       }
 
-      // Include annotations if available (may be a JSON string or an object)
-      if (this.annotationsJson) {
-        payload.annotations_json = (typeof this.annotationsJson === 'string')
-          ? JSON.parse(this.annotationsJson)
-          : this.annotationsJson;
-      }
-
-      // Include file path if uploaded
-      if (this.currentFilePath) {
-        payload.file_path = this.currentFilePath;
-      }
-
       const url = this.isNew
         ? '/maker/api/recipes'
         : '/maker/api/recipes/' + this.recipeId;
@@ -683,7 +487,7 @@ function recipeEditor() {
         const data = await resp.json();
 
         if (data.error) {
-          var detail = data.detail || data.error || '{{ _("Errore nel salvataggio") }}';
+          var detail = data.detail || data.error || {{ _("Errore nel salvataggio")|tojson }};
           this.errorMessage = (typeof detail === 'string') ? detail : JSON.stringify(detail);
           this.saving = false;
           return;
@@ -711,108 +515,12 @@ function recipeEditor() {
 
       } catch (err) {
         console.error('Save error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
 
       this.saving = false;
     },
 
-    // ============================================================
-    // File Upload
-    // ============================================================
-    async uploadFile(file) {
-      if (!file) return;
-
-      // Validate file type
-      const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'application/pdf'];
-      if (!allowedTypes.includes(file.type)) {
-        this.errorMessage = '{{ _("Formato file non supportato. Usa PNG, JPG o PDF.") }}';
-        return;
-      }
-
-      // Validate file size (max 20MB)
-      const maxSize = 20 * 1024 * 1024;
-      if (file.size > maxSize) {
-        this.errorMessage = '{{ _("File troppo grande. Dimensione massima: 20MB.") }}';
-        return;
-      }
-
-      this.uploadingFile = true;
-      this.errorMessage = '';
-
-      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
-      const formData = new FormData();
-      formData.append('file', file);
-
-      if (this.recipeId) {
-        formData.append('recipe_id', this.recipeId);
-      }
-
-      try {
-        const resp = await fetch('/maker/api/upload', {
-          method: 'POST',
-          headers: {
-            'X-CSRFToken': csrfToken || ''
-          },
-          body: formData
-        });
-
-        const data = await resp.json();
-
-        if (data.error) {
-          this.errorMessage = data.detail || '{{ _("Errore durante il caricamento del file") }}';
-        } else {
-          this.currentFilePath = data.file_path;
-          // Notify annotation-editor to load the new image
-          window.dispatchEvent(new CustomEvent('image-loaded', {
-            detail: { path: data.file_path, annotations: null }
-          }));
-        }
-
-      } catch (err) {
-        console.error('Upload error:', err);
-        this.errorMessage = '{{ _("Errore di connessione durante il caricamento") }}';
-      }
-
-      this.uploadingFile = false;
-      this.dragOver = false;
-    },
-
-    // ============================================================
-    // Drag & Drop
-    // ============================================================
-    handleDrop(event) {
-      this.dragOver = false;
-      const files = event.dataTransfer?.files;
-      if (files && files.length > 0) {
-        this.uploadFile(files[0]);
-      }
-    },
-
-    // ============================================================
-    // Annotation Tools (delegates to annotation-editor.js)
-    // ============================================================
-    setAnnoTool(tool) {
-      this.annoTool = tool;
-      window.dispatchEvent(new CustomEvent('anno-tool-change', {
-        detail: { tool }
-      }));
-    },
-
-    deleteAnnotation() {
-      window.dispatchEvent(new CustomEvent('anno-delete-selected'));
-    },
-
-    zoomCanvas(delta) {
-      window.dispatchEvent(new CustomEvent('anno-zoom', {
-        detail: { delta }
-      }));
-    },
-
-    resetZoom() {
-      window.dispatchEvent(new CustomEvent('anno-zoom-reset'));
-    },
-
     // ============================================================
     // Navigation
     // ============================================================
@@ -826,6 +534,69 @@ function recipeEditor() {
       if (this.recipeId) {
         window.location.href = '/maker/recipes/' + this.recipeId + '/tasks';
       }
+    },
+
+    // ============================================================
+    // File Upload (thumbnail)
+    // ============================================================
+    handleDrop(event) {
+      this.dragOver = false;
+      const files = event.dataTransfer?.files;
+      if (files && files.length > 0) {
+        this.uploadFile(files[0]);
+      }
+    },
+
+    async uploadFile(file) {
+      if (!file) return;
+
+      // Validate file type
+      const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'application/pdf'];
+      if (!allowed.includes(file.type)) {
+        this.errorMessage = {{ _("Formato file non supportato. Usa PNG, JPG, GIF, WebP o PDF.")|tojson }};
+        return;
+      }
+
+      // Validate size (50MB)
+      if (file.size > 50 * 1024 * 1024) {
+        this.errorMessage = {{ _("File troppo grande. Massimo 50MB.")|tojson }};
+        return;
+      }
+
+      this.uploadingFile = true;
+      this.errorMessage = '';
+
+      const csrfToken = document.querySelector('meta[name=csrf-token]')?.content;
+
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+        if (this.recipeId) {
+          formData.append('recipe_id', this.recipeId);
+        }
+
+        const resp = await fetch('/maker/api/upload', {
+          method: 'POST',
+          headers: { 'X-CSRFToken': csrfToken || '' },
+          body: formData
+        });
+
+        const data = await resp.json();
+
+        if (data.error) {
+          this.errorMessage = data.detail || {{ _("Errore nel caricamento del file")|tojson }};
+          this.uploadingFile = false;
+          return;
+        }
+
+        this.currentFilePath = data.file_path;
+
+      } catch (err) {
+        console.error('Upload error:', err);
+        this.errorMessage = {{ _("Errore di connessione durante l'upload")|tojson }};
+      }
+
+      this.uploadingFile = false;
     }
   };
 }

client/templates/maker/recipe_list.html

@@ -152,6 +152,16 @@
         <div class="p-5 sm:p-6">
           <!-- Card Header -->
           <div class="flex flex-col sm:flex-row sm:items-start gap-4 mb-4">
+            <!-- Thumbnail -->
+            <template x-if="recipe.current_version && recipe.current_version.tasks && recipe.current_version.tasks.find(t => t.file_path && t.file_type === 'image')">
+              <div class="w-20 h-20 rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)] shrink-0">
+                <img :src="'/maker/api/files/' + recipe.current_version.tasks.find(t => t.file_path && t.file_type === 'image').file_path"
+                     class="w-full h-full object-cover"
+                     loading="lazy"
+                     onerror="this.parentElement.style.display='none'">
+              </div>
+            </template>
+
             <!-- Left: Recipe Info -->
             <div class="flex-1 min-w-0">
               <!-- Badges Row -->

client/templates/maker/recipe_preview.html

@@ -34,6 +34,14 @@
 {% endblock %}
 
 {% block content %}
+<script>
+  window.__taskAnnotations = {};
+  {% for task in recipe.tasks %}
+  {% if task.annotations_json %}
+  window.__taskAnnotations[{{ task.id }}] = {{ task.annotations_json|tojson }};
+  {% endif %}
+  {% endfor %}
+</script>
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl"
      x-data="recipePreview()"
      x-cloak>
@@ -208,7 +216,7 @@
                x-data="annotationViewer()"
                x-init="
                  imageUrl = '/maker/api/files/{{ task.file_path }}';
-                 annotations = {{ task.annotations_json|default('null')|tojson }};
+                 annotations = window.__taskAnnotations[{{ task.id }}] || null;
                  $nextTick(() => init());
                ">
             <canvas x-ref="annotationCanvas"></canvas>

client/templates/maker/task_drawing.html

@@ -0,0 +1,506 @@
+{% extends "base.html" %}
+{% block title %}{{ _('Disegno Task') }} #{{ (task.order_index or 0) + 1 }} — {{ recipe.code }} — TieMeasureFlow{% endblock %}
+
+{% block extra_head %}
+<style>
+  /* Annotation toolbar button */
+  .anno-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.375rem 0.625rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    gap: 0.25rem;
+  }
+  .anno-btn:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border-color: var(--text-muted);
+  }
+  .anno-btn.active {
+    background: var(--color-primary);
+    color: #fff;
+    border-color: var(--color-primary);
+  }
+  .anno-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* Canvas container */
+  .canvas-container {
+    position: relative;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    min-height: 400px;
+  }
+  .canvas-container canvas {
+    display: block;
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<script>
+  window.__taskData = {{ task|tojson }};
+  window.__i18n_taskDrawing = {
+    saving: {{ _("Salvataggio...")|tojson }},
+    saveAnnotations: {{ _("Salva Annotazioni")|tojson }},
+    saveError: {{ _("Errore nel salvataggio delle annotazioni")|tojson }},
+    saveSuccess: {{ _("Annotazioni salvate con successo")|tojson }},
+    connectionError: {{ _("Errore di connessione al server")|tojson }}
+  };
+</script>
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl"
+     x-data="taskDrawing()"
+     x-cloak>
+
+  <!-- ============================================================
+       Breadcrumb
+       ============================================================ -->
+  <nav class="mb-6" aria-label="Breadcrumb">
+    <ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+      <li>
+        <a href="{{ url_for('maker.recipe_list') }}"
+           class="hover:text-primary transition-colors inline-flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+          {{ _('Ricette') }}
+        </a>
+      </li>
+      <li>
+        <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+        </svg>
+      </li>
+      <li>
+        <a href="{{ url_for('maker.recipe_edit', recipe_id=recipe.id) }}"
+           class="hover:text-primary transition-colors">
+          {{ recipe.code }}
+        </a>
+      </li>
+      <li>
+        <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+        </svg>
+      </li>
+      <li>
+        <a href="{{ url_for('maker.task_editor', recipe_id=recipe.id) }}"
+           class="hover:text-primary transition-colors">
+          {{ _('Task') }}
+        </a>
+      </li>
+      <li>
+        <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+        </svg>
+      </li>
+      <li class="font-medium text-[var(--text-primary)]">
+        {{ _('Disegno Task') }} #{{ (task.order_index or 0) + 1 }}
+      </li>
+    </ol>
+  </nav>
+
+  <!-- ============================================================
+       Header
+       ============================================================ -->
+  <div class="mb-6">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <div>
+        <h1 class="text-2xl font-bold text-[var(--text-primary)] mb-1">
+          {{ _('Annotazioni Disegno') }}
+          <span class="text-[var(--text-muted)] text-lg font-normal ml-2">
+            Task #{{ (task.order_index or 0) + 1 }}
+          </span>
+        </h1>
+        <p class="text-sm text-[var(--text-secondary)]">{{ task.title or '' }}</p>
+      </div>
+
+      <div class="flex items-center gap-2 shrink-0 flex-wrap">
+        <button @click="saveAnnotations()"
+                :disabled="saving"
+                class="btn btn-primary gap-1.5">
+          <svg x-show="!saving" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+          </svg>
+          <svg x-show="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+          </svg>
+          <span x-text="saving ? window.__i18n_taskDrawing.saving : window.__i18n_taskDrawing.saveAnnotations"></span>
+        </button>
+
+        <a href="{{ url_for('maker.task_editor', recipe_id=recipe.id) }}"
+           class="btn btn-secondary gap-1.5">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12"/>
+          </svg>
+          {{ _('Torna ai Task') }}
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <!-- ============================================================
+       Error/Success Banners
+       ============================================================ -->
+  <div x-show="errorMessage"
+       x-transition
+       class="mb-4 flex items-center gap-3 px-4 py-3 rounded-lg
+              bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800
+              text-red-800 dark:text-red-200 text-sm">
+    <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    </svg>
+    <span x-text="errorMessage"></span>
+    <button @click="errorMessage = ''" class="ml-auto shrink-0 hover:opacity-70">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  </div>
+
+  <div x-show="successMessage"
+       x-transition
+       x-init="$watch('successMessage', v => { if (v) setTimeout(() => successMessage = '', 4000) })"
+       class="mb-4 flex items-center gap-3 px-4 py-3 rounded-lg
+              bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800
+              text-emerald-800 dark:text-emerald-200 text-sm">
+    <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    </svg>
+    <span x-text="successMessage"></span>
+  </div>
+
+  <!-- ============================================================
+       Annotation Toolbar
+       ============================================================ -->
+  <div class="tmf-card mb-4">
+    <div class="p-3 space-y-2">
+      <!-- Row 1: Drawing Tools -->
+      <div class="flex flex-wrap items-center gap-1.5">
+        <!-- Select Tool -->
+        <button type="button"
+                class="anno-btn"
+                :class="{ 'active': annoTool === 'select' }"
+                @click="setAnnoTool('select')"
+                title="{{ _('Seleziona') }}">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2z"/>
+          </svg>
+          <span class="hidden sm:inline">{{ _('Seleziona') }}</span>
+        </button>
+
+        <!-- Marker Tool -->
+        <button type="button"
+                class="anno-btn"
+                :class="{ 'active': annoTool === 'marker' }"
+                @click="setAnnoTool('marker')"
+                title="{{ _('Marker numerato') }}">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+          <span class="hidden sm:inline">{{ _('Marker') }} #</span>
+        </button>
+
+        <!-- Arrow Tool -->
+        <button type="button"
+                class="anno-btn"
+                :class="{ 'active': annoTool === 'arrow' }"
+                @click="setAnnoTool('arrow')"
+                title="{{ _('Freccia') }}">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+          </svg>
+          <span class="hidden sm:inline">{{ _('Freccia') }}</span>
+        </button>
+
+        <!-- Rectangle Tool -->
+        <button type="button"
+                class="anno-btn"
+                :class="{ 'active': annoTool === 'rect' }"
+                @click="setAnnoTool('rect')"
+                title="{{ _('Rettangolo') }}">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+          </svg>
+          <span class="hidden sm:inline">{{ _('Rettangolo') }}</span>
+        </button>
+
+        <!-- Separator -->
+        <div class="w-px h-6 bg-[var(--border-color)] mx-1"></div>
+
+        <!-- Delete -->
+        <button type="button"
+                class="anno-btn text-red-500 hover:text-red-600"
+                @click="deleteAnnotation()"
+                :disabled="!annoSelected"
+                title="{{ _('Elimina selezionato') }}">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+          </svg>
+          <span class="hidden sm:inline">{{ _('Elimina') }}</span>
+        </button>
+
+      </div>
+
+      <!-- Row 2: Color, Stroke Width, Line Style -->
+      <div class="flex flex-wrap items-center gap-1.5 pt-1 border-t border-[var(--border-color)]">
+        <!-- Color picker -->
+        <span class="text-xs text-[var(--text-muted)] mr-1">{{ _('Colore') }}:</span>
+        <template x-for="c in colorOptions" :key="c.value">
+          <button type="button"
+                  class="w-6 h-6 rounded-full border-2 transition-all"
+                  :style="'background-color: ' + c.value"
+                  :class="propsDisabled ? 'border-[var(--border-color)] opacity-30 cursor-not-allowed' : (annoColor === c.value ? 'border-[var(--text-primary)] scale-110 ring-2 ring-offset-1 ring-[var(--color-primary)]' : 'border-[var(--border-color)] hover:scale-105')"
+                  :title="c.label"
+                  :disabled="propsDisabled"
+                  @click="setAnnoColor(c.value)">
+          </button>
+        </template>
+
+        <!-- Separator -->
+        <div class="w-px h-6 bg-[var(--border-color)] mx-1.5"></div>
+
+        <!-- Stroke width -->
+        <span class="text-xs text-[var(--text-muted)] mr-1">{{ _('Spessore') }}:</span>
+        <template x-for="sw in strokeOptions" :key="sw">
+          <button type="button"
+                  class="anno-btn"
+                  :class="{ 'active': annoStrokeWidth === sw }"
+                  :disabled="propsDisabled"
+                  @click="setAnnoStrokeWidth(sw)"
+                  :title="sw + 'px'">
+            <div class="flex items-center justify-center w-4 h-4">
+              <div class="rounded-full bg-current" :style="'width: ' + (sw + 2) + 'px; height: ' + (sw + 2) + 'px'"></div>
+            </div>
+          </button>
+        </template>
+
+        <!-- Separator -->
+        <div class="w-px h-6 bg-[var(--border-color)] mx-1.5"></div>
+
+        <!-- Line style -->
+        <span class="text-xs text-[var(--text-muted)] mr-1">{{ _('Linea') }}:</span>
+        <template x-for="ls in lineDashOptions" :key="ls.icon">
+          <button type="button"
+                  class="anno-btn"
+                  :class="{ 'active': JSON.stringify(annoLineDash) === JSON.stringify(ls.value) }"
+                  :disabled="propsDisabled"
+                  @click="setAnnoLineDash(ls.value)"
+                  :title="ls.label">
+            <div class="flex items-center justify-center w-5 h-4">
+              <template x-if="ls.icon === 'solid'">
+                <div class="w-full h-0.5 bg-current"></div>
+              </template>
+              <template x-if="ls.icon === 'dashed'">
+                <div class="w-full h-0.5 flex gap-0.5">
+                  <div class="flex-1 bg-current"></div>
+                  <div class="flex-1 bg-current"></div>
+                  <div class="flex-1 bg-current"></div>
+                </div>
+              </template>
+              <template x-if="ls.icon === 'dotted'">
+                <div class="w-full h-0.5 flex gap-1 justify-center">
+                  <div class="w-1 h-1 rounded-full bg-current"></div>
+                  <div class="w-1 h-1 rounded-full bg-current"></div>
+                  <div class="w-1 h-1 rounded-full bg-current"></div>
+                  <div class="w-1 h-1 rounded-full bg-current"></div>
+                </div>
+              </template>
+            </div>
+          </button>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <!-- ============================================================
+       Canvas Area
+       ============================================================ -->
+  <div class="tmf-card">
+    <div class="tmf-card-body p-0">
+      <div x-data="annotationEditor()"
+           class="canvas-container"
+           id="annotationCanvasContainer">
+        <canvas id="annotationCanvas" x-ref="fabricCanvas"></canvas>
+      </div>
+    </div>
+  </div>
+
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<script>
+  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+</script>
+<script src="{{ url_for('static', filename='js/annotation-editor.js') }}?v=7"></script>
+<script>
+function taskDrawing() {
+  const taskData = window.__taskData || {};
+
+  return {
+    taskId: taskData.id || null,
+    recipeId: {{ recipe.id|tojson }},
+
+    // Annotation state
+    annoTool: 'select',
+    annoSelected: false,
+    annoSelectedType: null,
+    annotationsJson: taskData.annotations_json || null,
+
+    // Color and stroke width
+    annoColor: '#2563EB',
+    annoStrokeWidth: 2,
+    colorOptions: [
+      { value: '#2563EB', label: 'Blu' },
+      { value: '#DC2626', label: 'Rosso' },
+      { value: '#16A34A', label: 'Verde' },
+      { value: '#F59E0B', label: 'Arancio' },
+      { value: '#8B5CF6', label: 'Viola' },
+      { value: '#000000', label: 'Nero' },
+    ],
+    strokeOptions: [1, 2, 3, 4],
+    annoLineDash: [],
+    lineDashOptions: [
+      { value: [], label: 'Continua', icon: 'solid' },
+      { value: [8, 4], label: 'Tratteggiata', icon: 'dashed' },
+      { value: [3, 3], label: 'Punteggiata', icon: 'dotted' },
+    ],
+
+    // Save state
+    saving: false,
+    errorMessage: '',
+    successMessage: '',
+
+    get propsDisabled() {
+      var isDrawingTool = this.annoTool === 'marker' || this.annoTool === 'arrow' || this.annoTool === 'rect';
+      return !isDrawingTool && !this.annoSelected;
+    },
+
+    init() {
+      // Listen for annotation selection events from annotation-editor.js
+      window.addEventListener('annotation-selected', (e) => {
+        this.annoSelected = e.detail.selected;
+        this.annoSelectedType = e.detail.objectType || null;
+      });
+
+      // Listen for annotation data changes
+      window.addEventListener('annotations-changed', (e) => {
+        this.annotationsJson = e.detail.json;
+      });
+
+      // Listen for mode changes from annotation editor (auto-select after placing)
+      window.addEventListener('anno-mode-changed', (e) => {
+        if (e.detail && e.detail.mode) {
+          this.annoTool = e.detail.mode;
+        }
+      });
+
+      // Load the image into the annotation editor
+      if (taskData.file_path) {
+        this.$nextTick(() => {
+          window.dispatchEvent(new CustomEvent('image-loaded', {
+            detail: {
+              path: taskData.file_path,
+              annotations: taskData.annotations_json || null
+            }
+          }));
+        });
+      }
+    },
+
+    // ---- Save annotations to task ----
+    async saveAnnotations() {
+      this.saving = true;
+      this.errorMessage = '';
+
+      const csrfToken = document.querySelector('meta[name=csrf-token]')?.content || '';
+
+      const payload = {};
+      if (this.annotationsJson) {
+        payload.annotations_json = (typeof this.annotationsJson === 'string')
+          ? JSON.parse(this.annotationsJson)
+          : this.annotationsJson;
+      }
+
+      try {
+        const resp = await fetch(`/maker/api/tasks/${this.taskId}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+          },
+          body: JSON.stringify(payload)
+        });
+
+        const data = await resp.json();
+
+        if (data.error) {
+          this.errorMessage = data.detail || window.__i18n_taskDrawing.saveError;
+        } else {
+          this.successMessage = window.__i18n_taskDrawing.saveSuccess;
+        }
+      } catch (err) {
+        console.error('saveAnnotations error:', err);
+        this.errorMessage = window.__i18n_taskDrawing.connectionError;
+      }
+
+      this.saving = false;
+    },
+
+    // ---- Annotation Tools ----
+    setAnnoTool(tool) {
+      this.annoTool = tool;
+      window.dispatchEvent(new CustomEvent('anno-tool-change', {
+        detail: { tool }
+      }));
+    },
+
+    deleteAnnotation() {
+      window.dispatchEvent(new CustomEvent('anno-delete-selected'));
+    },
+
+    setAnnoColor(color) {
+      this.annoColor = color;
+      window.dispatchEvent(new CustomEvent('anno-color-change', {
+        detail: { color }
+      }));
+    },
+
+    setAnnoStrokeWidth(width) {
+      this.annoStrokeWidth = width;
+      window.dispatchEvent(new CustomEvent('anno-stroke-width-change', {
+        detail: { width }
+      }));
+    },
+
+    setAnnoLineDash(dash) {
+      this.annoLineDash = dash;
+      window.dispatchEvent(new CustomEvent('anno-line-dash-change', {
+        detail: { dash }
+      }));
+    }
+  };
+}
+</script>
+{% endblock %}

client/templates/maker/task_editor.html

@@ -432,6 +432,59 @@
 
           <div class="tmf-card-body space-y-4">
 
+            <!-- ========== Task File Upload / Preview ========== -->
+            <div class="p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
+              <p class="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wide mb-2">
+                {{ _('Disegno Tecnico') }}
+              </p>
+
+              <!-- Preview if file exists -->
+              <template x-if="task.file_path">
+                <div class="space-y-2">
+                  <div class="relative rounded-lg overflow-hidden bg-[var(--bg-secondary)] border border-[var(--border-color)]">
+                    <canvas :id="'preview-' + task.id"
+                            class="block mx-auto"
+                            style="max-height: 192px;">
+                    </canvas>
+                  </div>
+                  <!-- Action buttons -->
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <a :href="'/maker/recipes/' + recipeId + '/tasks/' + task.id + '/drawing'"
+                       class="btn btn-secondary text-xs gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                      </svg>
+                      {{ _('Modifica Disegno') }}
+                    </a>
+                    <label class="btn btn-secondary text-xs gap-1.5 cursor-pointer">
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+                      </svg>
+                      {{ _('Sostituisci') }}
+                      <input type="file"
+                             accept="image/*,application/pdf"
+                             class="hidden"
+                             @change="uploadTaskFile(task.id, $event.target.files[0], task); $event.target.value = ''">
+                    </label>
+                  </div>
+                </div>
+              </template>
+
+              <!-- Upload zone if no file -->
+              <template x-if="!task.file_path">
+                <label class="flex flex-col items-center gap-2 p-4 rounded-lg border-2 border-dashed border-[var(--border-color)] hover:border-primary/50 cursor-pointer transition-colors">
+                  <svg class="w-8 h-8 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+                  </svg>
+                  <span class="text-xs text-[var(--text-secondary)]">{{ _('Carica immagine o PDF') }}</span>
+                  <input type="file"
+                         accept="image/*,application/pdf"
+                         class="hidden"
+                         @change="uploadTaskFile(task.id, $event.target.files[0], task); $event.target.value = ''">
+                </label>
+              </template>
+            </div>
+
             <!-- Task Directive / Description (read-only display) -->
             <template x-if="task.directive || task.description">
               <div class="flex flex-col gap-2 p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)]">
@@ -1020,6 +1073,9 @@
 {% endblock %}
 
 {% block extra_js %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<script>if(typeof pdfjsLib!=='undefined')pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';</script>
+<script src="{{ url_for('static', filename='js/annotation-viewer.js') }}?v=3"></script>
 <script>
 function taskEditor() {
   return {
@@ -1073,6 +1129,7 @@ function taskEditor() {
       // Auto-expand the first task if there is only one
       if (this.tasks.length === 1) {
         this.expandedTask = this.tasks[0].id;
+        this.renderTaskPreview(this.tasks[0]);
       }
     },
 
@@ -1083,11 +1140,45 @@ function taskEditor() {
       return document.querySelector('meta[name="csrf-token"]')?.content || '';
     },
 
+    // ============================================================
+    // Render Task Preview (deferred)
+    // ============================================================
+    renderTaskPreview(task) {
+      if (!task || !task.file_path) return;
+      if (typeof renderAnnotationPreview !== 'function') {
+        // Fallback: show image via <img> tag if viewer script not loaded
+        this.$nextTick(() => {
+          const canvas = document.getElementById('preview-' + task.id);
+          if (canvas && canvas.parentElement) {
+            const img = document.createElement('img');
+            img.src = '/maker/api/files/' + task.file_path;
+            img.className = 'block mx-auto max-h-48 object-contain';
+            img.loading = 'lazy';
+            canvas.parentElement.replaceChild(img, canvas);
+          }
+        });
+        return;
+      }
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const canvas = document.getElementById('preview-' + task.id);
+          if (canvas) {
+            renderAnnotationPreview(canvas, '/maker/api/files/' + task.file_path, task.annotations_json);
+          }
+        }, 50);
+      });
+    },
+
     // ============================================================
     // Toggle Expand
     // ============================================================
     toggleExpand(taskId) {
       this.expandedTask = this.expandedTask === taskId ? null : taskId;
+      // Render preview when expanding
+      if (this.expandedTask === taskId) {
+        const task = this.tasks.find(t => t.id === taskId);
+        if (task) this.renderTaskPreview(task);
+      }
       // Reset inline editors when collapsing
       if (this.expandedTask !== taskId) {
         this.editingSubtask = null;
@@ -1125,7 +1216,7 @@ function taskEditor() {
         const data = await resp.json();
 
         if (data.error) {
-          this.errorMessage = data.detail || '{{ _("Errore nella creazione del task") }}';
+          this.errorMessage = data.detail || {{ _("Errore nella creazione del task")|tojson }};
         } else {
           // Ensure subtasks array exists
           if (!data.subtasks) data.subtasks = [];
@@ -1133,11 +1224,11 @@ function taskEditor() {
           this.resetNewTask();
           this.showAddTask = false;
           this.expandedTask = data.id;
-          this.successMessage = '{{ _("Task creato con successo") }}';
+          this.successMessage = {{ _("Task creato con successo")|tojson }};
         }
       } catch (err) {
         console.error('addTask error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
 
       this.saving = false;
@@ -1181,7 +1272,7 @@ function taskEditor() {
         const data = await resp.json();
 
         if (data.error) {
-          this.errorMessage = data.detail || '{{ _("Errore nel salvataggio del task") }}';
+          this.errorMessage = data.detail || {{ _("Errore nel salvataggio del task")|tojson }};
         } else {
           // Update local state
           const idx = this.tasks.findIndex(t => t.id === taskId);
@@ -1194,11 +1285,11 @@ function taskEditor() {
             }
           }
           this.cancelEditTask();
-          this.successMessage = '{{ _("Task aggiornato") }}';
+          this.successMessage = {{ _("Task aggiornato")|tojson }};
         }
       } catch (err) {
         console.error('updateTask error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
 
       this.saving = false;
@@ -1224,14 +1315,14 @@ function taskEditor() {
           this.deleteTaskModal = false;
           this.deleteTargetTask = null;
           if (this.expandedTask === taskId) this.expandedTask = null;
-          this.successMessage = '{{ _("Task eliminato") }}';
+          this.successMessage = {{ _("Task eliminato")|tojson }};
         } else {
           const data = await resp.json();
           this.errorMessage = data.detail || {{ _("Errore nell'eliminazione del task")|tojson }};
         }
       } catch (err) {
         console.error('deleteTask error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
 
       this.saving = false;
@@ -1322,11 +1413,11 @@ function taskEditor() {
         const data = await resp.json();
 
         if (data.error) {
-          this.errorMessage = data.detail || '{{ _("Errore nel riordinamento") }}';
+          this.errorMessage = data.detail || {{ _("Errore nel riordinamento")|tojson }};
         }
       } catch (err) {
         console.error('reorderTasks error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
     },
 
@@ -1390,7 +1481,7 @@ function taskEditor() {
         const data = await resp.json();
 
         if (data.error) {
-          this.errorMessage = data.detail || '{{ _("Errore nella creazione della misurazione") }}';
+          this.errorMessage = data.detail || {{ _("Errore nella creazione della misurazione")|tojson }};
         } else {
           const task = this.tasks.find(t => t.id === taskId);
           if (task) {
@@ -1398,11 +1489,11 @@ function taskEditor() {
             task.subtasks.push(data);
           }
           this.resetNewSubtask(taskId);
-          this.successMessage = '{{ _("Misurazione aggiunta") }}';
+          this.successMessage = {{ _("Misurazione aggiunta")|tojson }};
         }
       } catch (err) {
         console.error('addSubtask error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
 
       this.saving = false;
@@ -1462,7 +1553,7 @@ function taskEditor() {
         const data = await resp.json();
 
         if (data.error) {
-          this.errorMessage = data.detail || '{{ _("Errore nel salvataggio della misurazione") }}';
+          this.errorMessage = data.detail || {{ _("Errore nel salvataggio della misurazione")|tojson }};
         } else {
           // Update local state
           const task = this.tasks.find(t => t.id === taskId);
@@ -1473,11 +1564,11 @@ function taskEditor() {
             }
           }
           this.cancelEditSubtask();
-          this.successMessage = '{{ _("Misurazione aggiornata") }}';
+          this.successMessage = {{ _("Misurazione aggiornata")|tojson }};
         }
       } catch (err) {
         console.error('updateSubtask error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
 
       this.saving = false;
@@ -1507,14 +1598,93 @@ function taskEditor() {
           this.deleteSubtaskModal = false;
           this.deleteTargetSubtask = null;
           this.deleteSubtaskParentId = null;
-          this.successMessage = '{{ _("Misurazione eliminata") }}';
+          this.successMessage = {{ _("Misurazione eliminata")|tojson }};
         } else {
           const data = await resp.json();
           this.errorMessage = data.detail || {{ _("Errore nell'eliminazione della misurazione")|tojson }};
         }
       } catch (err) {
         console.error('deleteSubtask error:', err);
-        this.errorMessage = '{{ _("Errore di connessione al server") }}';
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
+      }
+
+      this.saving = false;
+    },
+
+    // ============================================================
+    // TASK FILE UPLOAD
+    // ============================================================
+
+    async uploadTaskFile(taskId, file, task) {
+      if (!file) return;
+
+      const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'application/pdf'];
+      if (!allowedTypes.includes(file.type)) {
+        this.errorMessage = {{ _("Formato file non supportato. Usa PNG, JPG o PDF.")|tojson }};
+        return;
+      }
+
+      if (file.size > 20 * 1024 * 1024) {
+        this.errorMessage = {{ _("File troppo grande. Dimensione massima: 20MB.")|tojson }};
+        return;
+      }
+
+      this.saving = true;
+      this.errorMessage = '';
+
+      try {
+        // 1. Upload file
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('recipe_id', this.recipeId);
+
+        const uploadResp = await fetch('/maker/api/upload', {
+          method: 'POST',
+          headers: { 'X-CSRFToken': this.csrfToken() },
+          body: formData
+        });
+
+        const uploadData = await uploadResp.json();
+        if (uploadData.error) {
+          this.errorMessage = uploadData.detail || {{ _("Errore durante il caricamento del file")|tojson }};
+          this.saving = false;
+          return;
+        }
+
+        // Determine file type
+        const fileType = file.type === 'application/pdf' ? 'pdf' : 'image';
+
+        // 2. Update task with file_path
+        const updateResp = await fetch(`/maker/api/tasks/${taskId}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': this.csrfToken()
+          },
+          body: JSON.stringify({
+            file_path: uploadData.file_path,
+            file_type: fileType
+          })
+        });
+
+        const updateData = await updateResp.json();
+        if (updateData.error) {
+          this.errorMessage = updateData.detail || {{ _("Errore nel salvataggio del task")|tojson }};
+          this.saving = false;
+          return;
+        }
+
+        // 3. Update local state
+        task.file_path = uploadData.file_path;
+        task.file_type = fileType;
+        this.successMessage = {{ _("File caricato con successo")|tojson }};
+
+        // Re-render preview canvas with new image
+        this.renderTaskPreview(task);
+
+      } catch (err) {
+        console.error('uploadTaskFile error:', err);
+        this.errorMessage = {{ _("Errore di connessione al server")|tojson }};
       }
 
       this.saving = false;

client/templates/measure/task_execute.html

@@ -52,6 +52,9 @@
 {% endblock %}
 
 {% block content %}
+<script>
+  window.__taskAnnotations = {{ task.annotations_json|default('null')|tojson }};
+</script>
 <div class="min-h-[calc(100vh-3.5rem)] flex flex-col"
      x-data="taskExecute()"
      x-init="init()"
@@ -160,8 +163,8 @@
             <div class="annotation-container"
                  x-data="annotationViewer()"
                  x-init="
-                   imageUrl = '{{ url_for('static', filename='uploads/' ~ task.file_path) }}';
+                   imageUrl = '/measure/api/files/{{ task.file_path }}';
-                   annotations = {{ task.annotations_json|default('null')|tojson }};
+                   annotations = window.__taskAnnotations;
                    $nextTick(() => init());
                  "
                  x-effect="setActiveMarker(currentSubtask?.marker_number || 0)">
@@ -171,23 +174,18 @@
             </div>
 
             {% elif task.file_path and task.file_type == 'pdf' %}
-            {# PDF placeholder #}
+            {# PDF inline viewer using PDF.js via annotationViewer #}
-            <div class="annotation-container flex items-center justify-center">
+            <div class="annotation-container"
-              <div class="text-center py-12">
+                 x-data="annotationViewer()"
-                <svg class="w-16 h-16 mx-auto text-red-400 mb-3" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
+                 x-init="
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+                   imageUrl = '/measure/api/files/{{ task.file_path }}';
-                </svg>
+                   annotations = window.__taskAnnotations;
-                <p class="text-sm font-medium text-[var(--text-secondary)]">{{ _('Visualizzatore PDF') }}</p>
+                   $nextTick(() => init());
-                <p class="text-xs text-[var(--text-muted)] mt-1">{{ _('In fase di sviluppo') }}</p>
+                 "
-                <a href="{{ url_for('static', filename='uploads/' ~ task.file_path) }}"
+                 x-effect="setActiveMarker(currentSubtask?.marker_number || 0)">
-                   target="_blank"
+              <canvas x-ref="annotationCanvas"
-                   class="btn btn-secondary mt-3 text-xs">
+                      @click="handleClick($event)"
-                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                      class="cursor-pointer"></canvas>
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
-                  </svg>
-                  {{ _('Apri PDF') }}
-                </a>
-              </div>
             </div>
 
             {% else %}
@@ -518,6 +516,10 @@
 {% endblock %}
 
 {% block extra_js %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<script>
+  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+</script>
 <script src="{{ url_for('static', filename='js/numpad.js') }}"></script>
 <script src="{{ url_for('static', filename='js/annotation-viewer.js') }}"></script>
 <script src="{{ url_for('static', filename='js/caliper.js') }}"></script>

server/schemas/task.py

@@ -51,6 +51,7 @@ class TaskCreate(BaseModel):
     title: str = Field(..., min_length=1, max_length=255)
     directive: Optional[str] = None
     description: Optional[str] = None
+    file_path: Optional[str] = Field(None, max_length=500)
     file_type: Optional[str] = Field(None, pattern="^(image|pdf)$")
     annotations_json: Optional[dict[str, Any]] = None
     subtasks: list[SubtaskCreate] = []
@@ -61,6 +62,8 @@ class TaskUpdate(BaseModel):
     title: Optional[str] = Field(None, min_length=1, max_length=255)
     directive: Optional[str] = None
     description: Optional[str] = None
+    file_path: Optional[str] = Field(None, max_length=500)
+    file_type: Optional[str] = Field(None, pattern="^(image|pdf)$")
     annotations_json: Optional[dict[str, Any]] = None
 
 

server/services/recipe_service.py

@@ -381,10 +381,14 @@ async def list_recipes(
     pages = max(1, math.ceil(total / per_page))
     offset = (page - 1) * per_page
 
-    # Fetch recipes
+    # Fetch recipes with versions and tasks for thumbnail display
     stmt = (
         select(Recipe)
         .where(*base_filter)
+        .options(
+            selectinload(Recipe.versions)
+            .selectinload(RecipeVersion.tasks)
+        )
         .order_by(Recipe.name.asc())
         .offset(offset)
         .limit(per_page)