({
/>
{children}
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 5f4117f..b062f9b 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
tr]:last:border-b-0",
+ "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
className
)}
{...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
| [role=checkbox]]:translate-y-[2px]",
+ "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
@@ -88,7 +88,7 @@ const TableCell = React.forwardRef<
| [role=checkbox]]:translate-y-[2px]",
+ "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 0f4caeb..e3da247 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
- screenshotRef: React.RefObject
+ containerRef: React.RefObject
+ screenshotRef: React.RefObject
}) {
const { resolution, setScrollScale } = useResizeCanvas()
const { quality } = useImageQualityStore()
diff --git a/hooks/canvas-area-hooks/use-resize-observer.ts b/hooks/canvas-area-hooks/use-resize-observer.ts
index 4e3422d..3222d14 100644
--- a/hooks/canvas-area-hooks/use-resize-observer.ts
+++ b/hooks/canvas-area-hooks/use-resize-observer.ts
@@ -10,7 +10,7 @@ import React, { useEffect } from 'react'
*/
export default function useCanvasResizeObserver(
- ref: React.RefObject
+ ref: React.RefObject
) {
const {
setScaleFactor,
diff --git a/hooks/use-editor.ts b/hooks/use-editor.ts
index cd49c57..bd92ea4 100644
--- a/hooks/use-editor.ts
+++ b/hooks/use-editor.ts
@@ -30,7 +30,7 @@ export default function useTiptapEditor(initialContent: string = '') {
content: initialContent,
editorProps: {
attributes: {
- style: 'outline: none; margin: 0; padding: 0; width: 100%; height: 100%; overflow: visible;'
+ style: 'outline-solid: none; margin: 0; padding: 0; width: 100%; height: 100%; overflow: visible;'
}
}
})
diff --git a/hooks/use-event-listener.ts b/hooks/use-event-listener.ts
index 276dbab..cb91342 100644
--- a/hooks/use-event-listener.ts
+++ b/hooks/use-event-listener.ts
@@ -6,7 +6,7 @@ import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect'
function useEventListener(
eventName: K,
handler: (event: MediaQueryListEventMap[K]) => void,
- element: RefObject,
+ element: RefObject,
options?: boolean | AddEventListenerOptions
): void
@@ -25,7 +25,7 @@ function useEventListener<
>(
eventName: K,
handler: (event: HTMLElementEventMap[K]) => void,
- element: RefObject,
+ element: RefObject,
options?: boolean | AddEventListenerOptions
): void
@@ -33,7 +33,7 @@ function useEventListener<
function useEventListener(
eventName: K,
handler: (event: DocumentEventMap[K]) => void,
- element: RefObject,
+ element: RefObject,
options?: boolean | AddEventListenerOptions
): void
@@ -51,7 +51,7 @@ function useEventListener<
| MediaQueryListEventMap[KM]
| Event
) => void,
- element?: RefObject,
+ element?: RefObject,
options?: boolean | AddEventListenerOptions
) {
// Create a ref that stores handler
diff --git a/hooks/use-in-view.tsx b/hooks/use-in-view.tsx
index bf8b30c..a5be5b7 100644
--- a/hooks/use-in-view.tsx
+++ b/hooks/use-in-view.tsx
@@ -8,7 +8,7 @@ interface UseInViewOptions {
once?: boolean;
}
-export function useInView(options: UseInViewOptions = {}): [React.RefObject, boolean] {
+export function useInView(options: UseInViewOptions = {}): [React.RefObject, boolean] {
const ref = useRef(null);
const [isInView, setIsInView] = useState(false);
const [hasAnimated, setHasAnimated] = useState(false);
diff --git a/hooks/use-on-click-outside.ts b/hooks/use-on-click-outside.ts
index 3dbed9b..fbe3638 100644
--- a/hooks/use-on-click-outside.ts
+++ b/hooks/use-on-click-outside.ts
@@ -5,7 +5,7 @@ import { useEventListener } from './use-event-listener'
type Handler = (event: MouseEvent) => void
export function useOnClickOutside(
- ref: RefObject,
+ ref: RefObject,
handler: Handler,
mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'
): void {
diff --git a/index.d.ts b/index.d.ts
index 1d7c6ba..ae87d0a 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -3,6 +3,8 @@
*/
type Maybe = null | undefined
+declare module '*.css'
+
declare module 'rgbaster' {
/**
* Analyzes the colors in an image.
diff --git a/package.json b/package.json
index d4d897d..c1f1641 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
"@auth/prisma-adapter": "^2.7.4",
"@fseehawer/react-circular-slider": "^2.7.0",
"@hookform/resolvers": "^3.9.1",
- "@prisma/client": "latest",
+ "@prisma/client": "^6.19.3",
"@radix-ui/react-accordion": "^1.2.2",
"@radix-ui/react-alert-dialog": "^1.1.4",
"@radix-ui/react-aspect-ratio": "^1.1.1",
@@ -47,6 +47,7 @@
"@radix-ui/react-tooltip": "^1.1.6",
"@remotion/google-fonts": "^4.0.244",
"@samuelmeuli/font-manager": "^1.4.0",
+ "@tailwindcss/postcss": "^4.2.2",
"@tailwindcss/typography": "^0.5.15",
"@tanstack/react-query": "^5.62.11",
"@tiptap/extension-color": "^2.1.12",
@@ -63,10 +64,9 @@
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.7.1",
"@types/file-saver": "^2.0.7",
- "@types/node": "20.5.7",
- "@types/react": "18.2.21",
- "@types/react-dom": "18.2.7",
- "autoprefixer": "10.4.15",
+ "@types/node": "^22.19.17",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
"canvas": "3.1.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.0.0",
@@ -85,16 +85,16 @@
"just-throttle": "^4.2.0",
"lucide-react": "^0.469.0",
"match-sorter": "^6.3.4",
- "next": "14.2.25",
+ "next": "^15.5.14",
"next-auth": "beta",
"next-themes": "^0.4.4",
"perfect-freehand": "^1.2.2",
"pngjs": "^7.0.0",
"postcss": "8.4.28",
- "react": "^18",
+ "react": "^19",
"react-colorful": "^5.6.1",
"react-day-picker": "8.10.1",
- "react-dom": "^18",
+ "react-dom": "^19",
"react-dropzone": "^14.3.5",
"react-hook-form": "^7.54.2",
"react-hotkeys-hook": "^4.6.1",
@@ -112,14 +112,14 @@
"sonner": "^1.7.1",
"sort-by": "^1.2.0",
"tailwind-merge": "^1.14.0",
- "tailwindcss": "^3.4.1",
+ "tailwindcss": "^4.2.2",
"tailwindcss-animate": "^1.0.7",
- "typescript": "5.2.2",
+ "typescript": "6.0.2",
"uuid": "^9.0.1",
"vaul": "^1.1.2",
"zod": "^3.24.1",
"zundo": "^2.3.0",
- "zustand": "^4.4.6"
+ "zustand": "^5.0.12"
},
"devDependencies": {
"@faker-js/faker": "^9.0.3",
@@ -127,10 +127,10 @@
"@types/sort-by": "^1.2.3",
"@types/uuid": "^9.0.7",
"@typescript-eslint/eslint-plugin": "^6.11.0",
- "eslint-config-next": "14.2.16",
+ "eslint-config-next": "^15.5.14",
"lint-staged": "^15.2.7",
- "prettier": "3.0.3",
- "prettier-plugin-tailwindcss": "^0.5.14",
- "prisma": "latest"
+ "prettier": "3.8.1",
+ "prettier-plugin-tailwindcss": "^0.7.2",
+ "prisma": "^6.19.3"
}
}
\ No newline at end of file
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1a69fd2..5d6d845 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,7 +1,7 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
- tailwindcss: {},
+ '@tailwindcss/postcss': {},
},
};
diff --git a/store/use-image-options.ts b/store/use-image-options.ts
index a4dbd24..16629f7 100644
--- a/store/use-image-options.ts
+++ b/store/use-image-options.ts
@@ -311,9 +311,8 @@ export const useImageOptions = create(
)
export const useTemporalStore = (
- selector: (state: TemporalState) => T,
- equality?: (a: T, b: T) => boolean
-) => useStore(useImageOptions.temporal, selector, equality)
+ selector: (state: TemporalState) => T
+) => useStore(useImageOptions.temporal, selector)
interface SelectedLayerState {
selectedImage: number | null
diff --git a/styles/globals.css b/styles/globals.css
index 7330b0a..f158098 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,11 +1,43 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
-@layer utilities {
- .text-balance {
- text-wrap: balance;
- }
+@config '../tailwind.config.ts';
+
+/*
+ The default border color has changed to `currentcolor` in Tailwind CSS v4,
+ so we've added these compatibility styles to make sure everything still
+ looks the same as it did with Tailwind CSS v3.
+
+ If we ever want to remove these styles, we need to add an explicit border
+ color utility to any element that depends on these defaults.
+*/
+@layer base {
+ *,
+ ::after,
+ ::before,
+ ::backdrop,
+ ::file-selector-button {
+ border-color: var(--color-gray-200, currentcolor);
+ }
+}
+
+@utility text-balance {
+ text-wrap: balance;
+}
+
+@utility flex-center {
+ @apply flex items-center justify-center;
+}
+
+@utility add-focus {
+ @apply focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-4 focus:ring-offset-background;
+}
+
+@utility no-scrollbar {
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
@layer base {
@@ -94,27 +126,6 @@
}
}
-@layer components {
- .flex-center {
- @apply flex items-center justify-center;
- }
-}
-
-@layer utilities {
- .add-focus {
- @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-4 focus:ring-offset-background;
- }
-
- .no-scrollbar::-webkit-scrollbar {
- display: none;
- }
-
- .no-scrollbar {
- -ms-overflow-style: none;
- scrollbar-width: none;
- }
-}
-
#canvas-container img {
-webkit-user-select: none;
-moz-user-select: none;
diff --git a/tsconfig.json b/tsconfig.json
index 8e0e7a4..05d872f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,10 @@
{
"compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -18,9 +22,20 @@
}
],
"paths": {
- "@/*": ["./*"]
- }
+ "@/*": [
+ "./*"
+ ]
+ },
+ "target": "ES2017"
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/types/**/*.tsx"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/types/**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}
|