Merge branch 'main' into dependabot/npm_and_yarn/electron-32.0.2

e2e/playwright/file-tree.spec.ts

@@ -201,4 +201,78 @@ test.describe('when using the file tree to', () => {
       await electronApp.close()
     }
   )
+
+  test(
+    'loading small file, then large, then back to small',
+    {
+      tag: '@electron',
+    },
+    async ({ browser: _ }, testInfo) => {
+      const { page } = await setupElectron({
+        testInfo,
+      })
+
+      const {
+        panesOpen,
+        createAndSelectProject,
+        pasteCodeInEditor,
+        createNewFile,
+        openDebugPanel,
+        closeDebugPanel,
+        expectCmdLog,
+      } = await getUtils(page, test)
+
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      await panesOpen(['files', 'code'])
+      await createAndSelectProject('project-000')
+
+      // Create a small file
+      const kclCube = await fsp.readFile(
+        'src/wasm-lib/tests/executor/inputs/cube.kcl',
+        'utf-8'
+      )
+      // pasted into main.kcl
+      await pasteCodeInEditor(kclCube)
+
+      // Create a large lego file
+      await createNewFile('lego')
+      const legoFile = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: 'lego.kcl' }),
+      })
+      await expect(legoFile).toBeVisible({ timeout: 60_000 })
+      await legoFile.click()
+      const kclLego = await fsp.readFile(
+        'src/wasm-lib/tests/executor/inputs/lego.kcl',
+        'utf-8'
+      )
+      await pasteCodeInEditor(kclLego)
+      const mainFile = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: 'main.kcl' }),
+      })
+
+      // Open settings and enable the debug panel
+      await page
+        .getByRole('link', {
+          name: 'settings Settings',
+        })
+        .click()
+      await page.locator('#showDebugPanel').getByText('OffOn').click()
+      await page.getByTestId('settings-close-button').click()
+
+      await test.step('swap between small and large files', async () => {
+        await openDebugPanel()
+        // Previously created a file so we need to start back at main.kcl
+        await mainFile.click()
+        await expectCmdLog('[data-message-type="execution-done"]', 60_000)
+        // Click the large file
+        await legoFile.click()
+        // Once it is building, click back to the smaller file
+        await mainFile.click()
+        await expectCmdLog('[data-message-type="execution-done"]', 60_000)
+        await closeDebugPanel()
+      })
+    }
+  )
 })

package.json

@@ -137,7 +137,6 @@
     "@iarna/toml": "^2.2.5",
     "@lezer/generator": "^1.7.1",
     "@playwright/test": "^1.46.1",
-    "@tauri-apps/cli": "^2.0.0-rc.9",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^15.0.2",
     "@types/d3-force": "^3.0.10",

src/App.tsx

@@ -122,11 +122,11 @@ export function App() {
         // Override the electron window draggable region behavior as well
         // when the button is down in the stream
         style={
-          {
-            '-webkit-app-region': context.store?.buttonDownInStream
-              ? 'no-drag'
-              : '',
-          } as React.CSSProperties
+          isDesktop() && context.store?.buttonDownInStream
+            ? ({
+                '-webkit-app-region': 'no-drag',
+              } as React.CSSProperties)
+            : {}
         }
         project={{ project, file }}
         enableMenu={true}

src/Toolbar.tsx

@@ -20,6 +20,8 @@ import {
   ToolbarItemResolved,
   ToolbarModeName,
 } from 'lib/toolbar'
+import { isDesktop } from 'lib/isDesktop'
+import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 
 export function Toolbar({
   className = '',
@@ -288,6 +290,11 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
   return (
     <Tooltip
       inert={false}
+      wrapperStyle={
+        isDesktop()
+          ? ({ '-webkit-app-region': 'no-drag' } as React.CSSProperties)
+          : {}
+      }
       position="bottom"
       wrapperClassName="!p-4 !pointer-events-auto"
       contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
@@ -337,6 +344,7 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
               <li key={link.label} className="contents">
                 <a
                   href={link.url}
+                  onClick={openExternalBrowserIfDesktop(link.url)}
                   target="_blank"
                   rel="noreferrer"
                   className="flex items-center rounded-sm p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"

src/components/AppHeader.module.css

@@ -6,6 +6,9 @@
   grid-template-columns: 1fr auto 1fr;
   user-select: none;
   -webkit-user-select: none;
+}
+
+.header.desktopApp {
   /* Make the header act as a handle to drag the electron app window,
    * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
    * all interactive elements opt-out of this behavior by default in src/index.css

src/components/AppHeader.tsx

@@ -6,6 +6,7 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import styles from './AppHeader.module.css'
 import { RefreshButton } from 'components/RefreshButton'
 import { CommandBarOpenButton } from './CommandBarOpenButton'
+import { isDesktop } from 'lib/isDesktop'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -32,7 +33,9 @@ export const AppHeader = ({
       className={
         'w-full grid ' +
         styles.header +
-        ' overlaid-panes sticky top-0 z-20 px-2 items-start ' +
+        ` ${
+          isDesktop() ? styles.desktopApp + ' ' : ''
+        }overlaid-panes sticky top-0 z-20 px-2 items-start ` +
         className
       }
       style={style}

src/components/Tooltip.tsx

@@ -12,6 +12,7 @@ interface TooltipProps extends React.PropsWithChildren {
   position?: TooltipPosition
   wrapperClassName?: string
   contentClassName?: string
+  wrapperStyle?: React.CSSProperties
   delay?: number
   hoverOnly?: boolean
   inert?: boolean
@@ -22,6 +23,7 @@ export default function Tooltip({
   position = 'top',
   wrapperClassName: className,
   contentClassName,
+  wrapperStyle = {},
   delay = 200,
   hoverOnly = false,
   inert = true,
@@ -36,7 +38,10 @@ export default function Tooltip({
       } ${styles.tooltipWrapper} ${hoverOnly ? '' : styles.withFocus} ${
         styles[position]
       } ${className}`}
-      style={{ '--_delay': delay + 'ms' } as React.CSSProperties}
+      style={Object.assign(
+        { '--_delay': delay + 'ms' } as React.CSSProperties,
+        wrapperStyle
+      )}
     >
       <div className={`rounded ${styles.tooltip} ${contentClassName || ''}`}>
         {children}

src/index.css

@@ -50,6 +50,19 @@ body.dark {
   @apply text-chalkboard-10;
 }
 
+@media (prefers-color-scheme: dark) {
+  body,
+  .body-bg,
+  .dark .body-bg {
+    @apply bg-chalkboard-100;
+  }
+
+  body {
+    scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
+    @apply text-chalkboard-10;
+  }
+}
+
 select {
   @apply bg-chalkboard-20;
 }

src/main.ts

@@ -2,7 +2,14 @@
 // template that ElectronJS provides.
 
 import dotenv from 'dotenv'
-import { app, BrowserWindow, ipcMain, dialog, shell } from 'electron'
+import {
+  app,
+  BrowserWindow,
+  ipcMain,
+  dialog,
+  shell,
+  nativeTheme,
+} from 'electron'
 import path from 'path'
 import { Issuer } from 'openid-client'
 import { Bonjour, Service } from 'bonjour-service'
@@ -75,6 +82,7 @@ const createWindow = (filePath?: string): BrowserWindow => {
     icon: path.resolve(process.cwd(), 'assets', 'icon.png'),
     frame: os.platform() !== 'darwin',
     titleBarStyle: 'hiddenInset',
+    backgroundColor: nativeTheme.shouldUseDarkColors ? '#1C1C1C' : '#FCFCFC',
   })
 
   // and load the index.html of the app.

src/routes/SignIn.tsx

@@ -58,7 +58,16 @@ const SignIn = () => {
   }
 
   return (
-    <main className="bg-primary h-screen grid place-items-stretch m-0 p-2">
+    <main
+      className="bg-primary h-screen grid place-items-stretch m-0 p-2"
+      style={
+        isDesktop()
+          ? ({
+              '-webkit-app-region': 'drag',
+            } as CSSProperties)
+          : {}
+      }
+    >
       <div
         style={
           {
@@ -68,6 +77,7 @@ const SignIn = () => {
             '--circle-size-mid': '15%',
             '--circle-size-end': '200%',
             '--circle-timing': 'cubic-bezier(0.25, 1, 0.4, 0.9)',
+            ...(isDesktop() ? { '-webkit-app-region': 'no-drag' } : {}),
           } as CSSProperties
         }
         className="in-circle-hesitate body-bg py-5 px-12 rounded-lg grid place-items-center overflow-y-auto"

src/wasm-lib/Cargo.toml

@@ -15,7 +15,7 @@ data-encoding = "2.6.0"
 gloo-utils = "0.2.0"
 kcl-lib = { path = "kcl" }
 kittycad.workspace = true
-serde_json = "1.0.127"
+serde_json = "1.0.128"
 tokio = { version = "1.40.0", features = ["sync"] }
 toml = "0.8.19"
 uuid = { version = "1.10.0", features = ["v4", "js", "serde"] }

src/wasm-lib/kcl-test-server/Cargo.toml

@@ -11,5 +11,5 @@ hyper = { version = "0.14.29", features = ["server"] }
 kcl-lib = { version = "0.2", path = "../kcl" }
 pico-args = "0.5.0"
 serde = { version = "1.0.209", features = ["derive"] }
-serde_json = "1.0.127"
+serde_json = "1.0.128"
 tokio = { version = "1.40.0", features = ["macros", "rt-multi-thread"] }

src/wasm-lib/kcl/Cargo.toml

@@ -16,7 +16,7 @@ async-recursion = "1.1.1"
 async-trait = "0.1.82"
 base64 = "0.22.1"
 chrono = "0.4.38"
-clap = { version = "4.5.16", default-features = false, optional = true, features = ["std", "derive"] }
+clap = { version = "4.5.17", default-features = false, optional = true, features = ["std", "derive"] }
 convert_case = "0.6.0"
 dashmap = "6.0.1"
 databake = { version = "0.1.8", features = ["derive"] }
@@ -37,7 +37,7 @@ reqwest = { version = "0.11.26", default-features = false, features = ["stream",
 ropey = "1.6.1"
 schemars = { version = "0.8.17", features = ["impl_json_schema", "url", "uuid1"] }
 serde = { version = "1.0.209", features = ["derive"] }
-serde_json = "1.0.127"
+serde_json = "1.0.128"
 sha2 = "0.10.8"
 tabled = { version = "0.15.0", optional = true }
 thiserror = "1.0.63"

src/wasm-lib/kcl/src/executor.rs

@@ -995,20 +995,20 @@ impl SketchSurface {
     }
     pub(crate) fn x_axis(&self) -> Point3d {
         match self {
-            SketchSurface::Plane(plane) => plane.x_axis.clone(),
-            SketchSurface::Face(face) => face.x_axis.clone(),
+            SketchSurface::Plane(plane) => plane.x_axis,
+            SketchSurface::Face(face) => face.x_axis,
         }
     }
     pub(crate) fn y_axis(&self) -> Point3d {
         match self {
-            SketchSurface::Plane(plane) => plane.y_axis.clone(),
-            SketchSurface::Face(face) => face.y_axis.clone(),
+            SketchSurface::Plane(plane) => plane.y_axis,
+            SketchSurface::Face(face) => face.y_axis,
         }
     }
     pub(crate) fn z_axis(&self) -> Point3d {
         match self {
-            SketchSurface::Plane(plane) => plane.z_axis.clone(),
-            SketchSurface::Face(face) => face.z_axis.clone(),
+            SketchSurface::Plane(plane) => plane.z_axis,
+            SketchSurface::Face(face) => face.z_axis,
         }
     }
 }
@@ -1304,7 +1304,7 @@ impl Point2d {
     }
 }
 
-#[derive(Debug, Deserialize, Serialize, PartialEq, Clone, ts_rs::TS, JsonSchema, Default)]
+#[derive(Debug, Deserialize, Serialize, PartialEq, Clone, Copy, ts_rs::TS, JsonSchema, Default)]
 #[ts(export)]
 pub struct Point3d {
     pub x: f64,
@@ -1313,6 +1313,7 @@ pub struct Point3d {
 }
 
 impl Point3d {
+    pub const ZERO: Self = Self { x: 0.0, y: 0.0, z: 0.0 };
     pub fn new(x: f64, y: f64, z: f64) -> Self {
         Self { x, y, z }
     }