feat: enhance height management in ThreeDColorRow and ThreeDControls components with minHeight prop

Author: vycdev

src/components/ThreeDColorRow.tsx

@@ -9,10 +9,11 @@ type Props = {
     hex: string;
     value: number;
     layerHeight: number;
+    minHeight?: number;
     onChange: (fi: number, value: number) => void;
 };
 
-function ThreeDColorRowInner({ fi, hex, value, layerHeight, onChange }: Props) {
+function ThreeDColorRowInner({ fi, hex, value, layerHeight, minHeight, onChange }: Props) {
     const [tempValue, setTempValue] = useState<number>(value);
 
     // Sync tempValue when the value prop changes (e.g., when layerHeight changes)
@@ -55,7 +56,7 @@ function ThreeDColorRowInner({ fi, hex, value, layerHeight, onChange }: Props) {
                 {/* Height slider - interactive area */}
                 <div className="flex-1">
                     <Slider
-                        min={layerHeight}
+                        min={typeof minHeight === 'number' ? minHeight : layerHeight}
                         max={10}
                         step={layerHeight}
                         value={[tempValue]}

src/components/ThreeDControls.tsx

@@ -236,10 +236,10 @@ export default function ThreeDControls({ swatches, onChange, persisted }: ThreeD
         // Map geometry height to slicer layer index using slicer's first layer height.
         // We report the layer whose top is at or above this height, matching slicer UI labels.
         const effFirst = Math.max(0, slicerFirstLayerHeight || 0);
-        let layerNum = 2;
+        let layerNum = 1;
         if (layerHeight > 0) {
             const delta = Math.max(0, heightAt - effFirst);
-            layerNum = 2 + Math.ceil(delta / layerHeight);
+            layerNum = 1 + Math.ceil(delta / layerHeight);
         }
         swapPlan.push({
             type: 'swap',
@@ -327,6 +327,21 @@ export default function ThreeDControls({ swatches, onChange, persisted }: ThreeD
     const displayOrder =
         colorOrder.length === filtered.length ? colorOrder : filtered.map((_, i) => i);
 
+    // Ensure the currently-first color in display order cannot be below the slicer first layer height
+    useEffect(() => {
+        if (displayOrder.length === 0) return;
+        const firstFi = displayOrder[0];
+        const current = colorSliceHeights[firstFi];
+        const minFirst = Math.max(layerHeight, slicerFirstLayerHeight);
+        if (typeof current === 'number' && isFinite(current) && current < minFirst) {
+            setColorSliceHeights((prev) => {
+                const next = prev.slice();
+                next[firstFi] = minFirst;
+                return next;
+            });
+        }
+    }, [displayOrder, colorSliceHeights, layerHeight, slicerFirstLayerHeight]);
+
     return (
         <div className="space-y-4">
             {/* Apply button */}
@@ -450,16 +465,21 @@ export default function ThreeDControls({ swatches, onChange, persisted }: ThreeD
                 >
                     <SortableContent asChild>
                         <div className="space-y-2">
-                            {displayOrder.map((fi) => {
+                            {displayOrder.map((fi, idx) => {
                                 const s = filtered[fi];
                                 const val = colorSliceHeights[fi] ?? layerHeight;
+                                const isFirst = idx === 0;
+                                const minForRow = isFirst
+                                    ? Math.max(layerHeight, slicerFirstLayerHeight)
+                                    : layerHeight;
                                 return (
                                     <ThreeDColorRow
                                         key={`${s.hex}-${fi}`}
                                         fi={fi}
                                         hex={s.hex}
                                         value={val}
                                         layerHeight={layerHeight}
+                                        minHeight={minForRow}
                                         onChange={onRowChange}
                                     />
                                 );