Release kcl kcl-0.2.18

* Add E2E regression test that the gizmo remains at far zooms

* Tweak test's plane color, it's slightly different in CI

.github/workflows/playwright.yml

@@ -263,7 +263,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-14]
-    timeout-minutes: 40
+    timeout-minutes: 60
     runs-on: ${{ matrix.os }}
     needs: check-rust-changes
     steps:

docs/kcl/angleToMatchLengthX.md

@@ -270,6 +270,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -479,6 +499,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angleToMatchLengthY.md

@@ -274,6 +274,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -483,6 +503,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLine.md

@@ -189,6 +189,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -398,6 +418,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -609,6 +649,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -818,6 +878,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineOfXLength.md

@@ -188,6 +188,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -397,6 +417,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -608,6 +648,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -817,6 +877,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineOfYLength.md

@@ -190,6 +190,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -399,6 +419,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -610,6 +650,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -819,6 +879,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineThatIntersects.md

@@ -282,6 +282,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -491,6 +511,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -702,6 +742,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -911,6 +971,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineToX.md

@@ -187,6 +187,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -396,6 +416,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -607,6 +647,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -816,6 +876,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineToY.md

@@ -187,6 +187,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -396,6 +416,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -607,6 +647,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -816,6 +876,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/arc.md

@@ -200,6 +200,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -409,6 +429,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -620,6 +660,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -829,6 +889,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/arrayReduce.md

@@ -182,6 +182,26 @@ decagon(5.0)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -391,6 +411,26 @@ decagon(5.0)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -594,6 +634,26 @@ decagon(5.0)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -803,6 +863,26 @@ decagon(5.0)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/bezierCurve.md

@@ -193,6 +193,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -402,6 +422,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -613,6 +653,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -822,6 +882,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/chamfer.md

@@ -448,6 +448,26 @@ const sketch001 = startSketchOn(part001, chamfer1)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -852,6 +872,26 @@ const sketch001 = startSketchOn(part001, chamfer1)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/circle.md

@@ -9,14 +9,14 @@ Construct a 2-dimensional circle, of the specified radius, centered at
 the provided (x, y) origin point.
 
 ```js
-circle(center: [number], radius: number, sketch_surface_or_group: SketchSurfaceOrGroup, tag?: TagDeclarator) -> SketchGroup
+circle(data: CircleData, sketch_surface_or_group: SketchSurfaceOrGroup, tag?: TagDeclarator) -> SketchGroup
 ```
 
 ### Examples
 
 ```js
 const exampleSketch = startSketchOn("-XZ")
-  |> circle([0, 0], 10, %)
+  |> circle({ center: [0, 0], radius: 10 }, %)
 
 const example = extrude(5, exampleSketch)
 ```
@@ -30,7 +30,7 @@ const exampleSketch = startSketchOn("XZ")
   |> line([0, 30], %)
   |> line([-30, 0], %)
   |> close(%)
-  |> hole(circle([0, 15], 5, %), %)
+  |> hole(circle({ center: [0, 15], radius: 5 }, %), %)
 
 const example = extrude(5, exampleSketch)
 ```
@@ -39,8 +39,15 @@ const example = extrude(5, exampleSketch)
 
 ### Arguments
 
-* `center`: `[number]` (REQUIRED)
-* `radius`: `number` (REQUIRED)
+* `data`: `CircleData` - Data for drawing an circle (REQUIRED)
+```js
+{
+	// The center of the circle.
+	center: [number, number],
+	// The circle radius
+	radius: number,
+}
+```
 * `sketch_surface_or_group`: `SketchSurfaceOrGroup` - A sketch surface or a sketch group. (REQUIRED)
 ```js
 {
@@ -186,6 +193,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -562,6 +589,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -773,6 +820,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -982,6 +1049,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/close.md

@@ -188,6 +188,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -397,6 +417,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -608,6 +648,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -817,6 +877,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/extrude.md

@@ -213,6 +213,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -423,6 +443,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -753,6 +793,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/fillet.md

@@ -445,6 +445,26 @@ const mountingPlate = extrude(thickness, mountingPlateSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -849,6 +869,26 @@ const mountingPlate = extrude(thickness, mountingPlateSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/helix.md

@@ -16,7 +16,7 @@ helix(data: HelixData, extrude_group: ExtrudeGroup) -> ExtrudeGroup
 
 ```js
 const part001 = startSketchOn('XY')
-  |> circle([5, 5], 10, %)
+  |> circle({ center: [5, 5], radius: 10 }, %)
   |> extrude(10, %)
   |> helix({
        angleStart: 0,
@@ -316,6 +316,26 @@ const part001 = startSketchOn('XY')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -711,6 +731,26 @@ const part001 = startSketchOn('XY')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/hole.md

@@ -21,8 +21,8 @@ const exampleSketch = startSketchOn('XY')
   |> line([5, 0], %)
   |> line([0, -5], %)
   |> close(%)
-  |> hole(circle([1, 1], .25, %), %)
-  |> hole(circle([1, 4], .25, %), %)
+  |> hole(circle({ center: [1, 1], radius: .25 }, %), %)
+  |> hole(circle({ center: [1, 4], radius: .25 }, %), %)
 
 const example = extrude(1, exampleSketch)
 ```
@@ -41,7 +41,7 @@ fn squareHoleSketch = () => {
 }
 
 const exampleSketch = startSketchOn('-XZ')
-  |> circle([0, 0], 3, %)
+  |> circle({ center: [0, 0], radius: 3 }, %)
   |> hole(squareHoleSketch(), %)
 const example = extrude(1, exampleSketch)
 ```
@@ -199,6 +199,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -409,6 +429,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -611,6 +651,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -820,6 +880,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -1022,6 +1102,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -1231,6 +1331,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/int.md

@@ -21,7 +21,7 @@ int(num: number) -> i64
 
 ```js
 const sketch001 = startSketchOn('XZ')
-  |> circle([0, 0], 2, %)
+  |> circle({ center: [0, 0], radius: 2 }, %)
 const extrude001 = extrude(5, sketch001)
 
 const pattern01 = patternTransform(int(ceil(5 / 2)), (id) => {

docs/kcl/lastSegX.md

@@ -179,6 +179,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -388,6 +408,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/lastSegY.md

@@ -179,6 +179,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -388,6 +408,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/line.md

@@ -192,6 +192,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -401,6 +421,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -612,6 +652,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -821,6 +881,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/lineTo.md

@@ -179,6 +179,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -388,6 +408,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -599,6 +639,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -808,6 +868,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/patternCircular2d.md

@@ -197,6 +197,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -407,6 +427,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/patternCircular3d.md

@@ -16,7 +16,7 @@ patternCircular3d(data: CircularPattern3dData, extrude_group_set: ExtrudeGroupSe
 
 ```js
 const exampleSketch = startSketchOn('XZ')
-  |> circle([0, 0], 1, %)
+  |> circle({ center: [0, 0], radius: 1 }, %)
 
 const example = extrude(-5, exampleSketch)
   |> patternCircular3d({
@@ -321,6 +321,26 @@ const example = extrude(-5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/patternLinear2d.md

@@ -16,7 +16,7 @@ patternLinear2d(data: LinearPattern2dData, sketch_group_set: SketchGroupSet) ->
 
 ```js
 const exampleSketch = startSketchOn('XZ')
-  |> circle([0, 0], 1, %)
+  |> circle({ center: [0, 0], radius: 1 }, %)
   |> patternLinear2d({
        axis: [1, 0],
        repetitions: 6,
@@ -190,6 +190,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -400,6 +420,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/patternLinear3d.md

@@ -319,6 +319,26 @@ const example = extrude(1, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/patternTransform.md

@@ -32,7 +32,7 @@ fn transform = (replicaId) => {
 fn layer = () => {
   return startSketchOn("XY")
   // or some other plane idk
-  |> circle([0, 0], 1, %, $tag1)
+  |> circle({ center: [0, 0], radius: 1 }, %, $tag1)
   |> extrude(h, %)
 }
 // The vase is 100 layers tall.
@@ -321,6 +321,26 @@ let vase = layer()
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/pi.md

@@ -22,7 +22,10 @@ pi() -> number
 const circumference = 70
 
 const exampleSketch = startSketchOn("XZ")
-  |> circle([0, 0], circumference / (2 * pi()), %)
+  |> circle({
+       center: [0, 0],
+       radius: circumference / (2 * pi())
+     }, %)
 
 const example = extrude(5, exampleSketch)
 ```

docs/kcl/profileStart.md

@@ -180,6 +180,26 @@ const sketch001 = startSketchOn('XY')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -389,6 +409,26 @@ const sketch001 = startSketchOn('XY')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/startProfileAt.md

@@ -258,6 +258,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -561,6 +581,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -770,6 +810,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/startSketchAt.md

@@ -205,6 +205,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -414,6 +434,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/startSketchOn.md

@@ -327,6 +327,26 @@ const a1 = startSketchOn({
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -743,6 +763,26 @@ const a1 = startSketchOn({
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/tangentialArc.md

@@ -188,6 +188,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -397,6 +417,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -608,6 +648,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -817,6 +877,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/tangentialArcTo.md

@@ -179,6 +179,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -388,6 +408,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -599,6 +639,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -808,6 +868,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/tangentialArcToRelative.md

@@ -179,6 +179,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -388,6 +408,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -599,6 +639,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -808,6 +868,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/types.md

@@ -13,14 +13,16 @@ arrays can hold objects and vice versa.
 
 `true` or `false` work when defining values.
 
-## Variable declaration
+## Constant declaration
 
-Variables are defined with the `let` keyword like so:
+Constants are defined with the `let` keyword like so:
 
 ```
 let myBool = false
 ```
 
+Currently you cannot redeclare a constant.
+
 ## Array
 
 An array is defined with `[]` braces. What is inside the brackets can

docs/kcl/xLine.md

@@ -182,6 +182,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -391,6 +411,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -602,6 +642,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -811,6 +871,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/xLineTo.md

@@ -182,6 +182,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -391,6 +411,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -602,6 +642,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -811,6 +871,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/yLine.md

@@ -180,6 +180,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -389,6 +409,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -600,6 +640,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -809,6 +869,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/yLineTo.md

@@ -178,6 +178,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -387,6 +407,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -598,6 +638,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -807,6 +867,26 @@ const example = extrude(5, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

e2e/playwright/authenticatedAppFixture.ts

@@ -0,0 +1,216 @@
+import type { Page, Locator } from '@playwright/test'
+import { expect, test as base } from '@playwright/test'
+import { getUtils, setup, tearDown } from './test-utils'
+import fsp from 'fs/promises'
+import { join } from 'path'
+
+type CmdBarSerilised =
+  | {
+      stage: 'commandBarClosed'
+      // TODO no more properties needed but needs to be implemented in _serialiseCmdBar
+    }
+  | {
+      stage: 'pickCommand'
+      // TODO this will need more properties when implemented in _serialiseCmdBar
+    }
+  | {
+      stage: 'arguments'
+      currentArgKey: string
+      currentArgValue: string
+      headerArguments: Record<string, string>
+      highlightedHeaderArg: string
+      commandName: string
+    }
+  | {
+      stage: 'review'
+      headerArguments: Record<string, string>
+      commandName: string
+    }
+
+export class AuthenticatedApp {
+  private readonly codeContent: Locator
+  private readonly extrudeButton: Locator
+
+  constructor(public readonly page: Page) {
+    this.codeContent = page.locator('.cm-content')
+    this.extrudeButton = page.getByTestId('extrude')
+  }
+
+  async initialise(code = '') {
+    const u = await getUtils(this.page)
+    await this.page.addInitScript(async (code) => {
+      localStorage.setItem('persistCode', code)
+      ;(window as any).playwrightSkipFilePicker = true
+    }, code)
+
+    await this.page.setViewportSize({ width: 1000, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+  }
+  getInputFile = (fileName: string) => {
+    return fsp.readFile(
+      join('src', 'wasm-lib', 'tests', 'executor', 'inputs', fileName),
+      'utf-8'
+    )
+  }
+  makeMouseHelpers = (x: number, y: number) => [
+    () => this.page.mouse.click(x, y),
+    () => this.page.mouse.move(x, y),
+  ]
+
+  /** Likely no where, there's a chance it will click something in the scene, depending what you have in the scene.
+   *
+   * Expects the viewPort to be 1000x500 */
+  clickNoWhere = () => this.page.mouse.click(998, 60)
+
+  // Toolbars
+  expectExtrudeButtonToBeDisabled = async () =>
+    await expect(this.extrudeButton).toBeDisabled()
+  expectExtrudeButtonToBeEnabled = async () =>
+    await expect(this.extrudeButton).not.toBeDisabled()
+  clickExtrudeButton = async () => await this.extrudeButton.click()
+
+  private _serialiseCmdBar = async (): Promise<CmdBarSerilised> => {
+    const reviewForm = await this.page.locator('#review-form')
+    const getHeaderArgs = async () => {
+      const inputs = await this.page.getByTestId('cmd-bar-input-tab').all()
+      const entries = await Promise.all(
+        inputs.map((input) => {
+          const key = input
+            .locator('[data-test-name="arg-name"]')
+            .innerText()
+            .then((a) => a.trim())
+          const value = input
+            .getByTestId('header-arg-value')
+            .innerText()
+            .then((a) => a.trim())
+          return Promise.all([key, value])
+        })
+      )
+      return Object.fromEntries(entries)
+    }
+    const getCommandName = () =>
+      this.page.getByTestId('command-name').textContent()
+    if (await reviewForm.isVisible()) {
+      const [headerArguments, commandName] = await Promise.all([
+        getHeaderArgs(),
+        getCommandName(),
+      ])
+      return {
+        stage: 'review',
+        headerArguments,
+        commandName: commandName || '',
+      }
+    }
+    const [
+      currentArgKey,
+      currentArgValue,
+      headerArguments,
+      highlightedHeaderArg,
+      commandName,
+    ] = await Promise.all([
+      this.page.getByTestId('cmd-bar-arg-name').textContent(),
+      this.page.getByTestId('cmd-bar-arg-value').textContent(),
+      getHeaderArgs(),
+      this.page
+        .locator('[data-is-current-arg="true"]')
+        .locator('[data-test-name="arg-name"]')
+        .textContent(),
+      getCommandName(),
+    ])
+    return {
+      stage: 'arguments',
+      currentArgKey: currentArgKey || '',
+      currentArgValue: currentArgValue || '',
+      headerArguments,
+      highlightedHeaderArg: highlightedHeaderArg || '',
+      commandName: commandName || '',
+    }
+  }
+  expectCmdBarToBe = async (expected: CmdBarSerilised) => {
+    return expect.poll(() => this._serialiseCmdBar()).toEqual(expected)
+  }
+  progressCmdBar = async () => {
+    if (Math.random() > 0.5) {
+      const arrowButton = this.page.getByRole('button', {
+        name: 'arrow right Continue',
+      })
+      if (await arrowButton.isVisible()) {
+        await arrowButton.click()
+      } else {
+        await this.page
+          .getByRole('button', { name: 'checkmark Submit command' })
+          .click()
+      }
+    } else {
+      await this.page.keyboard.press('Enter')
+    }
+  }
+  expectCodeHighlightedToBe = async (code: string) =>
+    await expect
+      .poll(async () => {
+        const texts = (
+          await this.page.getByTestId('hover-highlight').allInnerTexts()
+        ).map((s) => s.replace(/\s+/g, '').trim())
+        return texts.join('')
+      })
+      .toBe(code.replace(/\s+/g, '').trim())
+  expectActiveLinesToBe = async (lines: Array<string>) => {
+    await expect
+      .poll(async () => {
+        return (await this.page.locator('.cm-activeLine').allInnerTexts()).map(
+          (l) => l.trim()
+        )
+      })
+      .toEqual(lines.map((l) => l.trim()))
+  }
+  private _expectEditorToContain =
+    (not = false) =>
+    (
+      code: string,
+      {
+        shouldNormalise = false,
+        timeout = 5_000,
+      }: { shouldNormalise?: boolean; timeout?: number } = {}
+    ) => {
+      if (!shouldNormalise) {
+        const expectStart = expect(this.codeContent)
+        if (not) {
+          return expectStart.not.toContainText(code, { timeout })
+        }
+        return expectStart.toContainText(code, { timeout })
+      }
+      const normalisedCode = code.replaceAll(/\s+/g, ' ').trim()
+      const expectStart = expect.poll(() => this.codeContent.textContent(), {
+        timeout,
+      })
+      if (not) {
+        return expectStart.not.toContain(normalisedCode)
+      }
+      return expectStart.toContain(normalisedCode)
+    }
+
+  expectEditor = {
+    toContain: this._expectEditorToContain(),
+    not: { toContain: this._expectEditorToContain(true) },
+  }
+}
+
+export const test = base.extend<{
+  app: AuthenticatedApp
+}>({
+  app: async ({ page }, use) => {
+    const authenticatedApp = new AuthenticatedApp(page)
+    await use(authenticatedApp)
+  },
+})
+
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
+})
+
+test.afterEach(async ({ page }, testInfo) => {
+  await tearDown(page, testInfo)
+})
+
+export { expect } from '@playwright/test'

e2e/playwright/desktop-export.spec.ts

@@ -104,7 +104,7 @@ test(
             },
             { timeout: 15_000 }
           )
-          .toBe(477481)
+          .toBe(482669)
 
         // clean up output.gltf
         await fsp.rm('output.gltf')

e2e/playwright/editor-tests.spec.ts

@@ -558,7 +558,7 @@ test.describe('Editor tests', () => {
     await page.keyboard.press('ArrowDown')
     await page.keyboard.press('Enter')
     await page.keyboard.type(`const extrusion = startSketchOn('XY')
-    |> circle([0, 0], dia/2, %)
+    |> circle({ center: [0, 0], radius: dia/2 }, %)
   |> hole(squareHole(length, width, height), %)
   |> extrude(height, %)`)
 

e2e/playwright/file-tree.spec.ts

@@ -1,6 +1,15 @@
 import { test, expect } from '@playwright/test'
 import * as fsp from 'fs/promises'
-import { getUtils, setup, setupElectron, tearDown } from './test-utils'
+import * as fs from 'fs'
+import {
+  executorInputPath,
+  getUtils,
+  setup,
+  setupElectron,
+  tearDown,
+} from './test-utils'
+import { join } from 'path'
+import { FILE_EXT } from 'lib/constants'
 
 test.beforeEach(async ({ context, page }, testInfo) => {
   await setup(context, page, testInfo)
@@ -277,3 +286,584 @@ test.describe('when using the file tree to', () => {
     }
   )
 })
+
+test.describe('Renaming in the file tree', () => {
+  test(
+    'A file you have open',
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'fileToRename.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const checkUnRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
+        return fs.existsSync(filePath)
+      }
+      const newFileName = 'newFileName'
+      const checkRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
+        return fs.existsSync(filePath)
+      }
+
+      const fileToRename = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
+      const renamedFile = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'newFileName.kcl' }) })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const renameInput = page.getByPlaceholder('fileToRename.kcl')
+      const codeLocator = page.locator('.cm-content')
+
+      await test.step('Open project and file pane', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        await u.openFilePanel()
+        await expect(fileToRename).toBeVisible()
+        expect(checkUnRenamedFS()).toBeTruthy()
+        expect(checkRenamedFS()).toBeFalsy()
+        await fileToRename.click()
+        await expect(projectMenuButton).toContainText('fileToRename.kcl')
+        await u.openKclCodePanel()
+        await expect(codeLocator).toContainText('circle(')
+        await u.closeKclCodePanel()
+      })
+
+      await test.step('Rename the file', async () => {
+        await fileToRename.click({ button: 'right' })
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFileName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the file is renamed', async () => {
+        await expect(fileToRename).not.toBeAttached()
+        await expect(renamedFile).toBeVisible()
+        expect(checkUnRenamedFS()).toBeFalsy()
+        expect(checkRenamedFS()).toBeTruthy()
+      })
+
+      await test.step('Verify we navigated', async () => {
+        await expect(projectMenuButton).toContainText(newFileName + FILE_EXT)
+        const url = page.url()
+        expect(url).toContain(newFileName)
+        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
+        await expect(projectMenuButton).not.toContainText('main.kcl')
+        expect(url).not.toContain('fileToRename.kcl')
+        expect(url).not.toContain('main.kcl')
+
+        await u.openKclCodePanel()
+        await expect(codeLocator).toContainText('circle(')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    'A file you do not have open',
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'fileToRename.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const newFileName = 'newFileName'
+      const checkUnRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
+        return fs.existsSync(filePath)
+      }
+      const checkRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
+        return fs.existsSync(filePath)
+      }
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const fileToRename = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
+      const renamedFile = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: newFileName + FILE_EXT }),
+      })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const renameInput = page.getByPlaceholder('fileToRename.kcl')
+      const codeLocator = page.locator('.cm-content')
+
+      await test.step('Open project and file pane', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        await u.openFilePanel()
+        await expect(fileToRename).toBeVisible()
+        expect(checkUnRenamedFS()).toBeTruthy()
+        expect(checkRenamedFS()).toBeFalsy()
+      })
+
+      await test.step('Rename the file', async () => {
+        await fileToRename.click({ button: 'right' })
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFileName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the file is renamed', async () => {
+        await expect(fileToRename).not.toBeAttached()
+        await expect(renamedFile).toBeVisible()
+        expect(checkUnRenamedFS()).toBeFalsy()
+        expect(checkRenamedFS()).toBeTruthy()
+      })
+
+      await test.step('Verify we have not navigated', async () => {
+        await expect(projectMenuButton).toContainText('main.kcl')
+        await expect(projectMenuButton).not.toContainText(
+          newFileName + FILE_EXT
+        )
+        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
+
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain(newFileName)
+        expect(url).not.toContain('fileToRename.kcl')
+
+        await u.openKclCodePanel()
+        await expect(codeLocator).toContainText('fillet(')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    `A folder you're not inside`,
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
+            recursive: true,
+          })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
+          )
+        },
+      })
+
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const folderToRename = page.getByRole('button', {
+        name: 'folderToRename',
+      })
+      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const originalFolderName = 'folderToRename'
+      const renameInput = page.getByPlaceholder(originalFolderName)
+      const newFolderName = 'newFolderName'
+      const checkUnRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', originalFolderName)
+        return fs.existsSync(folderPath)
+      }
+      const checkRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', newFolderName)
+        return fs.existsSync(folderPath)
+      }
+
+      await test.step('Open project and file pane', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain('folderToRename')
+
+        await u.openFilePanel()
+        await expect(folderToRename).toBeVisible()
+        expect(checkUnRenamedFolderFS()).toBeTruthy()
+        expect(checkRenamedFolderFS()).toBeFalsy()
+      })
+
+      await test.step('Rename the folder', async () => {
+        await folderToRename.click({ button: 'right' })
+        await expect(renameMenuItem).toBeVisible()
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFolderName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the folder is renamed, and no navigation occurred', async () => {
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain('folderToRename')
+
+        await expect(projectMenuButton).toContainText('main.kcl')
+        await expect(renamedFolder).toBeVisible()
+        await expect(folderToRename).not.toBeAttached()
+        expect(checkUnRenamedFolderFS()).toBeFalsy()
+        expect(checkRenamedFolderFS()).toBeTruthy()
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    `A folder you are inside`,
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
+            recursive: true,
+          })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
+          )
+        },
+      })
+
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const folderToRename = page.getByRole('button', {
+        name: 'folderToRename',
+      })
+      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
+      const fileWithinFolder = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
+      })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const originalFolderName = 'folderToRename'
+      const renameInput = page.getByPlaceholder(originalFolderName)
+      const newFolderName = 'newFolderName'
+      const checkUnRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', originalFolderName)
+        return fs.existsSync(folderPath)
+      }
+      const checkRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', newFolderName)
+        return fs.existsSync(folderPath)
+      }
+
+      await test.step('Open project and navigate into folder', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain('folderToRename')
+
+        await u.openFilePanel()
+        await expect(folderToRename).toBeVisible()
+        await folderToRename.click()
+        await expect(fileWithinFolder).toBeVisible()
+        await fileWithinFolder.click()
+
+        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
+        const newUrl = page.url()
+        expect(newUrl).toContain('folderToRename')
+        expect(newUrl).toContain('someFileWithin.kcl')
+        expect(newUrl).not.toContain('main.kcl')
+        expect(checkUnRenamedFolderFS()).toBeTruthy()
+        expect(checkRenamedFolderFS()).toBeFalsy()
+      })
+
+      await test.step('Rename the folder', async () => {
+        await page.waitForTimeout(60000)
+        await folderToRename.click({ button: 'right' })
+        await expect(renameMenuItem).toBeVisible()
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFolderName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the folder is renamed, and navigated to new path', async () => {
+        const urlSnippet = encodeURIComponent(
+          join(newFolderName, 'someFileWithin.kcl')
+        )
+        await page.waitForURL(new RegExp(urlSnippet))
+        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
+        await expect(renamedFolder).toBeVisible()
+        await expect(folderToRename).not.toBeAttached()
+
+        // URL is synchronous, so we check the other stuff first
+        const url = page.url()
+        expect(url).not.toContain('main.kcl')
+        expect(url).toContain(newFolderName)
+        expect(url).toContain('someFileWithin.kcl')
+        expect(checkUnRenamedFolderFS()).toBeFalsy()
+        expect(checkRenamedFolderFS()).toBeTruthy()
+      })
+
+      await electronApp.close()
+    }
+  )
+})
+
+test.describe('Deleting items from the file pane', () => {
+  test(
+    `delete file when main.kcl exists, navigate to main.kcl`,
+    { tag: '@electron' },
+    async ({ browserName }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          const testDir = join(dir, 'testProject')
+          await fsp.mkdir(testDir, { recursive: true })
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(testDir, 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(testDir, 'fileToDelete.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectCard = page.getByText('testProject')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const fileToDelete = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'fileToDelete.kcl' }) })
+      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
+      const deleteConfirmation = page.getByTestId('delete-confirmation')
+
+      await test.step('Open project and navigate to fileToDelete.kcl', async () => {
+        await projectCard.click()
+        await u.waitForPageLoad()
+        await u.openFilePanel()
+
+        await fileToDelete.click()
+        await u.waitForPageLoad()
+        await u.openKclCodePanel()
+        await expect(u.codeLocator).toContainText('getOppositeEdge(thing)')
+        await u.closeKclCodePanel()
+      })
+
+      await test.step('Delete fileToDelete.kcl', async () => {
+        await fileToDelete.click({ button: 'right' })
+        await expect(deleteMenuItem).toBeVisible()
+        await deleteMenuItem.click()
+        await expect(deleteConfirmation).toBeVisible()
+        await deleteConfirmation.click()
+      })
+
+      await test.step('Check deletion and navigation', async () => {
+        await u.waitForPageLoad()
+        await expect(fileToDelete).not.toBeVisible()
+        await u.closeFilePanel()
+        await u.openKclCodePanel()
+        await expect(u.codeLocator).toContainText('circle(')
+        await expect(projectMenuButton).toContainText('main.kcl')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test.fixme(
+    'TODO - delete file we have open when main.kcl does not exist',
+    async () => {}
+  )
+
+  test(
+    `Delete folder we are not in, don't navigate`,
+    { tag: '@electron' },
+    async ({ browserName }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.mkdir(join(dir, 'Test Project', 'folderToDelete'), {
+            recursive: true,
+          })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'folderToDelete', 'someFileWithin.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectCard = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const folderToDelete = page.getByRole('button', {
+        name: 'folderToDelete',
+      })
+      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
+      const deleteConfirmation = page.getByTestId('delete-confirmation')
+
+      await test.step('Open project and open project pane', async () => {
+        await projectCard.click()
+        await u.waitForPageLoad()
+        await expect(projectMenuButton).toContainText('main.kcl')
+        await u.closeKclCodePanel()
+        await u.openFilePanel()
+      })
+
+      await test.step('Delete folderToDelete', async () => {
+        await folderToDelete.click({ button: 'right' })
+        await expect(deleteMenuItem).toBeVisible()
+        await deleteMenuItem.click()
+        await expect(deleteConfirmation).toBeVisible()
+        await deleteConfirmation.click()
+      })
+
+      await test.step('Check deletion and no navigation', async () => {
+        await expect(folderToDelete).not.toBeAttached()
+        await expect(projectMenuButton).toContainText('main.kcl')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    `Delete folder we are in, navigate to main.kcl`,
+    { tag: '@electron' },
+    async ({ browserName }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.mkdir(join(dir, 'Test Project', 'folderToDelete'), {
+            recursive: true,
+          })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'folderToDelete', 'someFileWithin.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectCard = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const folderToDelete = page.getByRole('button', {
+        name: 'folderToDelete',
+      })
+      const fileWithinFolder = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
+      })
+      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
+      const deleteConfirmation = page.getByTestId('delete-confirmation')
+
+      await test.step('Open project and navigate into folderToDelete', async () => {
+        await projectCard.click()
+        await u.waitForPageLoad()
+        await expect(projectMenuButton).toContainText('main.kcl')
+        await u.closeKclCodePanel()
+        await u.openFilePanel()
+
+        await folderToDelete.click()
+        await expect(fileWithinFolder).toBeVisible()
+        await fileWithinFolder.click()
+        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
+      })
+
+      await test.step('Delete folderToDelete', async () => {
+        await folderToDelete.click({ button: 'right' })
+        await expect(deleteMenuItem).toBeVisible()
+        await deleteMenuItem.click()
+        await expect(deleteConfirmation).toBeVisible()
+        await deleteConfirmation.click()
+      })
+
+      await test.step('Check deletion and navigation to main.kcl', async () => {
+        await expect(folderToDelete).not.toBeAttached()
+        await expect(fileWithinFolder).not.toBeAttached()
+        await expect(projectMenuButton).toContainText('main.kcl')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test.fixme('TODO - delete folder we are in, with no main.kcl', async () => {})
+})

e2e/playwright/machines.spec.ts

@@ -38,7 +38,7 @@ test(
     await expect(page.getByText(notFoundText).first()).not.toBeVisible()
 
     // Find the make button
-    const makeButton = page.getByRole('button', { name: 'Make' })
+    const makeButton = page.getByRole('button', { name: 'Make part' })
     // Make sure the button is visible but disabled
     await expect(makeButton).toBeVisible()
     await expect(makeButton).toBeDisabled()

e2e/playwright/point-click.spec.ts

@@ -0,0 +1,55 @@
+import { test } from './authenticatedAppFixture'
+
+// test file is for testing point an click code gen functionality that's not sketch mode related
+
+test('verify extruding circle works', async ({ app }) => {
+  test.skip(
+    process.platform === 'win32',
+    'Fails on windows in CI, can not be replicated locally on windows.'
+  )
+  const file = await app.getInputFile('test-circle-extrude.kcl')
+  await app.initialise(file)
+  const [clickCircle, moveToCircle] = app.makeMouseHelpers(582, 217)
+
+  await test.step('because there is sweepable geometry, verify extrude is enable when nothing is selected', async () => {
+    await app.clickNoWhere()
+    await app.expectExtrudeButtonToBeEnabled()
+  })
+
+  await test.step('check code model connection works and that button is still enable once circle is selected ', async () => {
+    await moveToCircle()
+    const circleSnippet =
+      'circle({ center: [318.33, 168.1], radius: 182.8 }, %)'
+    await app.expectCodeHighlightedToBe(circleSnippet)
+
+    await clickCircle()
+    await app.expectActiveLinesToBe([circleSnippet.slice(-5)])
+    await app.expectExtrudeButtonToBeEnabled()
+  })
+
+  await test.step('do extrude flow and check extrude code is added to editor', async () => {
+    await app.clickExtrudeButton()
+
+    await app.expectCmdBarToBe({
+      stage: 'arguments',
+      currentArgKey: 'distance',
+      currentArgValue: '5',
+      headerArguments: { Selection: '1 face', Distance: '' },
+      highlightedHeaderArg: 'distance',
+      commandName: 'Extrude',
+    })
+    await app.progressCmdBar()
+
+    const expectString = 'const extrude001 = extrude(5, sketch001)'
+    await app.expectEditor.not.toContain(expectString)
+
+    await app.expectCmdBarToBe({
+      stage: 'review',
+      headerArguments: { Selection: '1 face', Distance: '5' },
+      commandName: 'Extrude',
+    })
+    await app.progressCmdBar()
+
+    await app.expectEditor.toContain(expectString)
+  })
+})

e2e/playwright/projects.spec.ts

@@ -12,7 +12,6 @@ import {
 import fsp from 'fs/promises'
 import fs from 'fs'
 import { join } from 'path'
-import { FILE_EXT } from 'lib/constants'
 
 test.afterEach(async ({ page }, testInfo) => {
   await tearDown(page, testInfo)
@@ -204,7 +203,7 @@ test.describe('Can export from electron app', () => {
               },
               { timeout: 15_000 }
             )
-            .toBe(477481)
+            .toBe(482669)
 
           // clean up output.gltf
           await fsp.rm('output.gltf')
@@ -1371,455 +1370,6 @@ test(
   }
 )
 
-test.describe('Renaming in the file tree', () => {
-  test(
-    'A file you have open',
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'fileToRename.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const checkUnRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
-        return fs.existsSync(filePath)
-      }
-      const newFileName = 'newFileName'
-      const checkRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
-        return fs.existsSync(filePath)
-      }
-
-      const fileToRename = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
-      const renamedFile = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'newFileName.kcl' }) })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const renameInput = page.getByPlaceholder('fileToRename.kcl')
-      const codeLocator = page.locator('.cm-content')
-
-      await test.step('Open project and file pane', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        await u.openFilePanel()
-        await expect(fileToRename).toBeVisible()
-        expect(checkUnRenamedFS()).toBeTruthy()
-        expect(checkRenamedFS()).toBeFalsy()
-        await fileToRename.click()
-        await expect(projectMenuButton).toContainText('fileToRename.kcl')
-        await u.openKclCodePanel()
-        await expect(codeLocator).toContainText('circle(')
-        await u.closeKclCodePanel()
-      })
-
-      await test.step('Rename the file', async () => {
-        await fileToRename.click({ button: 'right' })
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFileName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the file is renamed', async () => {
-        await expect(fileToRename).not.toBeAttached()
-        await expect(renamedFile).toBeVisible()
-        expect(checkUnRenamedFS()).toBeFalsy()
-        expect(checkRenamedFS()).toBeTruthy()
-      })
-
-      await test.step('Verify we navigated', async () => {
-        await expect(projectMenuButton).toContainText(newFileName + FILE_EXT)
-        const url = page.url()
-        expect(url).toContain(newFileName)
-        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
-        await expect(projectMenuButton).not.toContainText('main.kcl')
-        expect(url).not.toContain('fileToRename.kcl')
-        expect(url).not.toContain('main.kcl')
-
-        await u.openKclCodePanel()
-        await expect(codeLocator).toContainText('circle(')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test(
-    'A file you do not have open',
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'fileToRename.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const newFileName = 'newFileName'
-      const checkUnRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
-        return fs.existsSync(filePath)
-      }
-      const checkRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
-        return fs.existsSync(filePath)
-      }
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const fileToRename = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
-      const renamedFile = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: newFileName + FILE_EXT }),
-      })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const renameInput = page.getByPlaceholder('fileToRename.kcl')
-      const codeLocator = page.locator('.cm-content')
-
-      await test.step('Open project and file pane', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        await u.openFilePanel()
-        await expect(fileToRename).toBeVisible()
-        expect(checkUnRenamedFS()).toBeTruthy()
-        expect(checkRenamedFS()).toBeFalsy()
-      })
-
-      await test.step('Rename the file', async () => {
-        await fileToRename.click({ button: 'right' })
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFileName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the file is renamed', async () => {
-        await expect(fileToRename).not.toBeAttached()
-        await expect(renamedFile).toBeVisible()
-        expect(checkUnRenamedFS()).toBeFalsy()
-        expect(checkRenamedFS()).toBeTruthy()
-      })
-
-      await test.step('Verify we have not navigated', async () => {
-        await expect(projectMenuButton).toContainText('main.kcl')
-        await expect(projectMenuButton).not.toContainText(
-          newFileName + FILE_EXT
-        )
-        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
-
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain(newFileName)
-        expect(url).not.toContain('fileToRename.kcl')
-
-        await u.openKclCodePanel()
-        await expect(codeLocator).toContainText('fillet(')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test(
-    `A folder you're not inside`,
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
-            recursive: true,
-          })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
-          )
-        },
-      })
-
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToRename = page.getByRole('button', {
-        name: 'folderToRename',
-      })
-      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const originalFolderName = 'folderToRename'
-      const renameInput = page.getByPlaceholder(originalFolderName)
-      const newFolderName = 'newFolderName'
-      const checkUnRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', originalFolderName)
-        return fs.existsSync(folderPath)
-      }
-      const checkRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', newFolderName)
-        return fs.existsSync(folderPath)
-      }
-
-      await test.step('Open project and file pane', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain('folderToRename')
-
-        await u.openFilePanel()
-        await expect(folderToRename).toBeVisible()
-        expect(checkUnRenamedFolderFS()).toBeTruthy()
-        expect(checkRenamedFolderFS()).toBeFalsy()
-      })
-
-      await test.step('Rename the folder', async () => {
-        await folderToRename.click({ button: 'right' })
-        await expect(renameMenuItem).toBeVisible()
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFolderName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the folder is renamed, and no navigation occurred', async () => {
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain('folderToRename')
-
-        await expect(projectMenuButton).toContainText('main.kcl')
-        await expect(renamedFolder).toBeVisible()
-        await expect(folderToRename).not.toBeAttached()
-        expect(checkUnRenamedFolderFS()).toBeFalsy()
-        expect(checkRenamedFolderFS()).toBeTruthy()
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test(
-    `A folder you are inside`,
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
-            recursive: true,
-          })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
-          )
-        },
-      })
-
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToRename = page.getByRole('button', {
-        name: 'folderToRename',
-      })
-      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
-      const fileWithinFolder = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
-      })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const originalFolderName = 'folderToRename'
-      const renameInput = page.getByPlaceholder(originalFolderName)
-      const newFolderName = 'newFolderName'
-      const checkUnRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', originalFolderName)
-        return fs.existsSync(folderPath)
-      }
-      const checkRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', newFolderName)
-        return fs.existsSync(folderPath)
-      }
-
-      await test.step('Open project and navigate into folder', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain('folderToRename')
-
-        await u.openFilePanel()
-        await expect(folderToRename).toBeVisible()
-        await folderToRename.click()
-        await expect(fileWithinFolder).toBeVisible()
-        await fileWithinFolder.click()
-
-        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
-        const newUrl = page.url()
-        expect(newUrl).toContain('folderToRename')
-        expect(newUrl).toContain('someFileWithin.kcl')
-        expect(newUrl).not.toContain('main.kcl')
-        expect(checkUnRenamedFolderFS()).toBeTruthy()
-        expect(checkRenamedFolderFS()).toBeFalsy()
-      })
-
-      await test.step('Rename the folder', async () => {
-        await page.waitForTimeout(2000)
-        await folderToRename.click({ button: 'right' })
-        await expect(renameMenuItem).toBeVisible()
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFolderName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the folder is renamed, and navigated to new path', async () => {
-        const urlSnippet = encodeURIComponent(
-          join(newFolderName, 'someFileWithin.kcl')
-        )
-        await page.waitForURL(new RegExp(urlSnippet))
-        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
-        await expect(renamedFolder).toBeVisible()
-        await expect(folderToRename).not.toBeAttached()
-
-        // URL is synchronous, so we check the other stuff first
-        const url = page.url()
-        expect(url).not.toContain('main.kcl')
-        expect(url).toContain(newFolderName)
-        expect(url).toContain('someFileWithin.kcl')
-        expect(checkUnRenamedFolderFS()).toBeFalsy()
-        expect(checkRenamedFolderFS()).toBeTruthy()
-      })
-
-      await electronApp.close()
-    }
-  )
-})
-
-test.describe('Deleting files from the file pane', () => {
-  test(
-    `when main.kcl exists, navigate to main.kcl`,
-    { tag: '@electron' },
-    async ({ browserName }, testInfo) => {
-      const { electronApp, page } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          const testDir = join(dir, 'testProject')
-          await fsp.mkdir(testDir, { recursive: true })
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(testDir, 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(testDir, 'fileToDelete.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectCard = page.getByText('testProject')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const fileToDelete = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToDelete.kcl' }) })
-      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
-      const deleteConfirmation = page.getByTestId('delete-confirmation')
-
-      await test.step('Open project and navigate to fileToDelete.kcl', async () => {
-        await projectCard.click()
-        await u.waitForPageLoad()
-        await u.openFilePanel()
-
-        await fileToDelete.click()
-        await u.waitForPageLoad()
-        await u.openKclCodePanel()
-        await expect(u.codeLocator).toContainText('getOppositeEdge(thing)')
-        await u.closeKclCodePanel()
-      })
-
-      await test.step('Delete fileToDelete.kcl', async () => {
-        await fileToDelete.click({ button: 'right' })
-        await expect(deleteMenuItem).toBeVisible()
-        await deleteMenuItem.click()
-        await expect(deleteConfirmation).toBeVisible()
-        await deleteConfirmation.click()
-      })
-
-      await test.step('Check deletion and navigation', async () => {
-        await u.waitForPageLoad()
-        await expect(fileToDelete).not.toBeVisible()
-        await u.closeFilePanel()
-        await u.openKclCodePanel()
-        await expect(u.codeLocator).toContainText('circle(')
-        await expect(projectMenuButton).toContainText('main.kcl')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test.fixme('TODO - when main.kcl does not exist', async () => {})
-})
-
 test(
   'Original project name persist after onboarding',
   { tag: '@electron' },

e2e/playwright/regression-tests.spec.ts

@@ -346,10 +346,7 @@ const sketch001 = startSketchAt([-0, -0])
     // Find the toast.
     // Look out for the toast message
     const exportingToastMessage = page.getByText(`Exporting...`)
-    await expect(exportingToastMessage).toBeVisible()
-
     const errorToastMessage = page.getByText(`Error while exporting`)
-    await expect(errorToastMessage).toBeVisible()
 
     const engineErrorToastMessage = page.getByText(`Nothing to export`)
     await expect(engineErrorToastMessage).toBeVisible()
@@ -540,6 +537,61 @@ const sketch001 = startSketchAt([-0, -0])
       await electronApp.close()
     }
   )
+
+  test(`View gizmo stays visible even when zoomed out all the way`, async ({
+    page,
+  }) => {
+    const u = await getUtils(page)
+
+    // Constants and locators
+    const planeColor: [number, number, number] = [170, 220, 170]
+    const bgColor: [number, number, number] = [27, 27, 27]
+    const middlePixelIsColor = async (color: [number, number, number]) => {
+      return u.getGreatestPixDiff({ x: 600, y: 250 }, color)
+    }
+    const gizmo = page.locator('[aria-label*=gizmo]')
+
+    await test.step(`Load an empty file`, async () => {
+      await page.addInitScript(async () => {
+        localStorage.setItem('persistCode', '')
+      })
+      await page.setViewportSize({ width: 1200, height: 500 })
+      await u.waitForAuthSkipAppStart()
+      await u.closeKclCodePanel()
+    })
+
+    await test.step(`Zoom out until you can't see the default planes`, async () => {
+      await expect
+        .poll(async () => middlePixelIsColor(planeColor), {
+          timeout: 5000,
+          message: 'Plane color is visible',
+        })
+        .toBeLessThan(15)
+
+      let maxZoomOuts = 10
+      let middlePixelIsBackgroundColor =
+        (await middlePixelIsColor(bgColor)) < 10
+      while (!middlePixelIsBackgroundColor && maxZoomOuts > 0) {
+        await page.keyboard.down('Control')
+        await page.mouse.move(600, 460)
+        await page.mouse.down({ button: 'right' })
+        await page.mouse.move(600, 50, { steps: 20 })
+        await page.mouse.up({ button: 'right' })
+        await page.keyboard.up('Control')
+        await page.waitForTimeout(100)
+        maxZoomOuts--
+        middlePixelIsBackgroundColor = (await middlePixelIsColor(bgColor)) < 10
+      }
+
+      expect(middlePixelIsBackgroundColor, {
+        message: 'We no longer the default planes',
+      }).toBeTruthy()
+    })
+
+    await test.step(`Check that the gizmo is still visible`, async () => {
+      await expect(gizmo).toBeVisible()
+    })
+  })
 })
 
 async function clickExportButton(page: Page) {

e2e/playwright/sketch-tests.spec.ts

@@ -40,7 +40,7 @@ test.describe('Sketch tests', () => {
   const screwRadius = 3
   const wireRadius = 2
   const wireOffset = 0.5
-  
+
   const screwHole = startSketchOn('XY')
     ${startProfileAt1}
     |> arc({
@@ -48,7 +48,7 @@ test.describe('Sketch tests', () => {
           angle_start: 0,
           angle_end: 360
         }, %)
-  
+
   const part001 = startSketchOn('XY')
     ${startProfileAt2}
     |> xLine(width * .5, %)
@@ -57,7 +57,7 @@ test.describe('Sketch tests', () => {
     |> close(%)
     |> hole(screwHole, %)
     |> extrude(thickness, %)
-  
+
   const part002 = startSketchOn('-XZ')
     ${startProfileAt3}
     |> xLine(width / 4, %)
@@ -149,14 +149,16 @@ test.describe('Sketch tests', () => {
     await page.getByRole('button', { name: 'line Line', exact: true }).click()
     await page.waitForTimeout(100)
 
-    await page.mouse.click(700, 200)
+    await expect(async () => {
+      await page.mouse.click(700, 200)
 
-    await expect.poll(u.normalisedEditorCode)
-      .toBe(`const sketch001 = startSketchOn('XZ')
+      await expect.poll(u.normalisedEditorCode, { timeout: 1000 })
+        .toBe(`const sketch001 = startSketchOn('XZ')
   |> startProfileAt([12.34, -12.34], %)
   |> line([-12.34, 12.34], %)
 
 `)
+    }).toPass({ timeout: 40_000, intervals: [1_000] })
   })
   test('Can exit selection of face', async ({ page }) => {
     // Load the app with the code panes
@@ -344,6 +346,92 @@ test.describe('Sketch tests', () => {
     })
   })
 
+  test('Can edit a circle center and radius by dragging its handles', async ({
+    page,
+  }) => {
+    const u = await getUtils(page)
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const sketch001 = startSketchOn('XZ')
+  |> circle({ center: [4.61, -5.01], radius: 8 }, %)`
+      )
+    })
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).not.toBeDisabled()
+
+    await page.waitForTimeout(100)
+    await u.openAndClearDebugPanel()
+    await u.sendCustomCmd({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_look_at',
+        vantage: { x: 0, y: -1250, z: 580 },
+        center: { x: 0, y: 0, z: 0 },
+        up: { x: 0, y: 0, z: 1 },
+      },
+    })
+    await page.waitForTimeout(100)
+    await u.sendCustomCmd({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_get_settings',
+      },
+    })
+    await page.waitForTimeout(100)
+
+    const startPX = [667, 325]
+
+    const dragPX = 40
+
+    await page
+      .getByText('circle({ center: [4.61, -5.01], radius: 8 }, %)')
+      .click()
+    await expect(
+      page.getByRole('button', { name: 'Edit Sketch' })
+    ).toBeVisible()
+    await page.getByRole('button', { name: 'Edit Sketch' }).click()
+    await page.waitForTimeout(400)
+    let prevContent = await page.locator('.cm-content').innerText()
+
+    await expect(page.getByTestId('segment-overlay')).toHaveCount(1)
+
+    await test.step('drag circle center handle', async () => {
+      await page.dragAndDrop('#stream', '#stream', {
+        sourcePosition: { x: startPX[0], y: startPX[1] },
+        targetPosition: { x: startPX[0] + dragPX, y: startPX[1] - dragPX },
+      })
+      await page.waitForTimeout(100)
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      prevContent = await page.locator('.cm-content').innerText()
+    })
+
+    await test.step('drag circle radius handle', async () => {
+      await page.waitForTimeout(100)
+
+      const lineEnd = await u.getBoundingBox('[data-overlay-index="0"]')
+      await page.waitForTimeout(100)
+      await page.dragAndDrop('#stream', '#stream', {
+        sourcePosition: { x: lineEnd.x - 5, y: lineEnd.y },
+        targetPosition: { x: lineEnd.x + dragPX * 2, y: lineEnd.y + dragPX },
+      })
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      prevContent = await page.locator('.cm-content').innerText()
+    })
+
+    // expect the code to have changed
+    await expect(page.locator('.cm-content'))
+      .toHaveText(`const sketch001 = startSketchOn('XZ')
+  |> circle({ center: [7.26, -2.37], radius: 11.44 }, %)
+`)
+  })
   test('Can edit a sketch that has been extruded in the same pipe', async ({
     page,
   }) => {
@@ -618,19 +706,19 @@ test.describe('Sketch tests', () => {
     await u.closeDebugPanel()
 
     await click00r(30, 0)
-    codeStr += `  |> startProfileAt([1.53, 0], %)`
+    codeStr += `  |> startProfileAt([2.03, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(30, 0)
-    codeStr += `  |> line([1.53, 0], %)`
+    codeStr += `  |> line([2.04, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(0, 30)
-    codeStr += `  |> line([0, -1.53], %)`
+    codeStr += `  |> line([0, -2.03], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(-30, 0)
-    codeStr += `  |> line([-1.53, 0], %)`
+    codeStr += `  |> line([-2.04, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(undefined, undefined)
@@ -954,4 +1042,68 @@ const sketch002 = startSketchOn(extrude001, 'END')
       await u.getGreatestPixDiff(XYPlanePoint, noPlanesColor)
     ).toBeLessThan(3)
   })
+
+  test('Can attempt to sketch on revolved face', async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(
+      browserName === 'webkit',
+      'Skip on Safari until `window.tearDown` is working there'
+    )
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const lugHeadLength = 0.25
+        const lugDiameter = 0.5
+        const lugLength = 2
+
+        fn lug = (origin, length, diameter, plane) => {
+          const lugSketch = startSketchOn(plane)
+            |> startProfileAt([origin[0] + lugDiameter / 2, origin[1]], %)
+            |> angledLineOfYLength({ angle: 60, length: lugHeadLength }, %)
+            |> xLineTo(0 + .001, %)
+            |> yLineTo(0, %)
+            |> close(%)
+            |> revolve({ axis: "Y" }, %)
+
+          return lugSketch
+        }
+
+        lug([0, 0], 10, .5, "XY")`
+      )
+    })
+
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.closeDebugPanel()
+
+    /***
+     * Test Plan
+     * Start the sketch mode
+     * Click the middle of the screen which should click the top face that is revolved
+     * Wait till you see the line tool be enabled
+     * Wait till you see the exit sketch enabled
+     *
+     * This is supposed to test that you are allowed to go into sketch mode to sketch on a revolved face
+     */
+
+    await page.getByRole('button', { name: 'Start Sketch' }).click()
+
+    await expect(async () => {
+      await page.mouse.click(600, 250)
+      await page.waitForTimeout(1000)
+      await expect(
+        page.getByRole('button', { name: 'Exit Sketch' })
+      ).toBeVisible()
+      await expect(
+        page.getByRole('button', { name: 'line Line', exact: true })
+      ).toHaveAttribute('aria-pressed', 'true')
+    }).toPass({ timeout: 40_000, intervals: [1_000] })
+  })
 })

e2e/playwright/snapshot-tests.spec.ts

@@ -532,6 +532,64 @@ test(
     })
   }
 )
+test(
+  'Draft circle should look right',
+  { tag: '@snapshot' },
+  async ({ page, context }) => {
+    // FIXME: Skip on macos its being weird.
+    // test.skip(process.platform === 'darwin', 'Skip on macos')
+
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+    const PUR = 400 / 37.5 //pixeltoUnitRatio
+
+    await u.waitForAuthSkipAppStart()
+    await u.openDebugPanel()
+
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).not.toBeDisabled()
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).toBeVisible()
+
+    // click on "Start Sketch" button
+    await u.clearCommandLogs()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Start Sketch' }).click(),
+      200
+    )
+
+    // select a plane
+    await page.mouse.click(700, 200)
+
+    await expect(page.locator('.cm-content')).toHaveText(
+      `const sketch001 = startSketchOn('XZ')`
+    )
+
+    await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
+    await u.closeDebugPanel()
+
+    const startXPx = 600
+
+    // Equip the rectangle tool
+    // await page.getByRole('button', { name: 'line Line', exact: true }).click()
+    await page.getByTestId('circle-center').click()
+
+    // Draw the rectangle
+    await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
+    await page.mouse.move(startXPx + PUR * 10, 500 - PUR * 10, { steps: 5 })
+
+    // Ensure the draft rectangle looks the same as it usually does
+    await expect(page).toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
+    await expect(page.locator('.cm-content')).toHaveText(
+      `const sketch001 = startSketchOn('XZ')
+  |> circle({ center: [14.44, -2.44], radius: 1 }, %)`
+    )
+  }
+)
 
 test.describe(
   'Client side scene scale should match engine scale',