Feat/editor/colored image preview

package.json

@@ -161,6 +161,7 @@
     "validate-scripts": "node scripts/validate-scripts.js"
   },
   "dependencies": {
+    "html-react-parser": "^5.2.11",
     "imagetracerjs": "^1.2.6",
     "lucide-react": "^0.562.0",
     "prop-types": "^15.8.1",

src/components/WasmImageProcessor.jsx

@@ -123,7 +123,7 @@ const WasmImageProcessor = () => {
       step(100);
 
       navigate('/editor', {
-        state: { svg, imgData: { pixels: merged, width, height } },
+        state: { svg },
       });
     } catch (err) {
       console.error(err);

src/pages/Editor/Editor.module.css

@@ -1,19 +1,89 @@
-.svgContainer {
+/* Viewport that handles pan/zoom (clipped) */
+.viewport {
   position: relative;
-  width: 100%;
-  aspect-ratio: 1 / 1; /* or width/height ratio of your image */
   overflow: hidden;
-}
-.svgContainer svg {
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease;
+  min-height: 360px;
   width: 100%;
   height: 100%;
+  max-height: 90vh;
+  cursor: grab;
+  background: transparent;
 }
-
 /* Default path appearance */
-.svgContainer svg path:not(#svgContainerColouredPath) {
-  stroke: var(--color-text);
-  stroke-width: 0.25;
+.colorMode .viewport svg path:not(.coloredRegion) {
   fill: white;
   cursor: pointer;
   transition: 150ms ease;
 }
+
+/* while dragging */
+.viewport.grabbing {
+  cursor: grabbing;
+}
+
+/* Inner wrapper where we apply transform(scale/translate) */
+.inner {
+  transform-origin: 0 0;
+  will-change: transform;
+  transition: transform 50ms linear;
+  display: inline-block;
+}
+
+/* Preserve the svg natural sizing — do not force fill/fit */
+.inner svg {
+  display: block;
+}
+
+/* Enable interaction on primitives */
+/* Default path appearance: keep original fills untouched by CSS (we manipulate via JS) */
+.inner svg path,
+.inner svg rect,
+.inner svg circle,
+.inner svg polygon,
+.inner svg g {
+  pointer-events: all;
+
+  stroke: #000;
+  stroke-width: 0.5;
+  cursor: pointer;
+  transition:
+    stroke 80ms ease,
+    stroke-width 80ms ease,
+    opacity 80ms ease;
+  opacity: 0.98;
+}
+
+/* hover outline only (doesn't override fills) */
+.inner svg path:hover,
+.inner svg rect:hover,
+.inner svg circle:hover,
+.inner svg polygon:hover,
+.inner svg g:hover {
+  stroke: var(--color-primary);
+  stroke-width: 0.9;
+}
+
+/* preview mode: disable interaction but keep visual state */
+.previewMode svg path,
+.previewMode svg rect,
+.previewMode svg circle,
+.previewMode svg polygon,
+.previewMode svg g {
+  pointer-events: none;
+}
+
+.hint {
+  margin-top: 12px;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+/* responsiveness */
+@media (max-width: 800px) {
+  .viewport {
+    min-height: 240px;
+  }
+}