Merge branch 'develop'

Author: vycdev

README.md

@@ -34,7 +34,7 @@ Another minimal test you can try yourself in the app header: the Transmission Di
 - Per-color slice heights and a configurable base slice height.
 - Reorder colors with drag-and-drop to control stack order (darkest → lightest default ordering).
 - Live 2D preview and a 3D stacked preview rendered with three.js.
-- 3D model export to binary STL (suitable for slicers).
+- 3D model export to binary STL or 3MF (Preview) suitable for multi-material slicers.
 - Plain-text 3D print instructions that describe layer heights and exact layers where filament swaps are required.
 - Copy-to-clipboard button for the print instructions (produces a clean, copyable plain-text plan).
 
@@ -52,7 +52,7 @@ Another minimal test you can try yourself in the app header: the Transmission Di
 - Adjust quantization settings to reduce to the desired number of colors.
 - Tweak or replace swatches using the color pickers in the Swatches panel.
 - Open the 3D panel to configure per-color slice heights, base slice height, pixel size, and the color order.
-- When ready, click `Download STL` (in the preview-actions bar when in 3D mode) to export a binary STL file suitable for slicing.
+- When ready, click `Download STL` or `Download 3MF` (in the preview-actions bar when in 3D mode) to export your model.
 - Use the `Copy` button in the 3D controls to copy a plain-text print plan that lists layer heights and swap layers (hex codes are followed by friendly color names where available).
 
 ## 3D / printing specifics and tips
@@ -62,6 +62,12 @@ Another minimal test you can try yourself in the app header: the Transmission Di
 - Layer height used to compute the exact layer numbers at which color swaps happen in the plain-text plan. 
 - Per-color slice heights are snapped/multiplied to sensible values relative to `layerHeight` when the swatches change or are initialized.
 
+## 3MF Export (Preview)
+
+Kromacut now supports exporting directly to `.3mf` format. This file format preserves color information by splitting the model into separate objects for each color, automatically assigned to different extruders/filaments.
+
+**Disclaimer:** This feature is currently in **PREVIEW**. While Kromacut preserves colors, the rest of the settings in the slicer profile should be manually adjusted. Please report any issues or weird behaviors you encounter on the GitHub Issues page.
+
 ## Transmission Distance (TD) — what it is and how to use it here
 
 Transmission Distance (TD) is the concept HueForge uses to produce perceptual intermediate shades by stacking translucent filament layers: instead of relying purely on opaque color pigments, TD models how light transmits through thin layers of filament and how stacking different colors (and varying thickness) produces new perceived colors. HueForge does a lot of this work automatically for you (generating intermediate shades and mapping them to layer swaps). For a full conceptual description see the HueForge blog: https://shop.thehueforge.com/blogs/news/what-is-hueforge

package-lock.json

@@ -17,13 +17,16 @@
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slider": "^1.3.6",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
+        "@types/jszip": "^3.4.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "jszip": "^3.10.1",
         "lucide-react": "^0.546.0",
         "react": "^19.1.1",
         "react-colorful": "^5.6.1",

package.json

@@ -18,7 +18,8 @@ import Header from './components/Header';
 import ModeTabs from './components/ModeTabs';
 import PreviewActions from './components/PreviewActions';
 import { useDropzone } from './hooks/useDropzone';
-import { exportMeshToStlBlob } from './lib/exportStl';
+import { exportObjectToStlBlob } from './lib/exportStl';
+import { exportObjectTo3MFBlob } from './lib/export3mf';
 import { useAppHandlers } from './hooks/useAppHandlers';
 import ResizableSplitter from './components/ResizableSplitter';
 import { ControlsPanel } from './components/ControlsPanel';
@@ -133,15 +134,20 @@ function App(): React.ReactElement | null {
     const layoutRef = useRef<HTMLDivElement | null>(null);
 
     const dropzone = useDropzone({ enabled: mode === '2d', onFile: handleFiles });
-    const { onExportImage, onExportStl, onSwatchApply, onSwatchDelete } = useAppHandlers({
+    const { onExportImage, onExportStl, onExport3MF, onSwatchApply, onSwatchDelete } = useAppHandlers({
         canvasPreviewRef,
         imageSrc,
         invalidate,
         setImage,
         setExportingSTL,
         setExportProgress,
         exportingSTL,
-        exportMeshToStlBlob,
+        exportObjectToStlBlob,
+        exportObjectTo3MFBlob: (obj) =>
+            exportObjectTo3MFBlob(obj, {
+                layerHeight: threeDState.layerHeight,
+                firstLayerHeight: threeDState.slicerFirstLayerHeight,
+            }),
         applyQuantize,
         swatches,
     });
@@ -298,6 +304,7 @@ function App(): React.ReactElement | null {
                                     imageSrc={imageSrc}
                                     baseSliceHeight={0}
                                     layerHeight={threeDState.layerHeight}
+                                    slicerFirstLayerHeight={threeDState.slicerFirstLayerHeight}
                                     colorSliceHeights={threeDState.colorSliceHeights}
                                     colorOrder={threeDState.colorOrder}
                                     swatches={threeDState.filteredSwatches}
@@ -333,6 +340,7 @@ function App(): React.ReactElement | null {
                                 onClear={clear}
                                 onExportImage={onExportImage}
                                 onExportStl={onExportStl}
+                                onExport3MF={onExport3MF}
                             />
                         </div>
                     </main>

src/App.tsx

@@ -57,7 +57,7 @@ export const ControlsPanel: React.FC<Props> = ({
                         <Select
                             value={selectedPalette}
                             onValueChange={(paletteId) => {
-                                const palette = PALETTES.find((p: any) => p.id === paletteId);
+                                const palette = PALETTES.find((p) => p.id === paletteId);
                                 if (palette) {
                                     onPaletteSelect(paletteId, palette.size);
                                 }
@@ -67,7 +67,7 @@ export const ControlsPanel: React.FC<Props> = ({
                                 <SelectValue placeholder="Select a palette" />
                             </SelectTrigger>
                             <SelectContent className="max-h-48 overflow-y-auto">
-                                {PALETTES.map((p: any) => (
+                                {PALETTES.map((p) => (
                                     <SelectItem key={p.id} value={p.id}>
                                         <div className="flex items-center gap-2">
                                             <span>