diff --git a/package-lock.json b/package-lock.json
index 8d44f6c3..13c006d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
         "reselect": "^5.1.1",
         "sass": "^1.96.0",
         "seedrandom": "^3.0.5",
+        "skeleton-tracing-js": "^1.0.2",
         "uuid": "^13.0.0",
         "victor": "^1.1.0"
       },
@@ -12978,6 +12979,12 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/skeleton-tracing-js": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/skeleton-tracing-js/-/skeleton-tracing-js-1.0.4.tgz",
+      "integrity": "sha512-fn2LYYTCiTW8fIRQx1GBT24cUR1wTyRTx9CmFLVgahZndgILnxCo+15NlSWAZW6mLo3xX9a8xeWbgUaajofbFg==",
+      "license": "MIT"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/package.json b/package.json
index b97336fd..e8e0f9d6 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "reselect": "^5.1.1",
     "sass": "^1.96.0",
     "seedrandom": "^3.0.5",
+    "skeleton-tracing-js": "^1.0.2",
     "uuid": "^13.0.0",
     "victor": "^1.1.0"
   },
diff --git a/src/features/images/imagesSlice.js b/src/features/images/imagesSlice.js
index bc4984f5..04e4ed49 100644
--- a/src/features/images/imagesSlice.js
+++ b/src/features/images/imagesSlice.js
@@ -60,8 +60,8 @@ export const selectImagesLoaded = (state) => state.images.loaded
 
 // returns a sensibly downscaled dimensions for an loaded image (aesthetics and performance)
 const downscaledDimensions = (image) => {
-  let cw = 800
-  let ch = 600
+  let cw = 1600
+  let ch = 1200
   const w = image.width
   const h = image.height
 
@@ -71,15 +71,15 @@ const downscaledDimensions = (image) => {
     if (w > h) {
       ch = Math.round(cw / aspectRatio)
 
-      if (ch > 600) {
-        ch = 600
+      if (ch > 1200) {
+        ch = 1200
         cw = Math.round(ch * aspectRatio)
       }
     } else {
       cw = Math.round(ch * aspectRatio)
 
-      if (cw > 800) {
-        cw = 800
+      if (cw > 1600) {
+        cw = 1600
         ch = Math.round(cw / aspectRatio)
       }
     }
diff --git a/src/features/preview/PreviewManager.js b/src/features/preview/PreviewManager.js
index 71a19c46..30944ffc 100644
--- a/src/features/preview/PreviewManager.js
+++ b/src/features/preview/PreviewManager.js
@@ -4,7 +4,9 @@ import React, { useRef } from "react"
 import { useSelector, useDispatch } from "react-redux"
 import Select from "react-select"
 import Slider from "rc-slider"
+import Button from "react-bootstrap/Button"
 import "rc-slider/assets/index.css"
+import { FaPencilAlt } from "react-icons/fa"
 import {
   updateEffect,
   selectCurrentEffect,
@@ -12,12 +14,17 @@ import {
 import {
   selectPreviewSliderValue,
   selectPreviewZoom,
+  selectDrawingMode,
 } from "@/features/preview/previewSlice"
 import { updateLayer, selectCurrentLayer } from "@/features/layers/layersSlice"
 import { getShape } from "@/features/shapes/shapeFactory"
 import { getEffect } from "@/features/effects/effectFactory"
 import "./PreviewManager.scss"
-import { updatePreview } from "./previewSlice"
+import {
+  updatePreview,
+  toggleDrawingMode,
+  exitDrawingMode,
+} from "./previewSlice"
 import PreviewWindow from "./PreviewWindow"
 
 const PreviewManager = ({ isActive }) => {
@@ -26,6 +33,7 @@ const PreviewManager = ({ isActive }) => {
   const currentEffectLayer = useSelector(selectCurrentEffect)
   const sliderValue = useSelector(selectPreviewSliderValue)
   const zoom = useSelector(selectPreviewZoom)
+  const drawingMode = useSelector(selectDrawingMode)
   const wrapperRef = useRef()
 
   const currentShape = getShape(currentLayer?.type || "polygon")
@@ -48,6 +56,10 @@ const PreviewManager = ({ isActive }) => {
     dispatch(updatePreview({ zoom: option.value }))
   }
 
+  const handleDrawToggle = () => {
+    dispatch(toggleDrawingMode())
+  }
+
   const arrowKeyChange = (layer, event) => {
     if (!layer) {
       return
@@ -77,6 +89,11 @@ const PreviewManager = ({ isActive }) => {
   }
 
   const handleKeyDown = (event) => {
+    if (event.key === "Escape" && drawingMode) {
+      dispatch(exitDrawingMode())
+      return
+    }
+
     if (currentLayer) {
       if (currentShape.canMove(currentLayer)) {
         const attrs = arrowKeyChange(currentLayer, event)
@@ -115,6 +132,16 @@ const PreviewManager = ({ isActive }) => {
 
         <div className="mt-auto py-2 bg-white d-flex align-items-center">
           <div className="mx-2">
+            <Button
+              variant={drawingMode ? "primary" : "outline-secondary"}
+              size="sm"
+              onClick={handleDrawToggle}
+              title={drawingMode ? "Exit draw mode (Esc)" : "Draw on canvas"}
+            >
+              <FaPencilAlt />
+            </Button>
+          </div>
+          <div className="mx-1">
             <Select
               id="zoom-select"
               options={zoomChoices}
diff --git a/src/features/preview/PreviewWindow.js b/src/features/preview/PreviewWindow.js
index 715c5205..8983065a 100644
--- a/src/features/preview/PreviewWindow.js
+++ b/src/features/preview/PreviewWindow.js
@@ -1,21 +1,31 @@
 /* global document, getComputedStyle, window */
 
-import React, { useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import { useSelector, useDispatch } from "react-redux"
 import { isEqual } from "lodash"
-import { Stage, Layer, Circle, Rect } from "react-konva"
+import { Stage, Layer, Circle, Rect, Line } from "react-konva"
 import throttle from "lodash/throttle"
 import { selectPreviewState } from "@/features/preview/previewSlice"
 import { selectCurrentMachine } from "@/features/machines/machinesSlice"
 import { getMachine } from "@/features/machines/machineFactory"
 import {
+  addLayer,
   selectSelectedLayer,
   selectVisibleLayerIds,
   setCurrentLayer,
 } from "@/features/layers/layersSlice"
 import ShapePreview from "./ShapePreview"
 import ConnectorPreview from "./ConnectorPreview"
-import { setPreviewSize, selectPreviewZoom } from "./previewSlice"
+import {
+  setPreviewSize,
+  selectPreviewZoom,
+  selectDrawingMode,
+  selectDrawingPoints,
+  addDrawingPoint,
+  exitDrawingMode,
+  clearDrawingPoints,
+} from "./previewSlice"
+import LayerFactory from "@/features/layers/Layer"
 
 const PreviewWindow = ({ isActive }) => {
   const dispatch = useDispatch()
@@ -25,10 +35,14 @@ const PreviewWindow = ({ isActive }) => {
   const selectedLayer = useSelector(selectSelectedLayer, isEqual)
   const layerIds = useSelector(selectVisibleLayerIds, isEqual)
   const zoom = useSelector(selectPreviewZoom)
+  const drawingMode = useSelector(selectDrawingMode)
+  const drawingPoints = useSelector(selectDrawingPoints)
+  const [isDrawing, setIsDrawing] = useState(false)
   const stageZoom = zoom > 1 ? zoom : 1
   const offsetZoom = zoom > 1 ? 1 : zoom
   const remainingLayerIds = layerIds.filter((id) => id !== selectedLayer?.id)
   const layerRef = useRef()
+  const stageRef = useRef()
   const stagePadding = 22
 
   useEffect(() => {
@@ -70,9 +84,58 @@ const PreviewWindow = ({ isActive }) => {
       ? layerIds[selectedIdx + 1]
       : null
 
-  // add hidden debugging option to toggle the hit canvas on the layer when the user
-  // clicks on the layer while pressing the Alt key
+  // Get machine coordinates from a pointer event
+  const getPointerMachineCoords = useCallback(() => {
+    const stage = stageRef.current
+    if (!stage) return null
+    const pos = stage.getRelativePointerPosition()
+    if (!pos) return null
+    return { x: pos.x, y: -pos.y } // flip Y: Konva Y-down → Sandify Y-up
+  }, [])
+
+  // Drawing event handlers
+  const handleDrawStart = useCallback(
+    (e) => {
+      if (!drawingMode) return
+      e.cancelBubble = true
+      setIsDrawing(true)
+      dispatch(clearDrawingPoints())
+      const pt = getPointerMachineCoords()
+      if (pt) dispatch(addDrawingPoint(pt))
+    },
+    [drawingMode, dispatch, getPointerMachineCoords],
+  )
+
+  const handleDrawMove = useCallback(
+    (e) => {
+      if (!drawingMode || !isDrawing) return
+      e.cancelBubble = true
+      const pt = getPointerMachineCoords()
+      if (pt) dispatch(addDrawingPoint(pt))
+    },
+    [drawingMode, isDrawing, dispatch, getPointerMachineCoords],
+  )
+
+  const handleDrawEnd = useCallback(() => {
+    if (!drawingMode || !isDrawing) return
+    setIsDrawing(false)
+
+    if (drawingPoints.length >= 2) {
+      const layer = new LayerFactory("drawing")
+      const attrs = layer.getInitialState({
+        machine,
+        drawingPoints,
+      })
+      attrs.name = "Drawing"
+      dispatch(addLayer(attrs))
+    }
+
+    dispatch(exitDrawingMode())
+  }, [drawingMode, isDrawing, drawingPoints, machine, dispatch])
+
+  // Normal click handler (deselect layers)
   const handleStageClick = (e) => {
+    if (drawingMode) return
     dispatch(setCurrentLayer(null))
     if (e.evt.altKey && layerRef.current) {
       layerRef.current.toggleHitCanvas()
@@ -80,10 +143,16 @@ const PreviewWindow = ({ isActive }) => {
     }
   }
 
+  // Convert drawing points to flat [x1,y1,x2,y2,...] for Konva Line
+  const drawingLinePoints = drawingPoints.flatMap((p) => [p.x, -p.y]) // flip Y back for Konva rendering
+
+  const cursorStyle = drawingMode ? "crosshair" : "default"
+
   // some awkward rendering to put the current layer as the last child in the layer to ensure
   // transformer rotation works; this is a Konva restriction.
   return (
     <Stage
+      ref={stageRef}
       scaleX={scale * zoom}
       scaleY={scale * zoom}
       height={height * scaleHeight * stageZoom + stagePadding}
@@ -95,6 +164,13 @@ const PreviewWindow = ({ isActive }) => {
         (-height * (scaleHeight / scale / offsetZoom) - stagePadding * 0.5) / 2
       }
       onClick={handleStageClick}
+      onMouseDown={handleDrawStart}
+      onMouseMove={handleDrawMove}
+      onMouseUp={handleDrawEnd}
+      onTouchStart={handleDrawStart}
+      onTouchMove={handleDrawMove}
+      onTouchEnd={handleDrawEnd}
+      style={{ cursor: cursorStyle }}
     >
       <Layer ref={layerRef}>
         {machine.type === "polar" && (
@@ -154,6 +230,15 @@ const PreviewWindow = ({ isActive }) => {
         ]
           .flat()
           .filter((e) => e !== null)}
+        {drawingMode && drawingPoints.length > 0 && (
+          <Line
+            points={drawingLinePoints}
+            stroke="#00ff00"
+            strokeWidth={1 / (scale * zoom)}
+            lineCap="round"
+            lineJoin="round"
+          />
+        )}
       </Layer>
     </Stage>
   )
diff --git a/src/features/preview/previewSlice.js b/src/features/preview/previewSlice.js
index b66f3d80..056a82b0 100644
--- a/src/features/preview/previewSlice.js
+++ b/src/features/preview/previewSlice.js
@@ -13,6 +13,8 @@ const previewSlice = createSlice({
     canvasHeight: 600,
     sliderValue: 0.0,
     zoom: 1.0,
+    drawingMode: false,
+    drawingPoints: [],
   },
   reducers: {
     updatePreview(state, action) {
@@ -22,10 +24,31 @@ const previewSlice = createSlice({
       state.canvasHeight = action.payload.height
       state.canvasWidth = action.payload.width
     },
+    toggleDrawingMode(state) {
+      state.drawingMode = !state.drawingMode
+      state.drawingPoints = []
+    },
+    exitDrawingMode(state) {
+      state.drawingMode = false
+      state.drawingPoints = []
+    },
+    addDrawingPoint(state, action) {
+      state.drawingPoints.push(action.payload)
+    },
+    clearDrawingPoints(state) {
+      state.drawingPoints = []
+    },
   },
 })
 
-export const { updatePreview, setPreviewSize } = previewSlice.actions
+export const {
+  updatePreview,
+  setPreviewSize,
+  toggleDrawingMode,
+  exitDrawingMode,
+  addDrawingPoint,
+  clearDrawingPoints,
+} = previewSlice.actions
 export default previewSlice.reducer
 
 // ------------------------------
@@ -46,3 +69,13 @@ export const selectPreviewZoom = createSelector(
   selectPreviewState,
   (state) => state.zoom,
 )
+
+export const selectDrawingMode = createSelector(
+  selectPreviewState,
+  (state) => state.drawingMode ?? false,
+)
+
+export const selectDrawingPoints = createSelector(
+  selectPreviewState,
+  (state) => state.drawingPoints ?? [],
+)
diff --git a/src/features/preview/previewSlice.spec.js b/src/features/preview/previewSlice.spec.js
index 249fb0c9..6d4d6879 100644
--- a/src/features/preview/previewSlice.spec.js
+++ b/src/features/preview/previewSlice.spec.js
@@ -7,6 +7,8 @@ describe("preview reducer", () => {
       canvasHeight: 600,
       sliderValue: 0,
       zoom: 1,
+      drawingMode: false,
+      drawingPoints: [],
     })
   })
 
diff --git a/src/features/shapes/Drawing.js b/src/features/shapes/Drawing.js
new file mode 100644
index 00000000..6203496c
--- /dev/null
+++ b/src/features/shapes/Drawing.js
@@ -0,0 +1,138 @@
+import Victor from "victor"
+import Shape from "./Shape"
+import { dimensions } from "@/common/geometry"
+
+const options = {
+  drawingSimplify: {
+    title: "Simplify tolerance",
+    min: 0,
+    max: 5,
+    step: 0.5,
+  },
+  drawingSmooth: {
+    title: "Smoothing iterations",
+    min: 0,
+    max: 8,
+    step: 1,
+  },
+}
+
+export default class Drawing extends Shape {
+  constructor() {
+    super("drawing")
+    this.label = "Drawing"
+    this.selectGroup = "import"
+    this.randomizable = false
+  }
+
+  canChangeAspectRatio() {
+    return true
+  }
+
+  getInitialState(props) {
+    return {
+      ...super.getInitialState(),
+      ...{
+        drawingPoints: [],
+        drawingSimplify: 1,
+        drawingSmooth: 3,
+        maintainAspectRatio: false,
+      },
+      ...(props === undefined
+        ? {}
+        : {
+            drawingPoints: props.drawingPoints || [],
+          }),
+    }
+  }
+
+  initialDimensions(props) {
+    if (!props || !props.drawingPoints || props.drawingPoints.length < 2) {
+      return { width: 100, height: 100, aspectRatio: 1 }
+    }
+
+    const vertices = props.drawingPoints.map((p) => new Victor(p.x, p.y))
+    const dim = dimensions(vertices)
+    const w = Math.max(dim.width, 1)
+    const h = Math.max(dim.height, 1)
+    return { width: w, height: h, aspectRatio: w / h }
+  }
+
+  getVertices(state) {
+    const points = state.shape.drawingPoints
+    if (!points || points.length < 2) {
+      return [new Victor(0, 0)]
+    }
+
+    let vertices = points.map((p) => new Victor(p.x, p.y))
+
+    const tolerance = state.shape.drawingSimplify
+    if (tolerance > 0) {
+      vertices = douglasPeucker(vertices, tolerance)
+    }
+
+    const smoothIter = state.shape.drawingSmooth || 0
+    if (smoothIter > 0) {
+      vertices = chaikinSmooth(vertices, smoothIter)
+    }
+
+    return vertices
+  }
+
+  getOptions() {
+    return options
+  }
+}
+
+function chaikinSmooth(points, iterations) {
+  let result = points
+  for (let iter = 0; iter < iterations; iter++) {
+    if (result.length < 2) return result
+    const smoothed = [result[0]]
+    for (let i = 0; i < result.length - 1; i++) {
+      const p0 = result[i]
+      const p1 = result[i + 1]
+      smoothed.push(
+        new Victor(0.75 * p0.x + 0.25 * p1.x, 0.75 * p0.y + 0.25 * p1.y),
+      )
+      smoothed.push(
+        new Victor(0.25 * p0.x + 0.75 * p1.x, 0.25 * p0.y + 0.75 * p1.y),
+      )
+    }
+    smoothed.push(result[result.length - 1])
+    result = smoothed
+  }
+  return result
+}
+
+function perpendicularDist(pt, a, b) {
+  const dx = b.x - a.x
+  const dy = b.y - a.y
+  const lenSq = dx * dx + dy * dy
+  if (lenSq === 0) return pt.distance(a)
+  return Math.abs((pt.x - a.x) * dy - (pt.y - a.y) * dx) / Math.sqrt(lenSq)
+}
+
+function douglasPeucker(points, tolerance) {
+  if (points.length <= 2) return points
+
+  const first = points[0]
+  const last = points[points.length - 1]
+  let maxDist = 0
+  let maxIdx = 0
+
+  for (let i = 1; i < points.length - 1; i++) {
+    const d = perpendicularDist(points[i], first, last)
+    if (d > maxDist) {
+      maxDist = d
+      maxIdx = i
+    }
+  }
+
+  if (maxDist > tolerance) {
+    const left = douglasPeucker(points.slice(0, maxIdx + 1), tolerance)
+    const right = douglasPeucker(points.slice(maxIdx), tolerance)
+    return left.slice(0, -1).concat(right)
+  }
+  return [first, last]
+}
diff --git a/src/features/shapes/image_import/ImageImport.js b/src/features/shapes/image_import/ImageImport.js
index 4cdb3431..8d35aaa4 100644
--- a/src/features/shapes/image_import/ImageImport.js
+++ b/src/features/shapes/image_import/ImageImport.js
@@ -82,6 +82,9 @@ const options = {
     min: 0.1,
     max: 5,
     step: 0.1,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageAmplitude")
+    },
   },
   imageSampling: {
     title: "Sampling",
@@ -134,6 +137,47 @@ const options = {
       return hasSetting(state, "imageAngle")
     },
   },
+  imageThreshold: {
+    title: "Threshold",
+    min: 1,
+    max: 254,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageThreshold")
+    },
+  },
+  imageMinSegmentLength: {
+    title: "Min segment length",
+    min: 0,
+    max: 50,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageMinSegmentLength")
+    },
+  },
+  imageSimplifyTolerance: {
+    title: "Simplify tolerance",
+    min: 0,
+    max: 10,
+    step: 0.5,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageSimplifyTolerance")
+    },
+  },
+  imageDilateRadius: {
+    title: "Thicken lines",
+    min: 0,
+    max: 5,
+    step: 1,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageDilateRadius")
+    },
+  },
+  imageResidualRecovery: {
+    title: "Recover fine detail",
+    type: "checkbox",
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageResidualRecovery")
+    },
+  },
   imageBrightness: {
     title: "Brightness",
     type: "slider",
@@ -193,6 +237,11 @@ export default class ImageImport extends Shape {
         imageDirection: "clockwise",
         imageStepSize: 5,
         imageAngle: 0,
+        imageThreshold: 128,
+        imageMinSegmentLength: 0,
+        imageSimplifyTolerance: 0,
+        imageDilateRadius: 0,
+        imageResidualRecovery: true,
         imageMinClippedBrightness: 0,
         imageMaxClippedBrightness: 255,
         imageBrightnessFilter: [0, 255],
@@ -270,6 +319,11 @@ export default class ImageImport extends Shape {
       imageDirection,
       imageStepSize,
       imageAngle,
+      imageThreshold,
+      imageMinSegmentLength,
+      imageSimplifyTolerance,
+      imageDilateRadius,
+      imageResidualRecovery,
     } = state.shape
 
     const imageMinClippedBrightness = state.shape.imageBrightnessFilter[0]
@@ -300,6 +354,11 @@ export default class ImageImport extends Shape {
       Direction: imageDirection,
       Angle: imageAngle,
       StepSize: imageStepSize,
+      Threshold: imageThreshold,
+      MinSegmentLength: imageMinSegmentLength,
+      SimplifyTolerance: imageSimplifyTolerance,
+      DilateRadius: imageDilateRadius,
+      ResidualRecovery: imageResidualRecovery,
       MaxClippedBrightness: imageMaxClippedBrightness,
       MinClippedBrightness: imageMinClippedBrightness,
       width: canvas.width,
diff --git a/src/features/shapes/image_import/linetrace.js b/src/features/shapes/image_import/linetrace.js
new file mode 100644
index 00000000..7b1c1b60
--- /dev/null
+++ b/src/features/shapes/image_import/linetrace.js
@@ -0,0 +1,426 @@
+import TraceSkeleton from "skeleton-tracing-js/trace_skeleton.vanilla.js"
+import Victor from "victor"
+import Graph, { getEulerianTrail } from "@/common/Graph"
+import { pixelProcessor } from "./helpers"
+
+const linetrace = (config, data) => {
+  const w = config.width
+  const h = config.height
+  const getPixel = pixelProcessor(config, data)
+  const threshold = config.Threshold
+  const minSegLen = config.MinSegmentLength
+  const simplifyTol = config.SimplifyTolerance
+  const dilateRadius = config.DilateRadius
+  const residualRecovery = config.ResidualRecovery
+
+  // Phase 1: build grayscale from pixelProcessor (handles brightness/contrast/inversion)
+  const grayscale = new Float32Array(w * h)
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      grayscale[y * w + x] = getPixel(x, y)
+    }
+  }
+
+  // 3x3 box blur to smooth JPEG artifacts before thresholding
+  const blurred = boxBlur3x3(grayscale, w, h)
+
+  // Threshold to binary
+  const boolArr = new Uint8Array(w * h)
+  for (let i = 0; i < w * h; i++) {
+    boolArr[i] = blurred[i] >= threshold ? 1 : 0
+  }
+
+  // Phase 1b: morphological dilation
+  let inputArr = boolArr
+  if (dilateRadius > 0) {
+    inputArr = dilateBinary(boolArr, w, h, dilateRadius)
+  }
+
+  // Phase 2: skeleton tracing
+  // Use Array (not Uint8Array) since skeleton-tracing-js expects plain array
+  const skeletonInput = new Array(w * h)
+  for (let i = 0; i < w * h; i++) skeletonInput[i] = inputArr[i]
+
+  const result = TraceSkeleton.fromBoolArray(skeletonInput, w, h)
+  let polylines = result.polylines
+
+  // Phase 3: residual recovery — find ink pixels missed by the skeleton tracer
+  // and trace them into additional polylines
+  if (residualRecovery) {
+    const residualPolylines = recoverResidualInk(boolArr, polylines, w, h)
+    polylines = polylines.concat(residualPolylines)
+  }
+
+  // Phase 4: filter short polylines
+  if (minSegLen > 0) {
+    polylines = polylines.filter((pl) => polylineLength(pl) >= minSegLen)
+  }
+
+  if (polylines.length === 0) {
+    return []
+  }
+
+  // Phase 5: simplify polylines (Douglas-Peucker)
+  if (simplifyTol > 0) {
+    polylines = polylines.map((pl) => douglasPeucker(pl, simplifyTol))
+  }
+
+  // Phase 6: connect into single continuous path
+  let connected
+  const totalPoints = polylines.reduce((sum, pl) => sum + pl.length, 0)
+
+  if (totalPoints <= 30000) {
+    connected = connectPolylinesGraph(polylines)
+  } else {
+    connected = connectPolylinesGreedy(polylines)
+  }
+
+  // Phase 7: convert to Victor array with Y-flip
+  return connected.map(([x, y]) => new Victor(x, h - y))
+}
+
+// ---- Residual ink recovery ----
+// After skeleton tracing, some ink pixels may not be near any polyline
+// (skeleton-tracing-js misses them due to its divide-and-conquer approach).
+// This finds those pixels and traces them into additional polylines.
+
+const COVERAGE_RADIUS = 2
+
+function recoverResidualInk(boolArr, polylines, w, h) {
+  // Build a coverage mask: mark all pixels within COVERAGE_RADIUS of any polyline point
+  const covered = new Uint8Array(w * h)
+  const r = COVERAGE_RADIUS
+
+  for (const pl of polylines) {
+    for (const [px, py] of pl) {
+      const ix = Math.round(px)
+      const iy = Math.round(py)
+      for (let dy = -r; dy <= r; dy++) {
+        for (let dx = -r; dx <= r; dx++) {
+          const nx = ix + dx
+          const ny = iy + dy
+          if (nx >= 0 && nx < w && ny >= 0 && ny < h) {
+            covered[ny * w + nx] = 1
+          }
+        }
+      }
+    }
+  }
+
+  // Find uncovered ink pixels
+  const uncovered = new Uint8Array(w * h)
+  for (let i = 0; i < w * h; i++) {
+    uncovered[i] = boolArr[i] === 1 && covered[i] === 0 ? 1 : 0
+  }
+
+  // Trace uncovered pixels into connected components, then build polylines
+  const visited = new Uint8Array(w * h)
+  const result = []
+
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      if (uncovered[y * w + x] !== 1 || visited[y * w + x]) continue
+
+      // BFS to collect connected component
+      const component = []
+      const queue = [[x, y]]
+      visited[y * w + x] = 1
+
+      while (queue.length > 0) {
+        const [cx, cy] = queue.shift()
+        component.push([cx, cy])
+
+        for (let dy = -1; dy <= 1; dy++) {
+          for (let dx = -1; dx <= 1; dx++) {
+            if (dx === 0 && dy === 0) continue
+            const nx = cx + dx
+            const ny = cy + dy
+            if (
+              nx >= 0 &&
+              nx < w &&
+              ny >= 0 &&
+              ny < h &&
+              uncovered[ny * w + nx] === 1 &&
+              !visited[ny * w + nx]
+            ) {
+              visited[ny * w + nx] = 1
+              queue.push([nx, ny])
+            }
+          }
+        }
+      }
+
+      // Convert component to a polyline by walking along the pixels
+      if (component.length >= 2) {
+        const polyline = orderComponent(component)
+        result.push(polyline)
+      }
+    }
+  }
+
+  return result
+}
+
+// Order a connected component's pixels into a polyline by greedy nearest-neighbor walk
+function orderComponent(pixels) {
+  if (pixels.length <= 2) return pixels
+
+  const remaining = new Set(pixels.map((p, i) => i))
+  const result = [pixels[0]]
+  remaining.delete(0)
+
+  while (remaining.size > 0) {
+    const [cx, cy] = result[result.length - 1]
+    let bestIdx = -1
+    let bestDist = Infinity
+
+    for (const idx of remaining) {
+      const [px, py] = pixels[idx]
+      const d = (px - cx) * (px - cx) + (py - cy) * (py - cy)
+      if (d < bestDist) {
+        bestDist = d
+        bestIdx = idx
+      }
+      // Early exit for adjacent pixels
+      if (d <= 2) break
+    }
+
+    remaining.delete(bestIdx)
+    result.push(pixels[bestIdx])
+  }
+
+  return result
+}
+
+// ---- Morphological dilation ----
+
+function dilateBinary(src, w, h, radius) {
+  const dst = new Uint8Array(w * h)
+  const r = Math.round(radius)
+
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      if (src[y * w + x] !== 1) continue
+      for (let dy = -r; dy <= r; dy++) {
+        for (let dx = -r; dx <= r; dx++) {
+          const nx = x + dx
+          const ny = y + dy
+          if (nx >= 0 && nx < w && ny >= 0 && ny < h) {
+            dst[ny * w + nx] = 1
+          }
+        }
+      }
+    }
+  }
+
+  return dst
+}
+
+// ---- Graph-based path connection ----
+
+const SNAP_RADIUS = 1
+
+function pointKey(x, y) {
+  return `${Math.round(x)},${Math.round(y)}`
+}
+
+function connectPolylinesGraph(polylines) {
+  const nodeMap = new Map()
+
+  function getOrCreateNode(x, y) {
+    const key = pointKey(x, y)
+    if (nodeMap.has(key)) return nodeMap.get(key)
+
+    for (const [, node] of nodeMap) {
+      const dx = node.x - x
+      const dy = node.y - y
+      if (dx * dx + dy * dy <= SNAP_RADIUS * SNAP_RADIUS) {
+        return node
+      }
+    }
+
+    const node = { x, y, victor: new Victor(x, y), key }
+    nodeMap.set(key, node)
+    return node
+  }
+
+  const graph = new Graph()
+
+  for (const pl of polylines) {
+    if (pl.length < 2) continue
+
+    const nodes = []
+    for (let i = 0; i < pl.length; i++) {
+      const node = getOrCreateNode(pl[i][0], pl[i][1])
+      if (!graph.nodeKeys.has(node.victor.toString())) {
+        graph.addNode(node.victor)
+      }
+      nodes.push(node)
+    }
+
+    for (let i = 0; i < nodes.length - 1; i++) {
+      const n1 = nodes[i]
+      const n2 = nodes[i + 1]
+      if (n1 === n2) continue
+
+      const ek = [n1.victor.toString(), n2.victor.toString()].sort().toString()
+      if (!graph.edgeKeys.has(ek)) {
+        const dist = Math.hypot(n2.x - n1.x, n2.y - n1.y)
+        graph.addEdge(n1.victor, n2.victor, dist)
+      }
+    }
+  }
+
+  if (graph.nodeKeys.size === 0 || graph.edgeKeys.size === 0) {
+    return connectPolylinesGreedy(polylines)
+  }
+
+  graph.connectComponents()
+
+  let trail
+  try {
+    trail = getEulerianTrail(graph)
+  } catch {
+    return connectPolylinesGreedy(polylines)
+  }
+
+  if (!trail || trail.length < 2) {
+    return connectPolylinesGreedy(polylines)
+  }
+
+  const result = []
+  for (const nodeKey of trail) {
+    const node = graph.getNode(nodeKey)
+    if (node) {
+      result.push([node.x, node.y])
+    }
+  }
+
+  return result
+}
+
+// ---- Greedy nearest-neighbor fallback ----
+
+function connectPolylinesGreedy(polylines) {
+  if (polylines.length === 0) return []
+  if (polylines.length === 1) return [...polylines[0]]
+
+  const used = new Array(polylines.length).fill(false)
+  const result = [...polylines[0]]
+  used[0] = true
+
+  for (let count = 1; count < polylines.length; count++) {
+    const end = result[result.length - 1]
+    let bestIdx = -1
+    let bestDist = Infinity
+    let bestReverse = false
+
+    for (let i = 0; i < polylines.length; i++) {
+      if (used[i]) continue
+      const pl = polylines[i]
+      const dStart = distSq(end, pl[0])
+      const dEnd = distSq(end, pl[pl.length - 1])
+
+      if (dStart < bestDist) {
+        bestDist = dStart
+        bestIdx = i
+        bestReverse = false
+      }
+      if (dEnd < bestDist) {
+        bestDist = dEnd
+        bestIdx = i
+        bestReverse = true
+      }
+    }
+
+    used[bestIdx] = true
+    const seg = bestReverse
+      ? [...polylines[bestIdx]].reverse()
+      : polylines[bestIdx]
+    for (const pt of seg) {
+      result.push(pt)
+    }
+  }
+
+  return result
+}
+
+// ---- Utilities ----
+
+function boxBlur3x3(src, w, h) {
+  const dst = new Float32Array(w * h)
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      let sum = 0
+      let count = 0
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const nx = x + dx
+          const ny = y + dy
+          if (nx >= 0 && nx < w && ny >= 0 && ny < h) {
+            sum += src[ny * w + nx]
+            count++
+          }
+        }
+      }
+      dst[y * w + x] = sum / count
+    }
+  }
+  return dst
+}
+
+function polylineLength(pl) {
+  let len = 0
+  for (let i = 1; i < pl.length; i++) {
+    const dx = pl[i][0] - pl[i - 1][0]
+    const dy = pl[i][1] - pl[i - 1][1]
+    len += Math.sqrt(dx * dx + dy * dy)
+  }
+  return len
+}
+
+function distSq(a, b) {
+  const dx = a[0] - b[0]
+  const dy = a[1] - b[1]
+  return dx * dx + dy * dy
+}
+
+function perpendicularDist(pt, a, b) {
+  const dx = b[0] - a[0]
+  const dy = b[1] - a[1]
+  const lenSq = dx * dx + dy * dy
+  if (lenSq === 0) {
+    const ex = pt[0] - a[0]
+    const ey = pt[1] - a[1]
+    return Math.sqrt(ex * ex + ey * ey)
+  }
+  return (
+    Math.abs((pt[0] - a[0]) * dy - (pt[1] - a[1]) * dx) / Math.sqrt(lenSq)
+  )
+}
+
+function douglasPeucker(points, tolerance) {
+  if (points.length <= 2) return points
+
+  const first = points[0]
+  const last = points[points.length - 1]
+  let maxDist = 0
+  let maxIdx = 0
+
+  for (let i = 1; i < points.length - 1; i++) {
+    const d = perpendicularDist(points[i], first, last)
+    if (d > maxDist) {
+      maxDist = d
+      maxIdx = i
+    }
+  }
+
+  if (maxDist > tolerance) {
+    const left = douglasPeucker(points.slice(0, maxIdx + 1), tolerance)
+    const right = douglasPeucker(points.slice(maxIdx), tolerance)
+    return left.slice(0, -1).concat(right)
+  }
+  return [first, last]
+}
+
+export default linetrace
diff --git a/src/features/shapes/image_import/subtypes.js b/src/features/shapes/image_import/subtypes.js
index 215027d9..ba3c30c0 100644
--- a/src/features/shapes/image_import/subtypes.js
+++ b/src/features/shapes/image_import/subtypes.js
@@ -1,3 +1,4 @@
+import linetrace from "./linetrace"
 import sawtooth from "./sawtooth"
 import spiral from "./spiral"
 import springs from "./springs"
@@ -56,6 +57,16 @@ export const subtypes = {
     algorithm: waves,
     settings: ["imageAngle", "imageStepSize"],
   },
+  "Line Trace": {
+    algorithm: linetrace,
+    settings: [
+      "imageThreshold",
+      "imageDilateRadius",
+      "imageResidualRecovery",
+      "imageMinSegmentLength",
+      "imageSimplifyTolerance",
+    ],
+  },
 }
 
 // some protection against bad data
diff --git a/src/features/shapes/shapeFactory.js b/src/features/shapes/shapeFactory.js
index b9b1297f..a3ec920f 100644
--- a/src/features/shapes/shapeFactory.js
+++ b/src/features/shapes/shapeFactory.js
@@ -1,6 +1,7 @@
 /* global localStorage */
 
 import Circle from "./Circle"
+import Drawing from "./Drawing"
 import Epicycloid from "./Epicycloid"
 import FancyText from "./FancyText"
 import LayerImport from "./LayerImport"
@@ -46,6 +47,7 @@ export const shapeFactory = {
   wiper: Wiper,
   spaceFiller: SpaceFiller,
   noise_wave: NoiseWave,
+  drawing: Drawing,
   fileImport: LayerImport,
   imageImport: ImageImport,
 }