add image carousels and more op docs

docs/kiri-moto/CAM/ops.md

@@ -1,53 +0,0 @@
----
-description: Keyboard Shortcuts and Mouse Controls
-label: ops
----
-
-# Operations
-
-ops, not to be confused with [opps](https://knowyourmeme.com/memes/opp-opps) are the operations applied to a model to remove material. The operations tab also contains meta operations that represent parts of the manufacturing process, but do not nessecarity generate toolpaths.
-
-These operation include:
-
-- Toolpath Operations
-  - Global
-    - [Outline](#outline)
-    - [level](#level)
-    - [rough](#rough)
-    - [contour](#contour)
-  - Specific
-    - [Drill](#drill)
-    - [Trace](#trace)
-    - [Pocket](#pocket)
-- Other Operations
-  - [Gcode](#gcode)
-  - [Register](#register)
-- Laser Operations
-  - [laser on](#laser-on)
-  - [laser off](#laser-off) 
-- Indexed Operations
-  - [Index](#index)
-  - [lathe](#lathe)
-
-
-## Global Operations
-
-Operations that apply to all objects in the workspace. 
-
-### Outline
-
-![](/img/CAM/outlineExample.png)
-
-The Outline op generates a toolpath surrounding the edges of a part. It is highly configurable and can select both internal or external edges specifically. The Outline operation is great for:
-
-- Cutting out many objects at once
-- Generating a rough/finishing pass on an object
-- Easily avoiding spefic parts like pockets or holes
-
-## Specific Operations
-
-### Outline
- 
-## Laser Mode Only
-
-

docs/kiri-moto/CAM/ops.mdx

@@ -0,0 +1,90 @@
+---
+description: Keyboard Shortcuts and Mouse Controls
+label: ops
+---
+import {ImageCarousel} from '@site/docs/src/components/carousel.js'
+
+# Operations
+
+ops, not to be confused with [opps](https://knowyourmeme.com/memes/opp-opps) are the operations applied to a model to remove material. The operations tab also contains meta operations that represent parts of the manufacturing process, but do not nessecarity generate toolpaths.
+
+These operation include:
+
+- Toolpath Operations
+  - Global
+    - [Outline](#outline)
+    - [Level](#level)
+    - [Rough](#rough)
+    - [Contour](#contour)
+  - Specific
+    - [Drill](#drill)
+    - [Trace](#trace)
+    - [Pocket](#pocket)
+- Other Operations
+  - [Gcode](#gcode)
+  - [Register](#register)
+- Laser Operations
+  - [laser on](#laser-on)
+  - [laser off](#laser-off) 
+- Indexed Operations
+  - [Index](#index)
+  - [lathe](#lathe)
+
+
+## Global Operations
+
+Operations that apply to all objects in the workspace. 
+
+### Outline
+
+<ImageCarousel base="/img/CAM/example/outline/" images="outline" />
+
+
+The Outline op generates a toolpath surrounding the edges of a part. It is highly configurable and can select both internal or external edges specifically. The Outline operation is great for:
+
+- Cutting out many objects at once
+- Generating a rough/finishing pass on an object
+- Easily avoiding spefic features like pockets or holes
+
+
+### Level
+
+<ImageCarousel base="/img/CAM/example/level/" images="level" />
+
+The Level op creates a flat-surface clearing toolpath across a selected area. It is designed to remove material to a consistent depth, making it useful for preparing stock, flattening uneven surfaces, or cleaning up residual material. The Level operation is great for:
+
+- Surfacing raw stock before detail cuts
+- Creating uniform faces on complex objects
+- Clearing large areas with consistent depth quickly
+
+
+### Rough
+
+<ImageCarousel base="/img/CAM/example/rough/" images="rough" />
+
+The Rough op removes large volumes of material quickly using a stepped-down toolpath. It is typically the first pass in a multi-step workflow, clearing space for finishing tools without concern for fine detail. The Rough operation is great for:
+
+- Rapid bulk material removal
+- Preparing many parts for finishing simeltaneously.
+- Clearing voids or flat faces for many objects at once
+- Preparing a part for finish machining
+- Preserving tool life by reducing cutting load in later passes
+
+### Contour
+
+<ImageCarousel base="/img/CAM/example/contour/" images="contour" />
+
+The Contour op generates detailed toolpaths for complex organic surface geometries. It can trace along the x or y axis and has configurable precision. It is useful for:
+
+- Carving 3D shapes with organic or curved profiles
+- Finishing complex wall geometries
+- cleaning up a part after [roughing](#rough)
+
+
+## Specific Operations
+
+### Outline
+ 
+## Laser Mode Only
+
+

docs/src/components/carousel.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Carousel } from 'react-responsive-carousel';
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
+
+
+const imageDescripts= {
+  outline:[
+    [ '/1.png', 'outline of a complex part'],
+    [ '/2.png', 'outline of a non-flat part with inside holes'],
+    [ '/3.png', 'outside-only outline'],
+    [ '/4.png', 'inside-only outline'],
+  ],
+  level:[
+    [ '/1.png', 'level of a large part'],
+    [ '/2.png', `level of a square part's stock`],
+    [ '/3.png', `level of a part with a non-uniform top surface`],
+  ],
+  rough:[
+    [ '/1.png', 'rough cut of two parts'],
+    [ '/2.png', 'side-view of a rough cut'],
+    [ '/3.png', 'rough cut of a part with a complex top surface'],
+    [ '/4.gif', 'animate of complex rough cut'],
+  ],
+  contour:[
+    [ '/1.png', 'close-up of a precise contour'],
+    [ '/2.png', 'contour of multiple parts at once'],
+    [ '/3.png', 'low precision contour'],
+  ]
+}
+
+
+/**
+ * A carousel of images.
+ *
+ * @param {keyof typeof imageDescripts} images - The key to an array of images and descriptions.
+ * @returns {ReactElement} - A carousel of the given images.
+ */
+export function ImageCarousel({base,images}) {
+  console.log(base,images);
+  return (
+    <Carousel showThumbs={false} >
+      {imageDescripts[images].map(([image,caption], index) => (
+        
+      <div>
+        <img src={base+image} alt="" />
+        <p className="caption">{caption}</p>
+      </div>
+      ))}
+      
+    </Carousel>
+  );
+}

package.json

@@ -50,6 +50,7 @@
         "jszip": "^3.7.1",
         "manifold-3d": "^2.5.1",
         "moment": "^2.29.4",
+        "react-responsive-carousel": "^3.2.23",
         "serve-static": "^1.14.1",
         "three": "^0.174.0",
         "three-mesh-bvh": "^0.7.6",