add rotate, crop and slider widget

frontend/src/styles.css

@@ -196,6 +196,11 @@ html, body, #root {
   display: flex;
   align-items: center;
   gap: 6px;
+  position: relative;
+}
+
+.widget-row-socket {
+  padding-left: 20px;
 }
 
 .widget-row label {
@@ -222,6 +227,28 @@ html, body, #root {
   accent-color: #3a7abf;
 }
 
+.slider-control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.slider-input {
+  flex: 1;
+  min-width: 0;
+  accent-color: #7dd3fc;
+}
+
+.slider-value {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 10px;
+  color: #cbd5e1;
+  min-width: 52px;
+  text-align: right;
+}
+
 .widget-row input:focus,
 .widget-row select:focus {
   outline: none;
@@ -402,6 +429,58 @@ html, body, #root {
   cursor: default;
 }
 
+.crop-overlay {
+  position: relative;
+  user-select: none;
+  touch-action: none;
+  overflow: hidden;
+}
+
+.crop-image {
+  width: 100%;
+  display: block;
+}
+
+.crop-dim {
+  position: absolute;
+  background: rgba(2, 6, 23, 0.58);
+  pointer-events: none;
+}
+
+.crop-rect {
+  position: absolute;
+  border: 2px solid #7dd3fc;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
+  background: transparent;
+  pointer-events: none;
+}
+
+.crop-marker {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #7dd3fc;
+  border: 2px solid #fff;
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  box-shadow: 0 0 4px rgba(0,0,0,0.6);
+  z-index: 1;
+}
+
+.crop-marker:active:not(.crop-marker-locked) {
+  cursor: grabbing;
+  background: #bae6fd;
+  transform: translate(-50%, -50%) scale(1.15);
+}
+
+.crop-marker-locked {
+  background: #e91e63;
+  border-color: #e91e63;
+  cursor: default;
+  opacity: 0.9;
+}
+
 /* ── 3D surface view ──────────────────────────────────────────────── */
 .surface-view-container {
   width: 100%;