From 186de636ca473cc0ca5653915399f20135c6b4c0 Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Mon, 30 Jun 2025 14:26:55 +0200 Subject: [PATCH 01/10] =?UTF-8?q?let's=20bring=20clapper=20back=20from=20t?= =?UTF-8?q?he=20dead=20=F0=9F=A7=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .nvmrc | 2 +- bun.lock | 3 + bun.lockb | 3 - package.json | 14 +- packages/app/next.config.js | 12 +- packages/app/package.json | 9 +- packages/app/src/app/main.tsx | 356 +--------------------- packages/app/src/app/main.tsx_backup | 391 +++++++++++++++++++++++++ packages/app/tsconfig.json | 17 +- packages/broadway/package.json | 1 + packages/clap/package.json | 3 +- packages/clapper-services/package.json | 3 +- packages/client/package.json | 1 + packages/colors/package.json | 3 +- packages/engine/package.json | 3 +- packages/io/package.json | 3 +- packages/timeline/package.json | 3 +- 17 files changed, 455 insertions(+), 372 deletions(-) create mode 100644 bun.lock delete mode 100755 bun.lockb create mode 100644 packages/app/src/app/main.tsx_backup diff --git a/.nvmrc b/.nvmrc index 016e34ba..6edc5a20 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v20.17.0 +v22.17.0 diff --git a/bun.lock b/bun.lock new file mode 100644 index 00000000..cf80530a --- /dev/null +++ b/bun.lock @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7b870010ba239d5e7614d53513d9ffa6e099f06279aea9dce6d296a5b10bafa1 +size 516660 diff --git a/bun.lockb b/bun.lockb deleted file mode 100755 index 9b891e76..00000000 --- a/bun.lockb +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f047fdb2fc29c8bc2eddf944107e42fc113ac477f4202552dfaf7564cb3c2deb -size 694900 diff --git a/package.json b/package.json index 163a44db..98a3a7e7 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,26 @@ { "name": "@aitube/clapper-monorepo", - "version": "0.2.4", + "version": "0.2.5", "description": "A monorepo for the Clapper project. Individual packages are in the packages directory.", "engines": { "bun": ">=1.0.0" }, - "packageManager": "bun@1.0.25", + "packageManager": "bun@1.2.17", "private": true, "scripts": { "dev": "bun run --cwd packages/app dev", "start": "bun run --cwd packages/app start", "start:prod": "bun run --cwd packages/app start:prod", + "clean:all": "bun run clean:clap && bun run clean:timeline && bun run clean:client && bun run clean:io && bun run clean:colors && bun run clean:engine && bun run clean:broadway && bun run clean:clapper-services && bun run clean:app", + "clean:clap": "bun run --cwd packages/clap clean", + "clean:timeline": "bun run --cwd packages/timeline clean", + "clean:client": "bun run --cwd packages/client clean", + "clean:io": "bun run --cwd packages/io clean", + "clean:colors": "bun run --cwd packages/colors clean", + "clean:engine": "bun run --cwd packages/engine clean", + "clean:broadway": "bun run --cwd packages/broadway clean", + "clean:clapper-services": "bun run --cwd packages/clapper-services clean", + "clean:app": "bun run --cwd packages/app clean", "build": "bun run build:all", "build:all": "bun run build:clap && bun run build:timeline && bun run build:client && bun run build:io && bun run build:colors && bun run build:engine && bun run build:broadway && bun run build:clapper-services && bun run build:app", "build:clap": "bun run --cwd packages/clap build", diff --git a/packages/app/next.config.js b/packages/app/next.config.js index 427c1281..14ee80f0 100644 --- a/packages/app/next.config.js +++ b/packages/app/next.config.js @@ -1,7 +1,17 @@ /** @type {import('next').NextConfig} */ +import { join, dirname } from "node:path"; +import { fileURLToPath } from "node:url"; + +const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file +const __dirname = dirname(__filename); // get the name of the directory + const nextConfig = { output: 'standalone', + // this includes files from the monorepo base two directories up + // see: https://nextjs.org/docs/pages/api-reference/config/next-config-js/output#caveats + outputFileTracingRoot: join(__dirname, '../../'), + experimental: { serverActions: { // a clap file can be quite large - but that's OK @@ -62,4 +72,4 @@ const nextConfig = { } } -module.exports = nextConfig +export default nextConfig; \ No newline at end of file diff --git a/packages/app/package.json b/packages/app/package.json index 8da9b8af..ba0d20f2 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -1,6 +1,6 @@ { "name": "@aitube/clapper", - "version": "0.2.4", + "version": "0.2.5", "private": true, "description": "🎬 Clapper", "license": "GPL-3.0-only", @@ -14,11 +14,12 @@ }, "scripts": { "dev": "bun run checks && next dev", + "clean": "rm -Rf .next && rm -Rf node_modules", "build": "bun run prepare && bun run checks && rm -Rf out && next build && bun run build:copyassets", "build:copyassets": "cp -R public .next/standalone/packages/app/public && cp -R .next/static .next/standalone/packages/app/.next/static", "prepare": "cp -R ../../node_modules/mediainfo.js/dist/MediaInfoModule.wasm public/wasm/", "start": "next start", - "start:prod": "bun .next/standalone/packages/app/server.js", + "start:prod": "bun .next/standalone/server.js", "checks": "bun run format:fix && bun run lint", "format": "prettier --check --ignore-path .gitignore ./src/", "format:fix": "prettier --write --ignore-path .gitignore ./src/", @@ -107,8 +108,8 @@ "mediainfo.js": "0.3.2", "mlt-xml": "2.0.2", "monaco-editor": "0.51.0", - "next": "14.2.10", - "next-themes": "0.3.0", + "next": "15.3.4", + "next-themes": "0.4.6", "pngjs": "7.0.0", "qs": "6.13.0", "query-string": "9.1.0", diff --git a/packages/app/src/app/main.tsx b/packages/app/src/app/main.tsx index 34c32233..0c120559 100644 --- a/packages/app/src/app/main.tsx +++ b/packages/app/src/app/main.tsx @@ -1,364 +1,18 @@ 'use client' -import React, { useEffect, useRef } from 'react' -import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex' -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 React from 'react' + +import { DndProvider } from 'react-dnd' +import { HTML5Backend } from 'react-dnd-html5-backend' import { ErrorBoundary, FallbackProps } from 'react-error-boundary' -import { Bellhop } from 'bellhop-iframe' -import { Toaster } from '@/components/ui/sonner' -import { cn } from '@/lib/utils' import { TooltipProvider } from '@/components/ui/tooltip' -import { Monitor } from '@/components/monitor' - -import { SettingsDialog } from '@/components/settings' -import { LoadingDialog } from '@/components/dialogs/loader/LoadingDialog' -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 { BottomBar } from '@/components/toolbars/bottom-bar' -import { FruityDesktop, FruityWindow } from '@/components/windows' -import { ScriptEditor } from '@/components/editors/ScriptEditor' -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, useMonitor } from '@/services' -import { useRenderLoop } from '@/services/renderer' -import { useDynamicWorkflows } from '@/services/editors/workflow-editor/useDynamicWorkflows' - -import { useQueryStringLoader } from '@/components/toolbars/top-menu/file/useQueryStringLoader' -import { useSetupIframeOnce } from './embed/useSetupIframeOnce' -import { TimelineZoom } from '@/components/core/timeline/TimelineZoom' -import { useBreakpoints } from '@/lib/hooks/useBreakpoints' export enum ClapperIntegrationMode { APP = 'APP', IFRAME = 'IFRAME', } -export type DroppableThing = { files: File[] } - -function MainContent({ mode }: { mode: ClapperIntegrationMode }) { - const ref = useRef(null) - const showWelcomeScreen = useUI((s) => s.showWelcomeScreen) - const showExplorer = useUI((s) => s.showExplorer) - const showVideoPlayer = useUI((s) => s.showVideoPlayer) - const showTimeline = useUI((s) => s.showTimeline) - const showAssistant = useUI((s) => s.showAssistant) - const theme = useTheme() - const openFiles = useIO((s) => s.openFiles) - const isTopMenuOpen = useUI((s) => s.isTopMenuOpen) - const windowLayout = useUI((s) => s.windowLayout) - - const isIframe = mode === ClapperIntegrationMode.IFRAME - - const { isMd } = useBreakpoints() - - // this has to be done at the root of the app, that way it can - // 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() - - // also has to be done here - useSetupIframeOnce(isIframe) - - const [{ isOver, canDrop }, connectFileDrop] = useDrop({ - accept: [NativeTypes.FILE], - drop: (item: DroppableThing): void => { - // console.log("DROP", item) - openFiles(item.files) - }, - collect: (monitor) => ({ - isOver: monitor.isOver(), - canDrop: monitor.canDrop(), - }), - }) - - connectFileDrop(ref) - - const setHasBetaAccess = useUI((s) => s.setHasBetaAccess) - - const searchParams = useSearchParams() - const hasBetaAccess = searchParams.get('beta') === 'true' - useEffect(() => { - setHasBetaAccess(hasBetaAccess) - }, [hasBetaAccess, setHasBetaAccess]) - - useQueryStringLoader() - - const iframeLayout = ( - <> - - - - ) - - const gridLayout = ( - - - - - - {showExplorer && ( - - - - )} - {showExplorer && showVideoPlayer && } - {showVideoPlayer && ( - - - - )} - - - - - - - - - - {showAssistant && } - {showAssistant && ( - - - - )} - - ) - - const flyingLayout = ( - - - - - - - - - - - - - - - - - - - - - - - - - - ( - <> - - - )} - > - - - - ) - - const welcomeScreen = ( -
-
-
- To get started please open the menu -
-
- Then open an example -
-
-

- Welcome to{' '} - - Clapper - - . -

-
-

A free and open-source AI video editor,

-

designed for the age of generative filmmaking.

-
-
-
-
- ) - - return ( -
- -
- {isIframe - ? iframeLayout - : windowLayout === UIWindowLayout.FLYING - ? flyingLayout - : gridLayout} -
- - {!isIframe && isMd && welcomeScreen} - - - - - {!isIframe && windowLayout === UIWindowLayout.GRID && } -
- ) -} - function fallbackRender({ error, resetErrorBoundary }: FallbackProps) { // Call resetErrorBoundary() to reset the error boundary and retry the render. @@ -383,7 +37,7 @@ export function Main( - +
Hello, world!
 diff --git a/packages/app/src/app/main.tsx_backup b/packages/app/src/app/main.tsx_backup new file mode 100644 index 00000000..34c32233 --- /dev/null +++ b/packages/app/src/app/main.tsx_backup @@ -0,0 +1,391 @@ +'use client' + +import React, { useEffect, useRef } from 'react' +import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex' +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 { Bellhop } from 'bellhop-iframe' + +import { Toaster } from '@/components/ui/sonner' +import { cn } from '@/lib/utils' +import { TooltipProvider } from '@/components/ui/tooltip' +import { Monitor } from '@/components/monitor' + +import { SettingsDialog } from '@/components/settings' +import { LoadingDialog } from '@/components/dialogs/loader/LoadingDialog' +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 { BottomBar } from '@/components/toolbars/bottom-bar' +import { FruityDesktop, FruityWindow } from '@/components/windows' +import { ScriptEditor } from '@/components/editors/ScriptEditor' +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, useMonitor } from '@/services' +import { useRenderLoop } from '@/services/renderer' +import { useDynamicWorkflows } from '@/services/editors/workflow-editor/useDynamicWorkflows' + +import { useQueryStringLoader } from '@/components/toolbars/top-menu/file/useQueryStringLoader' +import { useSetupIframeOnce } from './embed/useSetupIframeOnce' +import { TimelineZoom } from '@/components/core/timeline/TimelineZoom' +import { useBreakpoints } from '@/lib/hooks/useBreakpoints' + +export enum ClapperIntegrationMode { + APP = 'APP', + IFRAME = 'IFRAME', +} + +export type DroppableThing = { files: File[] } + +function MainContent({ mode }: { mode: ClapperIntegrationMode }) { + const ref = useRef(null) + const showWelcomeScreen = useUI((s) => s.showWelcomeScreen) + const showExplorer = useUI((s) => s.showExplorer) + const showVideoPlayer = useUI((s) => s.showVideoPlayer) + const showTimeline = useUI((s) => s.showTimeline) + const showAssistant = useUI((s) => s.showAssistant) + const theme = useTheme() + const openFiles = useIO((s) => s.openFiles) + const isTopMenuOpen = useUI((s) => s.isTopMenuOpen) + const windowLayout = useUI((s) => s.windowLayout) + + const isIframe = mode === ClapperIntegrationMode.IFRAME + + const { isMd } = useBreakpoints() + + // this has to be done at the root of the app, that way it can + // 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() + + // also has to be done here + useSetupIframeOnce(isIframe) + + const [{ isOver, canDrop }, connectFileDrop] = useDrop({ + accept: [NativeTypes.FILE], + drop: (item: DroppableThing): void => { + // console.log("DROP", item) + openFiles(item.files) + }, + collect: (monitor) => ({ + isOver: monitor.isOver(), + canDrop: monitor.canDrop(), + }), + }) + + connectFileDrop(ref) + + const setHasBetaAccess = useUI((s) => s.setHasBetaAccess) + + const searchParams = useSearchParams() + const hasBetaAccess = searchParams.get('beta') === 'true' + useEffect(() => { + setHasBetaAccess(hasBetaAccess) + }, [hasBetaAccess, setHasBetaAccess]) + + useQueryStringLoader() + + const iframeLayout = ( + <> + + + + ) + + const gridLayout = ( + + + + + + {showExplorer && ( + + + + )} + {showExplorer && showVideoPlayer && } + {showVideoPlayer && ( + + + + )} + + + + + + + + + + {showAssistant && } + {showAssistant && ( + + + + )} + + ) + + const flyingLayout = ( + + + + + + + + + + + + + + + + + + + + + + + + + + ( + <> + + + )} + > + + + + ) + + const welcomeScreen = ( +
+
+
+ To get started please open the menu +
+
+ Then open an example +
+
+

+ Welcome to{' '} + + Clapper + + . +

+
+

A free and open-source AI video editor,

+

designed for the age of generative filmmaking.

+
+
+
+
+ ) + + return ( +
+ +
+ {isIframe + ? iframeLayout + : windowLayout === UIWindowLayout.FLYING + ? flyingLayout + : gridLayout} +
+ + {!isIframe && isMd && welcomeScreen} + + + + + {!isIframe && windowLayout === UIWindowLayout.GRID && } +
+ ) +} + +function fallbackRender({ error, resetErrorBoundary }: FallbackProps) { + // Call resetErrorBoundary() to reset the error boundary and retry the render. + + return ( +
+

Something went wrong:

+ 
{error.message}
+
+ ) +} + +export function Main( + { + mode = ClapperIntegrationMode.APP, + }: { + mode: ClapperIntegrationMode + } = { + mode: ClapperIntegrationMode.APP, + } +) { + return ( + + + + + + + + ) +} diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json index 737ee26f..ec181c8a 100644 --- a/packages/app/tsconfig.json +++ b/packages/app/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -19,13 +23,16 @@ } ], "paths": { - "@/*": ["./src/*"] + "@/*": [ + "./src/*" + ] }, "types": [ "@types/fluent-ffmpeg", "@webgpu/types", "@types/dom-speech-recognition" - ] + ], + "target": "ES2017" }, "include": [ "next-env.d.ts", @@ -34,5 +41,7 @@ ".next/types/**/*.ts", "vitest.config.mts" ], - "exclude": ["node_modules"] + "exclude": [ + "node_modules" + ] } diff --git a/packages/broadway/package.json b/packages/broadway/package.json index 6372ed0e..8031bccd 100644 --- a/packages/broadway/package.json +++ b/packages/broadway/package.json @@ -7,6 +7,7 @@ "version": "0.2.4-2", "description": "Convert a script to a clap file", "scripts": { + "clean": "rm -Rf ./dist", "test": "bun test --preload ./src/tests/setup.js", "build": "bun build ./src/index.ts --outfile=dist/index.js --external=@aitube/clap --external=@aitube/colors && bun run build:declaration", "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json", diff --git a/packages/clap/package.json b/packages/clap/package.json index f55515b7..2a721fd7 100644 --- a/packages/clap/package.json +++ b/packages/clap/package.json @@ -5,9 +5,10 @@ "private": false, "types": "dist/index.d.ts", "type": "module", - "version": "0.2.4", + "version": "0.2.5", "description": "Types and helpers to manipulate .clap files", "scripts": { + "clean": "rm -Rf ./dist", "build": "bun build ./src/index.ts --outfile=dist/index.js --external=yaml && bun run build:declaration", "build:declaration": "tspc --emitDeclarationOnly --project tsconfig.types.json", "postbuild": "rimraf tsconfig.types.tsbuildinfo && bun run build:declaration", diff --git a/packages/clapper-services/package.json b/packages/clapper-services/package.json index 9bfce1c0..ac38dfe5 100644 --- a/packages/clapper-services/package.json +++ b/packages/clapper-services/package.json @@ -4,9 +4,10 @@ "main": "dist/index.js", "types": "dist/index.d.ts", "type": "module", - "version": "0.2.4", + "version": "0.2.5", "description": "Base types for Clapper services", "scripts": { + "clean": "rm -Rf ./dist", "build": "bun build ./src/index.ts --outfile=dist/index.js --external=@aitube/clap --external=@aitube/timeline --external=@monaco-editor/react --external=monaco-editor --external=zustand --external=react --external=react-dom && bun run build:declaration", "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json", "postbuild": "rimraf tsconfig.types.tsbuildinfo && bun run build:declaration", diff --git a/packages/client/package.json b/packages/client/package.json index 1c3a2db5..096601b5 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -7,6 +7,7 @@ "version": "0.2.4-3", "description": "Official API client for AiTube.at", "scripts": { + "clean": "rm -Rf ./dist", "build": "bun build ./src/index.ts --outfile=dist/index.js --external=@aitube/clap && bun run build:declaration", "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json", "postbuild": "rimraf tsconfig.types.tsbuildinfo && bun run build:declaration", diff --git a/packages/colors/package.json b/packages/colors/package.json index 251fb971..a437bcb1 100644 --- a/packages/colors/package.json +++ b/packages/colors/package.json @@ -4,9 +4,10 @@ "main": "dist/index.js", "types": "dist/index.d.ts", "type": "module", - "version": "0.2.4", + "version": "0.2.5", "description": "Various color settings and utilities for AiTube", "scripts": { + "clean": "rm -Rf ./dist", "build": "bun build ./src/index.ts --outfile=dist/index.js --external=@aitube/clap && bun run build:declaration", "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json", "postbuild": "rimraf tsconfig.types.tsbuildinfo && bun run build:declaration", diff --git a/packages/engine/package.json b/packages/engine/package.json index 5ba5e234..6d8d0dbc 100644 --- a/packages/engine/package.json +++ b/packages/engine/package.json @@ -4,9 +4,10 @@ "main": "dist/index.js", "types": "dist/index.d.ts", "type": "module", - "version": "0.2.4", + "version": "0.2.5", "description": "The engine powering AiTube.at and Clapper.app", "scripts": { + "clean": "rm -Rf ./dist", "build": "bun build ./src/index.ts --outfile=dist/index.js && bun run build:declaration", "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json", "postbuild": "rimraf tsconfig.types.tsbuildinfo && bun run build:declaration", diff --git a/packages/io/package.json b/packages/io/package.json index eb6d911e..fc416af3 100644 --- a/packages/io/package.json +++ b/packages/io/package.json @@ -4,9 +4,10 @@ "main": "dist/index.js", "types": "dist/index.d.ts", "type": "module", - "version": "0.2.4", + "version": "0.2.5", "description": "Collection of useful I/O utilities for NodeJS. Used by AiTube.at", "scripts": { + "clean": "rm -Rf ./dist", "build": "bun build --target=node ./src/index.ts --outfile=dist/index.js && bun run build:declaration", "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json", "postbuild": "rimraf tsconfig.types.tsbuildinfo", diff --git a/packages/timeline/package.json b/packages/timeline/package.json index 02c3b5a1..c90ecd61 100644 --- a/packages/timeline/package.json +++ b/packages/timeline/package.json @@ -5,9 +5,10 @@ "types": "dist/index.d.ts", "type": "module", "private": false, - "version": "0.2.4", + "version": "0.2.5", "description": "React component to display an OpenClap timeline", "scripts": { + "clean": "rm -Rf ./dist && rm -Rf ./node_modules", "build": "NODE_ENV=production bun build ./src/index.tsx --outfile=dist/index.js --external @radix-ui/react-slider --external @react-spring/three --external @react-spring/types --external @react-three/drei --external @react-three/fiber --external @types/react --external @types/react-dom --external react --external react-dom --external tailwindcss --external three --external typescript --external zustand && bun run build:declaration", "build:dev": "bun build ./src/index.tsx --outfile=dist/index.js --external @radix-ui/react-slider --external @react-spring/three --external @react-spring/types --external @react-three/drei --external @react-three/fiber --external @types/react --external @types/react-dom --external react --external react-dom --external tailwindcss --external three --external typescript --external zustand && bun run build:declaration", "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json", From 33d97718df67afb5f0031de423bb1cafb620eb38 Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Mon, 30 Jun 2025 14:30:53 +0200 Subject: [PATCH 02/10] adding more extensions to lfs From ac074ea5a5685bbd20e47b1baba77fbf8a09398d Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Mon, 30 Jun 2025 15:08:06 +0200 Subject: [PATCH 03/10] attempting upgrade to Next 15 and React 19 --- .claude/settings.local.json | 19 ++++ bun.lock | 4 +- packages/app/package.json | 24 ++--- packages/app/src/app/embed/page.tsx | 4 +- packages/app/src/app/embed/page.tsx_backup | 52 ++++++++++ packages/app/src/app/main.tsx | 98 ++++++++++++++++++- .../src/components/assistant/ChatBubble.tsx | 13 ++- packages/timeline/package.json | 8 +- .../src/components/icons/SegmentIcon.tsx | 6 +- .../timeline/src/components/icons/SvgIcon.tsx | 6 +- 10 files changed, 197 insertions(+), 37 deletions(-) create mode 100644 .claude/settings.local.json create mode 100644 packages/app/src/app/embed/page.tsx_backup diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 00000000..ca85fb28 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,19 @@ +{ + "permissions": { + "allow": [ + "Bash(git lfs push:*)", + "Bash(git push:*)", + "Bash(find:*)", + "Bash(git lfs pointer:*)", + "Bash(git add:*)", + "Bash(git rm:*)", + "Bash(git commit:*)", + "Bash(ls:*)", + "Bash(git checkout:*)", + "Bash(git fetch:*)", + "Bash(git filter-repo:*)", + "Bash(git remote add:*)" + ], + "deny": [] + } +} \ No newline at end of file diff --git a/bun.lock b/bun.lock index cf80530a..8e4e0b86 100644 --- a/bun.lock +++ b/bun.lock @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7b870010ba239d5e7614d53513d9ffa6e099f06279aea9dce6d296a5b10bafa1 -size 516660 +oid sha256:8965026ca48b073bd532b097978749fdf2682dd1126618331d314d9911610841 +size 510648 diff --git a/packages/app/package.json b/packages/app/package.json index ba0d20f2..e3aad6ad 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -19,7 +19,7 @@ "build:copyassets": "cp -R public .next/standalone/packages/app/public && cp -R .next/static .next/standalone/packages/app/.next/static", "prepare": "cp -R ../../node_modules/mediainfo.js/dist/MediaInfoModule.wasm public/wasm/", "start": "next start", - "start:prod": "bun .next/standalone/server.js", + "start:prod": "bun .next/standalone/packages/app/server.js", "checks": "bun run format:fix && bun run lint", "format": "prettier --check --ignore-path .gitignore ./src/", "format:fix": "prettier --write --ignore-path .gitignore ./src/", @@ -77,10 +77,10 @@ "@radix-ui/react-tabs": "1.0.4", "@radix-ui/react-toast": "1.1.5", "@radix-ui/react-tooltip": "1.0.7", - "@react-spring/three": "9.7.5", - "@react-spring/types": "9.7.5", - "@react-three/drei": "9.117.3", - "@react-three/fiber": "8.17.10", + "@react-spring/three": "10.0.1", + "@react-spring/types": "10.0.1", + "@react-three/drei": "10.3.0", + "@react-three/fiber": "9.1.4", "@react-three/uikit": "0.8.4", "@react-three/uikit-lucide": "0.8.4", "@saintno/comfyui-sdk": "0.2.29", @@ -113,18 +113,18 @@ "pngjs": "7.0.0", "qs": "6.13.0", "query-string": "9.1.0", - "react": "18.3.1", + "react": "*", "react-device-frameset": "1.3.4", "react-dnd": "16.0.1", "react-dnd-html5-backend": "16.0.1", - "react-dom": "18.3.1", + "react-dom": "*", "react-drag-drop-files": "2.3.10", - "react-error-boundary": "4.0.13", + "react-error-boundary": "6.0.0", "react-hook-consent": "3.5.3", - "react-hotkeys-hook": "4.5.0", - "react-icons": "5.2.1", - "react-markdown": "9.0.1", - "react-reflex": "4.2.6", + "react-hotkeys-hook": "5.1.0", + "react-icons": "5.5.0", + "react-markdown": "10.1.0", + "react-reflex": "4.2.7", "react-speakup": "1.0.0", "remark-gfm": "4.0.0", "replicate": "0.32.0", diff --git a/packages/app/src/app/embed/page.tsx b/packages/app/src/app/embed/page.tsx index 97494122..d62a9cbd 100644 --- a/packages/app/src/app/embed/page.tsx +++ b/packages/app/src/app/embed/page.tsx @@ -4,8 +4,6 @@ import { useEffect, useState } from 'react' import Head from 'next/head' import Script from 'next/script' -import { ClapperIntegrationMode, Main } from '../main' - // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts export default function EmbedPage() { @@ -46,7 +44,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= style={{ display: 'none', visibility: 'hidden' }} > -
{isLoaded &&
}
+
Debugging embed
) } diff --git a/packages/app/src/app/embed/page.tsx_backup b/packages/app/src/app/embed/page.tsx_backup new file mode 100644 index 00000000..97494122 --- /dev/null +++ b/packages/app/src/app/embed/page.tsx_backup @@ -0,0 +1,52 @@ +'use client' + +import { useEffect, useState } from 'react' +import Head from 'next/head' +import Script from 'next/script' + +import { ClapperIntegrationMode, Main } from '../main' + +// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts + +export default function EmbedPage() { + const [isLoaded, setLoaded] = useState(false) + useEffect(() => { + setLoaded(true) + }, []) + return ( + <> + + + + + + + + + +
{isLoaded &&
}
+ + ) +} diff --git a/packages/app/src/app/main.tsx b/packages/app/src/app/main.tsx index 0c120559..5fd72a18 100644 --- a/packages/app/src/app/main.tsx +++ b/packages/app/src/app/main.tsx @@ -1,18 +1,106 @@ 'use client' -import React from 'react' - -import { DndProvider } from 'react-dnd' -import { HTML5Backend } from 'react-dnd-html5-backend' +import React, { useEffect, useRef } from 'react' +import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex' +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 { Bellhop } from 'bellhop-iframe' +import { Toaster } from '@/components/ui/sonner' +import { cn } from '@/lib/utils' import { TooltipProvider } from '@/components/ui/tooltip' +import { Monitor } from '@/components/monitor' + +import { SettingsDialog } from '@/components/settings' +import { LoadingDialog } from '@/components/dialogs/loader/LoadingDialog' +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 { BottomBar } from '@/components/toolbars/bottom-bar' +import { FruityDesktop, FruityWindow } from '@/components/windows' +import { ScriptEditor } from '@/components/editors/ScriptEditor' +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, useMonitor } from '@/services' +import { useRenderLoop } from '@/services/renderer' +import { useDynamicWorkflows } from '@/services/editors/workflow-editor/useDynamicWorkflows' + +import { useQueryStringLoader } from '@/components/toolbars/top-menu/file/useQueryStringLoader' +import { useSetupIframeOnce } from './embed/useSetupIframeOnce' +import { TimelineZoom } from '@/components/core/timeline/TimelineZoom' +import { useBreakpoints } from '@/lib/hooks/useBreakpoints' export enum ClapperIntegrationMode { APP = 'APP', IFRAME = 'IFRAME', } +export type DroppableThing = { files: File[] } + +function MainContent({ mode }: { mode: ClapperIntegrationMode }) { + const ref = useRef(null) + const showWelcomeScreen = useUI((s) => s.showWelcomeScreen) + /* + const showExplorer = useUI((s) => s.showExplorer) + const showVideoPlayer = useUI((s) => s.showVideoPlayer) + const showTimeline = useUI((s) => s.showTimeline) + const showAssistant = useUI((s) => s.showAssistant) + const theme = useTheme() + const openFiles = useIO((s) => s.openFiles) + const isTopMenuOpen = useUI((s) => s.isTopMenuOpen) + const windowLayout = useUI((s) => s.windowLayout) + + const isIframe = mode === ClapperIntegrationMode.IFRAME + + const { isMd } = useBreakpoints() + + + // this has to be done at the root of the app, that way it can + // 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() + + // also has to be done here + useSetupIframeOnce(isIframe) + + const [{ isOver, canDrop }, connectFileDrop] = useDrop({ + accept: [NativeTypes.FILE], + drop: (item: DroppableThing): void => { + // console.log("DROP", item) + openFiles(item.files) + }, + collect: (monitor) => ({ + isOver: monitor.isOver(), + canDrop: monitor.canDrop(), + }), + }) + + connectFileDrop(ref) + + const setHasBetaAccess = useUI((s) => s.setHasBetaAccess) + + const searchParams = useSearchParams() + const hasBetaAccess = searchParams.get('beta') === 'true' + useEffect(() => { + setHasBetaAccess(hasBetaAccess) + }, [hasBetaAccess, setHasBetaAccess]) + + useQueryStringLoader() + */ + + return
Hello, world
+} + function fallbackRender({ error, resetErrorBoundary }: FallbackProps) { // Call resetErrorBoundary() to reset the error boundary and retry the render. @@ -37,7 +125,7 @@ export function Main( -
Hello, world!
+
Debugging
 diff --git a/packages/app/src/components/assistant/ChatBubble.tsx b/packages/app/src/components/assistant/ChatBubble.tsx index c1dc74ad..5d6faaa5 100644 --- a/packages/app/src/components/assistant/ChatBubble.tsx +++ b/packages/app/src/components/assistant/ChatBubble.tsx @@ -27,7 +27,11 @@ export function ChatBubble({ )} >
- - {message} - + {message}
}) { const iconUrl = segmentCategoryToIconPath[category] const shapes = useSvgShapes(iconUrl) diff --git a/packages/timeline/src/components/icons/SvgIcon.tsx b/packages/timeline/src/components/icons/SvgIcon.tsx index 1374c330..c0d9fb93 100644 --- a/packages/timeline/src/components/icons/SvgIcon.tsx +++ b/packages/timeline/src/components/icons/SvgIcon.tsx @@ -1,16 +1,18 @@ -import { GroupProps } from "@react-three/fiber"; +import { ReactProps } from "@react-three/fiber"; +import { Group } from "three"; import { useSvgShapes } from "./useSvgShapes"; import { SvgShapeMesh } from "./SvgShapeMesh"; import { IconType } from "./types"; import { icons } from "./icons"; + export function SvgIcon({ icon = "misc", groupProps = {} }: { icon?: IconType - groupProps?: GroupProps + groupProps?: ReactProps }) { const iconUrl = icons[icon] const shapes = useSvgShapes(iconUrl) From 65d95c2428feb276350e7fe383d76bb047ecaa6a Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Mon, 30 Jun 2025 15:18:32 +0200 Subject: [PATCH 04/10] =?UTF-8?q?return=20of=20the=20rising=20dead=20clapp?= =?UTF-8?q?er=20=F0=9F=A7=9F=F0=9F=A7=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bun.lock | 4 +- packages/app/package.json | 2 +- packages/app/src/app/embed/page.tsx | 4 +- packages/app/src/app/embed/page.tsx_backup | 52 --- packages/app/src/app/main.tsx | 268 +++++++++++- packages/app/src/app/main.tsx_backup | 391 ------------------ .../app/src/components/core/tree/roving.tsx | 6 +- packages/broadway/package.json | 2 +- packages/clap/package.json | 6 +- packages/clapper-services/package.json | 2 +- packages/client/package.json | 2 +- packages/colors/package.json | 2 +- packages/engine/package.json | 2 +- packages/io/package.json | 2 +- packages/timeline/package.json | 4 +- 15 files changed, 283 insertions(+), 466 deletions(-) delete mode 100644 packages/app/src/app/embed/page.tsx_backup delete mode 100644 packages/app/src/app/main.tsx_backup diff --git a/bun.lock b/bun.lock index 8e4e0b86..485c34f7 100644 --- a/bun.lock +++ b/bun.lock @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8965026ca48b073bd532b097978749fdf2682dd1126618331d314d9911610841 -size 510648 +oid sha256:71174e5b6757e39bb38b1f9e58a560d89c477cd5f290a7d28bd2d1220fe4a57e +size 532001 diff --git a/packages/app/package.json b/packages/app/package.json index e3aad6ad..b2c1e29d 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -173,7 +173,7 @@ "prettier-plugin-tailwindcss": "0.6.5", "tailwind-scrollbar": "3.1.0", "tailwindcss": "3.4.3", - "typescript": "5.5.2", + "typescript": "5.8.3", "vitest": "2.0.2" }, "optionalDependencies": { diff --git a/packages/app/src/app/embed/page.tsx b/packages/app/src/app/embed/page.tsx index d62a9cbd..97494122 100644 --- a/packages/app/src/app/embed/page.tsx +++ b/packages/app/src/app/embed/page.tsx @@ -4,6 +4,8 @@ import { useEffect, useState } from 'react' import Head from 'next/head' import Script from 'next/script' +import { ClapperIntegrationMode, Main } from '../main' + // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts export default function EmbedPage() { @@ -44,7 +46,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= style={{ display: 'none', visibility: 'hidden' }} > -
Debugging embed
+
{isLoaded &&
}
) } diff --git a/packages/app/src/app/embed/page.tsx_backup b/packages/app/src/app/embed/page.tsx_backup deleted file mode 100644 index 97494122..00000000 --- a/packages/app/src/app/embed/page.tsx_backup +++ /dev/null @@ -1,52 +0,0 @@ -'use client' - -import { useEffect, useState } from 'react' -import Head from 'next/head' -import Script from 'next/script' - -import { ClapperIntegrationMode, Main } from '../main' - -// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts - -export default function EmbedPage() { - const [isLoaded, setLoaded] = useState(false) - useEffect(() => { - setLoaded(true) - }, []) - return ( - <> - - - - - - - - - -
{isLoaded &&
}
- - ) -} diff --git a/packages/app/src/app/main.tsx b/packages/app/src/app/main.tsx index 5fd72a18..34c32233 100644 --- a/packages/app/src/app/main.tsx +++ b/packages/app/src/app/main.tsx @@ -47,7 +47,6 @@ export type DroppableThing = { files: File[] } function MainContent({ mode }: { mode: ClapperIntegrationMode }) { const ref = useRef(null) const showWelcomeScreen = useUI((s) => s.showWelcomeScreen) - /* const showExplorer = useUI((s) => s.showExplorer) const showVideoPlayer = useUI((s) => s.showVideoPlayer) const showTimeline = useUI((s) => s.showTimeline) @@ -61,7 +60,6 @@ function MainContent({ mode }: { mode: ClapperIntegrationMode }) { const { isMd } = useBreakpoints() - // this has to be done at the root of the app, that way it can // perform its routine even when the monitor component is hidden useRenderLoop() @@ -96,9 +94,269 @@ function MainContent({ mode }: { mode: ClapperIntegrationMode }) { }, [hasBetaAccess, setHasBetaAccess]) useQueryStringLoader() - */ - return
Hello, world
+ const iframeLayout = ( + <> + + + + ) + + const gridLayout = ( + + + + + + {showExplorer && ( + + + + )} + {showExplorer && showVideoPlayer && } + {showVideoPlayer && ( + + + + )} + + + + + + + + + + {showAssistant && } + {showAssistant && ( + + + + )} + + ) + + const flyingLayout = ( + + + + + + + + + + + + + + + + + + + + + + + + + + ( + <> + + + )} + > + + + + ) + + const welcomeScreen = ( +
+
+
+ To get started please open the menu +
+
+ Then open an example +
+
+

+ Welcome to{' '} + + Clapper + + . +

+
+

A free and open-source AI video editor,

+

designed for the age of generative filmmaking.

+
+
+
+
+ ) + + return ( +
+ +
+ {isIframe + ? iframeLayout + : windowLayout === UIWindowLayout.FLYING + ? flyingLayout + : gridLayout} +
+ + {!isIframe && isMd && welcomeScreen} + + + + + {!isIframe && windowLayout === UIWindowLayout.GRID && } +
+ ) } function fallbackRender({ error, resetErrorBoundary }: FallbackProps) { @@ -125,7 +383,7 @@ export function Main( -
Debugging
+ diff --git a/packages/app/src/app/main.tsx_backup b/packages/app/src/app/main.tsx_backup deleted file mode 100644 index 34c32233..00000000 --- a/packages/app/src/app/main.tsx_backup +++ /dev/null @@ -1,391 +0,0 @@ -'use client' - -import React, { useEffect, useRef } from 'react' -import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex' -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 { Bellhop } from 'bellhop-iframe' - -import { Toaster } from '@/components/ui/sonner' -import { cn } from '@/lib/utils' -import { TooltipProvider } from '@/components/ui/tooltip' -import { Monitor } from '@/components/monitor' - -import { SettingsDialog } from '@/components/settings' -import { LoadingDialog } from '@/components/dialogs/loader/LoadingDialog' -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 { BottomBar } from '@/components/toolbars/bottom-bar' -import { FruityDesktop, FruityWindow } from '@/components/windows' -import { ScriptEditor } from '@/components/editors/ScriptEditor' -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, useMonitor } from '@/services' -import { useRenderLoop } from '@/services/renderer' -import { useDynamicWorkflows } from '@/services/editors/workflow-editor/useDynamicWorkflows' - -import { useQueryStringLoader } from '@/components/toolbars/top-menu/file/useQueryStringLoader' -import { useSetupIframeOnce } from './embed/useSetupIframeOnce' -import { TimelineZoom } from '@/components/core/timeline/TimelineZoom' -import { useBreakpoints } from '@/lib/hooks/useBreakpoints' - -export enum ClapperIntegrationMode { - APP = 'APP', - IFRAME = 'IFRAME', -} - -export type DroppableThing = { files: File[] } - -function MainContent({ mode }: { mode: ClapperIntegrationMode }) { - const ref = useRef(null) - const showWelcomeScreen = useUI((s) => s.showWelcomeScreen) - const showExplorer = useUI((s) => s.showExplorer) - const showVideoPlayer = useUI((s) => s.showVideoPlayer) - const showTimeline = useUI((s) => s.showTimeline) - const showAssistant = useUI((s) => s.showAssistant) - const theme = useTheme() - const openFiles = useIO((s) => s.openFiles) - const isTopMenuOpen = useUI((s) => s.isTopMenuOpen) - const windowLayout = useUI((s) => s.windowLayout) - - const isIframe = mode === ClapperIntegrationMode.IFRAME - - const { isMd } = useBreakpoints() - - // this has to be done at the root of the app, that way it can - // 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() - - // also has to be done here - useSetupIframeOnce(isIframe) - - const [{ isOver, canDrop }, connectFileDrop] = useDrop({ - accept: [NativeTypes.FILE], - drop: (item: DroppableThing): void => { - // console.log("DROP", item) - openFiles(item.files) - }, - collect: (monitor) => ({ - isOver: monitor.isOver(), - canDrop: monitor.canDrop(), - }), - }) - - connectFileDrop(ref) - - const setHasBetaAccess = useUI((s) => s.setHasBetaAccess) - - const searchParams = useSearchParams() - const hasBetaAccess = searchParams.get('beta') === 'true' - useEffect(() => { - setHasBetaAccess(hasBetaAccess) - }, [hasBetaAccess, setHasBetaAccess]) - - useQueryStringLoader() - - const iframeLayout = ( - <> - - - - ) - - const gridLayout = ( - - - - - - {showExplorer && ( - - - - )} - {showExplorer && showVideoPlayer && } - {showVideoPlayer && ( - - - - )} - - - - - - - - - - {showAssistant && } - {showAssistant && ( - - - - )} - - ) - - const flyingLayout = ( - - - - - - - - - - - - - - - - - - - - - - - - - - ( - <> - - - )} - > - - - - ) - - const welcomeScreen = ( -
-
-
- To get started please open the menu -
-
- Then open an example -
-
-

- Welcome to{' '} - - Clapper - - . -

-
-

A free and open-source AI video editor,

-

designed for the age of generative filmmaking.

-
-
-
-
- ) - - return ( -
- -
- {isIframe - ? iframeLayout - : windowLayout === UIWindowLayout.FLYING - ? flyingLayout - : gridLayout} -
- - {!isIframe && isMd && welcomeScreen} - - - - - {!isIframe && windowLayout === UIWindowLayout.GRID && } -
- ) -} - -function fallbackRender({ error, resetErrorBoundary }: FallbackProps) { - // Call resetErrorBoundary() to reset the error boundary and retry the render. - - return ( -
-

Something went wrong:

- 
{error.message}
-
- ) -} - -export function Main( - { - mode = ClapperIntegrationMode.APP, - }: { - mode: ClapperIntegrationMode - } = { - mode: ClapperIntegrationMode.APP, - } -) { - return ( - - - - - - - - ) -} diff --git a/packages/app/src/components/core/tree/roving.tsx b/packages/app/src/components/core/tree/roving.tsx index 73d71cf1..4125ee33 100644 --- a/packages/app/src/components/core/tree/roving.tsx +++ b/packages/app/src/components/core/tree/roving.tsx @@ -95,7 +95,7 @@ export function RovingTabindexRoot({ { + onFocus={(e: any) => { if (e.target !== e.currentTarget) return if (isShiftTabbing) return const orderedItems = getOrderedItems() @@ -110,8 +110,8 @@ export function RovingTabindexRoot({ focusFirst(candidates) }} onBlur={() => setIsShiftTabbing(false)} - ref={rootRef} - {...props} + ref={rootRef as any} + {...(props as any)} > {children} diff --git a/packages/broadway/package.json b/packages/broadway/package.json index 8031bccd..f812e9ca 100644 --- a/packages/broadway/package.json +++ b/packages/broadway/package.json @@ -21,7 +21,7 @@ "bun-types": "latest", "prettier": "^3.3.3", "rimraf": "^6.0.1", - "typescript": "5.5.2" + "typescript": "5.8.3" }, "repository": { "type": "git", diff --git a/packages/clap/package.json b/packages/clap/package.json index 2a721fd7..363243e1 100644 --- a/packages/clap/package.json +++ b/packages/clap/package.json @@ -18,15 +18,15 @@ "bun-types": "latest", "prettier": "^3.3.3", "rimraf": "^6.0.1", - "typescript": "5.5.2" + "typescript": "5.8.3" }, "peerDependencies": { "yaml": "^2.5.0" }, "dependencies": { "pure-uuid": "^1.8.1", - "ts-patch": "3.2.1", - "typescript-transform-paths": "3.5.2" + "ts-patch": "3.3.0", + "typescript-transform-paths": "3.5.5" }, "repository": { "type": "git", diff --git a/packages/clapper-services/package.json b/packages/clapper-services/package.json index ac38dfe5..1429166e 100644 --- a/packages/clapper-services/package.json +++ b/packages/clapper-services/package.json @@ -20,7 +20,7 @@ "bun-types": "latest", "prettier": "^3.3.3", "rimraf": "^6.0.1", - "typescript": "5.5.2" + "typescript": "5.8.3" }, "peerDependencies": { "@aitube/clap": "workspace:*", diff --git a/packages/client/package.json b/packages/client/package.json index 096601b5..d9ce4368 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -18,7 +18,7 @@ "bun-types": "latest", "prettier": "^3.3.3", "rimraf": "^6.0.1", - "typescript": "5.5.2" + "typescript": "5.8.3" }, "repository": { "type": "git", diff --git a/packages/colors/package.json b/packages/colors/package.json index a437bcb1..821efe2d 100644 --- a/packages/colors/package.json +++ b/packages/colors/package.json @@ -18,7 +18,7 @@ "bun-types": "latest", "prettier": "^3.3.3", "rimraf": "^6.0.1", - "typescript": "5.5.2" + "typescript": "5.8.3" }, "repository": { "type": "git", diff --git a/packages/engine/package.json b/packages/engine/package.json index 6d8d0dbc..b1e41042 100644 --- a/packages/engine/package.json +++ b/packages/engine/package.json @@ -18,7 +18,7 @@ "bun-types": "latest", "prettier": "^3.3.3", "rimraf": "^6.0.1", - "typescript": "5.5.2" + "typescript": "5.8.3" }, "repository": { "type": "git", diff --git a/packages/io/package.json b/packages/io/package.json index fc416af3..d49b05f1 100644 --- a/packages/io/package.json +++ b/packages/io/package.json @@ -18,7 +18,7 @@ "bun-types": "latest", "prettier": "^3.2.5", "rimraf": "^5.0.7", - "typescript": "^5.4.5" + "typescript": "5.8.3" }, "dependencies": { "mime-types": "^2.1.35", diff --git a/packages/timeline/package.json b/packages/timeline/package.json index a7ae8d53..3bcfe2b8 100644 --- a/packages/timeline/package.json +++ b/packages/timeline/package.json @@ -32,8 +32,8 @@ "postcss": "8.4.41", "prettier": "3.3.3", "rimraf": "6.0.1", - "typescript": "5.5.2", - "vite": "5.3.4" + "typescript": "5.8.3", + "vite": "7.0.0" }, "dependencies": { "@aitube/clap": "workspace:*", From ff7b5e5d8b6c073c58a6610da4f0113e3198a796 Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Wed, 2 Jul 2025 15:29:58 +0200 Subject: [PATCH 05/10] next build doesn't work with Bun.. great MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- Dockerfile | 20 +++++++++++++------- packages/app/next.config.js | 10 +++++++++- packages/app/package.json | 2 +- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/Dockerfile b/Dockerfile index 43b860d5..6f16042d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,12 @@ -FROM oven/bun:canary-alpine +# Due to a bug in Bun or Next 🤷‍♂️ we are unable to build the app using only Bun +# to fix this, we use a Docker image that contains both Bun and Node + +# a lot of people have the same issue but the Bun team closed the ticket 🤷‍♂️ +# https://github.com/oven-sh/bun/issues/8725 +FROM imbios/bun-node:latest-current-alpine-git + +# if the Bun team decides to fix the bug one day 🤷‍♂️ then we will be able to use this instead: +# FROM oven/bun:alpine ARG DEBIAN_FRONTEND=noninteractive @@ -18,13 +26,13 @@ RUN apk add font-arabic-misc font-inconsolata font-dejavu font-awesome RUN apk add ttf-opensans # For Puppeteer -# DISABLEd - we don't actually need Puppeteer on Clapper right now +# DISABLED: we don't actually need Puppeteer on Clapper right now # RUN apk add build-base gcompat udev chromium RUN apk add --no-cache ffmpeg -# Set up a new user named "user" with user ID 1000 -RUN adduser --disabled-password --uid 1001 user +# Set up a new user named "user" with user ID 1002 +RUN adduser --disabled-password --uid 1002 user # Switch to the "user" user USER user @@ -50,9 +58,7 @@ COPY --chown=user . /app RUN bun i -# this step can be done by the developer, -# and the file uploaded using HF CLI tools -# RUN bun run build +RUN bun run build EXPOSE 3000 diff --git a/packages/app/next.config.js b/packages/app/next.config.js index 14ee80f0..2665559f 100644 --- a/packages/app/next.config.js +++ b/packages/app/next.config.js @@ -5,6 +5,10 @@ import { fileURLToPath } from "node:url"; const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file const __dirname = dirname(__filename); // get the name of the directory +process.on('unhandledRejection', error => { + console.log('unhandledRejection', error); +}); + const nextConfig = { output: 'standalone', @@ -16,7 +20,11 @@ const nextConfig = { serverActions: { // a clap file can be quite large - but that's OK bodySizeLimit: '32mb' - } + }, + + + // https://nextjs.org/docs/app/guides/memory-usage#try-experimentalwebpackmemoryoptimizations + webpackMemoryOptimizations: true }, images: { // temporary fix for: diff --git a/packages/app/package.json b/packages/app/package.json index b2c1e29d..e0dbd265 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -15,7 +15,7 @@ "scripts": { "dev": "bun run checks && next dev", "clean": "rm -Rf .next && rm -Rf node_modules", - "build": "bun run prepare && bun run checks && rm -Rf out && next build && bun run build:copyassets", + "build": "bun run prepare && bun run checks && rm -Rf out && next build -d && bun run build:copyassets", "build:copyassets": "cp -R public .next/standalone/packages/app/public && cp -R .next/static .next/standalone/packages/app/.next/static", "prepare": "cp -R ../../node_modules/mediainfo.js/dist/MediaInfoModule.wasm public/wasm/", "start": "next start", From aaa92c53260fbbb57f9b793410faa7c3200ecced Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Wed, 2 Jul 2025 16:15:32 +0200 Subject: [PATCH 06/10] more progressive build --- Dockerfile | 14 +++++++++++++- .../components/dialogs/iframe-warning/index.tsx | 1 - 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index 6f16042d..506bbd4d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -58,7 +58,19 @@ COPY --chown=user . /app RUN bun i -RUN bun run build +# we can use this all-in-one command, but it might timeout +#RUN bun run build + +# this allows for a finer grained control +RUN bun run build:clap +RUN bun run build:timeline +RUN bun run build:client +RUN bun run build:io +RUN bun run build:colors +RUN bun run build:engine +RUN bun run build:broadway +RUN bun run build:clapper-services +RUN bun run build:app EXPOSE 3000 diff --git a/packages/app/src/components/dialogs/iframe-warning/index.tsx b/packages/app/src/components/dialogs/iframe-warning/index.tsx index 43085f36..88524f91 100644 --- a/packages/app/src/components/dialogs/iframe-warning/index.tsx +++ b/packages/app/src/components/dialogs/iframe-warning/index.tsx @@ -13,7 +13,6 @@ export function IframeWarning() { setShowWarning(window.self !== window.top) return () => {} }, []) - // TODO: read our global state return (
Date: Wed, 2 Jul 2025 16:25:43 +0200 Subject: [PATCH 07/10] build sometimes randomly fails.. so frustrating.. --- packages/app/next.config.js | 3 ++- packages/app/package.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app/next.config.js b/packages/app/next.config.js index 2665559f..33ac5839 100644 --- a/packages/app/next.config.js +++ b/packages/app/next.config.js @@ -24,7 +24,8 @@ const nextConfig = { // https://nextjs.org/docs/app/guides/memory-usage#try-experimentalwebpackmemoryoptimizations - webpackMemoryOptimizations: true + // I suspect this might sometimes crash the build of the app + webpackMemoryOptimizations: false // let's set it to false }, images: { // temporary fix for: diff --git a/packages/app/package.json b/packages/app/package.json index e0dbd265..d0d64bb8 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -16,6 +16,7 @@ "dev": "bun run checks && next dev", "clean": "rm -Rf .next && rm -Rf node_modules", "build": "bun run prepare && bun run checks && rm -Rf out && next build -d && bun run build:copyassets", + "build:faster": "bun run prepare && rm -Rf out && next build && bun run build:copyassets", "build:copyassets": "cp -R public .next/standalone/packages/app/public && cp -R .next/static .next/standalone/packages/app/.next/static", "prepare": "cp -R ../../node_modules/mediainfo.js/dist/MediaInfoModule.wasm public/wasm/", "start": "next start", From 9c3155f663f52aef415a315a88ed3ad3624817b9 Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Wed, 2 Jul 2025 18:25:34 +0200 Subject: [PATCH 08/10] upgrading some of the dependencies --- bun.lock | 4 +- package.json | 11 +- packages/app/package.json | 148 +++++++++--------- .../providers/huggingface/generateImage.ts | 45 +++--- .../providers/huggingface/generateMusic.ts | 4 +- .../providers/huggingface/generateVoice.ts | 4 +- .../resolve/providers/huggingface/index.ts | 2 +- .../api/resolve/providers/lumalabs/index.ts | 1 + packages/app/src/app/embed/EmbeddedPlayer.tsx | 6 +- .../app/src/components/core/tree/index.tsx | 6 +- .../dialogs/iframe-warning/index.tsx | 8 + .../monitor/DynamicPlayer/DynamicBuffer.tsx | 2 + .../src/components/monitor/VUMeter/index.tsx | 2 +- .../app/src/components/settings/index.tsx | 2 + packages/app/src/components/ui/menubar.tsx | 28 ++-- packages/app/src/components/windows/index.tsx | 1 + .../src/components/wizards/project/index.tsx | 2 + .../app/src/lib/hooks/useAnimationFrame.ts | 4 +- packages/app/src/lib/hooks/useDebounceFn.ts | 4 +- .../src/services/renderer/useRenderLoop.ts | 6 +- packages/app/src/services/windows/types.ts | 2 + .../timeline/src/hooks/useAnimationFrame.ts | 4 +- 22 files changed, 170 insertions(+), 126 deletions(-) diff --git a/bun.lock b/bun.lock index 485c34f7..ab2fada5 100644 --- a/bun.lock +++ b/bun.lock @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:71174e5b6757e39bb38b1f9e58a560d89c477cd5f290a7d28bd2d1220fe4a57e -size 532001 +oid sha256:ac0951c9bdb2ced99b7523a551c99f83a374491a57c1afaf31332ff22edeb69a +size 531419 diff --git a/package.json b/package.json index 98a3a7e7..bf2976e5 100644 --- a/package.json +++ b/package.json @@ -38,8 +38,17 @@ }, "trustedDependencies": [ "@aitube/clapper", + "bufferutil", + "electron", + "electron-winstaller", + "esbuild", + "fs-xattr", + "macos-alias", + "msw", "onnxruntime-node", - "protobufjs" + "protobufjs", + "sharp", + "unrs-resolver" ], "workspaces": [ "packages/clap", diff --git a/packages/app/package.json b/packages/app/package.json index d0d64bb8..80c69d5d 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -18,7 +18,9 @@ "build": "bun run prepare && bun run checks && rm -Rf out && next build -d && bun run build:copyassets", "build:faster": "bun run prepare && rm -Rf out && next build && bun run build:copyassets", "build:copyassets": "cp -R public .next/standalone/packages/app/public && cp -R .next/static .next/standalone/packages/app/.next/static", - "prepare": "cp -R ../../node_modules/mediainfo.js/dist/MediaInfoModule.wasm public/wasm/", + "prepare": "bun run prepare:prod", + "prepare:dev": "cp ../../node_modules/mediainfo.js/dist/MediaInfoModule.wasm src/services/io/", + "prepare:prod": "cp ../../node_modules/mediainfo.js/dist/MediaInfoModule.wasm public/wasm/", "start": "next start", "start:prod": "bun .next/standalone/packages/app/server.js", "checks": "bun run format:fix && bun run lint", @@ -44,12 +46,12 @@ "@aitube/engine": "workspace:*", "@aitube/timeline": "workspace:*", "@fal-ai/serverless-client": "0.14.2", - "@ffmpeg/ffmpeg": "0.12.10", - "@ffmpeg/util": "0.12.1", - "@gradio/client": "1.8.0", - "@huggingface/hub": "0.15.1", - "@huggingface/inference": "2.8.1", - "@huggingface/transformers": "3.0.2", + "@ffmpeg/ffmpeg": "0.12.15", + "@ffmpeg/util": "0.12.2", + "@gradio/client": "1.15.4", + "@huggingface/hub": "2.2.0", + "@huggingface/inference": "4.3.0", + "@huggingface/transformers": "3.6.1", "@langchain/anthropic": "0.3.8", "@langchain/cohere": "0.3.1", "@langchain/core": "0.3.18", @@ -57,7 +59,7 @@ "@langchain/groq": "0.1.2", "@langchain/mistralai": "0.2.0", "@langchain/openai": "0.3.14", - "@monaco-editor/react": "4.6.0", + "@monaco-editor/react": "4.7.0", "@radix-ui/react-accordion": "1.1.2", "@radix-ui/react-avatar": "1.0.4", "@radix-ui/react-checkbox": "1.0.4", @@ -84,36 +86,36 @@ "@react-three/fiber": "9.1.4", "@react-three/uikit": "0.8.4", "@react-three/uikit-lucide": "0.8.4", - "@saintno/comfyui-sdk": "0.2.29", + "@saintno/comfyui-sdk": "0.2.47", "@tailwindcss/container-queries": "0.1.1", - "@types/dom-speech-recognition": "0.0.4", + "@types/dom-speech-recognition": "0.0.6", "@types/pngjs": "6.0.5", - "@xyflow/react": "12.3.5", - "autoprefixer": "10.4.20", + "@xyflow/react": "12.8.1", + "autoprefixer": "10.4.21", "base64-arraybuffer": "1.0.2", - "bellhop-iframe": "3.5.0", + "bellhop-iframe": "3.6.0", "civitai": "0.1.15", - "class-variance-authority": "0.7.0", + "class-variance-authority": "0.7.1", "clsx": "2.1.1", - "cmdk": "0.2.1", - "comfydeploy": "0.0.21", - "date-fns": "3.6.0", - "dotenv": "16.4.5", + "cmdk": "1.1.1", + "comfydeploy": "2.2.1", + "date-fns": "4.1.0", + "dotenv": "17.0.1", "fflate": "0.8.2", "fluent-ffmpeg": "2.1.3", - "framer-motion": "11.3.31", - "fs-extra": "11.2.0", + "framer-motion": "12.23.0", + "fs-extra": "11.3.0", "is-hotkey": "0.2.0", - "lucide-react": "0.438.0", - "lumaai": "1.0.2", + "lucide-react": "0.525.0", + "lumaai": "1.15.0", "mediainfo.js": "0.3.2", "mlt-xml": "2.0.2", - "monaco-editor": "0.51.0", + "monaco-editor": "0.52.2", "next": "15.3.4", "next-themes": "0.4.6", "pngjs": "7.0.0", - "qs": "6.13.0", - "query-string": "9.1.0", + "qs": "6.14.0", + "query-string": "9.2.1", "react": "*", "react-device-frameset": "1.3.4", "react-dnd": "16.0.1", @@ -126,75 +128,75 @@ "react-icons": "5.5.0", "react-markdown": "10.1.0", "react-reflex": "4.2.7", - "react-speakup": "1.0.0", - "remark-gfm": "4.0.0", + "react-speakup": "1.1.2", + "remark-gfm": "4.0.1", "replicate": "0.32.0", - "sharp": "0.33.4", + "sharp": "0.34.2", "sonner": "1.5.0", "tailwind-merge": "2.5.2", "tailwindcss-animate": "1.0.7", "three": "0.164.1", "ts-node": "10.9.2", - "use-file-picker": "2.1.2", + "use-file-picker": "2.1.4", "usehooks-ts": "2.14.0", "uuid": "9.0.1", - "web-audio-beat-detector": "8.2.12", + "web-audio-beat-detector": "8.2.29", "yaml": "2.6.1", "zustand": "4.5.2", - "zx": "8.1.4" + "zx": "8.6.1" }, "devDependencies": { - "@electron-forge/cli": "7.4.0", - "@electron-forge/maker-deb": "7.4.0", - "@electron-forge/maker-dmg": "7.4.0", - "@electron-forge/maker-rpm": "7.4.0", - "@electron-forge/maker-squirrel": "7.4.0", - "@electron-forge/maker-zip": "7.4.0", - "@electron-forge/plugin-auto-unpack-natives": "7.4.0", - "@electron-forge/publisher-github": "7.4.0", - "@playwright/test": "1.45.1", - "@testing-library/react": "16.0.0", + "@electron-forge/cli": "7.8.1", + "@electron-forge/maker-deb": "7.8.1", + "@electron-forge/maker-dmg": "7.8.1", + "@electron-forge/maker-rpm": "7.8.1", + "@electron-forge/maker-squirrel": "7.8.1", + "@electron-forge/maker-zip": "7.8.1", + "@electron-forge/plugin-auto-unpack-natives": "7.8.1", + "@electron-forge/publisher-github": "7.8.1", + "@playwright/test": "1.53.2", + "@testing-library/react": "16.3.0", "@types/fluent-ffmpeg": "2.1.24", "@types/is-hotkey": "0.1.10", "@types/lodash": "4.17.7", - "@types/node": "20", - "@types/react": "18", - "@types/react-dom": "18", + "@types/node": "22", + "@types/react": "*", + "@types/react-dom": "*", "@types/uuid": "9.0.8", - "@vitejs/plugin-react": "4.3.1", - "@webgpu/types": "0.1.44", - "electron": "31.2.1", - "eslint": "8", - "eslint-config-next": "14.2.5", - "eslint-config-prettier": "9.1.0", - "jsdom": "24.1.0", - "node-gyp": "10.2.0", - "postcss": "8", - "prettier": "3.3.3", + "@vitejs/plugin-react": "4.6.0", + "@webgpu/types": "0.1.63", + "electron": "37.1.0", + "eslint": "9.30.1", + "eslint-config-next": "15.3.4", + "eslint-config-prettier": "10.1.5", + "jsdom": "26.1.0", + "node-gyp": "11.2.0", + "postcss": "8.5.6", + "prettier": "3.6.2", "prettier-plugin-tailwindcss": "0.6.5", "tailwind-scrollbar": "3.1.0", "tailwindcss": "3.4.3", "typescript": "5.8.3", - "vitest": "2.0.2" + "vitest": "3.2.4" }, "optionalDependencies": { - "@img/sharp-darwin-arm64": "0.33.4", - "@img/sharp-darwin-x64": "0.33.4", - "@img/sharp-libvips-darwin-arm64": "1.0.2", - "@img/sharp-libvips-darwin-x64": "1.0.2", - "@img/sharp-libvips-linux-arm": "1.0.2", - "@img/sharp-libvips-linux-arm64": "1.0.2", - "@img/sharp-libvips-linux-x64": "1.0.2", - "@img/sharp-libvips-linuxmusl-arm64": "1.0.2", - "@img/sharp-libvips-linuxmusl-x64": "1.0.2", - "@img/sharp-libvips-win32-ia32": "1.0.2", - "@img/sharp-libvips-win32-x64": "1.0.2", - "@img/sharp-linux-arm": "0.33.4", - "@img/sharp-linux-arm64": "0.33.4", - "@img/sharp-linux-x64": "0.33.4", - "@img/sharp-linuxmusl-arm64": "0.33.4", - "@img/sharp-linuxmusl-x64": "0.33.4", - "@img/sharp-win32-ia32": "0.33.4", - "@img/sharp-win32-x64": "0.33.4" + "@img/sharp-darwin-arm64": "0.34.2", + "@img/sharp-darwin-x64": "0.34.2", + "@img/sharp-libvips-darwin-arm64": "1.1.0", + "@img/sharp-libvips-darwin-x64": "1.1.0", + "@img/sharp-libvips-linux-arm": "1.1.0", + "@img/sharp-libvips-linux-arm64": "1.1.0", + "@img/sharp-libvips-linux-x64": "1.1.0", + "@img/sharp-libvips-linuxmusl-arm64": "1.1.0", + "@img/sharp-libvips-linuxmusl-x64": "1.1.0", + "@img/sharp-libvips-win32-ia32": "1.1.0", + "@img/sharp-libvips-win32-x64": "1.1.0", + "@img/sharp-linux-arm": "0.34.2", + "@img/sharp-linux-arm64": "0.34.2", + "@img/sharp-linux-x64": "0.34.2", + "@img/sharp-linuxmusl-arm64": "0.34.2", + "@img/sharp-linuxmusl-x64": "0.34.2", + "@img/sharp-win32-ia32": "0.34.2", + "@img/sharp-win32-x64": "0.34.2" } } diff --git a/packages/app/src/app/api/resolve/providers/huggingface/generateImage.ts b/packages/app/src/app/api/resolve/providers/huggingface/generateImage.ts index f577cc85..b7062a9d 100644 --- a/packages/app/src/app/api/resolve/providers/huggingface/generateImage.ts +++ b/packages/app/src/app/api/resolve/providers/huggingface/generateImage.ts @@ -1,4 +1,4 @@ -import { HfInference, HfInferenceEndpoint } from '@huggingface/inference' +import { InferenceClient } from '@huggingface/inference' import { decodeOutput } from '@/lib/utils/decodeOutput' import { ResolveRequest } from '@aitube/clapper-services' @@ -40,29 +40,34 @@ export async function generateImage(request: ResolveRequest): Promise { } } - const hf: HfInferenceEndpoint = new HfInference(apiKey) + const hf = new InferenceClient(apiKey) - const blob: Blob = await hf.textToImage({ - model: request.settings.imageGenerationWorkflow.data, - inputs: request.prompts.image.positive, - parameters: { - height: request.meta.height, - width: request.meta.width, + const blob: Blob = await hf.textToImage( + { + model: request.settings.imageGenerationWorkflow.data, + inputs: request.prompts.image.positive, + parameters: { + height: request.meta.height, + width: request.meta.width, - // this triggers the following exception: - // Error: __call__() got an unexpected keyword argument 'negative_prompt' - // negative_prompt: request.prompts.image.negative || '', + // this triggers the following exception: + // Error: __call__() got an unexpected keyword argument 'negative_prompt' + // negative_prompt: request.prompts.image.negative || '', - /** - * The number of denoising steps. More denoising steps usually lead to a higher quality image at the expense of slower inference. - */ - // num_inference_steps?: number; - /** - * Guidance scale: Higher guidance scale encourages to generate images that are closely linked to the text `prompt`, usually at the expense of lower image quality. - */ - // guidance_scale?: number; + /** + * The number of denoising steps. More denoising steps usually lead to a higher quality image at the expense of slower inference. + */ + // num_inference_steps?: number; + /** + * Guidance scale: Higher guidance scale encourages to generate images that are closely linked to the text `prompt`, usually at the expense of lower image quality. + */ + // guidance_scale?: number; + }, }, - }) + { + outputType: 'blob', + } + ) // console.log('output from Hugging Face Inference API:', blob) diff --git a/packages/app/src/app/api/resolve/providers/huggingface/generateMusic.ts b/packages/app/src/app/api/resolve/providers/huggingface/generateMusic.ts index 5373cb9a..7ba08e1c 100644 --- a/packages/app/src/app/api/resolve/providers/huggingface/generateMusic.ts +++ b/packages/app/src/app/api/resolve/providers/huggingface/generateMusic.ts @@ -1,4 +1,4 @@ -import { HfInference, HfInferenceEndpoint } from '@huggingface/inference' +import { InferenceClient } from '@huggingface/inference' import { ResolveRequest } from '@aitube/clapper-services' import { @@ -37,7 +37,7 @@ export async function generateMusic(request: ResolveRequest): Promise { } } - const hf: HfInferenceEndpoint = new HfInference(apiKey) + const hf = new InferenceClient(apiKey) /* hf.textToMusic doesn't exist yet! diff --git a/packages/app/src/app/api/resolve/providers/huggingface/generateVoice.ts b/packages/app/src/app/api/resolve/providers/huggingface/generateVoice.ts index 171812d1..9136480a 100644 --- a/packages/app/src/app/api/resolve/providers/huggingface/generateVoice.ts +++ b/packages/app/src/app/api/resolve/providers/huggingface/generateVoice.ts @@ -1,4 +1,4 @@ -import { HfInference, HfInferenceEndpoint } from '@huggingface/inference' +import { InferenceClient } from '@huggingface/inference' import { ResolveRequest } from '@aitube/clapper-services' import { @@ -37,7 +37,7 @@ export async function generateVoice(request: ResolveRequest): Promise { } } - const hf: HfInferenceEndpoint = new HfInference(apiKey) + const hf = new InferenceClient(apiKey) const blob: Blob = await hf.textToSpeech({ model: request.settings.voiceGenerationWorkflow.data, diff --git a/packages/app/src/app/api/resolve/providers/huggingface/index.ts b/packages/app/src/app/api/resolve/providers/huggingface/index.ts index 319dd1a6..7fb05424 100644 --- a/packages/app/src/app/api/resolve/providers/huggingface/index.ts +++ b/packages/app/src/app/api/resolve/providers/huggingface/index.ts @@ -1,4 +1,4 @@ -import { HfInference, HfInferenceEndpoint } from '@huggingface/inference' +import { InferenceClient } from '@huggingface/inference' import { ResolveRequest } from '@aitube/clapper-services' import { ClapSegmentCategory } from '@aitube/clap' diff --git a/packages/app/src/app/api/resolve/providers/lumalabs/index.ts b/packages/app/src/app/api/resolve/providers/lumalabs/index.ts index 0baf37dd..69a9e6b8 100644 --- a/packages/app/src/app/api/resolve/providers/lumalabs/index.ts +++ b/packages/app/src/app/api/resolve/providers/lumalabs/index.ts @@ -57,6 +57,7 @@ export async function resolveSegment( aspect_ratio: aspectRatio, prompt: request.prompts.image.positive || '', + model: 'ray-flash-2', } // Luma crashes (and spends our money :/) if keyframes is an empty array diff --git a/packages/app/src/app/embed/EmbeddedPlayer.tsx b/packages/app/src/app/embed/EmbeddedPlayer.tsx index 7227b24b..ea46cbbf 100644 --- a/packages/app/src/app/embed/EmbeddedPlayer.tsx +++ b/packages/app/src/app/embed/EmbeddedPlayer.tsx @@ -16,7 +16,7 @@ export function EmbeddedPlayer() { const [isOverlayVisible, setOverlayVisible] = useState(true) - const overlayTimerRef = useRef() + const overlayTimerRef = useRef(null) // const videoLayerRef = useRef(null) // const segmentationLayerRef = useRef(null) @@ -24,12 +24,12 @@ export function EmbeddedPlayer() { isPlayingRef.current = isPlaying const scheduleOverlayInvisibility = () => { - clearTimeout(overlayTimerRef.current) + clearTimeout(overlayTimerRef.current!) overlayTimerRef.current = setTimeout(() => { if (isPlayingRef.current) { setOverlayVisible(!isPlayingRef.current) } - clearTimeout(overlayTimerRef.current) + clearTimeout(overlayTimerRef.current!) }, 3000) } diff --git a/packages/app/src/components/core/tree/index.tsx b/packages/app/src/components/core/tree/index.tsx index 7626b126..f365513e 100644 --- a/packages/app/src/components/core/tree/index.tsx +++ b/packages/app/src/components/core/tree/index.tsx @@ -148,7 +148,9 @@ export function Node({ }, }} {...treeGroupProps} - className={cn('pl-3')} + // we can't use a className here work for some reason, + // sqo I've moved this to line 166 + // className={cn('pl-3')} > ({ // let's just hid it for flex-nowrap `opacity-0`, + `ml-3`, + `absolute bottom-0 left-3.5 top-[31px] z-[-1] h-[calc(100%-30px)] -translate-x-1/2 transform` )} key={node.id + 'line'} diff --git a/packages/app/src/components/dialogs/iframe-warning/index.tsx b/packages/app/src/components/dialogs/iframe-warning/index.tsx index 88524f91..5add391a 100644 --- a/packages/app/src/components/dialogs/iframe-warning/index.tsx +++ b/packages/app/src/components/dialogs/iframe-warning/index.tsx @@ -5,6 +5,14 @@ import { cn } from '@/lib/utils' import { useTheme } from '@/services' import { useEffect, useState } from 'react' +/** + * When Clapper is hosted in a space, using the fingers to scroll in the timeline + * make the page go back to the previous one, so the user loses all their data + * + * obviously people aren't happy about this, so with a heavy heart I took the decision + * to disable clapper on Hugging Face (I'll try to see of there are alternative solutions, maybe using the original subdomain) + * @returns + */ export function IframeWarning() { const [showWarning, setShowWarning] = useState(false) const theme = useTheme() diff --git a/packages/app/src/components/monitor/DynamicPlayer/DynamicBuffer.tsx b/packages/app/src/components/monitor/DynamicPlayer/DynamicBuffer.tsx index 1da1db7b..9e04bba3 100644 --- a/packages/app/src/components/monitor/DynamicPlayer/DynamicBuffer.tsx +++ b/packages/app/src/components/monitor/DynamicPlayer/DynamicBuffer.tsx @@ -1,5 +1,7 @@ 'use client' +import { JSX } from 'react' + import { ClapOutputType, ClapSegment } from '@aitube/clap' import { cn } from '@/lib/utils' diff --git a/packages/app/src/components/monitor/VUMeter/index.tsx b/packages/app/src/components/monitor/VUMeter/index.tsx index fa9528bd..a801e36f 100644 --- a/packages/app/src/components/monitor/VUMeter/index.tsx +++ b/packages/app/src/components/monitor/VUMeter/index.tsx @@ -41,7 +41,7 @@ export function VUMeter({ className = 'w-24 h-full' }) { const leftMeterRef = useRef(null) const rightMeterRef = useRef(null) const prevActiveBoxesRef = useRef({ left: 0, right: 0 }) - const animationFrameRef = useRef() + const animationFrameRef = useRef(null) useEffect(() => { if (!audioContext) return diff --git a/packages/app/src/components/settings/index.tsx b/packages/app/src/components/settings/index.tsx index 5ab0db5b..0f8f52ee 100644 --- a/packages/app/src/components/settings/index.tsx +++ b/packages/app/src/components/settings/index.tsx @@ -1,3 +1,5 @@ +import { JSX } from 'react' + import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogFooter } from '@/components/ui/dialog' import { ScrollArea } from '@/components/ui/scroll-area' diff --git a/packages/app/src/components/ui/menubar.tsx b/packages/app/src/components/ui/menubar.tsx index 23acd2dd..95f91e91 100644 --- a/packages/app/src/components/ui/menubar.tsx +++ b/packages/app/src/components/ui/menubar.tsx @@ -147,40 +147,46 @@ const Menubar = React.forwardRef< return React.Children.map(items, (child) => { if (React.isValidElement(child)) { if (child.type === MenubarMenu) { - const trigger = child.props.children.find( + const trigger = (child.props as any).children.find( (c: React.ReactElement) => c.type === MenubarTrigger ) - const content = child.props.children.find( + const content = (child.props as any).children.find( (c: React.ReactElement) => c.type === MenubarContent ) return ( - - {renderMobileMenuItems(content.props.children, depth + 1)} + + {renderMobileMenuItems( + (content.props as any).children, + depth + 1 + )} ) } else if (child.type === MenubarItem) { return ( { - if (child.props.onClick) { - child.props.onClick() + if ((child.props as any).onClick) { + ;(child.props as any).onClick() } setIsMobileMenuOpen(false) }} /> ) } else if (child.type === MenubarSub) { - const subTrigger = child.props.children.find( + const subTrigger = (child.props as any).children.find( (c: React.ReactElement) => c.type === MenubarSubTrigger ) - const subContent = child.props.children.find( + const subContent = (child.props as any).children.find( (c: React.ReactElement) => c.type === MenubarSubContent ) return ( - - {renderMobileMenuItems(subContent.props.children, depth + 1)} + + {renderMobileMenuItems( + (subContent.props as any).children, + depth + 1 + )} ) } else if (child.type === MenubarSeparator) { diff --git a/packages/app/src/components/windows/index.tsx b/packages/app/src/components/windows/index.tsx index 757dc00a..1ad1fa60 100644 --- a/packages/app/src/components/windows/index.tsx +++ b/packages/app/src/components/windows/index.tsx @@ -5,6 +5,7 @@ import React, { useEffect, useMemo, memo, + JSX, } from 'react' import { IoClose } from 'react-icons/io5' import { LuPanelTopClose, LuPanelTopOpen } from 'react-icons/lu' diff --git a/packages/app/src/components/wizards/project/index.tsx b/packages/app/src/components/wizards/project/index.tsx index 8d15396c..4c8dc669 100644 --- a/packages/app/src/components/wizards/project/index.tsx +++ b/packages/app/src/components/wizards/project/index.tsx @@ -1,3 +1,5 @@ +import { JSX } from 'react' + import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogFooter } from '@/components/ui/dialog' import { ScrollArea } from '@/components/ui/scroll-area' diff --git a/packages/app/src/lib/hooks/useAnimationFrame.ts b/packages/app/src/lib/hooks/useAnimationFrame.ts index 1c79f10c..2d0985a1 100644 --- a/packages/app/src/lib/hooks/useAnimationFrame.ts +++ b/packages/app/src/lib/hooks/useAnimationFrame.ts @@ -6,8 +6,8 @@ export function useAnimationFrame( ) { // Use useRef for mutable variables that we want to persist // without triggering a re-render on their change - const requestRef = useRef() - const previousTimeRef = useRef() + const requestRef = useRef(null) + const previousTimeRef = useRef(null) const animate = (time: number) => { if (previousTimeRef.current != undefined) { diff --git a/packages/app/src/lib/hooks/useDebounceFn.ts b/packages/app/src/lib/hooks/useDebounceFn.ts index 0a73dfdd..d26581d3 100644 --- a/packages/app/src/lib/hooks/useDebounceFn.ts +++ b/packages/app/src/lib/hooks/useDebounceFn.ts @@ -13,7 +13,7 @@ export function useDebounceFn( func: Func, delay = 1000 ) { - const timer = useRef() + const timer = useRef(null) useEffect(() => { return () => { @@ -26,7 +26,7 @@ export function useDebounceFn( const newTimer = setTimeout(() => { func(...args) }, delay) - clearTimeout(timer.current) + clearTimeout(timer.current!) timer.current = newTimer }) as Func diff --git a/packages/app/src/services/renderer/useRenderLoop.ts b/packages/app/src/services/renderer/useRenderLoop.ts index 86393a42..27b2c675 100644 --- a/packages/app/src/services/renderer/useRenderLoop.ts +++ b/packages/app/src/services/renderer/useRenderLoop.ts @@ -33,7 +33,7 @@ export function useRenderLoop(): void { const currentSegmentKey = useRenderer((s) => s.currentSegmentKey) const preloadSegmentKey = useRenderer((s) => s.preloadSegmentKey) - const timeoutRef = useRef() + const timeoutRef = useRef(null) const setUserDefinedRenderingStrategies = useRenderer( (s) => s.setUserDefinedRenderingStrategies @@ -65,7 +65,7 @@ export function useRenderLoop(): void { // used to control transitions between buffers useEffect(() => { - clearTimeout(timeoutRef.current) + clearTimeout(timeoutRef.current!) const newActiveBufferNumber = activeBufferNumber === 1 ? 2 : 1 setActiveBufferNumber(newActiveBufferNumber) @@ -86,7 +86,7 @@ export function useRenderLoop(): void { }, fadeDurationInMs) return () => { - clearTimeout(timeoutRef.current) + clearTimeout(timeoutRef.current!) } // eslint-disable-next-line }, [currentSegmentKey, preloadSegmentKey]) diff --git a/packages/app/src/services/windows/types.ts b/packages/app/src/services/windows/types.ts index 162ad415..ebc27a04 100644 --- a/packages/app/src/services/windows/types.ts +++ b/packages/app/src/services/windows/types.ts @@ -1,3 +1,5 @@ +import type { JSX } from 'react' + // Define the window state type export type WindowState = { id: string diff --git a/packages/timeline/src/hooks/useAnimationFrame.ts b/packages/timeline/src/hooks/useAnimationFrame.ts index 6ce441a2..74425a39 100644 --- a/packages/timeline/src/hooks/useAnimationFrame.ts +++ b/packages/timeline/src/hooks/useAnimationFrame.ts @@ -3,8 +3,8 @@ import { DependencyList, useEffect, useRef } from "react" export function useAnimationFrame(callback: (time: number) => void, deps: DependencyList | undefined = []) { // Use useRef for mutable variables that we want to persist // without triggering a re-render on their change - const requestRef = useRef() - const previousTimeRef = useRef() + const requestRef = useRef(null) + const previousTimeRef = useRef(null) const animate = (time: number) => { if (previousTimeRef.current != undefined) { From e63eef724da858c7dcad3844cfe2d3690ceb8b8a Mon Sep 17 00:00:00 2001 From: Julian Bilcke Date: Wed, 2 Jul 2025 19:09:21 +0200 Subject: [PATCH 09/10] upgrade to Tailwind 4 --- bun.lock | 4 +- package.json | 1 + packages/app/package.json | 38 ++++++------ packages/app/postcss.config.js | 3 +- .../src/app/api/assistant/askAnyAssistant.ts | 2 +- packages/app/src/app/embed/EmbeddedPlayer.tsx | 2 +- .../app/src/app/embed/StaticOrInteractive.tsx | 4 +- packages/app/src/app/main.tsx | 6 +- packages/app/src/app/styles/globals.css | 4 +- .../src/app/styles/react-reflex-custom.css | 60 +++++++++++-------- .../src/components/assistant/ChatBubble.tsx | 4 +- .../src/components/core/timeline/Slider.tsx | 6 +- .../app/src/components/core/tree/index.tsx | 12 ++-- .../dialogs/iframe-warning/index.tsx | 2 +- .../src/components/dialogs/loader/index.tsx | 2 +- .../EntityEditor/EntityViewer/EntityList.tsx | 2 +- .../editors/ScriptEditor/styles.css | 22 ++++--- .../app/src/components/forms/FormArea.tsx | 2 +- .../forms/FormComfyUIWorkflowSettings.tsx | 4 +- .../app/src/components/forms/FormSection.tsx | 2 +- .../monitor/DynamicPlayer/index.tsx | 2 +- .../monitor/PlayerControls/index.tsx | 2 +- .../src/components/monitor/VUMeter/index.tsx | 2 +- packages/app/src/components/monitor/index.tsx | 4 +- .../app/src/components/settings/image.tsx | 2 +- .../app/src/components/settings/index.tsx | 8 +-- .../app/src/components/settings/provider.tsx | 2 +- packages/app/src/components/tags/Tag.tsx | 2 +- .../components/toolbars/bottom-bar/index.tsx | 2 +- .../components/toolbars/system-menu/index.tsx | 14 ++--- .../toolbars/top-menu/IsBusy/index.tsx | 2 +- .../top-menu/ToggleFullScreen/index.tsx | 4 +- .../toolbars/top-menu/ToggleView/index.tsx | 4 +- .../top-menu/ToggleWindowLayout/index.tsx | 4 +- .../components/toolbars/top-menu/index.tsx | 6 +- .../toolbars/top-menu/view/index.tsx | 4 +- packages/app/src/components/ui/accordion.tsx | 4 +- packages/app/src/components/ui/alert.tsx | 2 +- packages/app/src/components/ui/badge.tsx | 2 +- packages/app/src/components/ui/button.tsx | 2 +- packages/app/src/components/ui/card.tsx | 4 +- packages/app/src/components/ui/checkbox.tsx | 2 +- packages/app/src/components/ui/command.tsx | 8 +-- packages/app/src/components/ui/dialog.tsx | 8 +-- .../app/src/components/ui/dropdown-menu.tsx | 12 ++-- packages/app/src/components/ui/input.tsx | 2 +- .../app/src/components/ui/menubar-legacy.tsx | 14 ++--- packages/app/src/components/ui/menubar.tsx | 18 +++--- packages/app/src/components/ui/popover.tsx | 2 +- .../app/src/components/ui/scroll-area.tsx | 2 +- packages/app/src/components/ui/select.tsx | 8 +-- packages/app/src/components/ui/sheet.tsx | 4 +- packages/app/src/components/ui/slider.tsx | 4 +- packages/app/src/components/ui/switch.tsx | 2 +- packages/app/src/components/ui/table.tsx | 2 +- packages/app/src/components/ui/tabs.tsx | 4 +- packages/app/src/components/ui/textarea.tsx | 2 +- packages/app/src/components/ui/toast.tsx | 6 +- packages/app/src/components/ui/tooltip.tsx | 2 +- .../app/src/components/ui/vertical-slider.tsx | 4 +- packages/app/src/components/windows/index.tsx | 12 ++-- .../src/components/wizards/project/index.tsx | 4 +- packages/clap/package.json | 2 +- packages/clapper-services/package.json | 2 +- packages/engine/package.json | 2 +- packages/timeline/package.json | 18 +++--- packages/timeline/postcss.config.js | 3 +- .../components/slider/TimelineSliderBase.tsx | 6 +- packages/timeline/src/demo.css | 4 +- 69 files changed, 214 insertions(+), 205 deletions(-) diff --git a/bun.lock b/bun.lock index ab2fada5..ff7b282c 100644 --- a/bun.lock +++ b/bun.lock @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ac0951c9bdb2ced99b7523a551c99f83a374491a57c1afaf31332ff22edeb69a -size 531419 +oid sha256:4be85e228b5faa279e8663802af2b843a23ccde812bbbdbe47891b2483c5c888 +size 542238 diff --git a/package.json b/package.json index bf2976e5..4e9ec107 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ }, "trustedDependencies": [ "@aitube/clapper", + "@tailwindcss/oxide", "bufferutil", "electron", "electron-winstaller", diff --git a/packages/app/package.json b/packages/app/package.json index 80c69d5d..cd1d478a 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -45,20 +45,20 @@ "@aitube/clapper-services": "workspace:*", "@aitube/engine": "workspace:*", "@aitube/timeline": "workspace:*", - "@fal-ai/serverless-client": "0.14.2", + "@fal-ai/serverless-client": "0.15.0", "@ffmpeg/ffmpeg": "0.12.15", "@ffmpeg/util": "0.12.2", "@gradio/client": "1.15.4", "@huggingface/hub": "2.2.0", "@huggingface/inference": "4.3.0", "@huggingface/transformers": "3.6.1", - "@langchain/anthropic": "0.3.8", - "@langchain/cohere": "0.3.1", - "@langchain/core": "0.3.18", - "@langchain/google-vertexai": "0.1.2", - "@langchain/groq": "0.1.2", - "@langchain/mistralai": "0.2.0", - "@langchain/openai": "0.3.14", + "@langchain/anthropic": "0.3.23", + "@langchain/cohere": "0.3.4", + "@langchain/core": "0.3.61", + "@langchain/google-vertexai": "0.2.14", + "@langchain/groq": "0.2.3", + "@langchain/mistralai": "0.2.1", + "@langchain/openai": "0.5.16", "@monaco-editor/react": "4.7.0", "@radix-ui/react-accordion": "1.1.2", "@radix-ui/react-avatar": "1.0.4", @@ -82,7 +82,7 @@ "@radix-ui/react-tooltip": "1.0.7", "@react-spring/three": "10.0.1", "@react-spring/types": "10.0.1", - "@react-three/drei": "10.3.0", + "@react-three/drei": "10.4.2", "@react-three/fiber": "9.1.4", "@react-three/uikit": "0.8.4", "@react-three/uikit-lucide": "0.8.4", @@ -91,7 +91,6 @@ "@types/dom-speech-recognition": "0.0.6", "@types/pngjs": "6.0.5", "@xyflow/react": "12.8.1", - "autoprefixer": "10.4.21", "base64-arraybuffer": "1.0.2", "bellhop-iframe": "3.6.0", "civitai": "0.1.15", @@ -121,7 +120,7 @@ "react-dnd": "16.0.1", "react-dnd-html5-backend": "16.0.1", "react-dom": "*", - "react-drag-drop-files": "2.3.10", + "react-drag-drop-files": "3.0.1", "react-error-boundary": "6.0.0", "react-hook-consent": "3.5.3", "react-hotkeys-hook": "5.1.0", @@ -130,10 +129,10 @@ "react-reflex": "4.2.7", "react-speakup": "1.1.2", "remark-gfm": "4.0.1", - "replicate": "0.32.0", + "replicate": "1.0.1", "sharp": "0.34.2", - "sonner": "1.5.0", - "tailwind-merge": "2.5.2", + "sonner": "2.0.5", + "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "three": "0.164.1", "ts-node": "10.9.2", @@ -141,8 +140,8 @@ "usehooks-ts": "2.14.0", "uuid": "9.0.1", "web-audio-beat-detector": "8.2.29", - "yaml": "2.6.1", - "zustand": "4.5.2", + "yaml": "2.8.0", + "zustand": "5.0.6", "zx": "8.6.1" }, "devDependencies": { @@ -155,6 +154,7 @@ "@electron-forge/plugin-auto-unpack-natives": "7.8.1", "@electron-forge/publisher-github": "7.8.1", "@playwright/test": "1.53.2", + "@tailwindcss/postcss": "4.1.11", "@testing-library/react": "16.3.0", "@types/fluent-ffmpeg": "2.1.24", "@types/is-hotkey": "0.1.10", @@ -173,9 +173,9 @@ "node-gyp": "11.2.0", "postcss": "8.5.6", "prettier": "3.6.2", - "prettier-plugin-tailwindcss": "0.6.5", - "tailwind-scrollbar": "3.1.0", - "tailwindcss": "3.4.3", + "prettier-plugin-tailwindcss": "0.6.13", + "tailwind-scrollbar": "4.0.2", + "tailwindcss": "4.1.11", "typescript": "5.8.3", "vitest": "3.2.4" }, diff --git a/packages/app/postcss.config.js b/packages/app/postcss.config.js index 33ad091d..52b9b4ba 100644 --- a/packages/app/postcss.config.js +++ b/packages/app/postcss.config.js @@ -1,6 +1,5 @@ module.exports = { plugins: { - tailwindcss: {}, - autoprefixer: {}, + '@tailwindcss/postcss': {}, }, } diff --git a/packages/app/src/app/api/assistant/askAnyAssistant.ts b/packages/app/src/app/api/assistant/askAnyAssistant.ts index 1ba08902..7d33bbdd 100644 --- a/packages/app/src/app/api/assistant/askAnyAssistant.ts +++ b/packages/app/src/app/api/assistant/askAnyAssistant.ts @@ -92,7 +92,7 @@ export async function askAnyAssistant({ builtinProviderCredentialsGroq, settings.clapperApiKey ), - modelName, + model: modelName, // temperature: 0.7, }) : provider === ClapWorkflowProvider.OPENAI diff --git a/packages/app/src/app/embed/EmbeddedPlayer.tsx b/packages/app/src/app/embed/EmbeddedPlayer.tsx index ea46cbbf..dd7cff0b 100644 --- a/packages/app/src/app/embed/EmbeddedPlayer.tsx +++ b/packages/app/src/app/embed/EmbeddedPlayer.tsx @@ -38,7 +38,7 @@ export function EmbeddedPlayer() { {/* content overlay, with the gradient, buttons etc */}
{ diff --git a/packages/app/src/app/embed/StaticOrInteractive.tsx b/packages/app/src/app/embed/StaticOrInteractive.tsx index 4371643b..460f91e6 100644 --- a/packages/app/src/app/embed/StaticOrInteractive.tsx +++ b/packages/app/src/app/embed/StaticOrInteractive.tsx @@ -18,8 +18,8 @@ export function StaticOrInteractiveTag({ className={cn( `flex flex-none flex-row items-center justify-center border font-medium uppercase`, { - 'rounded-xs space-x-0.5 py-0.5 pl-0.5 pr-1 text-2xs': size === 'sm', - 'space-x-1 rounded py-1 pl-1 pr-2 text-xs': size === 'md', + 'text-2xs space-x-0.5 rounded-xs py-0.5 pr-1 pl-0.5': size === 'sm', + 'space-x-1 rounded-sm py-1 pr-2 pl-1 text-xs': size === 'md', 'border-yellow-600 text-yellow-600': isInteractive, // " text-red-500 border-red-500": isLive, 'border-neutral-600 text-neutral-600': isStatic, diff --git a/packages/app/src/app/main.tsx b/packages/app/src/app/main.tsx index 34c32233..1705390b 100644 --- a/packages/app/src/app/main.tsx +++ b/packages/app/src/app/main.tsx @@ -278,7 +278,7 @@ function MainContent({ mode }: { mode: ClapperIntegrationMode }) { >
@@ -291,7 +291,7 @@ function MainContent({ mode }: { mode: ClapperIntegrationMode }) {
diff --git a/packages/app/src/app/styles/globals.css b/packages/app/src/app/styles/globals.css index fd81e885..5dc16836 100644 --- a/packages/app/src/app/styles/globals.css +++ b/packages/app/src/app/styles/globals.css @@ -1,6 +1,4 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; :root { --foreground-rgb: 0, 0, 0; diff --git a/packages/app/src/app/styles/react-reflex-custom.css b/packages/app/src/app/styles/react-reflex-custom.css index 14641550..8b7dd164 100644 --- a/packages/app/src/app/styles/react-reflex-custom.css +++ b/packages/app/src/app/styles/react-reflex-custom.css @@ -1,7 +1,3 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - /* This extends the original react-reflex.css (from react-reflex@4.1.0), with some custom colors and sizes @@ -11,31 +7,43 @@ body .reflex-splitter { opacity: 0.2; } -@layer components { - body .reflex-container > .reflex-splitter { - @apply bg-neutral-400 transition-all duration-200 ease-in-out; - } +body .reflex-container > .reflex-splitter { + background-color: #a3a3a3; /* bg-neutral-400 */ + transition: all 200ms ease-in-out; +} - body .reflex-container > .reflex-splitter.active, - body .reflex-container > .reflex-splitter:hover { - @apply bg-neutral-200 transition-all duration-200 ease-in-out; - } +body .reflex-container > .reflex-splitter.active, +body .reflex-container > .reflex-splitter:hover { + background-color: #e5e5e5; /* bg-neutral-200 */ + transition: all 200ms ease-in-out; +} - body .horizontal > .reflex-splitter { - @apply h-[3px] border-b-neutral-400 border-t-neutral-400 bg-neutral-400; - } +body .horizontal > .reflex-splitter { + height: 3px; + border-top: 1px solid #a3a3a3; /* border-t-neutral-400 */ + border-bottom: 1px solid #a3a3a3; /* border-b-neutral-400 */ + background-color: #a3a3a3; /* bg-neutral-400 */ +} - body .reflex-container.horizontal > .reflex-splitter:hover, - body .reflex-container.horizontal > .reflex-splitter.active { - @apply h-[3px] border-b-neutral-200 border-t-neutral-200 bg-neutral-200; - } +body .reflex-container.horizontal > .reflex-splitter:hover, +body .reflex-container.horizontal > .reflex-splitter.active { + height: 3px; + border-top: 1px solid #e5e5e5; /* border-t-neutral-200 */ + border-bottom: 1px solid #e5e5e5; /* border-b-neutral-200 */ + background-color: #e5e5e5; /* bg-neutral-200 */ +} - body .reflex-container.vertical > .reflex-splitter { - @apply w-[3px] border-l-neutral-400 border-r-neutral-400 bg-neutral-400; - } +body .reflex-container.vertical > .reflex-splitter { + width: 3px; + border-right: 1px solid #a3a3a3; /* border-r-neutral-400 */ + border-left: 1px solid #a3a3a3; /* border-l-neutral-400 */ + background-color: #a3a3a3; /* bg-neutral-400 */ +} - body .reflex-container.vertical > .reflex-splitter:hover, - body .reflex-container.vertical > .reflex-splitter.active { - @apply w-[3px] border-l-neutral-200 border-r-neutral-200 bg-neutral-200; - } +body .reflex-container.vertical > .reflex-splitter:hover, +body .reflex-container.vertical > .reflex-splitter.active { + width: 3px; + border-right: 1px solid #e5e5e5; /* border-r-neutral-200 */ + border-left: 1px solid #e5e5e5; /* border-l-neutral-200 */ + background-color: #e5e5e5; /* bg-neutral-200 */ } diff --git a/packages/app/src/components/assistant/ChatBubble.tsx b/packages/app/src/components/assistant/ChatBubble.tsx index 5d6faaa5..87328509 100644 --- a/packages/app/src/components/assistant/ChatBubble.tsx +++ b/packages/app/src/components/assistant/ChatBubble.tsx @@ -30,7 +30,7 @@ export function ChatBubble({ className={cn( `flex flex-col p-4`, `rounded-lg`, - `select-text text-sm` + `text-sm select-text` )} style={{ background: isCurrentUser @@ -45,7 +45,7 @@ export function ChatBubble({
diff --git a/packages/app/src/components/core/timeline/Slider.tsx b/packages/app/src/components/core/timeline/Slider.tsx index 7ed8cb1c..69b49328 100644 --- a/packages/app/src/components/core/timeline/Slider.tsx +++ b/packages/app/src/components/core/timeline/Slider.tsx @@ -13,14 +13,14 @@ const Slider = React.forwardRef< ({
  • @@ -56,7 +56,7 @@ export function Node({ className={cn( 'group flex flex-row items-center space-x-2 border-[1.5px] border-transparent', isFocusable && - 'focus-within:border-transparent group-focus:border-gray-900/0', + 'group-focus:border-gray-900/0 focus-within:border-transparent', /* isSelected ? 'bg-gray-700/100 text-gray-200' @@ -71,9 +71,9 @@ export function Node({ {node.children?.length ? ( <> {showArrows ? ( - + ) : null} -
    +
    {node.icon ? (
    @@ -86,7 +86,7 @@ export function Node({ ) : (
    @@ -165,7 +165,7 @@ export function Node({ `ml-3`, - `absolute bottom-0 left-3.5 top-[31px] z-[-1] h-[calc(100%-30px)] -translate-x-1/2 transform` + `absolute top-[31px] bottom-0 left-3.5 z-[-1] h-[calc(100%-30px)] -translate-x-1/2 transform` )} key={node.id + 'line'} stroke="currentColor" diff --git a/packages/app/src/components/dialogs/iframe-warning/index.tsx b/packages/app/src/components/dialogs/iframe-warning/index.tsx index 5add391a..8e587b2c 100644 --- a/packages/app/src/components/dialogs/iframe-warning/index.tsx +++ b/packages/app/src/components/dialogs/iframe-warning/index.tsx @@ -25,7 +25,7 @@ export function IframeWarning() { return (
    Entities
    -
    +
    {panels[showSettings]}
    - + {children} diff --git a/packages/app/src/components/toolbars/top-menu/ToggleWindowLayout/index.tsx b/packages/app/src/components/toolbars/top-menu/ToggleWindowLayout/index.tsx index b1f45a55..b0d0ebae 100644 --- a/packages/app/src/components/toolbars/top-menu/ToggleWindowLayout/index.tsx +++ b/packages/app/src/components/toolbars/top-menu/ToggleWindowLayout/index.tsx @@ -26,7 +26,7 @@ export function ToggleWindowLayout({
    { @@ -59,7 +59,7 @@ export function ToggleWindowLayout({
    - + Toggle layout diff --git a/packages/app/src/components/toolbars/top-menu/index.tsx b/packages/app/src/components/toolbars/top-menu/index.tsx index aff162c7..85063928 100644 --- a/packages/app/src/components/toolbars/top-menu/index.tsx +++ b/packages/app/src/components/toolbars/top-menu/index.tsx @@ -117,7 +117,7 @@ export function TopMenu() { */} @@ -149,7 +149,7 @@ export function TopMenu() {
    - + Community @@ -162,7 +162,7 @@ export function TopMenu() {
    - + Code diff --git a/packages/app/src/components/toolbars/top-menu/view/index.tsx b/packages/app/src/components/toolbars/top-menu/view/index.tsx index f47a5984..4b72bd91 100644 --- a/packages/app/src/components/toolbars/top-menu/view/index.tsx +++ b/packages/app/src/components/toolbars/top-menu/view/index.tsx @@ -65,7 +65,7 @@ export function TopMenuView() { >
    @@ -103,7 +103,7 @@ export function TopMenuView() { >
    diff --git a/packages/app/src/components/ui/accordion.tsx b/packages/app/src/components/ui/accordion.tsx index 6a41e175..fe86fb0b 100644 --- a/packages/app/src/components/ui/accordion.tsx +++ b/packages/app/src/components/ui/accordion.tsx @@ -47,12 +47,12 @@ const AccordionContent = React.forwardRef< -
    {children}
    +
    {children}
     )) AccordionContent.displayName = AccordionPrimitive.Content.displayName diff --git a/packages/app/src/components/ui/alert.tsx b/packages/app/src/components/ui/alert.tsx index 05e51a6e..151bfb4b 100644 --- a/packages/app/src/components/ui/alert.tsx +++ b/packages/app/src/components/ui/alert.tsx @@ -39,7 +39,7 @@ const AlertTitle = React.forwardRef< >(({ className, ...props }, ref) => (
    )) diff --git a/packages/app/src/components/ui/badge.tsx b/packages/app/src/components/ui/badge.tsx index 482b487f..aa7335b1 100644 --- a/packages/app/src/components/ui/badge.tsx +++ b/packages/app/src/components/ui/badge.tsx @@ -4,7 +4,7 @@ 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-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', + 'inline-flex items-center rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 dark:border-neutral-800 dark:focus:ring-neutral-800', { variants: { variant: { diff --git a/packages/app/src/components/ui/button.tsx b/packages/app/src/components/ui/button.tsx index 8098363c..584fa5a4 100644 --- a/packages/app/src/components/ui/button.tsx +++ b/packages/app/src/components/ui/button.tsx @@ -5,7 +5,7 @@ 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-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', + 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-hidden 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: { diff --git a/packages/app/src/components/ui/card.tsx b/packages/app/src/components/ui/card.tsx index 8aa87718..e68d78c1 100644 --- a/packages/app/src/components/ui/card.tsx +++ b/packages/app/src/components/ui/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
    { return ( - + {children} @@ -46,7 +46,7 @@ const CommandInput = React.forwardRef< (({ className, ...props }, ref) => ( )) @@ -117,7 +117,7 @@ const CommandItem = React.forwardRef< {children} - + Close @@ -89,7 +89,7 @@ const DialogTitle = React.forwardRef< ( // we let the underlying tint sink in 'font-mono', - 'focus-visible:ring-blue-[rgb(59,134,247)] flex h-full w-full rounded-md border border-neutral-50/80 bg-white px-3 py-2 text-xs ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-30 dark:border-neutral-100/30 dark:bg-black/20 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-800', + 'focus-visible:ring-blue-[rgb(59,134,247)] flex h-full w-full rounded-md border border-neutral-50/80 bg-white px-3 py-2 text-xs ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400/80 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-30 dark:border-neutral-100/30 dark:bg-black/20 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-800', className )} ref={ref} diff --git a/packages/app/src/components/ui/menubar-legacy.tsx b/packages/app/src/components/ui/menubar-legacy.tsx index 0e530d03..680cb67d 100644 --- a/packages/app/src/components/ui/menubar-legacy.tsx +++ b/packages/app/src/components/ui/menubar-legacy.tsx @@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef< @@ -251,7 +251,7 @@ const MenubarTrigger = React.forwardRef< (({ className, ...props }, ref) => ( )) @@ -81,7 +81,7 @@ const SelectItem = React.forwardRef< (({ className, ...props }, ref) => ( {children} - + Close diff --git a/packages/app/src/components/ui/slider.tsx b/packages/app/src/components/ui/slider.tsx index 005ba8a7..1052ad5f 100644 --- a/packages/app/src/components/ui/slider.tsx +++ b/packages/app/src/components/ui/slider.tsx @@ -12,7 +12,7 @@ const Slider = React.forwardRef< - + )) Slider.displayName = SliderPrimitive.Root.displayName diff --git a/packages/app/src/components/ui/switch.tsx b/packages/app/src/components/ui/switch.tsx index 51744cc3..c7923ad6 100644 --- a/packages/app/src/components/ui/switch.tsx +++ b/packages/app/src/components/ui/switch.tsx @@ -11,7 +11,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => ( ( return (