adding some menus

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@aitube/clap": "0.0.24",
         "@aitube/engine": "0.0.15",
-        "@aitube/timeline": "0.0.7",
+        "@aitube/timeline": "0.0.8",
         "@huggingface/hub": "^0.15.0",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.4",
@@ -22,6 +22,7 @@
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-menubar": "^1.0.4",
         "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slider": "^1.1.2",
@@ -59,6 +60,7 @@
         "react-dom": "^18.3.1",
         "react-drag-drop-files": "^2.3.10",
         "react-hook-consent": "^3.5.3",
+        "react-hotkeys-hook": "^4.5.0",
         "react-icons": "^5.2.1",
         "react-reflex": "^4.2.6",
         "replicate": "^0.30.1",
@@ -97,9 +99,9 @@
       }
     },
     "node_modules/@aitube/timeline": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.7.tgz",
-      "integrity": "sha512-eQbp2fcrazuW6prKfGAfcEVNvHgO+ZVgh5aHJXSQfCDty8dLw54MlvbsZw9RXntxMjGu3OzqgC6PCSAZldebFQ==",
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@aitube/timeline/-/timeline-0.0.8.tgz",
+      "integrity": "sha512-+Eqhdr2tGCU46r9mJ+H/so+QB6BObqerI5j3oG2iSaMSalFIgP1K8zuigMhN/FzKkESF3ORY77ciZnZupcmBDA==",
       "dependencies": {
         "date-fns": "^3.6.0",
         "react-virtualized-auto-sizer": "^1.0.24"
@@ -610,9 +612,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
-      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
+      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -2130,6 +2132,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz",
+      "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
@@ -2715,9 +2748,9 @@
       }
     },
     "node_modules/@react-three/fiber": {
-      "version": "8.16.7",
-      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.16.7.tgz",
-      "integrity": "sha512-D9z/HmTupS/Z3YqBK+rxPgm3Ou7VvOB8J57+AW7JG2FmhCY4u65Gd6r8i8y61BR/paCk0DCPyyJ5w7FiUEHXgA==",
+      "version": "8.16.8",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.16.8.tgz",
+      "integrity": "sha512-Lc8fjATtvQEfSd8d5iKdbpHtRm/aPMeFj7jQvp6TNHfpo8IQTW3wwcE1ZMrGGoUH+w2mnyS+0MK1NLPLnuzGkQ==",
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.26.7",
@@ -4436,9 +4469,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.788",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.788.tgz",
-      "integrity": "sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA=="
+      "version": "1.4.789",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.789.tgz",
+      "integrity": "sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -7349,6 +7382,15 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-hotkeys-hook": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz",
+      "integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==",
+      "peerDependencies": {
+        "react": ">=16.8.1",
+        "react-dom": ">=16.8.1"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@aitube/clap": "0.0.24",
     "@aitube/engine": "0.0.15",
-    "@aitube/timeline": "0.0.7",
+    "@aitube/timeline": "0.0.8",
     "@huggingface/hub": "^0.15.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -24,6 +24,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
@@ -61,6 +62,7 @@
     "react-dom": "^18.3.1",
     "react-drag-drop-files": "^2.3.10",
     "react-hook-consent": "^3.5.3",
+    "react-hotkeys-hook": "^4.5.0",
     "react-icons": "^5.2.1",
     "react-reflex": "^4.2.6",
     "replicate": "^0.30.1",

src/app/DEPRECATED_main.txt

@@ -0,0 +1,143 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+import { FileUploader } from "react-drag-drop-files"
+import {
+  ReflexContainer,
+  ReflexSplitter,
+  ReflexElement
+} from 'react-reflex'
+import { parseClap } from "@aitube/clap"
+import { ClapTimeline, useTimelineState } from "@aitube/timeline"
+
+import { Toaster } from "@/components/ui/sonner"
+import { cn } from "@/lib/utils"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { useQueryStringParams } from "@/lib/hooks/useQueryStringParams"
+import { StaticVideo } from "@/components/interface/static-video"
+import { RenderClap } from "@/components/interface/render-clap"
+import { Timeline } from "@/components/interface/timeline"
+import { TopBar } from "@/components/interface/top-bar"
+
+export function Main() {
+  const { clapUrl } = useQueryStringParams({
+    // clapUrl: `/samples/test.clap`,
+    // clapUrl: `/samples/Afterglow%20v10%20X%20Rewrite%20Bryan%20E.%20Harris%202023.clap`,
+    clapUrl: '',
+  })
+
+  const [isImporting, setIsImporting] = useState(false)
+  const clap = useTimelineState(s => s.clap)
+  const setClap = useTimelineState(s => s.setClap)
+  const isLoading = useTimelineState(s => s.isLoading)
+  const isEmpty = useTimelineState(s => s.isEmpty)
+
+  const isBusy = isLoading || isImporting
+
+  const handleChange = async (file: File) => {
+    if (file.name.endsWith("clap")) {
+      setIsImporting(true)
+      try {
+        const clap = await parseClap(file)
+        await setClap(clap)
+        setTimeout(() => {
+          setIsImporting(false)
+        }, 500)
+      } catch (err) {
+        console.error(err)
+        setIsImporting(false)
+      }
+    } else {
+      setIsImporting(true)
+      try {
+        const res = await fetch("https://jbilcke-hf-broadway-api.hf.space", {
+          method: "POST",
+          headers: { 'Content-Type': 'text/plain' },
+          body: await file.text(),
+        })
+        const blob = await res.blob()
+        const clap = await parseClap(blob)
+        await setClap(clap)
+        setTimeout(() => {
+          setIsImporting(false)
+        }, 1000)
+      } catch (err) {
+        console.error(err)
+        setIsImporting(false)
+      }
+    }
+  };
+  
+  useEffect(() => {
+    (async () => {
+      if (!clapUrl) {
+        console.log("No clap URL provided")
+        return
+      }
+      setIsImporting(true)
+      const res = await fetch(clapUrl)
+      const blob = await res.blob()
+      const clap = await parseClap(blob)
+      await setClap(clap)
+      setTimeout(() => {
+        setIsImporting(false)
+      }, 1000)
+    })()
+  }, [clapUrl])
+
+  return (
+    <TooltipProvider>
+      <div className={cn(`
+        fixed
+        flex flex-col
+        w-screen h-screen
+        overflow-hidden
+        items-center justify-center
+        bg-[rgb(58,54,50)]
+        `
+      )}
+        >
+        <TopBar />
+        <div className="flex flex-row flex-grow w-full overflow-hidden">
+        {clap
+        ? 
+        <ReflexContainer orientation="horizontal">
+          <ReflexElement>
+            <RenderClap />
+          </ReflexElement>
+          <ReflexSplitter />
+          <ReflexElement className={isLoading ? 'opacity-0' :  'opacity-100'}>
+            <Timeline />
+          </ReflexElement>
+        </ReflexContainer>
+        :
+          <FileUploader
+            handleChange={handleChange}
+            name="file" types={["txt", "clap"]}>
+          <div className={cn(`
+          flex
+        w-screen h-screen
+        overflow-hidden
+        items-center justify-center
+        cursor-pointer
+        `, isBusy ? 'animate-pulse' : '')}
+        style={{
+          backgroundImage: "repeating-radial-gradient( circle at 0 0, transparent 0, #000000 7px ), repeating-linear-gradient( #34353655, #343536 )"
+        }}><p
+        className="text-stone-100 font-sans font-thin text-[3vw]"
+        style={{ textShadow: "#000 1px 0 3px" }}
+        >
+          {isBusy ? 'Loading..' : 
+          <span className="flex flex-center justify-center text-center w-full">
+            Click to import a screenplay (.txt)<br/>
+          or an OpenClap file (.clap)</span>}
+          </p>
+          </div>
+          </FileUploader>
+        }
+        <Toaster />
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}

src/app/layout.tsx

@@ -1,7 +1,8 @@
 import { cn } from '@/lib/utils'
-import './globals.css'
-import "./react-reflex.css"
-import "./react-reflex-custom.css"
+
+import './styles/globals.css'
+import "./styles/react-reflex.css"
+import "./styles/react-reflex-custom.css"
 
 import type { Metadata } from 'next'
 import { inter } from './fonts'
@@ -22,7 +23,10 @@ export default function RootLayout({
         `h-full w-full overflow-none dark`,
        inter.className
         )}
-        style={{ overscrollBehaviorX: "none" }}>
+        style={{
+          overscrollBehaviorX: "none",
+          backgroundImage: "repeating-radial-gradient( circle at 0 0, transparent 0, #000000 7px ), repeating-linear-gradient( #34353655, #343536 )"
+        }}>
         {children}
       </body>
     </html>

src/app/main.tsx

@@ -1,138 +1,52 @@
 "use client"
 
 import React, { useEffect, useState } from "react"
-import { FileUploader } from "react-drag-drop-files"
 import {
   ReflexContainer,
   ReflexSplitter,
   ReflexElement
 } from 'react-reflex'
-import { parseClap } from "@aitube/clap"
-import { ClapTimeline, useTimelineState } from "@aitube/timeline"
 
 import { Toaster } from "@/components/ui/sonner"
 import { cn } from "@/lib/utils"
 import { TooltipProvider } from "@/components/ui/tooltip"
-import { useQueryStringParams } from "@/lib/hooks/useQueryStringParams"
-import { StaticVideo } from "@/components/interface/static-video"
 import { RenderClap } from "@/components/interface/render-clap"
 import { Timeline } from "@/components/interface/timeline"
+import { TopBar } from "@/components/interface/top-bar"
+import { useTimelineState } from "@aitube/timeline"
 
 export function Main() {
-  const { clapUrl } = useQueryStringParams({
-    // clapUrl: `/samples/test.clap`,
-    // clapUrl: `/samples/Afterglow%20v10%20X%20Rewrite%20Bryan%20E.%20Harris%202023.clap`,
-    clapUrl: '',
-  })
-
-  const [isImporting, setIsImporting] = useState(false)
-  const clap = useTimelineState(s => s.clap)
-  const setClap = useTimelineState(s => s.setClap)
-  const isLoading = useTimelineState(s => s.isLoading)
   const isEmpty = useTimelineState(s => s.isEmpty)
-
-  const isBusy = isLoading || isImporting
-
-  const handleChange = async (file: File) => {
-    if (file.name.endsWith("clap")) {
-      setIsImporting(true)
-      try {
-        const clap = await parseClap(file)
-        setClap(clap)
-        setTimeout(() => {
-          setIsImporting(false)
-        }, 500)
-      } catch (err) {
-        console.error(err)
-        setIsImporting(false)
-      }
-    } else {
-      setIsImporting(true)
-      try {
-        const res = await fetch("https://jbilcke-hf-broadway-api.hf.space", {
-          method: "POST",
-          headers: { 'Content-Type': 'text/plain' },
-          body: await file.text(),
-        })
-        const blob = await res.blob()
-        const clap = await parseClap(blob)
-        setClap(clap)
-        setTimeout(() => {
-          setIsImporting(false)
-        }, 1000)
-      } catch (err) {
-        console.error(err)
-        setIsImporting(false)
-      }
-    }
-  };
-  
-  useEffect(() => {
-    (async () => {
-      if (!clapUrl) {
-        console.log("No clap URL provided")
-        return
-      }
-      setIsImporting(true)
-      const res = await fetch(clapUrl)
-      const blob = await res.blob()
-      const clap = await parseClap(blob)
-      setClap(clap)
-      setTimeout(() => {
-        setIsImporting(false)
-      }, 1000)
-    })()
-  }, [clapUrl])
-
   return (
     <TooltipProvider>
       <div className={cn(`
         fixed
-        flex
-        w-screen h-screen
-        overflow-hidden
-        items-center justify-center
-        bg-[rgb(58,54,50)]
-        `
-      )}
-        >
-        {clap
-        ? 
-        <ReflexContainer orientation="horizontal">
-          <ReflexElement>
-            <RenderClap />
-          </ReflexElement>
-          <ReflexSplitter />
-          <ReflexElement className={isLoading ? 'opacity-0' :  'opacity-100'}>
-            <Timeline />
-          </ReflexElement>
-        </ReflexContainer>
-        :
-          <FileUploader
-            handleChange={handleChange}
-            name="file" types={["txt", "clap"]}>
-          <div className={cn(`
-          flex
+        flex flex-col
         w-screen h-screen
         overflow-hidden
         items-center justify-center
-        cursor-pointer
-        `, isBusy ? 'animate-pulse' : '')}
+        text-stone-900/90 dark:text-stone-100/90
+        `)}
         style={{
           backgroundImage: "repeating-radial-gradient( circle at 0 0, transparent 0, #000000 7px ), repeating-linear-gradient( #34353655, #343536 )"
-        }}><p
-        className="text-stone-100 font-sans font-thin text-[3vw]"
-        style={{ textShadow: "#000 1px 0 3px" }}
+        }}
         >
-          {isBusy ? 'Loading..' : 
-          <span className="flex flex-center justify-center text-center w-full">
-            Click to import a screenplay (.txt)<br/>
-          or an OpenClap file (.clap)</span>}
-          </p>
-          </div>
-          </FileUploader>
-        }
-        <Toaster />
+        <TopBar />
+        <div className={cn(
+          `flex flex-row flex-grow w-full overflow-hidden`, 
+          isEmpty ? "opacity-0" : "opacity-100"
+         )}>
+          <ReflexContainer orientation="horizontal">
+            <ReflexElement>
+              <RenderClap />
+            </ReflexElement>
+            <ReflexSplitter />
+            <ReflexElement>
+              <Timeline />
+            </ReflexElement>
+          </ReflexContainer>
+          <Toaster />
+        </div>
       </div>
     </TooltipProvider>
   );

src/app/page.tsx

@@ -27,11 +27,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 })(window,document,'script','dataLayer','GTM-K98T8ZFZ');`}</Script>
       <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K98T8ZFZ"
 height="0" width="0" style={{ display: "none", visibility: "hidden" }}></iframe></noscript>
-      <main className={cn(
-        ``,
-        `text-stone-900/90 dark:text-stone-100/90`,
-        `bg-stone-500`,
-        )}>
+      <main>
         {isLoaded && <Main />}
       </main>
     </>

src/app/{react-reflex-custom.css → styles/react-reflex-custom.css}

@@ -10,29 +10,29 @@ with some custom colors and sizes
 
 @layer components {
   body .reflex-container > .reflex-splitter {
-    @apply transition-all duration-200 ease-in-out bg-gray-700;
+    @apply transition-all duration-200 ease-in-out bg-stone-800;
   }
 
   body .reflex-container > .reflex-splitter.active,
   body .reflex-container > .reflex-splitter:hover {
-    @apply transition-all duration-200 ease-in-out bg-gray-400;
+    @apply transition-all duration-200 ease-in-out bg-stone-400;
   }
 
   body .horizontal > .reflex-splitter {
-    @apply h-[2px] bg-gray-700 border-t-gray-700 border-b-gray-700;
+    @apply h-[2px] bg-stone-800 border-t-stone-900 border-b-stone-800;
   }
 
   body .reflex-container.horizontal > .reflex-splitter:hover,
   body .reflex-container.horizontal > .reflex-splitter.active {
-    @apply bg-gray-400 border-t-gray-400 border-b-gray-400;
+    @apply  h-[2px] bg-stone-400 border-t-stone-400 border-b-stone-800;
   }
 
   body .reflex-container.vertical > .reflex-splitter {
-    @apply w-[2px] bg-gray-700 border-l-gray-700 border-r-gray-700;
+    @apply w-[2px] bg-stone-800 border-l-stone-800 border-r-stone-800;
   }
 
   body .reflex-container.vertical > .reflex-splitter:hover,
   body .reflex-container.vertical > .reflex-splitter.active {
-    @apply bg-gray-400 border-l-gray-400 border-r-gray-400;
+    @apply  w-[2px] bg-stone-400 border-l-stone-400 border-r-stone-400;
   }
 }

src/components/form/form-dir.tsx

@@ -0,0 +1,58 @@
+import { ChangeEvent, useMemo } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { Input } from "../ui/input"
+
+import { FormField } from "./form-field"
+
+export function FormDir({
+  label,
+  className,
+  placeholder,
+  disabled,
+  onChange,
+  horizontal,
+  accept,
+ }: {
+  label?: string
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+  onChange?: (files: File[]) => void
+  horizontal?: boolean
+  accept?: string
+  }) {
+
+  const handleChange = useMemo(() => (event: ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return
+    }
+    if (!onChange) {
+      return
+    }
+
+    const files = Array.from(event.currentTarget.files || [])
+    onChange(files)
+  }, [])
+
+  return (
+    <FormField
+      label={
+      `${label}:`
+      }
+      horizontal={horizontal}
+       >
+      <Input
+        placeholder={`${placeholder || ""}`}
+        className={cn(`w-full md:w-52 lg:w-56 xl:w-64 font-normal text-base`, className)}
+        disabled={disabled}
+        onChange={handleChange}
+        type="file"
+        {...{directory: ""} as any} // saw it in stack overflow, but the type isn't recognized here.. hmm
+        webkitdirectory=""
+        accept={accept}
+      />
+    </FormField>
+  )
+}

src/components/form/form-field.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { FormLabel } from "./form-label"
+
+export function FormField({ label, children, className, horizontal = false }: {
+  label?: string
+  children?: ReactNode
+  className?: string
+  horizontal?: boolean
+}) {
+  return (
+    <div className={cn(
+      `flex flex-col space-y-3`,
+      `text-base font-thin text-gray-400`,
+      horizontal ? '' : 'w-full',
+      )}>
+      {label && <FormLabel>{label}</FormLabel>}
+      <div className={cn(
+        `flex`,
+        horizontal ? '' : 'w-full',
+        className
+        )}>
+        {children}
+      </div>
+    </div>
+  )
+}

src/components/form/form-file.tsx

@@ -0,0 +1,58 @@
+import { ChangeEvent, useMemo, useRef } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { Input } from "../ui/input"
+
+import { FormField } from "./form-field"
+
+export function FormFile({
+  label,
+  className,
+  placeholder,
+  disabled,
+  onChange,
+  horizontal,
+  accept
+ }: {
+  label?: string
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+  onChange?: (files: File[]) => void
+  horizontal?: boolean
+  accept?: string
+  }) {
+  const ref = useRef<HTMLInputElement>(null)
+
+  const handleChange = useMemo(() => (event: ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return
+    }
+    if (!onChange) {
+      return
+    }
+
+    const files = Array.from(event.currentTarget.files || [])
+    onChange(files)
+  }, [])
+
+  return (
+    <FormField
+      label={
+      `${label}:`
+      }
+      horizontal={horizontal}
+       >
+      <Input
+        ref={ref}
+        placeholder={`${placeholder || ""}`}
+        className={cn(`w-full md:w-52 lg:w-56 xl:w-64 font-normal text-base`, className)}
+        disabled={disabled}
+        onChange={handleChange}
+        type="file"
+        accept={accept}
+      />
+    </FormField>
+  )
+}

src/components/form/form-input.tsx

@@ -0,0 +1,108 @@
+import { ChangeEvent, HTMLInputTypeAttribute, useMemo, useRef } from "react"
+
+import { cn, getValidNumber, isValidNumber } from "@/lib/utils"
+
+import { Input } from "../ui/input"
+
+import { FormField } from "./form-field"
+
+export function FormInput<T>({
+  label,
+  className,
+  placeholder,
+  value,
+  minValue,
+  maxValue,
+  defaultValue,
+  disabled,
+  onChange,
+  horizontal,
+  type,
+  // ...props
+ }: {
+  label?: string
+  className?: string
+  placeholder?: string
+  value?: T
+  minValue?: T
+  maxValue?: T
+  defaultValue?: T
+  disabled?: boolean
+  onChange?: (newValue: T) => void
+  horizontal?: boolean
+  type?: HTMLInputTypeAttribute
+ }
+ //  & Omit<ComponentProps<typeof Input>, "value" | "defaultValue" | "placeholder" | "type" | "className" | "disabled" | "onChange">
+ // & ComponentProps<typeof Input>
+ ) {
+
+  const isNumberInput =
+    typeof defaultValue === "number"
+    || typeof value === "number" 
+
+  const isTextInput =
+    typeof defaultValue === "string"
+    || typeof value === "number"
+
+  // we try to use the type provided by the user if possible,
+  // otherwise we "guess" it
+  const inputType: HTMLInputTypeAttribute = type ||
+  (
+    isNumberInput ? "number" 
+    : isTextInput ? "text"
+    : "text"
+  )
+
+  const ref = useRef<HTMLInputElement>(null)
+
+  const handleChange = useMemo(() => (event: ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return
+    }
+    if (!onChange) {
+      return
+    }
+
+    const rawStringValue = `${event.currentTarget.value || ""}`
+
+    // this could be refactorer maybe
+    if (isNumberInput) {
+      const validMinValue: number = minValue && isValidNumber(minValue) ? (minValue as number) : 0
+      const validMaxValue: number = maxValue && isValidNumber(maxValue) ? (maxValue as number) : 1
+      const validDefaultValue: number = defaultValue && isValidNumber(defaultValue) ? (defaultValue as number) : 0
+      
+      const numericValue = getValidNumber(
+        rawStringValue,
+        validMinValue,
+        validMaxValue,
+        validDefaultValue,
+      ) 
+      onChange(numericValue as T)
+    } else {
+      onChange(rawStringValue as T)
+    }
+  }, [isNumberInput, isTextInput, minValue, maxValue, defaultValue])
+
+  return (
+    <FormField
+      label={
+      `${label}:`
+      }
+      horizontal={horizontal}
+       >
+      <Input
+        ref={ref}
+        placeholder={`${placeholder || defaultValue || ""}`}
+        className={cn(`w-full md:w-52 lg:w-56 xl:w-64 font-normal text-base`, className)}
+        disabled={disabled}
+        onChange={handleChange}
+        // {...props}
+        type={inputType}
+        value={`${value || defaultValue}`}
+
+        // since we are controlling the element with value=*, we should not use defaultValue=*
+        // defaultValue={`${defaultValue || ""}`}
+      />
+    </FormField>
+  )
+}

src/components/form/form-label.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function FormLabel({ children, className }: {
+  children?: ReactNode
+  className?: string
+}) {
+  return (
+    <label className={cn(`text-sm font-normal text-gray-300/70`, className)}>{
+      children
+    }</label>
+  )
+}

src/components/form/form-radio.tsx

@@ -0,0 +1,36 @@
+import { MdOutlineCheckCircle, MdRadioButtonUnchecked } from "react-icons/md"
+
+import { cn } from "@/lib/utils"
+
+import { FormField } from "./form-field"
+
+export function FormRadio({ label, className, selected, items, horizontal }: {
+  label?: string
+  className?: string
+  selected?: string
+  items?: { name: string; label: string; disabled?: boolean }[]
+  horizontal?: boolean
+}) {
+  return (
+    <FormField
+      label={label}
+      className={cn(`flex-row space-x-5`, className)}
+      horizontal={horizontal}>
+      {items?.map(item => (
+        <div key={item.name} className={cn(
+          `flex flex-row items-center space-x-2`,
+          selected === item.name
+            ? `text-gray-200 font-normal`
+            : (
+              item.disabled ? `text-gray-600 font-normal` :  `text-gray-400 font-normal`
+            )
+        )}>
+          {selected === item.name
+            ? <MdOutlineCheckCircle className="text-lg" />
+            : <MdRadioButtonUnchecked className="text-lg" />}
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </FormField>
+  )
+}

src/components/form/form-section.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function FormSection({ label, children, className, horizontal }: {
+  label?: string
+  children?: ReactNode
+  className?: string
+  horizontal?: boolean
+}) {
+  return (
+    <div className={cn(`flex flex-col space-y-4`)}>
+      <h2 className="text-2xl font-thin pb-2 text-gray-200">{label}</h2>
+      <div className={cn(
+        "flex",
+        horizontal
+        ? "flex-row space-x-3 justify-start"
+        : "flex-col space-y-6"
+        )}>
+        {children}
+      </div>
+    </div>
+  )
+}

src/components/form/form-select.tsx

@@ -0,0 +1,67 @@
+
+import { cn } from "@/lib/utils"
+
+import { FormField } from "./form-field"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+
+export function FormSelect<T>({
+  label,
+  className,
+  selectedItemId,
+  selectedItemLabel,
+  defaultItemId,
+  defaultItemLabel,
+  items = [],
+  onSelect,
+  horizontal,
+}: {
+  label?: string
+  className?: string
+  selectedItemId?: string
+  selectedItemLabel?: string
+  defaultItemId?: string
+  defaultItemLabel?: string
+  items?: {
+    id: string
+    label: string
+    disabled?: boolean
+    value: T
+   }[]
+  onSelect?: (value?: T) => void
+  horizontal?: boolean
+}) {
+  
+  return (
+    <FormField
+      label={
+        typeof defaultItemId !== "undefined" && typeof defaultItemLabel !== "undefined"
+          ? `${label} (defaults to ${defaultItemLabel || "N.A."}):`
+        : `${label}:`
+      }
+      className={cn(``, className)}
+      horizontal={horizontal}>
+      <Select
+        onValueChange={(newSelectedItemId: string) => {
+          if (!onSelect) {
+            return
+          }
+          const selectedItem = items.find(item => item.id === newSelectedItemId)
+          onSelect(selectedItem?.value)
+        }}
+        defaultValue={selectedItemId}>
+        <SelectTrigger className="w-full md:w-52 lg:w-56 xl:w-64 font-normal text-base">
+          <SelectValue placeholder={selectedItemLabel} />
+        </SelectTrigger>
+        <SelectContent>
+          {items?.map(item =>
+            <SelectItem
+            key={item.id}
+            value={item.id}>{
+            item.label
+            }</SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </FormField>
+  )
+}

src/components/interface/loader/index.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils"
+
+export function Loader({
+  isLoading = false,
+  className = ""
+}: {
+  isLoading?: boolean
+  className?: string
+}) {
+  // TODO: read our global state
+
+  return (
+    <div className={cn(`
+      fixed
+      z-50
+      flex
+      w-screen h-screen
+      top-0 left-0 right-0 bottom-0
+      p-0 m-0
+      overflow-hidden
+      items-center justify-center
+
+      backdrop-blur-lg
+      `,
+      isLoading
+      ? 'opacity-100 pointer-events-auto'
+      : 'pointer-events-none opacity-0',
+      className)}
+      style={{
+       // backgroundImage: "repeating-radial-gradient( circle at 0 0, transparent 0, #000000 7px ), repeating-linear-gradient( #34353655, #343536 )"
+      }}>
+      <p
+        className={cn("text-stone-100 font-sans font-thin text-[3vw]")}
+        style={{ textShadow: "#000 1px 0 3px" }}>
+        <span className="">Loading..</span>
+      </p>
+    </div>
+  )
+}

src/components/interface/static-video/index.tsx

@@ -3,7 +3,7 @@
 import React, { ReactNode, useEffect, useRef } from "react"
 
 import { useTimelineState } from "@aitube/timeline"
-import useRequestAnimationFrame from "@/lib/hooks/useRequestAnimationFrame"
+import { useRequestAnimationFrame } from "@/lib/hooks/useRequestAnimationFrame"
 
 export function StaticVideo({
   video = "",

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

@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border-bottom border-gray-800 bg-white p-1 dark:border-gray-800 dark:bg-stone-800",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-normal outline-none focus:bg-stone-100 focus:text-gray-900 data-[state=open]:bg-stone-100 data-[state=open]:text-gray-900 dark:focus:bg-stone-700 dark:focus:text-gray-50 dark:data-[state=open]:bg-stone-700 dark:data-[state=open]:text-gray-50",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-stone-100 focus:text-gray-900 data-[state=open]:bg-stone-100 data-[state=open]:text-gray-900 dark:focus:bg-stone-700 dark:focus:text-gray-50 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-gray-100",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border-transparent bg-white p-1 text-gray-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-gray-700 dark:bg-stone-800 dark:text-gray-100",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border border-gray-200 bg-white p-1 text-gray-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-gray-700 dark:bg-stone-800 dark:text-gray-100",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <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 focus:bg-stone-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-700 dark:focus:text-gray-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <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 focus:bg-stone-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-700 dark:focus:text-gray-100",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <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 focus:bg-stone-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-700 dark:focus:text-gray-100",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-stone-100 dark:bg-stone-700", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}

src/components/interface/timeline/index.tsx

@@ -7,7 +7,7 @@ export function Timeline() {
     <ClapTimeline
       showFPS={false}
       className={cn(
-
+        "bg-[rgb(58,54,50)]"
       )}
     />
   )

src/components/interface/top-bar/index.tsx

@@ -0,0 +1,30 @@
+import { ClapProject } from "@aitube/clap"
+import { useTimelineState } from "@aitube/timeline"
+
+import { cn } from "@/lib/utils"
+
+import { TopMenu } from "../top-menu"
+
+
+export function TopBar() {
+  const clap: ClapProject = useTimelineState(s => s.clap)
+
+  return (
+    <div className={cn(
+      `flex flex-row`,
+      `w-full h-10`,
+      `bg-stone-900 items-center`,
+      `border-b`,
+      `border-b-stone-700`,
+    )}>
+      <TopMenu />
+      <div className={cn(
+        `flex flex-row flex-grow`,
+        `items-center justify-center`,
+        `text-xs text-stone-300`
+      )}>
+        {clap?.meta?.title || "Untitled"}
+      </div>
+    </div>
+  )
+}

src/components/interface/top-menu/file/index.tsx

@@ -0,0 +1,72 @@
+"use client"
+import { useEffect } from "react"
+import { useTimelineState } from "@aitube/timeline"
+import { useHotkeys } from "react-hotkeys-hook"
+import { parseClap } from "@aitube/clap"
+
+import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from "@/components/ui/menubar"
+import { useClapFilePicker, useQueryStringParams, useScreenplayFilePicker } from "@/lib/hooks"
+import { Loader } from "../../loader"
+
+export function TopMenuFile() {
+  const { clapUrl } = useQueryStringParams({
+    // clapUrl: `/samples/test.clap`,
+    // clapUrl: `/samples/Afterglow%20v10%20X%20Rewrite%20Bryan%20E.%20Harris%202023.clap`,
+    clapUrl: '',
+  })
+
+  const isTimelineLoading: boolean = useTimelineState(s => s.isLoading)
+  const setClap = useTimelineState(s => s.setClap)
+  const saveClapAs = useTimelineState(s => s.saveClapAs)
+
+  const clapPicker = useClapFilePicker()
+  const screenplayPicker = useScreenplayFilePicker()
+
+  const isLoading = isTimelineLoading || clapPicker.isLoading || screenplayPicker.isLoading
+
+  // const setShowSettings = useInterfaceSettings(s => s.setShowSettings)
+  useHotkeys('ctrl+o', () => clapPicker.openFilePicker(), { preventDefault: true }, [])
+  useHotkeys('meta+o', () => clapPicker.openFilePicker(), { preventDefault: true }, [])
+  useHotkeys('ctrl+s', () => saveClapAs({ embedded: true }), { preventDefault: true }, [])
+  useHotkeys('meta+s', () => saveClapAs({ embedded: true }), { preventDefault: true }, [])
+
+  useEffect(() => {
+    (async () => {
+      if (!clapUrl) {
+        console.log("No clap URL provided")
+        return
+      }
+      const res = await fetch(clapUrl)
+      const blob = await res.blob()
+      const clap = await parseClap(blob)
+      await setClap(clap)
+    })()
+  }, [clapUrl])
+
+  return (
+    <>
+    <MenubarMenu>
+      <MenubarTrigger>File</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem onClick={() => {
+          clapPicker.openFilePicker()
+        }}>
+          Open project (.clap)<MenubarShortcut>⌘O</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem onClick={() => {
+          saveClapAs({ embedded: true })
+        }}>
+          Save project (.clap)<MenubarShortcut>⌘S</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem onClick={() => {
+          screenplayPicker.openFilePicker()
+        }}>
+          Import screenplay (.txt)
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <Loader isLoading={isLoading} />
+    </>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { Menubar } from "@/components/ui/menubar"
+
+import { TopMenuFile } from "./file"
+import { TopMenuView } from "./view"
+import { TopMenuRendering } from "./rendering"
+
+export function TopMenu() {
+  return (
+    <Menubar>
+      <TopMenuFile />
+      {/*
+      <TopMenuEdit />
+      <TopMenuPlayback />
+      <TopMenuAssistant />
+      */}
+      <TopMenuRendering />
+      {/*<TopMenuView />*/}
+    </Menubar>
+  )
+}

src/components/interface/top-menu/rendering/index.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { useEffect } from "react"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+} from "@/components/ui/menubar"
+import { useSettingsRendering } from "@/settings/rendering"
+import { RenderingStrategy } from "@/types"
+
+export function TopMenuRendering() {
+
+  const storyboardRenderingStrategy = useSettingsRendering((s) => s.storyboardRenderingStrategy)
+  const setStoryboardRenderingStrategy = useSettingsRendering((s) => s.setStoryboardRenderingStrategy)
+
+  const videoRenderingStrategy = useSettingsRendering((s) => s.videoRenderingStrategy)
+  const setVideoRenderingStrategy = useSettingsRendering((s) => s.setVideoRenderingStrategy)
+
+  const labels = {
+    [RenderingStrategy.ON_DEMAND]: "Render on click",
+    [RenderingStrategy.ON_SCREEN_ONLY]: "Render visible items",
+    [RenderingStrategy.ON_SCREEN_THEN_SURROUNDING]: "Render visible + surrounding items",
+    [RenderingStrategy.ON_SCREEN_THEN_ALL]: "Full rendering (for GPU-rich people)"
+  }
+
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Rendering</MenubarTrigger>
+      <MenubarContent>
+
+        <MenubarSub>
+          <MenubarSubTrigger>Storyboards generation</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarCheckboxItem
+              disabled
+              checked={storyboardRenderingStrategy === RenderingStrategy.ON_DEMAND}
+              onClick={(e) => {
+                setStoryboardRenderingStrategy(RenderingStrategy.ON_DEMAND)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+             {labels[RenderingStrategy.ON_DEMAND]}
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              disabled
+              checked={storyboardRenderingStrategy === RenderingStrategy.ON_SCREEN_ONLY}
+              onClick={(e) => {
+                setStoryboardRenderingStrategy(RenderingStrategy.ON_SCREEN_ONLY)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+              {labels[RenderingStrategy.ON_SCREEN_ONLY]}
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              disabled
+              checked={storyboardRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_SURROUNDING}
+              onClick={(e) => {
+                setStoryboardRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_SURROUNDING)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+              {labels[RenderingStrategy.ON_SCREEN_THEN_SURROUNDING]}
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              disabled
+              checked={storyboardRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_ALL}
+              onClick={(e) => {
+                setStoryboardRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_ALL)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+              {labels[RenderingStrategy.ON_SCREEN_THEN_ALL]}
+            </MenubarCheckboxItem>
+          </MenubarSubContent>
+        </MenubarSub>
+
+        <MenubarSub>
+          <MenubarSubTrigger>Videos generation</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarCheckboxItem
+              disabled
+              checked={videoRenderingStrategy === RenderingStrategy.ON_DEMAND}
+              onClick={(e) => {
+                setVideoRenderingStrategy(RenderingStrategy.ON_DEMAND)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+              {labels[RenderingStrategy.ON_DEMAND]}
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              disabled
+              checked={videoRenderingStrategy === RenderingStrategy.ON_SCREEN_ONLY}
+              onClick={(e) => {
+                setVideoRenderingStrategy(RenderingStrategy.ON_SCREEN_ONLY)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+              {labels[RenderingStrategy.ON_SCREEN_ONLY]}
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              disabled
+              checked={videoRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_SURROUNDING}
+              onClick={(e) => {
+                setVideoRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_SURROUNDING)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+              {labels[RenderingStrategy.ON_SCREEN_THEN_SURROUNDING]}
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem
+              disabled
+              checked={videoRenderingStrategy === RenderingStrategy.ON_SCREEN_THEN_ALL}
+              onClick={(e) => {
+                setVideoRenderingStrategy(RenderingStrategy.ON_SCREEN_THEN_ALL)
+                e.stopPropagation()
+                e.preventDefault()
+                return false
+              }}>
+              {labels[RenderingStrategy.ON_SCREEN_THEN_ALL]}
+            </MenubarCheckboxItem>
+          </MenubarSubContent>
+        </MenubarSub>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

src/components/interface/top-menu/view/index.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { useEffect } from "react"
+
+import {
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarTrigger
+} from "@/components/ui/menubar"
+import { useFullscreenStatus } from "@/lib/hooks"
+import { useSettingsView } from "@/settings/view"
+
+export function TopMenuView() {
+  const [isFullscreen, setFullscreen, ref] = useFullscreenStatus()
+
+  // we want the whole body to become fullscreen
+  // TODO: use pointer lock, to prevent the mouse from going up
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      ref.current = document.body
+    }
+  }, [])
+
+  const showTimeline = useSettingsView((s) => s.showTimeline)
+  const setShowTimeline = useSettingsView((s) => s.setShowTimeline)
+
+  const showExplorer = useSettingsView((s) => s.showExplorer)
+  const setShowExplorer = useSettingsView((s) => s.setShowExplorer)
+
+  const showChat = useSettingsView((s) => s.showChat)
+  const setShowChat = useSettingsView((s) => s.setShowChat)
+
+  const showVideoPlayer = useSettingsView((s) => s.showVideoPlayer)
+  const setShowVideoPlayer = useSettingsView((s) => s.setShowVideoPlayer)
+
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>View</MenubarTrigger>
+      <MenubarContent>
+        <MenubarCheckboxItem
+          checked={isFullscreen}
+          onClick={(e) => {
+            // currently isFullscreen is a bit buggy and might not reflect the correct value
+            // setFullscreen(!isFullscreen)
+
+            // so to be sure we use setFullscreen in "toggle" mode
+            // (ie. we don't pass a boolean, so it will act as a current value switch)
+            setFullscreen()
+
+            e.stopPropagation()
+            e.preventDefault()
+            return false
+          }}>
+          Toggle fullscreen
+        </MenubarCheckboxItem>
+        <MenubarSeparator />
+        <MenubarCheckboxItem
+          checked={showTimeline}
+          onClick={(e) => {
+            setShowTimeline(!showTimeline)
+            e.stopPropagation()
+            e.preventDefault()
+            return false
+          }}
+        >Show timeline</MenubarCheckboxItem>
+        <MenubarCheckboxItem
+          checked={showExplorer}
+          onClick={(e) => {
+            setShowExplorer(!showExplorer)
+            e.stopPropagation()
+            e.preventDefault()
+            return false
+          }}
+          >Show asset explorer</MenubarCheckboxItem>
+        <MenubarCheckboxItem
+          checked={showChat}
+          onClick={(e) => {
+            setShowChat(!showChat)
+            e.stopPropagation()
+            e.preventDefault()
+            return false
+          }}
+          >Show chat assistant</MenubarCheckboxItem>
+        <MenubarCheckboxItem
+          checked={showVideoPlayer}
+          onClick={(e) => {
+            setShowVideoPlayer(!showVideoPlayer)
+            e.stopPropagation()
+            e.preventDefault()
+            return false
+          }}
+          >Show video player</MenubarCheckboxItem>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

src/components/settings/SettingsSectionRendering.tsx

@@ -0,0 +1,19 @@
+import { FormSection } from "@/components/form/form-section"
+import { useSettingsRendering } from "@/settings/rendering"
+
+export function SettingsSectionRendering() {
+
+  const comfyUiApiVendor = useSettingsRendering(s => s.comfyUiApiVendor)
+  const comfyUiApiKey = useSettingsRendering(s => s.comfyUiApiKey)
+  const storyboardRenderingStrategy = useSettingsRendering(s => s.storyboardRenderingStrategy)
+  const videoRenderingStrategy = useSettingsRendering(s => s.videoRenderingStrategy)
+  const maxNbAssetsToGenerateInParallel = useSettingsRendering(s => s.maxNbAssetsToGenerateInParallel)
+
+  return (
+    <div className="flex flex-col space-y-6 justify-between">
+      <FormSection label="TODO">
+        <p>TODO</p>
+      </FormSection>
+    </div>
+  )
+}

src/components/settings/index.tsx

@@ -0,0 +1,57 @@
+import { useState, useTransition } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogFooter } from "@/components/ui/dialog"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { cn } from "@/lib/utils"
+import { useSettingsView } from "@/settings/view"
+
+import { SettingsSectionRendering } from "./SettingsSectionRendering"
+
+export function SettingsDialog() {
+
+  const showSettings = useSettingsView(s => s.showSettings)
+  const setShowSettings = useSettingsView(s => s.setShowSettings)
+  const [_isPending, startTransition] = useTransition()
+
+  const panels = {
+    rendering: <SettingsSectionRendering />,
+  }
+
+  const panelLabels = {
+    rendering: "Rendering",
+  } as any
+
+  const [configPanel, setConfigPanel] = useState<keyof typeof panels>("rendering")
+
+  return (
+    <Dialog open={showSettings} onOpenChange={setShowSettings}>
+      <DialogContent className={cn(
+        // DialogContent comes with some hardcoded values so we need to override them
+        `w-[95w] md:w-[85vw] max-w-6xl h-[80%]`,
+        `flex flex-row`
+      )}>
+         <ScrollArea className="flex flex-col h-full w-44">
+          <div className="flex flex-col items-end">
+            {Object.keys(panels).map(key => (
+              <Button
+                key={key}
+                variant="ghost"
+                className="flex flex-col capitalize w-full items-end text-right text-md"
+                onClick={() => setConfigPanel(key as keyof typeof panels)}>{panelLabels[key]}</Button>
+              ))}
+            </div>
+        </ScrollArea>
+
+        <div className="flex flex-col h-full flex-grow justify-between max-w-[calc(100%-200px)]">
+          <ScrollArea className="flex flex-row h-full">
+            {panels[configPanel]}
+          </ScrollArea>
+          <DialogFooter className="text-gray-800">
+            <Button onClick={() => { setShowSettings(false) }}>Close</Button>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/ui/menubar.tsx

@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border border-stone-200 bg-white p-1 dark:border-stone-800 dark:bg-stone-950",
+      "flex h-10 items-center space-x-1 rounded-md border border-stone-200 bg-white p-1 dark:border-stone-900 dark:bg-stone-900",
       className
     )}
     {...props}
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.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 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-stone-200 bg-white p-1 text-stone-900 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-900 dark:text-stone-50",
       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-800 dark:bg-stone-950 dark:text-stone-50",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border border-stone-200 bg-white p-1 text-stone-900 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-800 dark:bg-stone-900 dark:text-stone-50",
           className
         )}
         {...props}

src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-stone-200 dark:bg-stone-800" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

src/lib/core/DEPRECATED_getSettings.txt

@@ -0,0 +1,26 @@
+import { getValidNumber } from "@aitube/clap"
+
+import { ComfyVendor, Settings } from "@/types"
+import { localStorageKeys } from "@/components/interface/settings/constants"
+
+import { getValidString, parseRenderingStrategy } from "../utils"
+
+import { getDefaultSettings } from "./getDefaultSettings"
+import { HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL } from "./constants"
+
+export function getSettings(): Settings {
+  const defaultSettings = getDefaultSettings()
+  try {
+    return {
+      comfyVendor: getValidString(localStorage?.getItem?.(localStorageKeys.comfyVendor), defaultSettings.comfyVendor) as ComfyVendor,
+      comfyApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.comfyApiKey), defaultSettings.comfyApiKey),
+      storyboardGenerationStrategy: parseRenderingStrategy(localStorage?.getItem?.(localStorageKeys.storyboardGenerationStrategy), defaultSettings.storyboardGenerationStrategy),
+      videoGenerationStrategy: parseRenderingStrategy(localStorage?.getItem?.(localStorageKeys.videoGenerationStrategy), defaultSettings.videoGenerationStrategy),
+      maxNbAssetsToGenerateInParallel: getValidNumber(localStorage?.getItem?.(localStorageKeys.maxNbAssetsToGenerateInParallel), 1, HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL, defaultSettings.maxNbAssetsToGenerateInParallel),
+    }
+  } catch (err) {
+    return {
+      ...defaultSettings
+    }
+  }
+}

src/lib/core/constants.ts

@@ -0,0 +1,4 @@
+
+// do we really want a high value here?
+// who is seriously ready to spawn 32 GPUs in parallels for this?
+export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32

src/lib/core/getDefaultSettings.ts

@@ -1,12 +1,12 @@
-import { AssetGenerationStrategy, ComfyVendor, Settings } from "@/types"
+import { RenderingStrategy, ComfyVendor, Settings } from "@/types"
 
 export function getDefaultSettings(): Settings {
   return {
     comfyVendor: ComfyVendor.CUSTOM,
     comfyApiKey: "",
 
-    storyboardGenerationStrategy: AssetGenerationStrategy.ON_DEMAND,
-    videoGenerationStrategy: AssetGenerationStrategy.ON_DEMAND,
+    storyboardGenerationStrategy: RenderingStrategy.ON_DEMAND,
+    videoGenerationStrategy: RenderingStrategy.ON_DEMAND,
 
     maxNbAssetsToGenerateInParallel: 1,
   }

src/lib/hooks/index.ts

@@ -0,0 +1,6 @@
+export { useDebounce } from "./useDebounce"
+export { useClapFilePicker } from "./useClapFilePicker"
+export { useFullscreenStatus } from "./useFullscreenStatus"
+export { useQueryStringParams } from "./useQueryStringParams"
+export { useRequestAnimationFrame } from "./useRequestAnimationFrame"
+export { useScreenplayFilePicker } from "./useScreenplayFilePicker"

src/lib/hooks/useClapFilePicker.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react"
+import { useFilePicker } from "use-file-picker"
+import { parseClap } from "@aitube/clap"
+import { useTimelineState } from "@aitube/timeline"
+
+
+export function useClapFilePicker() {
+  const setClap = useTimelineState(s => s.setClap)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const { openFilePicker, filesContent, loading } = useFilePicker({
+    accept: '.clap',
+    readAs: "ArrayBuffer"
+  })
+
+  const fileData = filesContent[0]
+
+  useEffect(() => {
+    const fn = async () => {
+      if (fileData?.name) {
+        try {
+          setIsLoading(true)
+          const blob = new Blob([fileData.content])
+          const clap = await parseClap(blob)
+          await setClap(clap)
+        } catch (err) {
+          console.error("failed to load the Clap file:", err)
+        } finally {
+          setIsLoading(false)
+        }
+      }
+    }
+    fn()
+  }, [fileData?.name])
+
+  return { openFilePicker, filesContent, fileData, isLoading: loading || isLoading } 
+}

src/lib/hooks/useFullscreenStatus.ts

@@ -0,0 +1,78 @@
+"use client"
+
+import React, { useState, useLayoutEffect, useRef, MutableRefObject } from 'react'
+
+interface FullscreenElement {
+  fullscreenElement?: Element;
+  mozFullScreenElement?: Element;
+  msFullscreenElement?: Element;
+  webkitFullscreenElement?: Element;
+}
+
+declare global {
+  interface Document extends FullscreenElement {}
+}
+
+export function useFullscreenStatus(): [boolean, (requestedValue?: boolean) => void, MutableRefObject<Element | null>] {
+  const elRef = useRef<Element | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(
+    typeof document !== "undefined"
+     ? Boolean((document as FullscreenElement)[getBrowserFullscreenElementProp()])
+     : false
+  );
+
+  const setFullscreen = (maybeValue?: boolean) => {
+    if (!elRef.current) return;
+    
+    const isFullScreen = typeof document !== "undefined" ? Boolean((document as FullscreenElement)[getBrowserFullscreenElementProp()]) : false
+
+    const shouldBeFullScreen = typeof maybeValue === "boolean" ? maybeValue : !isFullScreen
+
+    // nothing to do
+    if (isFullScreen === shouldBeFullScreen) {
+      return
+    }
+
+    const operation = shouldBeFullScreen
+      ? elRef.current.requestFullscreen()
+      : (typeof document !== "undefined" ? document.exitFullscreen() : Promise.resolve(true))
+
+    operation.then(() => {
+      setIsFullscreen(shouldBeFullScreen);
+    })
+    .catch(() => {
+      if (typeof document !== "undefined") {
+        // make sure we grab a fresh value here
+        const isFullScreen = Boolean((document as FullscreenElement)[getBrowserFullscreenElementProp()])
+        setIsFullscreen(isFullScreen);
+      }
+    });
+  };
+
+  useLayoutEffect(() => {
+    if (typeof document !== "undefined") {
+      document.onfullscreenchange = () =>
+        setIsFullscreen(Boolean((document as FullscreenElement)[getBrowserFullscreenElementProp()]));
+
+      return () => {
+        document.onfullscreenchange = null;
+      };
+    }
+  }, []);
+
+  return [isFullscreen, setFullscreen, elRef];
+}
+
+function getBrowserFullscreenElementProp(): keyof FullscreenElement {
+  if (typeof document.fullscreenElement !== "undefined") {
+    return "fullscreenElement";
+  } else if (typeof document.mozFullScreenElement !== "undefined") {
+    return "mozFullScreenElement";
+  } else if (typeof document.msFullscreenElement !== "undefined") {
+    return "msFullscreenElement";
+  } else if (typeof document.webkitFullscreenElement !== "undefined") {
+    return "webkitFullscreenElement";
+  } else {
+    throw new Error("fullscreenElement is not supported by this browser");
+  }
+}

src/lib/hooks/useRequestAnimationFrame.ts

@@ -12,7 +12,7 @@ type Config = {
  *
  * @description keep your `nextAnimationFrameHandler` as simple and performant as possible with the least amount of dependencies and transformations. It will be called frequently and this can lead to bad UX
  */
-const useRequestAnimationFrame = (
+export const useRequestAnimationFrame = (
   nextAnimationFrameHandler: (progress: number) => void,
   {
     duration = Number.POSITIVE_INFINITY,
@@ -60,4 +60,3 @@ const useRequestAnimationFrame = (
   }, [shouldAnimate])
 }
 
-export default useRequestAnimationFrame

src/lib/hooks/useScreenplayFilePicker.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react"
+import { useTimelineState } from "@aitube/timeline"
+import { parseClap } from "@aitube/clap"
+import { useFilePicker } from "use-file-picker"
+
+export function useScreenplayFilePicker() {
+  const setClap = useTimelineState(s => s.setClap)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const { openFilePicker, filesContent, loading } = useFilePicker({
+    accept: '.txt',
+    readAs: "Text"
+  })
+
+  const fileData = filesContent[0]
+
+  useEffect(() => {
+    const fn = async () => {
+      if (fileData?.name) {
+        try {
+          setIsLoading(true)
+          const res = await fetch("https://jbilcke-hf-broadway-api.hf.space", {
+            method: "POST",
+            headers: { 'Content-Type': 'text/plain' },
+            body:  fileData.content,
+          })
+          const blob = await res.blob()
+          const clap = await parseClap(blob)
+          await setClap(clap)
+        } catch (err) {
+          console.error("failed to import the screenplay:", err)
+        } finally {
+          setIsLoading(false)
+        }
+      }
+    }
+    fn()
+  }, [fileData?.name])
+
+  return { openFilePicker, filesContent, fileData, isLoading: loading || isLoading } 
+}

src/lib/utils/getValidBoolean.ts

@@ -0,0 +1,9 @@
+export const getValidBoolean = (something: any, defaultValue: boolean) => {
+  if (typeof something === "boolean") {
+    return something
+  }
+
+  const strValue = `${something || defaultValue}`.toLowerCase()
+  
+  return strValue === "true" || strValue === "1" || strValue === "on"
+}

src/lib/utils/getValidNumber.ts

@@ -0,0 +1,10 @@
+export const getValidNumber = (something: any, minValue: number, maxValue: number, defaultValue: number) => {
+  const strValue = `${something || defaultValue}`
+  const numValue = Number(strValue)
+  const isValid = !isNaN(numValue) && isFinite(numValue)
+  if (!isValid) {
+    return defaultValue
+  }
+  return Math.max(minValue, Math.min(maxValue, numValue))
+ 
+}

src/lib/utils/getValidString.ts

@@ -0,0 +1,8 @@
+export function getValidString(something: any, defaultValue: string) {
+  const strValue = `${something || defaultValue}`
+  try {
+   return JSON.parse(strValue)
+  } catch (err) {
+    return strValue
+  }
+}

src/lib/utils/index.ts

@@ -1 +1,9 @@
-export { cn } from "./cn"
+export { cn } from "./cn"
+export { debounceAsync } from "./debounceAsync"
+export { debounceSync } from "./debounceSync"
+export { getValidBoolean } from "./getValidBoolean"
+export { getValidNumber } from "./getValidNumber"
+export { getValidString } from "./getValidString"
+export { isValidNumber } from "./isValidNumber"
+export { parseComfyVendor } from "./parseComfyVendor"
+export { parseRenderingStrategy } from "./parseRenderingStrategy"

src/lib/utils/isValidNumber.ts

@@ -0,0 +1,3 @@
+export function isValidNumber(input?: any) {
+  return typeof input === "number" && !isNaN(input) && isFinite(input)
+}

src/lib/utils/parseComfyVendor.ts

@@ -0,0 +1,28 @@
+import { ComfyVendor } from "@/types"
+
+export function parseComfyVendor(input: any, defaultVendor?: ComfyVendor): ComfyVendor {
+  
+  let unknownString = `${input || ""}`.trim()
+
+  // the "normal" case
+  if (Object.values(ComfyVendor).includes(unknownString as ComfyVendor)) {
+    return unknownString as ComfyVendor
+  }
+
+  let vendor: ComfyVendor = defaultVendor || ComfyVendor.NONE
+
+  unknownString = unknownString.toLowerCase()
+
+  if (unknownString === "none" || unknownString === "undefined" || unknownString === "") {
+    vendor = ComfyVendor.NONE
+  }
+  else if (unknownString === "huggingface" || unknownString === "hugging_face") {
+    vendor = ComfyVendor.HUGGINGFACE
+  }
+  else if (unknownString === "replicate") {
+    vendor = ComfyVendor.REPLICATE
+  } else {
+    vendor = ComfyVendor.NONE
+  }
+  return vendor
+}

src/lib/utils/parseRenderingStrategy.ts

@@ -0,0 +1,31 @@
+import { RenderingStrategy } from "@/types"
+
+export function parseRenderingStrategy(input: any, defaultStrategy?: RenderingStrategy): RenderingStrategy {
+  
+  let unknownString = `${input || ""}`.trim()
+
+  // the "normal" case
+  if (Object.values(RenderingStrategy).includes(unknownString as RenderingStrategy)) {
+    return unknownString as RenderingStrategy
+  }
+
+  let strategy: RenderingStrategy = defaultStrategy || RenderingStrategy.ON_DEMAND
+
+  unknownString = unknownString.toLowerCase()
+
+  if (unknownString === "on_demand") {
+    strategy = RenderingStrategy.ON_DEMAND
+  }
+  else if (unknownString === "on_screen_only") {
+    strategy = RenderingStrategy.ON_SCREEN_ONLY
+  }
+  else if (unknownString === "on_screen_then_surrounding") {
+    strategy = RenderingStrategy.ON_SCREEN_THEN_SURROUNDING
+  }
+  else if (unknownString === "on_screen_then_all") {
+    strategy = RenderingStrategy.ON_SCREEN_THEN_ALL
+  } else {
+    strategy = RenderingStrategy.ON_DEMAND
+  }
+  return strategy
+}

src/server/comfy/{formatStoryboardWorkflow.ts → getComfyWorkflow.ts}

@@ -1,12 +1,23 @@
+import { ClapSegmentCategory } from "@aitube/clap"
 import { getVideoPrompt } from "@aitube/engine"
 
 import { ComfyNode, RenderRequest } from "@/types"
 
-export function formatStoryboardWorkflow(request: RenderRequest) {
+// TODO move this to @aitube/engine or @aitube/engine-comfy
+export function getComfyWorkflow(request: RenderRequest) {
+
+  let comfyWorkflow = "{}"
+
+  if (request.segment.category === ClapSegmentCategory.STORYBOARD) {
+    comfyWorkflow = request.storyboardWorkflow
+  } else if (request.segment.category === ClapSegmentCategory.VIDEO) {
+    comfyWorkflow = request.videoWorkflow
+  }
+
   // parse the node array from the ComfyUI workflow
-  const nodes = Object.values(JSON.parse(request.comfyWorkflow)) as ComfyNode[]
+  const nodes = Object.values(JSON.parse(comfyWorkflow)) as ComfyNode[]
 
-  const storyboardPrompt = getVideoPrompt(
+  const visualPrompt = getVideoPrompt(
     request.segments,
     request.entities
   )
@@ -14,7 +25,7 @@ export function formatStoryboardWorkflow(request: RenderRequest) {
   for (const node of nodes) {
     if (typeof node.inputs.text === "string") {
       if (node._meta.title.includes("Prompt")) {
-        node.inputs.text = storyboardPrompt
+        node.inputs.text = visualPrompt
       }
     }
   }

src/server/comfy/index.ts

@@ -4,16 +4,19 @@ import { RenderRequest } from "@/types"
 
 import { run as runWithReplicate } from "./replicate"
 import { run as runWithHuggingFace } from "./huggingface"
-import { formatStoryboardWorkflow } from "./formatStoryboardWorkflow"
+import { getComfyWorkflow } from "./getComfyWorkflow"
 
-export async function run(request: RenderRequest): Promise<string> {
+// TODO: at some point in the future we will 
+// move src/server/comfy to @aitube/engine
+export async function render(request: RenderRequest): Promise<string> {
 
-  const workflow = formatStoryboardWorkflow(request)
+  const workflow = getComfyWorkflow(request)
 
   // TODO support Hugging Face as well
   // const await runWithHuggingFace({
+
   const result = await runWithReplicate({
-    apiKey: request.comfyApiKey,
+    apiKey: request.comfyUiApiKey,
     workflow,
   })
 

src/server/comfy/replicate.ts

@@ -12,6 +12,7 @@ export async function run({
 
   const replicate = new Replicate({ auth: apiKey })
 
+  // https://replicate.com/fofr/any-comfyui-workflow
   const cogId = "fofr/any-comfyui-workflow:74f12621dc9f9b7cdca50d03941b8ddb3a368d7f5a1bb16fb7e1b87f05d96bf5"
 
   const output = await replicate.run(cogId, {

src/settings/rendering/getDefaultSettingsRendering.ts

@@ -0,0 +1,15 @@
+import { ComfyVendor, RenderingStrategy } from "@/types"
+
+import { SettingsRenderingState } from "./types"
+
+export function getDefaultSettingsRendering(): SettingsRenderingState {
+  const state: SettingsRenderingState = {
+    comfyUiApiVendor: ComfyVendor.NONE,
+    comfyUiApiKey: "",
+    storyboardRenderingStrategy: RenderingStrategy.ON_DEMAND,
+    videoRenderingStrategy: RenderingStrategy.ON_DEMAND,
+    maxNbAssetsToGenerateInParallel: 1,
+  }
+
+  return state
+}