Onboarding updates (#1967)

* Make onboarding line references dynamic and error if they aren't found
Fixes https://github.com/KittyCAD/modeling-app/issues/1918

* More clear and correct Sketch onboarding step
Fixes https://github.com/KittyCAD/modeling-app/issues/1790
Fixes https://github.com/KittyCAD/modeling-app/issues/1789

* Make sample code line references dynamic and error on app start if they break so we can know before release
Fixes https://github.com/KittyCAD/modeling-app/issues/1918

* Better error message for searchText failure

* JB onboarding feedback

* Make list more explicit, instruct to hold down key first

src/lib/exampleKcl.ts

@@ -34,5 +34,28 @@ const bracket = startSketchOn('XY')
   |> fillet({
        radius: filletR + thickness,
        tags: [getNextAdjacentEdge('outerEdge', %)]
-     }, %)
+     }, %)`
-`
+
+function findLineInExampleCode({
+  searchText,
+  example = bracket,
+}: {
+  searchText: string
+  example?: string
+}) {
+  const lines = example.split('\n')
+  const lineNumber = lines.findIndex((l) => l.includes(searchText)) + 1
+  if (lineNumber === 0) {
+    throw new Error(
+      `Could not find the line with search text "${searchText}" in the example code. Was it removed?`
+    )
+  }
+  return lineNumber
+}
+
+export const bracketWidthConstantLine = findLineInExampleCode({
+  searchText: 'const width',
+})
+export const bracketThicknessCalculationLine = findLineInExampleCode({
+  searchText: 'const thickness',
+})

src/routes/Onboarding/Export.tsx

@@ -21,7 +21,8 @@ export default function Export() {
         <section className="flex-1">
           <h2 className="text-2xl font-bold">Export</h2>
           <p className="my-4">
-            Try opening the project menu and clicking "Export Part".
+            Try opening the project menu and clicking the "Export Part" at the
+            bottom of the pane.
           </p>
           <p className="my-4">
             {APP_NAME} uses{' '}

src/routes/Onboarding/InteractiveNumbers.tsx

@@ -2,6 +2,7 @@ import { OnboardingButtons, kbdClasses, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useStore } from '../../useStore'
 import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
+import { bracketWidthConstantLine } from 'lib/exampleKcl'
 
 export default function InteractiveNumbers() {
   const { buttonDownInStream } = useStore((s) => ({
@@ -26,11 +27,25 @@ export default function InteractiveNumbers() {
           <h2 className="text-3xl font-bold">Hybrid editing</h2>
 
           <p className="my-4">
-            Try changing the value of <code>width</code> on line 2 by holding
+            We believe editing in Modeling App should feel fluid between code
-            the <kbd className={kbdClasses}>Alt</kbd> (or{' '}
+            and point-and-click, so that you can work in the way that feels most
-            <kbd className={kbdClasses}>Option</kbd>) key and dragging the
+            natural to you. Let's try something out that demonstrates this
-            number left and right. You can hold down different modifier keys to
+            principle, by editing numbers without typing.
-            change the value by different increments:
+          </p>
+          <ol className="pl-6 my-4 list-decimal">
+            <li className="list-decimal">
+              Press and hold the <kbd className={kbdClasses}>Alt</kbd> (or{' '}
+              <kbd className={kbdClasses}>Option</kbd>) key
+            </li>
+            <li>
+              Hover over the number assigned to <code>width</code> on line{' '}
+              {bracketWidthConstantLine}
+            </li>
+            <li>Drag the number left and right to change its value</li>
+          </ol>
+          <p className="my-4">
+            You can hold down different modifier keys to change the value by
+            different increments:
           </p>
           <ul className="flex flex-col text-sm my-4 mx-12 divide-y divide-chalkboard-20 dark:divide-chalkboard-70">
             <li className="flex justify-between m-0 px-0 py-2">
@@ -70,10 +85,8 @@ export default function InteractiveNumbers() {
             lets you interact with numbers in your code by dragging them around.
           </p>
           <p className="my-4">
-            We believe editing in Modeling App should feel fluid between code
+            We're going to keep extending the text editor, and we'd love to hear
-            and point-and-click, so that you can work in the way that feels most
+            your ideas for how to make it better.
-            natural to you. We're going to keep extending the text editor, and
-            we'd love to hear your ideas for how to make it better.
           </p>
         </section>
         <OnboardingButtons

src/routes/Onboarding/Introduction.tsx

@@ -141,10 +141,11 @@ export default function Introduction() {
         <section className="my-12">
           <p className="my-4">
             Welcome to {APP_NAME}! This is a hardware design tool that lets you
-            edit visually, with code, or both. It's powered by the first API
+            edit visually, with code, or both. It's powered by the KittyCAD
-            created for anyone to build hardware design tools. The 3D view is
+            Design API, the first API created for anyone to build hardware
-            not running on your computer, but is instead being streamed to you
+            design tools. The 3D view is not running on your computer, but is
-            from a remote GPU as video.
+            instead being streamed to you from an instance of our Geometry
+            Engine on a remote GPU as video.
           </p>
           <p className="my-4">
             This is an alpha release, so you will encounter bugs and missing
@@ -173,7 +174,7 @@ export default function Introduction() {
           className="mt-6"
           dismiss={dismiss}
           next={next}
-          nextText="Camera"
+          nextText="Mouse Controls"
         />
       </div>
     </div>

src/routes/Onboarding/ParametricModeling.tsx

@@ -4,6 +4,7 @@ import { useStore } from '../../useStore'
 import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { bracketThicknessCalculationLine } from 'lib/exampleKcl'
 
 export default function ParametricModeling() {
   const { buttonDownInStream } = useStore((s) => ({
@@ -61,7 +62,10 @@ export default function ParametricModeling() {
           <p className="my-4">
             We are able to easily calculate the thickness of the material based
             on the width of the bracket to meet a set safety factor on{' '}
-            <em className="text-energy-60 dark:text-energy-20">line 14</em>.
+            <em className="text-energy-60 dark:text-energy-20">
+              line {bracketThicknessCalculationLine}
+            </em>
+            .
           </p>
         </section>
         <OnboardingButtons

src/routes/Onboarding/Sketching.tsx

@@ -30,9 +30,15 @@ export default function Sketching() {
         <h1 className="text-2xl font-bold">Sketching</h1>
         <p className="my-4">
           Our 3D modeling tools are still very much a work in progress, but we
-          want to show you some early features. Try creating a sketch by
+          want to show you some early features. Try sketching by clicking Start
-          clicking Create Sketch in the top toolbar, then clicking the Line
+          Sketch in the top toolbar and selecting a plane to draw on. Now you
-          tool, and clicking in the 3D view.
+          can start clicking to draw lines and shapes.
+        </p>
+        <p className="my-4">
+          The Line tool will be equipped by default, but you can switch it to as
+          you go by clicking another tool in the toolbar, or unequip it by
+          clicking the Line tool button. With no tool selected, you can move
+          points and add constraints to your sketch.
         </p>
         <p className="my-4">
           Watch the code pane as you click. Point-and-click interactions are