neutral theme, comfy auth, dynamic workflows

documentation/design/README.md

@@ -0,0 +1,70 @@
+# Design
+
+(those are just quick notes for now, we can elaborate later)
+
+## Designing Clapper for the Web
+
+### Targeted devices
+
+Currently Clapper works best on a laptop,
+since the UI has been developed around the presence of a relatively wide screen,
+a mouse and a touch pad (for horizontal scrolling in the timeline).
+
+However I think we should try to better support the following environments:
+
+- Tiny laptop (12", 11")
+- Tablet (without a mouse)
+- Desktop computer with multiple screens
+
+(mobile has its own chapter, see below in this document)
+
+### Use Web APIs in priority
+
+We should try to use standard Web APIs (ratified by the W3C) as much as possible, with polyfills in case some browsers don't implement them yet.
+
+We can use experimental standards (eg. WebGPU),
+but since they are unstable and not supported by all browsers, they should not be mandatory to the experience.
+
+## Designing Clapper for desktop
+
+The experience on Desktop should be similar to the one in a browser, but we can do some changes:
+
+### Customizing the look of the app window
+
+Electron offers us to hide or customize the app's window, so we should do it.
+
+We don't have to follow the design principles of the underlying operating system (some apps don't care eg. video games, Spotify, Slack, FLStudio, Discord..) but it may be necessary for some operations (file pickers, installer, window management etc).
+
+### Use the native file system
+
+The big benefit of running Clapper as a desktop application is that we can access the file system, meaning we can work with files of arbitrary file length (note: for this kind of file system manipulation, we will have to use extra code eg. NodeJS)
+
+This can also be used for performance optimization such as using temporary files, or pre-computing things and store them in a cache for the next time Clapper is opened.
+
+### Download additional data for local use
+
+By running Clapper on the user's device, we can also make it download data of arbitrary size.
+
+This can help with various use cases, such as running AI models locally.
+
+For instance the desktop app LMStudio can download models from Hugging Face.
+
+### Call external or embedded native libraries
+
+We have complete freedom to ship Clapper with embedded native tools eg. a database or a native library (eg. a C++ library to run a LLM locally).
+
+We could even use Python scripts with Clapper.
+
+Please note however that we will have to make sure anything we embed works on various operating systems (Windows/macOS/Linux) so this requires dedicated skills and maintenance.
+
+### Use System Notifications
+
+When a job is pending, finished, a software update is ready etc.
+
+## Clapper Design For Mobile
+
+Currently Clapper can *run* on mobile, but it is not designed for it.
+
+So things like the top menu etc will be pretty much unuseable, unless we adapt them.
+
+

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@aitube/broadway": "0.2.3",
         "@aitube/clap": "0.2.3",
-        "@aitube/clapper-services": "0.2.3-1",
+        "@aitube/clapper-services": "0.2.3-2",
         "@aitube/client": "0.2.3",
         "@aitube/engine": "0.2.3",
         "@aitube/timeline": "0.2.3",
@@ -33,7 +33,7 @@
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-collapsible": "^1.0.3",
-        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
@@ -66,7 +66,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cmdk": "^0.2.1",
-        "comfydeploy": "^0.0.19-beta.13",
+        "comfydeploy": "^0.0.21",
         "date-fns": "^3.6.0",
         "dotenv": "^16.4.5",
         "fflate": "^0.8.2",
@@ -89,6 +89,7 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.3.1",
         "react-drag-drop-files": "^2.3.10",
+        "react-error-boundary": "^4.0.13",
         "react-hook-consent": "^3.5.3",
         "react-hotkeys-hook": "^4.5.0",
         "react-icons": "^5.2.1",
@@ -99,7 +100,7 @@
         "replicate": "^0.32.0",
         "sharp": "0.33.4",
         "sonner": "^1.5.0",
-        "tailwind-merge": "^2.4.0",
+        "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
         "three": "^0.164.1",
         "ts-node": "^10.9.2",
@@ -109,7 +110,7 @@
         "web-audio-beat-detector": "^8.2.12",
         "yaml": "^2.4.5",
         "zustand": "4.5.2",
-        "zx": "^8.1.3"
+        "zx": "^8.1.4"
       },
       "devDependencies": {
         "@electron-forge/cli": "^7.4.0",
@@ -191,9 +192,9 @@
       }
     },
     "node_modules/@aitube/clapper-services": {
-      "version": "0.2.3-1",
-      "resolved": "https://registry.npmjs.org/@aitube/clapper-services/-/clapper-services-0.2.3-1.tgz",
-      "integrity": "sha512-R6n9Wlte7E7bRIKh3Jf8xSZkvly2BgQ4p12OJY1rBNzgvDaUfHyFcCdCwKcBXzcDlWzGW5fjQIA7+OPeoXpC0Q==",
+      "version": "0.2.3-2",
+      "resolved": "https://registry.npmjs.org/@aitube/clapper-services/-/clapper-services-0.2.3-2.tgz",
+      "integrity": "sha512-Qd6Riridk4FVcTjlscxw5wsbUgojwi1wkTIjlgPluhT5J5kLyEJQL/hmT2gBDBRsB4kyieVNZiGflgXnauDENw==",
       "peerDependencies": {
         "@aitube/clap": "0.2.3",
         "@aitube/timeline": "0.2.3",
@@ -9394,11 +9395,14 @@
       }
     },
     "node_modules/comfydeploy": {
-      "version": "0.0.19-beta.13",
-      "resolved": "https://registry.npmjs.org/comfydeploy/-/comfydeploy-0.0.19-beta.13.tgz",
-      "integrity": "sha512-m3sn8XCYJ9FjEhB6CoA8IYQ67CvizQuZ9vodNroiZB5BA2TakkGTK5TUj+PxmpOopdUZVhlSOVqjcB1+KQYJBQ==",
-      "peerDependencies": {
-        "zod": ">= 3"
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/comfydeploy/-/comfydeploy-0.0.21.tgz",
+      "integrity": "sha512-v5i6igitVWN6jmDlg35g8XyJuGsToD1sbhEZIz4nM3F6gSXZf2YjJzL/wzabsHlOtHhKsO/vdQAXuvO7/w8deQ==",
+      "dependencies": {
+        "zod": "^3.22.4"
+      },
+      "engines": {
+        "node": ">=16"
       }
     },
     "node_modules/comma-separated-tokens": {
@@ -17745,6 +17749,17 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-hook-consent": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/react-hook-consent/-/react-hook-consent-3.5.3.tgz",
@@ -19595,9 +19610,9 @@
       "dev": true
     },
     "node_modules/tailwind-merge": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
-      "integrity": "sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
+      "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"

package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@aitube/broadway": "0.2.3",
     "@aitube/clap": "0.2.3",
-    "@aitube/clapper-services": "0.2.3-1",
+    "@aitube/clapper-services": "0.2.3-2",
     "@aitube/client": "0.2.3",
     "@aitube/engine": "0.2.3",
     "@aitube/timeline": "0.2.3",
@@ -60,7 +60,7 @@
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
@@ -93,7 +93,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
-    "comfydeploy": "^0.0.19-beta.13",
+    "comfydeploy": "^0.0.21",
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "fflate": "^0.8.2",
@@ -116,6 +116,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-drag-drop-files": "^2.3.10",
+    "react-error-boundary": "^4.0.13",
     "react-hook-consent": "^3.5.3",
     "react-hotkeys-hook": "^4.5.0",
     "react-icons": "^5.2.1",
@@ -126,7 +127,7 @@
     "replicate": "^0.32.0",
     "sharp": "0.33.4",
     "sonner": "^1.5.0",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.164.1",
     "ts-node": "^10.9.2",
@@ -136,7 +137,7 @@
     "web-audio-beat-detector": "^8.2.12",
     "yaml": "^2.4.5",
     "zustand": "4.5.2",
-    "zx": "^8.1.3"
+    "zx": "^8.1.4"
   },
   "devDependencies": {
     "@electron-forge/cli": "^7.4.0",

src/app/api/resolve/providers/comfy-replicate/index.ts

@@ -1,7 +1,11 @@
-import { ClapSegmentStatus, getClapAssetSourceType } from '@aitube/clap'
+import {
+  ClapSegmentCategory,
+  ClapSegmentStatus,
+  getClapAssetSourceType,
+} from '@aitube/clap'
 
 import { ResolveRequest } from '@aitube/clapper-services'
-import { getComfyWorkflow } from '../comfyui/getComfyWorkflow'
+import { getComfyWorkflow } from '../../../../../services/editors/workflow-editor/workflows/comfyui/getComfyWorkflow'
 import { runWorkflow } from './runWorkflow'
 import { TimelineSegment } from '@aitube/timeline'
 
@@ -11,22 +15,55 @@ export async function resolveSegment(
   if (!request.settings.replicateApiKey) {
     throw new Error(`Missing API key for "Replicate.com"`)
   }
-  const workflow = getComfyWorkflow(request)
 
   const segment: TimelineSegment = request.segment
 
-  try {
-    segment.assetUrl = await runWorkflow({
-      apiKey: request.settings.replicateApiKey,
-      workflow,
-    })
-    segment.assetSourceType = getClapAssetSourceType(segment.assetUrl)
-  } catch (err) {
-    console.error(`failed to call Replicate: `, err)
-    segment.assetUrl = ''
-    segment.assetSourceType = getClapAssetSourceType(segment.assetUrl)
-    segment.status = ClapSegmentStatus.TO_GENERATE
-    // request.segment.status = ClapSegmentStatus.ERROR
+  if (request.segment.category === ClapSegmentCategory.STORYBOARD) {
+    const inputFields =
+      request.settings.imageGenerationWorkflow.inputFields || []
+
+    // since this is a random "wild" workflow, it is possible
+    // that the field name is a bit different
+    // we try to look into the workflow input fields
+    // to find the best match
+    const promptFields = [
+      inputFields.find((f) => f.id === 'prompt'), // exactMatch,
+      inputFields.find((f) => f.id.includes('prompt')), // similarName,
+      inputFields.find((f) => f.type === 'string'), // similarType
+    ].filter((x) => typeof x !== 'undefined')
+
+    const promptField = promptFields[0]
+    if (!promptField) {
+      throw new Error(
+        `this workflow doesn't seem to have a parameter called "prompt"`
+      )
+    }
+
+    console.log(`TODO: inject parameters into the final request object`)
+    const workflow = `{}` // <- the final workflow sent to Replicate
+
+    try {
+      segment.assetUrl = await runWorkflow({
+        apiKey: request.settings.replicateApiKey,
+        workflow,
+      })
+      segment.assetSourceType = getClapAssetSourceType(segment.assetUrl)
+    } catch (err) {
+      console.error(`failed to call Replicate: `, err)
+      segment.assetUrl = ''
+      segment.assetSourceType = getClapAssetSourceType(segment.assetUrl)
+      segment.status = ClapSegmentStatus.TO_GENERATE
+      // request.segment.status = ClapSegmentStatus.ERROR
+    }
+  } else if (request.segment.category === ClapSegmentCategory.VIDEO) {
+    // TODO do the same for video
+    throw new Error(
+      `Clapper doesn't support ${request.segment.category} generation for provider "Comfy.icu". Please open a pull request with (working code) to solve this!`
+    )
+  } else {
+    throw new Error(
+      `Clapper doesn't support ${request.segment.category} generation for provider "Comfy.icu". Please open a pull request with (working code) to solve this!`
+    )
   }
 
   return segment

src/app/api/resolve/providers/comfyui/getComfyWorkflow.ts

@@ -1,33 +0,0 @@
-import { ClapSegmentCategory } from '@aitube/clap'
-import { getVideoPrompt } from '@aitube/engine'
-
-import { ComfyNode, ResolveRequest } from '@aitube/clapper-services'
-
-// TODO move this to @aitube/engine or @aitube/engine-comfy
-export function getComfyWorkflow(request: ResolveRequest) {
-  let comfyWorkflow = '{}'
-
-  if (request.segment.category === ClapSegmentCategory.STORYBOARD) {
-    comfyWorkflow = request.settings.comfyWorkflowForImage
-  } else if (request.segment.category === ClapSegmentCategory.VIDEO) {
-    comfyWorkflow = request.settings.comfyWorkflowForVideo
-  }
-
-  // parse the node array from the ComfyUI workflow
-  const nodes = Object.values(JSON.parse(comfyWorkflow)) as ComfyNode[]
-
-  const visualPrompt = getVideoPrompt(request.segments, request.entities)
-
-  const output: Record<string, ComfyNode> = {}
-
-  nodes.forEach((node, i) => {
-    if (typeof node.inputs.text === 'string') {
-      if (node._meta.title.includes('Prompt')) {
-        node.inputs.text = visualPrompt
-      }
-    }
-    output[`${i}`] = node
-  })
-
-  return JSON.stringify(output)
-}

src/app/api/resolve/providers/comfyui/index.ts

@@ -1,5 +1,6 @@
 import { ResolveRequest } from '@aitube/clapper-services'
 import {
+  ClapAssetSource,
   ClapSegmentCategory,
   ClapSegmentStatus,
   generateSeed,
@@ -7,6 +8,7 @@ import {
 } from '@aitube/clap'
 import { TimelineSegment } from '@aitube/timeline'
 import {
+  BasicCredentials,
   CallWrapper,
   ComfyApi,
   PromptBuilder,
@@ -15,6 +17,7 @@ import {
 } from '@saintno/comfyui-sdk'
 
 import { getWorkflowInputValues } from '../getWorkflowInputValues'
+import { decodeOutput } from '@/lib/utils/decodeOutput'
 
 export async function resolveSegment(
   request: ResolveRequest
@@ -25,10 +28,25 @@ export async function resolveSegment(
 
   const segment: TimelineSegment = { ...request.segment }
 
+  const credentials: BasicCredentials = {
+    type: 'basic',
+    username: request.settings.comfyUiHttpAuthLogin,
+    password: request.settings.comfyUiHttpAuthPassword,
+  }
+
   // for API doc please see:
   // https://github.com/tctien342/comfyui-sdk/blob/main/examples/example-t2i.ts
   const api = new ComfyApi(
-    request.settings.comfyUiApiUrl || 'http://localhost:8188'
+    request.settings.comfyUiApiUrl || 'http://localhost:8188',
+    request.settings.comfyUiClientId,
+
+    // HTTP Auth is optional
+    // also in the future, we might support other things (bearer tokens?)
+    request.settings.comfyUiHttpAuthLogin
+      ? {
+          credentials,
+        }
+      : undefined
   ).init()
 
   if (request.segment.category === ClapSegmentCategory.STORYBOARD) {
@@ -123,18 +141,38 @@ export async function resolveSegment(
       .onStart(() => console.log('Task is started'))
       .onPreview((blob) => console.log(blob))
       .onFinished((data) => {
-        console.log(
-          data.images?.images.map((img: any) => api.getPathImage(img))
-        )
+        console.log('Pipeline finished')
       })
       .onProgress((info) =>
         console.log('Processing node', info.node, `${info.value}/${info.max}`)
       )
       .onFailed((err) => console.log('Task is failed', err))
 
-    const result = await pipeline.run()
+    const rawOutput = await pipeline.run()
+
+    if (!rawOutput) {
+      throw new Error(`failed to run the pipeline (no output)`)
+    }
+
+    const imagePaths = rawOutput.images?.images.map((img: any) =>
+      api.getPathImage(img)
+    )
+
+    console.log(`imagePaths:`, imagePaths)
+
+    const imagePath = imagePaths.at(0)
+    if (!imagePath) {
+      throw new Error(`failed to run the pipeline (no image)`)
+    }
+
+    // TODO: check what the imagePath looks like exactly
+    const assetUrl = await decodeOutput(imagePath)
+
+    console.log(`assetUrl:`, imagePaths)
+    segment.assetUrl = assetUrl
+    segment.assetSourceType = ClapAssetSource.DATA
 
-    console.log(`result:`, result)
+    // TODO:
   } else {
     throw new Error(
       `Clapper doesn't support ${request.segment.category} generation for provider "ComfyUI". Please open a pull request with (working code) to solve this!`

src/app/api/resolve/providers/comfyui/temporary_demo.json

@@ -1,80 +0,0 @@
-{
-  "3": {
-    "inputs": {
-      "seed": 303533494192794,
-      "steps": 20,
-      "cfg": 8,
-      "sampler_name": "euler",
-      "scheduler": "normal",
-      "denoise": 1,
-      "model": ["4", 0],
-      "positive": ["6", 0],
-      "negative": ["7", 0],
-      "latent_image": ["5", 0]
-    },
-    "class_type": "KSampler",
-    "_meta": {
-      "title": "KSampler"
-    }
-  },
-  "4": {
-    "inputs": {
-      "ckpt_name": "SD15/counterfeitV30_v30.safetensors"
-    },
-    "class_type": "CheckpointLoaderSimple",
-    "_meta": {
-      "title": "Load Checkpoint"
-    }
-  },
-  "5": {
-    "inputs": {
-      "width": 512,
-      "height": 512,
-      "batch_size": 1
-    },
-    "class_type": "EmptyLatentImage",
-    "_meta": {
-      "title": "Empty Latent Image"
-    }
-  },
-  "6": {
-    "inputs": {
-      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
-      "clip": ["4", 1]
-    },
-    "class_type": "CLIPTextEncode",
-    "_meta": {
-      "title": "CLIP Text Encode (Prompt)"
-    }
-  },
-  "7": {
-    "inputs": {
-      "text": "text, watermark",
-      "clip": ["4", 1]
-    },
-    "class_type": "CLIPTextEncode",
-    "_meta": {
-      "title": "CLIP Text Encode (Prompt)"
-    }
-  },
-  "8": {
-    "inputs": {
-      "samples": ["3", 0],
-      "vae": ["4", 2]
-    },
-    "class_type": "VAEDecode",
-    "_meta": {
-      "title": "VAE Decode"
-    }
-  },
-  "9": {
-    "inputs": {
-      "filename_prefix": "ComfyUI",
-      "images": ["8", 0]
-    },
-    "class_type": "SaveImage",
-    "_meta": {
-      "title": "Save Image"
-    }
-  }
-}

src/app/embed/embed.tsx

@@ -23,7 +23,7 @@ export function Embed() {
       <div
         ref={ref}
         className={cn(
-          `dark fixed flex h-screen w-screen select-none flex-col items-center justify-center overflow-hidden font-light text-stone-900/90 dark:text-stone-100/90`
+          `dark fixed flex h-screen w-screen select-none flex-col items-center justify-center overflow-hidden font-light text-neutral-900/90 dark:text-neutral-100/90`
         )}
         style={{ backgroundImage: theme.wallpaperBgImage }}
       >

src/app/main.tsx

@@ -6,6 +6,7 @@ import { useSearchParams } from 'next/navigation'
 import { DndProvider, useDrop } from 'react-dnd'
 import { HTML5Backend, NativeTypes } from 'react-dnd-html5-backend'
 import { UIWindowLayout } from '@aitube/clapper-services'
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary'
 
 import { Toaster } from '@/components/ui/sonner'
 import { cn } from '@/lib/utils'
@@ -14,12 +15,10 @@ import { Monitor } from '@/components/monitor'
 
 import { SettingsDialog } from '@/components/settings'
 import { LoadingDialog } from '@/components/dialogs/loader/LoadingDialog'
-import { useUI, useIO } from '@/services'
 import { TopBar } from '@/components/toolbars/top-bar'
 import { Timeline } from '@/components/core/timeline'
 import { ChatView } from '@/components/assistant/ChatView'
 import { Editors } from '@/components/editors/Editors'
-import { useTheme } from '@/services/ui/useTheme'
 import { BottomToolbar } from '@/components/toolbars/bottom-bar'
 import { FruityDesktop, FruityWindow } from '@/components/windows'
 import { ScriptEditor } from '@/components/editors/ScriptEditor'
@@ -27,7 +26,10 @@ import { SegmentEditor } from '@/components/editors/SegmentEditor'
 import { EntityEditor } from '@/components/editors/EntityEditor'
 import { WorkflowEditor } from '@/components/editors/WorkflowEditor'
 import { FilterEditor } from '@/components/editors/FilterEditor'
+
+import { useUI, useIO, useTheme } from '@/services'
 import { useRenderLoop } from '@/services/renderer'
+import { useDynamicWorkflows } from '@/services/editors/workflow-editor/useDynamicWorkflows'
 
 type DroppableThing = { files: File[] }
 
@@ -47,6 +49,10 @@ function MainContent() {
   // perform its routine even when the monitor component is hidden
   useRenderLoop()
 
+  // this has to be done at the root of the app, that way it can
+  // sync workflows even when the workflow component is hidden
+  useDynamicWorkflows()
+
   const [{ isOver, canDrop }, connectFileDrop] = useDrop({
     accept: [NativeTypes.FILE],
     drop: (item: DroppableThing): void => {
@@ -229,7 +235,7 @@ function MainContent() {
           : 'pointer-events-none hidden',
         `fixed top-9 h-[calc(100vh-36px)] w-screen flex-row overflow-hidden`,
         `items-center justify-center`,
-        `bg-stone-950`
+        `bg-neutral-950`
       )}
     >
       <div
@@ -310,11 +316,24 @@ function MainContent() {
   )
 }
 
+function fallbackRender({ error, resetErrorBoundary }: FallbackProps) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  )
+}
+
 export function Main() {
   return (
     <TooltipProvider>
       <DndProvider backend={HTML5Backend}>
-        <MainContent />
+        <ErrorBoundary fallbackRender={fallbackRender}>
+          <MainContent />
+        </ErrorBoundary>
       </DndProvider>
     </TooltipProvider>
   )

src/components/dialogs/iframe-warning/index.tsx

@@ -18,7 +18,7 @@ export function IframeWarning() {
   return (
     <div
       className={cn(
-        `fixed bottom-0 left-0 right-0 top-0 z-[999] m-0 flex h-screen w-screen items-center justify-center overflow-hidden bg-stone-950 p-0 text-center`,
+        `fixed bottom-0 left-0 right-0 top-0 z-[999] m-0 flex h-screen w-screen items-center justify-center overflow-hidden bg-neutral-950 p-0 text-center`,
         showWarning
           ? 'pointer-events-auto opacity-100'
           : 'pointer-events-none opacity-0'
@@ -26,7 +26,7 @@ export function IframeWarning() {
       style={{ backgroundImage: theme.wallpaperBgImage }}
     >
       <p
-        className={cn('font-sans text-stone-100')}
+        className={cn('font-sans text-neutral-100')}
         style={{ textShadow: '#000 1px 0 3px' }}
       >
         <span className="text-[2vw] font-thin">

src/components/dialogs/loader/index.tsx

@@ -27,7 +27,7 @@ export function DeprecatedLoader({
       )}
     >
       <p
-        className={cn('font-sans text-[3vw] font-thin text-stone-100')}
+        className={cn('font-sans text-[3vw] font-thin text-neutral-100')}
         style={{ textShadow: '#000 1px 0 3px' }}
       >
         <span className="">Loading..</span>

src/components/forms/FormSection.tsx

@@ -15,7 +15,7 @@ export function FormSection({
     <div
       className={cn(
         '@container', // so that inputs can use container queries
-        `flex h-full w-full flex-col space-y-2 overflow-y-scroll scrollbar scrollbar-track-stone-300 scrollbar-thumb-stone-700 scrollbar-corner-stone-500`,
+        `flex h-full w-full flex-col space-y-2 overflow-y-scroll scrollbar scrollbar-track-neutral-300 scrollbar-thumb-neutral-700 scrollbar-corner-neutral-500`,
         className
       )}
     >

src/components/mobile/MobileMenu.tsx

@@ -0,0 +1,25 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
+
+export function MobileMenu() {
+  return (
+    <Sheet>
+      <SheetTrigger>Open</SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Clapper</SheetTitle>
+          <SheetDescription>
+            TODO JULIAN: we need a way to display the hierarchical menu on
+            mobile
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}

src/components/monitor/StaticPlayer/index.tsx

@@ -54,7 +54,7 @@ export function StaticPlayer(
   }, [setStaticVideoRef])
 
   const placeholder = (
-    <div className="text-center text-base text-stone-50/90 dark:text-stone-50/90">
+    <div className="text-center text-base text-neutral-50/90 dark:text-neutral-50/90">
       {error ? <span>{error}</span> : <span>No video yet</span>}
     </div>
   )
@@ -85,7 +85,7 @@ export function StaticPlayer(
           // autoPlay
           // muted
           loop
-          className="h-full rounded-lg border border-stone-950 object-cover"
+          className="h-full rounded-lg border border-neutral-950 object-cover"
           style={{}}
         />
       ) : (

src/components/settings/index.tsx

@@ -67,7 +67,7 @@ export function SettingsDialog() {
               <Button
                 key={key}
                 variant="ghost"
-                className="flex w-full flex-col items-end text-right text-lg font-thin capitalize text-stone-300"
+                className="flex w-full flex-col items-end text-right text-lg font-thin capitalize text-neutral-300"
                 onClick={() => setShowSettings(key as SettingsCategory)}
               >
                 {panelLabels[key]}
@@ -76,14 +76,14 @@ export function SettingsDialog() {
           </div>
         </ScrollArea>
 
-        <div className="flex h-full max-w-[calc(100%-150px)] flex-grow select-none flex-col justify-between border-l border-stone-800 pl-8">
+        <div className="flex h-full max-w-[calc(100%-150px)] flex-grow select-none flex-col justify-between border-l border-neutral-800 pl-8">
           <ScrollArea className="flex h-full flex-row">
             {panels[showSettings]}
           </ScrollArea>
           <DialogFooter>
             <Button
               variant="outline"
-              className="text-sm font-light dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400"
+              className="text-sm font-light dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400"
               onClick={() => {
                 setShowSettings(SettingsCategory.NONE)
               }}

src/components/settings/provider.tsx

@@ -17,7 +17,7 @@ function GetItHere({ href, children }: { href: string; children: ReactNode }) {
     <span>
       {children} (
       <a
-        className="text-stone-500 underline hover:text-stone-400"
+        className="text-neutral-500 underline hover:text-neutral-400"
         href={href}
         target="_blank"
       >
@@ -42,6 +42,14 @@ export function SettingsSectionProvider() {
   const comfyUiClientId = useSettings((s) => s.comfyUiClientId)
   const setComfyUiClientId = useSettings((s) => s.setComfyUiClientId)
 
+  const comfyUiHttpAuthLogin = useSettings((s) => s.comfyUiHttpAuthLogin)
+  const setComfyUiHttpAuthLogin = useSettings((s) => s.setComfyUiHttpAuthLogin)
+
+  const comfyUiHttpAuthPassword = useSettings((s) => s.comfyUiHttpAuthPassword)
+  const setComfyUiHttpAuthPassword = useSettings(
+    (s) => s.setComfyUiHttpAuthPassword
+  )
+
   const comfyIcuApiKey = useSettings((s) => s.comfyIcuApiKey)
   const setComfyIcuApiKey = useSettings((s) => s.setComfyIcuApiKey)
 
@@ -89,7 +97,7 @@ export function SettingsSectionProvider() {
   return (
     <div className="flex flex-col justify-between space-y-6">
       <FormSection label="Compute providers">
-        <p className="max-w-80 text-sm italic text-stone-500">
+        <p className="max-w-80 text-sm italic text-neutral-500">
           Note: preferences and credentials are stored inside your browser local
           storage.
           <br />
@@ -135,6 +143,22 @@ export function SettingsSectionProvider() {
           type="text"
         />
 
+        <FormInput
+          label="ComfyUI HTTP Auth login (optional)"
+          value={comfyUiHttpAuthLogin}
+          defaultValue={defaultSettings.comfyUiHttpAuthLogin}
+          onChange={setComfyUiHttpAuthLogin}
+          type="text"
+        />
+
+        <FormInput
+          label="ComfyUI HTTP Auth password (optional)"
+          value={comfyUiHttpAuthPassword}
+          defaultValue={defaultSettings.comfyUiHttpAuthPassword}
+          onChange={setComfyUiHttpAuthPassword}
+          type={apiKeyType}
+        />
+
         <FormInput
           label="Comfy.icu API key"
           value={comfyIcuApiKey}

src/components/tags/colors.ts

@@ -14,7 +14,7 @@ export const tagColorToTailwindClass: Record<TagColor, string> = {
   [TagColor.GRAY]: `bg-gray-800 border-gray-600 text-gray-300`,
   [TagColor.ZINC]: `bg-zinc-800 border-zinc-600 text-zinc-300`,
   [TagColor.NEUTRAL]: `bg-neutral-800 border-neutral-600 text-neutral-300`,
-  [TagColor.STONE]: `bg-stone-800 border-stone-600 text-stone-300`,
+  [TagColor.STONE]: `bg-neutral-800 border-neutral-600 text-neutral-300`,
   [TagColor.RED]: `bg-red-800 border-red-600 text-red-300`,
   [TagColor.ORANGE]: `bg-orange-800 border-orange-600 text-orange-300`,
   [TagColor.AMBER]: `bg-amber-800 border-amber-600 text-amber-300`,

src/components/toolbars/bottom-bar/metrics/index.tsx

@@ -13,8 +13,8 @@ export function Metrics() {
 
   return (
     <div className="flex flex-row space-x-1">
-      <span className="text-stone-500">memory usage:</span>
-      <span className="text-stone-400">
+      <span className="text-neutral-500">memory usage:</span>
+      <span className="text-neutral-400">
         {!bytes ? 'waiting..' : humanReadableString || ''}
       </span>
     </div>

src/components/toolbars/editors-menu/EditorsSideMenuItem.tsx

@@ -63,8 +63,8 @@ export function EditorsSideMenuItem({
             unmanaged || isActive ? '' : `cursor-pointer`,
             `border-l-[2px]`,
             isActive
-              ? 'fill-stone-50/80 text-stone-50 opacity-100 hover:fill-stone-50 hover:text-stone-50'
-              : 'fill-stone-400/80 text-gray-400 opacity-80 hover:fill-stone-200 hover:text-stone-200 hover:opacity-100',
+              ? 'fill-neutral-50/80 text-neutral-50 opacity-100 hover:fill-neutral-50 hover:text-neutral-50'
+              : 'fill-neutral-400/80 text-gray-400 opacity-80 hover:fill-neutral-200 hover:text-neutral-200 hover:opacity-100',
             `group`
           )}
           style={{

src/components/toolbars/system-menu/index.tsx

@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      'border-bottom flex h-9 items-center space-x-1 rounded-md border-stone-800 bg-white p-1 dark:border-stone-800 dark:bg-stone-800',
+      'border-bottom flex h-9 items-center space-x-1 rounded-md border-neutral-800 bg-white p-1 dark:border-neutral-800 dark:bg-neutral-800',
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-light outline-none data-[state=open]:bg-stone-100 data-[state=open]:text-stone-900 focus:bg-stone-100 focus:text-stone-900 dark:data-[state=open]:bg-stone-700 dark:data-[state=open]:text-stone-50 dark:focus:bg-stone-700 dark:focus:text-stone-50',
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-light outline-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 dark:data-[state=open]:bg-neutral-700 dark:data-[state=open]:text-neutral-50 dark:focus:bg-neutral-700 dark:focus:text-neutral-50',
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-stone-100 data-[state=open]:text-stone-900 focus:bg-stone-100 focus:text-stone-900 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-100 dark:focus:bg-stone-700 dark:focus:text-stone-50',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-100 dark:focus:bg-neutral-700 dark:focus:text-neutral-50',
       inset && 'pl-8',
       className
     )}
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border-transparent bg-white p-1 text-stone-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border-transparent bg-white p-1 text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100',
       className
     )}
     {...props}
@@ -97,7 +97,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md border border-stone-200 bg-white p-1 text-stone-950 shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100',
+          'z-50 min-w-[12rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100',
           className
         )}
         {...props}
@@ -116,7 +116,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-stone-100 focus:text-stone-900 dark:focus:bg-stone-700 dark:focus:text-stone-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-neutral-100 focus:text-neutral-900 dark:focus:bg-neutral-700 dark:focus:text-neutral-50',
       inset && 'pl-8',
       className
     )}
@@ -132,7 +132,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-stone-100 focus:text-stone-900 dark:focus:bg-stone-700 dark:focus:text-stone-100',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-neutral-100 focus:text-neutral-900 dark:focus:bg-neutral-700 dark:focus:text-neutral-100',
       className
     )}
     checked={checked}
@@ -155,7 +155,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-stone-100 focus:text-stone-900 dark:focus:bg-stone-700 dark:focus:text-stone-100',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-neutral-100 focus:text-neutral-900 dark:focus:bg-neutral-700 dark:focus:text-neutral-100',
       className
     )}
     {...props}
@@ -194,7 +194,10 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-stone-100 dark:bg-stone-700', className)}
+    className={cn(
+      '-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-700',
+      className
+    )}
     {...props}
   />
 ))
@@ -207,7 +210,7 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        'ml-auto text-xs tracking-widest text-stone-500 dark:text-stone-400',
+        'ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400',
         className
       )}
       {...props}

src/components/toolbars/top-menu/ToggleView/index.tsx

@@ -31,7 +31,7 @@ export function ToggleView({
         >
           <div
             className={cn(
-              `flex transition-all duration-200 ease-in-out group-hover:scale-110 group-hover:border-stone-100`,
+              `flex transition-all duration-200 ease-in-out group-hover:scale-110 group-hover:border-neutral-100`,
               isVisible
                 ? `border-neutral-100 bg-neutral-400`
                 : `border-neutral-400`,

src/components/toolbars/top-menu/index.tsx

@@ -143,7 +143,7 @@ export function TopMenu() {
 
         <Tooltip>
           <TooltipTrigger className="">
-            <div className="ml-2 scale-100 cursor-pointer text-stone-300/70 transition-all duration-200 ease-in-out hover:scale-110 hover:text-stone-100/90">
+            <div className="ml-2 scale-100 cursor-pointer text-neutral-300/70 transition-all duration-200 ease-in-out hover:scale-110 hover:text-neutral-100/90">
               <a href="https://discord.gg/AEruz9B92B" target='"_blank'>
                 <TbBrandDiscord className="h-4 w-4" />
               </a>
@@ -156,7 +156,7 @@ export function TopMenu() {
 
         <Tooltip>
           <TooltipTrigger className="">
-            <div className="scale-100 cursor-pointer text-stone-300/70 transition-all duration-200 ease-in-out hover:scale-110 hover:text-stone-100/90">
+            <div className="scale-100 cursor-pointer text-neutral-300/70 transition-all duration-200 ease-in-out hover:scale-110 hover:text-neutral-100/90">
               <a href="https://github.com/jbilcke-hf/clapper" target='"_blank'>
                 <FaGithubAlt className="h-4 w-4" />
               </a>

src/components/ui/alert.tsx

@@ -4,11 +4,12 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils/cn'
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border border-stone-200 p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-stone-950 dark:border-stone-800 dark:[&>svg]:text-stone-50',
+  'relative w-full rounded-lg border border-neutral-200 p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-neutral-950 dark:border-neutral-800 dark:[&>svg]:text-neutral-50',
   {
     variants: {
       variant: {
-        default: 'bg-white text-stone-950 dark:bg-stone-950 dark:text-stone-50',
+        default:
+          'bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50',
         destructive:
           'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900',
       },

src/components/ui/avatar.tsx

@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-stone-100 dark:bg-stone-800',
+      'flex h-full w-full items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800',
       className
     )}
     {...props}

src/components/ui/badge.tsx

@@ -4,17 +4,17 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils/cn'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border border-stone-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 dark:border-stone-800 dark:focus:ring-stone-800',
+  'inline-flex items-center rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 dark:border-neutral-800 dark:focus:ring-neutral-800',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-stone-900 text-stone-50 hover:bg-stone-900/80 dark:bg-stone-50 dark:text-stone-900 dark:hover:bg-stone-50/80',
+          'border-transparent bg-neutral-900 text-neutral-50 hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/80',
         secondary:
-          'border-transparent bg-stone-100 text-stone-900 hover:bg-stone-100/80 dark:bg-stone-800 dark:text-stone-50 dark:hover:bg-stone-800/80',
+          'border-transparent bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80',
         destructive:
-          'border-transparent bg-red-500 text-stone-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-red-50 dark:hover:bg-red-900/80',
-        outline: 'text-stone-950 dark:text-stone-50',
+          'border-transparent bg-red-500 text-neutral-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-red-50 dark:hover:bg-red-900/80',
+        outline: 'text-neutral-950 dark:text-neutral-50',
       },
     },
     defaultVariants: {

src/components/ui/button.tsx

@@ -5,21 +5,21 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils/cn'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-800',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-800',
   {
     variants: {
       variant: {
         default:
-          'bg-stone-900 text-stone-50 hover:bg-stone-900/90 dark:bg-stone-50 dark:text-stone-900 dark:hover:bg-stone-50/90',
+          'bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90',
         destructive:
-          'bg-red-500 text-stone-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-red-50 dark:hover:bg-red-900/90',
+          'bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-red-50 dark:hover:bg-red-900/90',
         outline:
-          'border border-stone-200 bg-white hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:hover:bg-stone-800 dark:hover:text-stone-50',
+          'border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
         secondary:
-          'bg-stone-100 text-stone-900 hover:bg-stone-100/80 dark:bg-stone-800 dark:text-stone-50 dark:hover:bg-stone-800/80',
+          'bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80',
         ghost:
-          'hover:bg-stone-100 hover:text-stone-900 dark:hover:bg-stone-800 dark:hover:text-stone-50',
-        link: 'text-stone-900 underline-offset-4 hover:underline dark:text-stone-50',
+          'hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
+        link: 'text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50',
       },
       size: {
         default: 'h-10 px-4 py-2',

src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border border-stone-200 bg-white text-stone-950 shadow-sm dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50',
+      'rounded-lg border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-stone-500 dark:text-stone-400', className)}
+    className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}
     {...props}
   />
 ))

src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-stone-200 border-stone-900 ring-offset-white data-[state=checked]:bg-stone-900 data-[state=checked]:text-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-stone-50 dark:border-stone-800 dark:ring-offset-stone-950 dark:data-[state=checked]:bg-stone-50 dark:data-[state=checked]:text-stone-900 dark:focus-visible:ring-stone-800',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-neutral-200 border-neutral-900 ring-offset-white data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900 dark:focus-visible:ring-neutral-800',
       className
     )}
     {...props}

src/components/ui/command.tsx

@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-stone-950 dark:bg-stone-950 dark:text-stone-50',
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50',
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-stone-500 dark:[&_[cmdk-group-heading]]:text-stone-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:[&_[cmdk-group-heading]]:text-neutral-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-stone-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-stone-400',
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400',
         className
       )}
       {...props}
@@ -89,7 +89,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-stone-950 dark:text-stone-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-stone-500 dark:[&_[cmdk-group-heading]]:text-stone-400',
+      'overflow-hidden p-1 text-neutral-950 dark:text-neutral-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:[&_[cmdk-group-heading]]:text-neutral-400',
       className
     )}
     {...props}
@@ -104,7 +104,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 h-px bg-stone-200 dark:bg-stone-800', className)}
+    className={cn('-mx-1 h-px bg-neutral-200 dark:bg-neutral-800', className)}
     {...props}
   />
 ))
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-stone-100 aria-selected:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-stone-800 dark:aria-selected:text-stone-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-neutral-100 aria-selected:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50',
       className
     )}
     {...props}
@@ -133,7 +133,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        'ml-auto text-xs tracking-widest text-stone-500 dark:text-stone-400',
+        'ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400',
         className
       )}
       {...props}

src/components/ui/dialog.tsx

@@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 blur-sm backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-stone-900/50',
+      'fixed inset-0 z-50 blur-sm backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-neutral-900/50',
       className
     )}
     {...props}
@@ -39,13 +39,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-stone-200 bg-white p-6 shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-stone-800 dark:bg-stone-900 sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-900 sm:rounded-lg md:w-full',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity data-[state=open]:bg-stone-100 data-[state=open]:text-stone-500 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-stone-950 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-400 dark:focus:ring-stone-800">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-neutral-950 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400 dark:focus:ring-neutral-800">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -103,7 +103,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-stone-500 dark:text-stone-400', className)}
+    className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}
     {...props}
   />
 ))

src/components/ui/dropdown-menu.tsx

@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-stone-100 focus:bg-stone-100 dark:data-[state=open]:bg-stone-800 dark:focus:bg-stone-800',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-neutral-100 focus:bg-neutral-100 dark:data-[state=open]:bg-neutral-800 dark:focus:bg-neutral-800',
       inset && 'pl-8',
       className
     )}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-stone-200 bg-white p-1 text-stone-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-stone-200 bg-white p-1 text-stone-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-stone-100 focus:text-stone-900 dark:focus:bg-stone-800 dark:focus:text-stone-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-neutral-100 focus:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
       inset && 'pl-8',
       className
     )}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-stone-100 focus:text-stone-900 dark:focus:bg-stone-800 dark:focus:text-stone-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-neutral-100 focus:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
       className
     )}
     checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-stone-100 focus:text-stone-900 dark:focus:bg-stone-800 dark:focus:text-stone-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-neutral-100 focus:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
       className
     )}
     {...props}
@@ -162,7 +162,10 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-stone-100 dark:bg-stone-800', className)}
+    className={cn(
+      '-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800',
+      className
+    )}
     {...props}
   />
 ))

src/components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border border-stone-200 bg-white p-4 text-stone-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50',
+        'z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
         className
       )}
       {...props}

src/components/ui/progress.tsx

@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'relative h-4 w-full overflow-hidden rounded-full bg-stone-100 dark:bg-stone-800',
+      'relative h-4 w-full overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800',
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-stone-900 transition-all dark:bg-stone-50"
+      className="h-full w-full flex-1 bg-neutral-900 transition-all dark:bg-neutral-50"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

src/components/ui/scroll-area.tsx

@@ -40,7 +40,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-stone-200 dark:bg-stone-800" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-neutral-200 dark:bg-neutral-800" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-stone-200 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-stone-800 dark:ring-offset-stone-950 dark:placeholder:text-stone-400 dark:focus:ring-stone-800',
+      'flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-800',
       className
     )}
     {...props}
@@ -40,7 +40,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-stone-200 bg-white text-stone-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50',
+        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
@@ -81,7 +81,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-stone-100 focus:text-stone-900 dark:focus:bg-stone-800 dark:focus:text-stone-50',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-neutral-100 focus:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
       className
     )}
     {...props}
@@ -103,7 +103,10 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-stone-100 dark:bg-stone-800', className)}
+    className={cn(
+      '-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800',
+      className
+    )}
     {...props}
   />
 ))

src/components/ui/separator.tsx

@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'shrink-0 bg-stone-200 dark:bg-stone-800',
+        'shrink-0 bg-neutral-200 dark:bg-neutral-800',
         orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
         className
       )}

src/components/ui/sheet.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-neutral-950',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity data-[state=open]:bg-neutral-100 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-neutral-950 dark:data-[state=open]:bg-neutral-800 dark:focus:ring-neutral-300">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold text-neutral-950 dark:text-neutral-50',
+      className
+    )}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/components/ui/sonner.tsx

@@ -15,13 +15,13 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            'group toast group-[.toaster]:bg-white group-[.toaster]:text-stone-950 group-[.toaster]:border-stone-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-stone-950 dark:group-[.toaster]:text-stone-50 dark:group-[.toaster]:border-stone-800',
+            'group toast group-[.toaster]:bg-white group-[.toaster]:text-neutral-950 group-[.toaster]:border-neutral-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-neutral-950 dark:group-[.toaster]:text-neutral-50 dark:group-[.toaster]:border-neutral-800',
           description:
-            'group-[.toast]:text-stone-500 dark:group-[.toast]:text-stone-400',
+            'group-[.toast]:text-neutral-500 dark:group-[.toast]:text-neutral-400',
           actionButton:
-            'group-[.toast]:bg-stone-900 group-[.toast]:text-stone-50 dark:group-[.toast]:bg-stone-50 dark:group-[.toast]:text-stone-900',
+            'group-[.toast]:bg-neutral-900 group-[.toast]:text-neutral-50 dark:group-[.toast]:bg-neutral-50 dark:group-[.toast]:text-neutral-900',
           cancelButton:
-            'group-[.toast]:bg-stone-100 group-[.toast]:text-stone-500 dark:group-[.toast]:bg-stone-800 dark:group-[.toast]:text-stone-400',
+            'group-[.toast]:bg-neutral-100 group-[.toast]:text-neutral-500 dark:group-[.toast]:bg-neutral-800 dark:group-[.toast]:text-neutral-400',
         },
       }}
       {...props}

src/components/ui/table.tsx

@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'bg-stone-900 font-medium text-stone-50 dark:bg-stone-50 dark:text-stone-900',
+      'bg-neutral-900 font-medium text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900',
       className
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors data-[state=selected]:bg-stone-100 hover:bg-stone-100/50 dark:data-[state=selected]:bg-stone-800 dark:hover:bg-stone-800/50',
+      'border-b transition-colors data-[state=selected]:bg-neutral-100 hover:bg-neutral-100/50 dark:data-[state=selected]:bg-neutral-800 dark:hover:bg-neutral-800/50',
       className
     )}
     {...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-stone-500 dark:text-stone-400 [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0',
       className
     )}
     {...props}
@@ -99,7 +99,10 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn('mt-4 text-sm text-stone-500 dark:text-stone-400', className)}
+    className={cn(
+      'mt-4 text-sm text-neutral-500 dark:text-neutral-400',
+      className
+    )}
     {...props}
   />
 ))

src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-stone-100 p-1 text-stone-500 dark:bg-stone-800 dark:text-stone-400',
+      'inline-flex h-10 items-center justify-center rounded-md bg-neutral-100 p-1 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400',
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all data-[state=active]:bg-white data-[state=active]:text-stone-950 data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:data-[state=active]:bg-stone-950 dark:data-[state=active]:text-stone-50 dark:focus-visible:ring-stone-300',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:data-[state=active]:bg-neutral-950 dark:data-[state=active]:text-neutral-50 dark:focus-visible:ring-neutral-300',
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300',
+      'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300',
       className
     )}
     {...props}

src/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-stone-200 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-stone-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-stone-800 dark:ring-offset-stone-950 dark:placeholder:text-stone-400 dark:focus-visible:ring-stone-800',
+          'flex min-h-[80px] w-full rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-800',
           className
         )}
         ref={ref}

src/components/ui/toast.tsx

@@ -23,14 +23,14 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-stone-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-stone-800',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-neutral-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-neutral-800',
   {
     variants: {
       variant: {
         default:
-          'border bg-white text-stone-950 dark:bg-stone-950 dark:text-stone-50',
+          'border bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50',
         destructive:
-          'destructive group border-red-500 bg-red-500 text-stone-50 dark:border-red-900 dark:bg-red-900 dark:text-stone-50',
+          'destructive group border-red-500 bg-red-500 text-neutral-50 dark:border-red-900 dark:bg-red-900 dark:text-neutral-50',
       },
     },
     defaultVariants: {
@@ -61,7 +61,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-stone-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors group-[.destructive]:border-stone-100/40 hover:bg-stone-100 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-stone-50 focus:outline-none focus:ring-2 focus:ring-stone-950 focus:ring-offset-2 group-[.destructive]:focus:ring-red-500 disabled:pointer-events-none disabled:opacity-50 dark:border-stone-800 dark:ring-offset-stone-950 dark:group-[.destructive]:border-stone-800/40 dark:hover:bg-stone-800 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-stone-50 dark:focus:ring-stone-300 dark:group-[.destructive]:focus:ring-red-900',
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-neutral-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors group-[.destructive]:border-neutral-100/40 hover:bg-neutral-100 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 group-[.destructive]:focus:ring-red-500 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:group-[.destructive]:border-neutral-800/40 dark:hover:bg-neutral-800 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-neutral-50 dark:focus:ring-neutral-300 dark:group-[.destructive]:focus:ring-red-900',
       className
     )}
     {...props}
@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute right-2 top-2 rounded-md p-1 text-stone-950/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-stone-950 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-stone-50/50 dark:hover:text-stone-50',
+      'absolute right-2 top-2 rounded-md p-1 text-neutral-950/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-neutral-950 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-neutral-50/50 dark:hover:text-neutral-50',
       className
     )}
     toast-close=""

src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border border-stone-200 bg-white px-3 py-1.5 text-sm text-stone-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50',
+      'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
       className
     )}
     {...props}

src/components/ui/vertical-slider.tsx

@@ -17,10 +17,10 @@ const VerticalSlider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-full w-2 grow overflow-hidden rounded-full bg-stone-300 dark:bg-stone-700">
-      <SliderPrimitive.Range className="absolute w-full bg-stone-700 dark:bg-stone-50" />
+    <SliderPrimitive.Track className="relative h-full w-2 grow overflow-hidden rounded-full bg-neutral-300 dark:bg-neutral-700">
+      <SliderPrimitive.Range className="absolute w-full bg-neutral-700 dark:bg-neutral-50" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="-ml-1.5 block h-5 w-5 rounded-full border-2 border-stone-700 bg-stone-300 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-stone-50 dark:bg-stone-700 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300" />
+    <SliderPrimitive.Thumb className="-ml-1.5 block h-5 w-5 rounded-full border-2 border-neutral-700 bg-neutral-300 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-700 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300" />
   </SliderPrimitive.Root>
 ))
 VerticalSlider.displayName = 'VerticalSlider'

src/components/wizards/project/index.tsx

@@ -64,7 +64,7 @@ export function ProjectCreationWizard() {
               <Button
                 key={key}
                 variant="ghost"
-                className="flex w-full flex-col items-end text-right text-lg font-thin capitalize text-stone-300"
+                className="flex w-full flex-col items-end text-right text-lg font-thin capitalize text-neutral-300"
                 onClick={() =>
                   setProjectCreationWizardStep(key as ProjectCreationWizardStep)
                 }
@@ -75,14 +75,14 @@ export function ProjectCreationWizard() {
           </div>
         </ScrollArea>
 
-        <div className="flex h-full max-w-[calc(100%-150px)] flex-grow select-none flex-col justify-between border-l border-stone-800 pl-8">
+        <div className="flex h-full max-w-[calc(100%-150px)] flex-grow select-none flex-col justify-between border-l border-neutral-800 pl-8">
           <ScrollArea className="flex h-full flex-row">
             {stepPanels[projectCreationWizardStep]}
           </ScrollArea>
           <DialogFooter>
             <Button
               variant="outline"
-              className="text-sm font-light dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400"
+              className="text-sm font-light dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400"
               onClick={() => {
                 setProjectCreationWizardStep(ProjectCreationWizardStep.NONE)
               }}

src/experiments/moodboard/MoodboardView.tsx

@@ -58,7 +58,7 @@ export function MoodboardView() {
 
   const onConnect: OnConnect = useCallback(
     (params) => setEdges((eds) => addEdge(params, eds)),
-    []
+    [setEdges]
   )
 
   return (

src/experiments/moodboard/Node.tsx

@@ -11,7 +11,7 @@ function NodeComponent({
   }
 }) {
   return (
-    <div className="rounded-md border-2 border-stone-400 bg-white px-4 py-2 shadow-md">
+    <div className="rounded-md border-2 border-neutral-400 bg-white px-4 py-2 shadow-md">
       <div className="flex">
         <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
           {data.emoji}

src/lib/core/constants.ts

@@ -3,7 +3,7 @@
 export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32
 
 export const APP_NAME = 'Clapper.app'
-export const APP_REVISION = '20240812+1800'
+export const APP_REVISION = '20240814+1439'
 
 export const APP_DOMAIN = 'Clapper.app'
 export const APP_LINK = 'https://clapper.app'

src/services/debug.ts

@@ -11,6 +11,7 @@ import {
   useProjectEditor,
   useScriptEditor,
   useSegmentEditor,
+  useWorkflowEditor,
 } from './editors'
 import { useIO } from './io/useIO'
 import { useMetrics } from './metrics/useMetrics'
@@ -24,6 +25,7 @@ import { useWindows } from './windows/useWindows'
 
 // those are just used for developer convenience
 // to help debug things in the chrome developer console
+
 if (typeof window !== 'undefined') {
   const w = window as any
   w.useTasks = useTasks
@@ -31,13 +33,18 @@ if (typeof window !== 'undefined') {
   w.useMic = useMic
   w.useAudio = useAudio
   w.useBroadcast = useBroadcast
-  w.useEditors = useEditors
+
+  // I think we have a cyclic dependency somewhere,
+  // because uncommenting the following lines will crash the app
+  // w.useEditors = useEditors
+  // w.useWorkflowEditor = useWorkflowEditor
+  // w.useIO = useIO
+
   w.useEntityEditor = useEntityEditor
   w.useFilterEditor = useFilterEditor
   w.useProjectEditor = useProjectEditor
   w.useScriptEditor = useScriptEditor
   w.useSegmentEditor = useSegmentEditor
-  w.useIO = useIO
   w.useMetrics = useMetrics
   w.useMonitor = useMonitor
   w.useRenderer = useRenderer

src/services/editors/script-editor/useScriptEditor.ts

@@ -18,7 +18,7 @@ import {
 } from '@aitube/clapper-services'
 
 import { getDefaultScriptEditorState } from './getDefaultScriptEditorState'
-import { useAssistant } from '@/services/assistant/useAssistant'
+// import { useAssistant } from '@/services/assistant/useAssistant'
 
 export const useScriptEditor = create<ScriptEditorStore>((set, get) => ({
   ...getDefaultScriptEditorState(),
@@ -85,7 +85,8 @@ export const useScriptEditor = create<ScriptEditorStore>((set, get) => ({
     // console.log('existingText:', existingText)
     // console.log('newTextAddition:', newTextAddition)
 
-    const assistant = useAssistant.getState()
+    // attention here! the assistant might not be initialized
+    // const assistant = useAssistant.getState()
 
     // call the LLM, with a prompt like:
   },