Merge branch 'master' of https://github.com/GridSpace/grid-apps into rel-4.5

docs/kiri-moto/CAM/interface.mdx

@@ -0,0 +1,29 @@
+---
+description: Overview of CAM mode
+---
+
+import { ImageCarousel } from "@site/docs/src/components/carousel.js";
+
+# Interface
+
+The CAM interface is, in most respects, the same as the [general interface](/kiri-moto/interface). It is highly recommended to familiarize yourself with the general interface before using the CAM interface.
+
+With that in mind, here are the key differences:
+
+## Operation List
+
+The Operation List defines the order in which operations are
+performed on the model. Selecting the **plus** button will open a
+popup menu for choosing an operation to add. The operations are
+draggable, enabling easy re-ordering.
+
+- An operation can be disabled by **Ctrl+clicking** it. Disabled operations will be skipped in the slice/preview/export process.
+- The thin blue bar in the Operation List is also draggable. Moving the bar automatically disables all operations below it. This allows you to slice, preview, and export up to a specific point in the timeline.
+
+<ImageCarousel base="/img/CAM/interface/" images="camInterface" sml />
+
+## Origin Selection
+
+Origin Selection (introduced in v4.3) enables automatically setting an origin to points of interest on the model, including corners and arc centers.
+
+![](/img/CAM/interface/originSelect.png)

docs/kiri-moto/CAM/machines.md

@@ -39,7 +39,6 @@ Customize how your G-code is formatted for your controller or post-processor:
 - **Enable Laser** — Enables [Laser](./ops#laser-operations) operations (typically uses `M3/M5`; adjusts movement strategy)
 - **File Extension** — Optional override for exported file type (e.g., `.nc`, `.ngc`, `.cnc`, `.cam`, `.gcode`, `.txt`)
 
-
 ---
 
 ## G-code Macros

docs/kiri-moto/interface.md

@@ -1,29 +0,0 @@
----
-description: A tour of Kiri:Moto's web-based interface
----
-
-# Interface
-
-Kiri:Moto's interface is designed for maximum access to the workspace and to present only the options that are necessary and relevant to the current action.
-
-The left menus control workspace, work mode, and objects while.
-
-The right menus control the behavior and settings for slicing, path routing, and path to code exports.
-
-[OBJ](https://www.cs.cmu.edu/~mbz/personal/graphics/obj.html), [STL](<https://en.wikipedia.org/wiki/STL_(file_format)>), and [3MF](https://docs.fileformat.com/3d/3mf/) files import natively. [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics), [JPG](https://en.wikipedia.org/wiki/JPEG_File_Interchange_Format), and [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics) are auto-extruded into a 3D parts.
-
-![A minimalist approach](/img/kiri-moto.png)
-
-In CNC mode, there is an additional storyboard menu at the bottom where you can plan and re-order milling operations.
-
-![](/img/kiri-moto-cnc.png)
-
-The Setup menu offers access to Device selection and customization.&#x20;
-
-![Device Dialog](/img/device-dialog.png)
-
-Application preferences are mode-dependent. For example, CNC preferences show animation controls.
-
-![CNC Mode Preferences](/img/preferences-cam.png)
-
-![FDM Mode Preferences](/img/preferences-fdm.png)

docs/kiri-moto/interface.mdx

@@ -0,0 +1,54 @@
+---
+description: A tour of Kiri:Moto's web-based interface
+---
+
+import { ImageCarousel } from "@site/docs/src/components/carousel.js";
+
+# Interface
+
+Kiri:Moto's interface is designed for maximum access to the workspace, showing only the options necessary and relevant to the current action.
+
+[OBJ](https://www.cs.cmu.edu/~mbz/personal/graphics/obj.html), [STL](<https://en.wikipedia.org/wiki/STL_(file_format)>), and [3MF](https://docs.fileformat.com/3d/3mf/) files import natively. [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics), [JPG](https://en.wikipedia.org/wiki/JPEG_File_Interchange_Format), and [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics) files are auto-extruded into 3D parts.
+
+For the CAM interface, click [here](/kiri-moto/CAM).
+
+![A minimalist approach](/img/interface/main.png)
+
+## Top Menu
+
+- **Left:** Buttons to move through the `Arrange → Slice → Preview → Export` workflow. These steps are also available as [keyboard shortcuts](/kiri-moto/controls). Selecting an option here will automatically run prior steps as needed.
+- **Center:** Clicking the [logo](/kiri-moto) opens a dialog with version selection, helpful links, and your current Kiri:Moto version. If you are unsure which version to use, check the [release notes](https://github.com/GridSpace/grid-apps/releases/) on GitHub.
+- **Right:** Options for importing/exporting the workspace, manipulating the view, changing modes, and setting preferences. Kiri:Moto currently supports CAM, FDM, SLA, and LASER modes. Some other modes are extensions of the LASER workflow, but do not have first-class support. The [preferences menu](#preferences) will be covered later in this section.
+  - Changing the mode updates the left menu and enables/disables mode-specific options such as the `CAM Operation` menu and the `CAM Animate` step.
+  - Learn about K:M file types [here](/kiri-moto/faq#what-are-the-kmz-and-km-file-formats-short-for).
+
+## Left Menu
+
+The left menu contains options for the current mode. These vary widely:
+
+- CAM has ample documentation on [Process Options](/kiri-moto/CAM/processOpts).
+- Other modes are less documented but many options are self-explanatory if you're familiar with the manufacturing process.
+- Hovering over an option provides tooltips. When in doubt, a quick search usually explains the option in detail.
+
+## Right Menu
+
+The right menu contains controls for objects in the workspace.
+
+- Hovering over the arrow next to an object reveals options for deleting, renaming, disabling, or replacing it.
+- Disabled objects remain visible but are ignored during slicing and exporting.
+
+## Machines Dialog
+
+![Device Dialog](/img/interface/CAMDevice.png)
+
+The device dialog is accessed through the settings dropdown. It allows you to configure a device or select a predefined one.
+
+- The dropdown only shows devices available for the current mode.
+- Stock device settings are greyed out. To modify them, click `Customize`.
+- Learn more about how K:M handles CAM devices [here](/kiri-moto/CAM/machines).
+
+## Preferences
+
+Application preferences are also accessed through the settings dropdown. These are mode-dependent but share many common options. For example, CNC preferences include animation controls.
+
+<ImageCarousel base="/img/interface/" images="prefs" />

docs/sidebars.js

@@ -35,6 +35,7 @@ const sidebars = {
                 id: "kiri-moto/CAM/index",
               },
               items: [
+                "kiri-moto/CAM/interface",
                 "kiri-moto/CAM/processOpts",
                 "kiri-moto/CAM/machines",
                 "kiri-moto/CAM/tools",

docs/src/components/carousel.js

@@ -4,59 +4,69 @@ 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"],
+    ["/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`],
+    ["/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"],
+    ["/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"],
+    ["/1.png", "Close-up of a precise contour"],
+    ["/2.png", "Contour of multiple parts at once"],
+    ["/3.png", "Low precision contour"],
   ],
   register: [
     ["/1.png", "2-drill register"],
     ["/2.png", "3-drill register"],
-    ["/3.png", "jigsaw register"],
+    ["/3.png", "Jigsaw register"],
   ],
   drill: [
-    ["/1.png", "drills for a robot baseplate"],
-    ["/2.png", "drills for a pegboard"],
-    ["/3.png", "selecting only matching-size holes"],
+    ["/1.png", "Drills for a robot baseplate"],
+    ["/2.png", "Drills for a pegboard"],
+    ["/3.png", "Selecting only matching-size holes"],
   ],
   trace: [
-    ["/1.png", "toolpath tracing a design into a part"],
-    ["/2.png", "selecting loops to trace"],
-    ["/3.png", "tracing edges for deburring"],
-    ["/4.png", "trace to clear a pocket"],
-    ["/5.png", "arbitrary offset outline"],
+    ["/1.png", "Toolpath tracing a design into a part"],
+    ["/2.png", "Selecting loops to trace"],
+    ["/3.png", "Tracing edges for deburring"],
+    ["/4.png", "Trace to clear a pocket"],
+    ["/5.png", "Arbitrary offset outline"],
   ],
   pocket: [
-    ["/1.png", "selecting areas to pocket"],
-    ["/2.png", "toolpath for pocket"],
-    ["/3.gif", "pocket animation"],
-    ["/4.png", "toolpath for v-bit carve"],
-    ["/5.png", "many-pocketed part"],
+    ["/1.png", "Selecting areas to pocket"],
+    ["/2.png", "Toolpath for pocket"],
+    ["/3.gif", "Pocket animation"],
+    ["/4.png", "Toolpath for v-bit carve"],
+    ["/5.png", "Many-pocketed part"],
   ],
-  gcode: [["/1.png", "the gcode editor popup"]],
+  gcode: [["/1.png", "The gcode editor popup"]],
   laserOn: [],
   laserOff: [],
   index: [],
   lathe: [],
   tabs: [
-    ["/1.png", "tabs added to part"],
-    ["/2.png", "sliced part with tabs"],
+    ["/1.png", "Tabs added to part"],
+    ["/2.png", "Sliced part with tabs"],
+  ],
+  camInterface: [
+    ["/1.png", "Empty Ops list"],
+    ["/2.png", "Sample Ops list"],
+    ["/3.png", "Ops list with history bar"],
+  ],
+  prefs: [
+    ["/prefs-CAM.png", "Preferences in CAM mode"],
+    ["/prefs-FDM.png", "Preferences in FDM mode"],
+    ["/prefs-LASER.png", "Preferences in laser mode"],
   ],
 };
 
@@ -66,15 +76,17 @@ const imageDescripts = {
  * @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 }) {
+export function ImageCarousel({ base, images, sml }) {
   return (
-    <Carousel showThumbs={false}>
-      {imageDescripts[images].map(([image, caption], index) => (
-        <div>
-          <img src={base + image} alt="" />
-          <p className="caption">{caption}</p>
-        </div>
-      ))}
-    </Carousel>
+    <div className={sml ? "carouselWrapper" : ""}>
+      <Carousel showThumbs={false}>
+        {imageDescripts[images].map(([image, caption], index) => (
+          <div>
+            <img src={base + image} alt="" />
+            <p className="caption">{caption}</p>
+          </div>
+        ))}
+      </Carousel>
+    </div>
   );
 }

docs/src/custom.css

@@ -5,3 +5,14 @@
 .navbar .navbar__items {
   height: 4.5rem;
 }
+
+.carouselWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.carouselWrapper .carousel-root {
+  width: fit-content;
+  max-width: 20rem;
+}