From 93d7aad2d8eea4a0814767f3f20cdd517ec79d48 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 3 Jul 2026 18:45:23 +0200
Subject: [PATCH 1/6] Upgrade react to 19

---
 apps/lite/package.json   | 4 ++--
 apps/studio/package.json | 4 ++--
 folio-react/package.json | 4 ++--
 package.json             | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/lite/package.json b/apps/lite/package.json
index aed149b9..732a6769 100644
--- a/apps/lite/package.json
+++ b/apps/lite/package.json
@@ -16,8 +16,8 @@
         "lowcss": "^0.33.0",
         "lowcss-forms": "^0.33.0",
         "lowcss-helpers": "^0.33.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7"
     },
     "devDependencies": {
         "@babel/core": "^7.25.7",
diff --git a/apps/studio/package.json b/apps/studio/package.json
index 4f6ed9f6..c78d6070 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -15,8 +15,8 @@
         "lowcss": "^0.33.0",
         "lowcss-forms": "^0.33.0",
         "lowcss-helpers": "^0.33.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "uid": "^2.0.2"
     },
     "devDependencies": {
diff --git a/folio-react/package.json b/folio-react/package.json
index 3f62951b..c192c4b4 100644
--- a/folio-react/package.json
+++ b/folio-react/package.json
@@ -16,8 +16,8 @@
         "./package.json": "./package.json"
     },
     "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": ">=19",
+        "react-dom": ">=19"
     },
     "devDependencies": {
         "@josemi-icons/react": "^0.7.0",
diff --git a/package.json b/package.json
index 95aa8a7c..204d2f0f 100644
--- a/package.json
+++ b/package.json
@@ -61,8 +61,8 @@
     "dependencies": {
         "@josemi-icons/svg": "^0.7.0",
         "lowcss": "^0.33.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7"
     },
     "devDependencies": {
         "@babel/core": "^7.25.7",
@@ -93,7 +93,7 @@
         "mikel-press": "^0.38.1",
         "picomatch": "^4.0.2",
         "purgecss": "^7.0.2",
-        "react-test-renderer": "^18.2.0",
+        "react-test-renderer": "^19.2.7",
         "serve": "^14.2.4",
         "webpack": "^5.95.0",
         "webpack-cli": "^6.0.1"

From f5b1a7f0e44dffd8ae6f72dccac2e3eeaa5af290 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 3 Jul 2026 18:51:56 +0200
Subject: [PATCH 2/6] Update dependencies in all package.json files

---
 apps/lite/package.json   |  6 +++---
 apps/studio/package.json | 10 +++++-----
 folio-react/package.json |  4 ++--
 package.json             |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/lite/package.json b/apps/lite/package.json
index 732a6769..d30ea6f5 100644
--- a/apps/lite/package.json
+++ b/apps/lite/package.json
@@ -13,9 +13,9 @@
         "@josemi-icons/react": "^0.7.0",
         "classnames": "^2.5.1",
         "idb-keyval": "^6.2.2",
-        "lowcss": "^0.33.0",
-        "lowcss-forms": "^0.33.0",
-        "lowcss-helpers": "^0.33.0",
+        "lowcss": "^0.34.1",
+        "lowcss-forms": "^0.34.1",
+        "lowcss-helpers": "^0.34.1",
         "react": "^19.2.7",
         "react-dom": "^19.2.7"
     },
diff --git a/apps/studio/package.json b/apps/studio/package.json
index c78d6070..9b3db9d6 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -12,11 +12,11 @@
     "dependencies": {
         "@josemi-icons/react": "^0.7.0",
         "classnames": "^2.5.1",
-        "lowcss": "^0.33.0",
-        "lowcss-forms": "^0.33.0",
-        "lowcss-helpers": "^0.33.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
+        "lowcss": "^0.34.1",
+        "lowcss-forms": "^0.34.1",
+        "lowcss-helpers": "^0.34.1",
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7",
         "uid": "^2.0.2"
     },
     "devDependencies": {
diff --git a/folio-react/package.json b/folio-react/package.json
index c192c4b4..58b398dc 100644
--- a/folio-react/package.json
+++ b/folio-react/package.json
@@ -24,8 +24,8 @@
         "alure": "^0.1.0",
         "browser-fs-access": "^0.37.0",
         "classnames": "^2.5.1",
-        "lowcss": "^0.33.0",
-        "lowcss-helpers": "^0.33.0",
+        "lowcss": "^0.34.1",
+        "lowcss-helpers": "^0.34.1",
         "react-use": "^17.5.1",
         "uid": "^2.0.2"
     },
diff --git a/package.json b/package.json
index 204d2f0f..f887d9f2 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     },
     "dependencies": {
         "@josemi-icons/svg": "^0.7.0",
-        "lowcss": "^0.33.0",
+        "lowcss": "^0.34.1",
         "react": "^19.2.7",
         "react-dom": "^19.2.7"
     },

From bf526de5bdb5cae14e555bcf2460f88fb742cd9f Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 3 Jul 2026 18:58:51 +0200
Subject: [PATCH 3/6] Convert grid component to typescript

---
 folio-react/components/canvas.tsx |  2 +-
 folio-react/components/grid.jsx   | 43 -----------------------------
 folio-react/components/grid.tsx   | 46 +++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 44 deletions(-)
 delete mode 100644 folio-react/components/grid.jsx
 create mode 100644 folio-react/components/grid.tsx

diff --git a/folio-react/components/canvas.tsx b/folio-react/components/canvas.tsx
index 8b9c5a9f..fd620348 100644
--- a/folio-react/components/canvas.tsx
+++ b/folio-react/components/canvas.tsx
@@ -21,7 +21,7 @@ import { useActions } from "../contexts/actions.tsx";
 import { useCursor } from "../hooks/use-cursor.js";
 import { renderElement } from "./elements/index.jsx";
 import { SvgContainer } from "./svg.tsx";
-import { Grid } from "./grid.jsx";
+import { Grid } from "./grid.tsx";
 import { clearFocus } from "../utils/dom.js";
 import { preventDefault, isTouchOrPenEvent, isInputTarget } from "../utils/events.js";
 import type { EditorPointEvent, EditorKeyboardEvent } from "../lib/events.ts";
diff --git a/folio-react/components/grid.jsx b/folio-react/components/grid.jsx
deleted file mode 100644
index 46726ca1..00000000
--- a/folio-react/components/grid.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import {GRID_SIZE} from "../constants.js";
-import {SvgContainer} from "./svg.tsx";
-
-export const Grid = props => {
-    const translateX = props.translateX / props.zoom;
-    const translateY = props.translateY / props.zoom;
-    const x= (translateX % props.size) - translateX - (props.size / 2);
-    const y= (translateY % props.size) - translateY - (props.size / 2);
-    return (
-        <SvgContainer>
-            <defs>
-                <pattern id="grid" width={props.size} height={props.size} patternUnits="userSpaceOnUse">
-                    <circle
-                        cx={props.size / 2}
-                        cy={props.size / 2}
-                        r={1 / props.zoom}
-                        fill={props.fillColor}
-                        fillOpacity={props.fillOpacity}
-                    />
-                </pattern>
-            </defs>
-            <g transform={`translate(${x},${y})`}>
-                <rect
-                    width={(props.width + props.size) / props.zoom}
-                    height={(props.height  + props.size) / props.zoom}
-                    fill="url(#grid)"
-                />
-            </g>
-        </SvgContainer>
-    );
-};
-
-Grid.defaultProps = {
-    width: 0,
-    height: 0,
-    translateX: 0,
-    translateY: 0,
-    zoom: 1,
-    size: GRID_SIZE,
-    fillColor: "rgb(66,72,82)",
-    fillOpacity: 1,
-};
diff --git a/folio-react/components/grid.tsx b/folio-react/components/grid.tsx
new file mode 100644
index 00000000..2362df7d
--- /dev/null
+++ b/folio-react/components/grid.tsx
@@ -0,0 +1,46 @@
+import { GRID_SIZE } from "../constants.js";
+import { SvgContainer } from "./svg.tsx";
+import type { JSX } from "react";
+
+export type GridProps = {
+    width: number;
+    height: number;
+    translateX: number;
+    translateY: number;
+    zoom: number;
+    size?: number;
+    fillColor?: string;
+    fillOpacity?: number;
+};
+
+export const Grid = (props: GridProps): JSX.Element => {
+    const fillColor = props.fillColor ?? "rgb(66,72,82)";
+    const fillOpacity = props.fillOpacity ?? 1;
+    const size = props.size ?? GRID_SIZE;
+    const calculatedTranslateX = props.translateX / props.zoom;
+    const calculatedTranslateY = props.translateY / props.zoom;
+    const x = (calculatedTranslateX % size) - calculatedTranslateX - (size / 2);
+    const y = (calculatedTranslateY % size) - calculatedTranslateY - (size / 2);
+    return (
+        <SvgContainer>
+            <defs>
+                <pattern id="grid" width={size} height={size} patternUnits="userSpaceOnUse">
+                    <circle
+                        cx={size / 2}
+                        cy={size / 2}
+                        r={1 / props.zoom}
+                        fill={fillColor}
+                        fillOpacity={fillOpacity}
+                    />
+                </pattern>
+            </defs>
+            <g transform={`translate(${x},${y})`}>
+                <rect
+                    width={(props.width + size) / props.zoom}
+                    height={(props.height + size) / props.zoom}
+                    fill="url(#grid)"
+                />
+            </g>
+        </SvgContainer>
+    );
+};

From f1cd2947c03e65fd62c0bb80ea04cbedd5fbf679 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 3 Jul 2026 18:59:00 +0200
Subject: [PATCH 4/6] Fix minimap tests

---
 .../components/__tests__/minimap.test.tsx     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/folio-react/components/__tests__/minimap.test.tsx b/folio-react/components/__tests__/minimap.test.tsx
index 986a6cff..b5f25715 100644
--- a/folio-react/components/__tests__/minimap.test.tsx
+++ b/folio-react/components/__tests__/minimap.test.tsx
@@ -42,18 +42,18 @@ describe("Minimap", () => {
 
     it("should render without crashing", () => {
         const { getByTestId } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         expect(getByTestId("minimap")).toBeInTheDocument();
     });
 
     it("should render an SVG with the correct number of elements", () => {
         const { container } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
 
         const svg = container.querySelector("svg");
@@ -74,16 +74,16 @@ describe("Minimap", () => {
         };
 
         const { container, rerender } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const initialWidth = parseFloat(getVisibleRect(container).getAttribute("width") || "0");
 
         rerender(
-            <EditorContext.Provider value={[zoomedEditor, 0]}>
+            <EditorContext value={[zoomedEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const zoomedWidth = parseFloat(getVisibleRect(container).getAttribute("width") || "0");
 
@@ -98,17 +98,17 @@ describe("Minimap", () => {
         };
 
         const { container, rerender } = render(
-            <EditorContext.Provider value={[mockEditor, 0]}>
+            <EditorContext value={[mockEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const initialX = parseFloat(getVisibleRect(container).getAttribute("x") || "0");
         const initialY = parseFloat(getVisibleRect(container).getAttribute("y") || "0");
 
         rerender(
-            <EditorContext.Provider value={[translatedEditor, 0]}>
+            <EditorContext value={[translatedEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
         const translatedX = parseFloat(getVisibleRect(container).getAttribute("x") || "0");
         const translatedY = parseFloat(getVisibleRect(container).getAttribute("y") || "0");
@@ -123,9 +123,9 @@ describe("Minimap", () => {
             getElements: () => [],
         };
         const { container } = render(
-            <EditorContext.Provider value={[emptyEditor, 0]}>
+            <EditorContext value={[emptyEditor, 0]}>
                 <Minimap />
-            </EditorContext.Provider>
+            </EditorContext>
         );
 
         // Only the visible area rect should be rendered

From d1e78392ca7353df1c503b1995877ce805f1a9e1 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 3 Jul 2026 18:59:26 +0200
Subject: [PATCH 5/6] Fix all contexts

---
 folio-react/contexts/actions.tsx           | 4 ++--
 folio-react/contexts/ai.tsx                | 4 ++--
 folio-react/contexts/assets.jsx            | 4 ++--
 folio-react/contexts/confirm.jsx           | 4 ++--
 folio-react/contexts/dialogs.tsx           | 4 ++--
 folio-react/contexts/editor-components.tsx | 4 ++--
 folio-react/contexts/editor.tsx            | 4 ++--
 folio-react/contexts/library.tsx           | 4 ++--
 folio-react/contexts/preferences.tsx       | 4 ++--
 folio-react/contexts/tools.tsx             | 4 ++--
 folio-react/contexts/workbench.tsx         | 8 ++++----
 11 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/folio-react/contexts/actions.tsx b/folio-react/contexts/actions.tsx
index d54345d2..a1f5430f 100644
--- a/folio-react/contexts/actions.tsx
+++ b/folio-react/contexts/actions.tsx
@@ -1014,8 +1014,8 @@ export const ActionsProvider = (props: ActionsProviderProps): React.JSX.Element
 
     // return the actions provider
     return (
-        <ActionsContext.Provider value={actionsManager}>
+        <ActionsContext value={actionsManager}>
             {props.children}
-        </ActionsContext.Provider>
+        </ActionsContext>
     );
 };
diff --git a/folio-react/contexts/ai.tsx b/folio-react/contexts/ai.tsx
index 87e5c442..167687db 100644
--- a/folio-react/contexts/ai.tsx
+++ b/folio-react/contexts/ai.tsx
@@ -132,8 +132,8 @@ export const AiProvider = ({ host, children }: AiProviderProps): JSX.Element =>
     }, [host]);
 
     return (
-        <AiContext.Provider value={{ host, quotas, updateQuotas }}>
+        <AiContext value={{ host, quotas, updateQuotas }}>
             {children}
-        </AiContext.Provider>
+        </AiContext>
     );
 };
diff --git a/folio-react/contexts/assets.jsx b/folio-react/contexts/assets.jsx
index f390942a..6e30e46f 100644
--- a/folio-react/contexts/assets.jsx
+++ b/folio-react/contexts/assets.jsx
@@ -9,7 +9,7 @@ export const useAssets = () => {
 
 // Assets provider component
 export const AssetsProvider = props => (
-    <AssetsContext.Provider value={props.value || {}}>
+    <AssetsContext value={props.value || {}}>
         {props.children}
-    </AssetsContext.Provider>
+    </AssetsContext>
 );
diff --git a/folio-react/contexts/confirm.jsx b/folio-react/contexts/confirm.jsx
index 67742597..78464190 100644
--- a/folio-react/contexts/confirm.jsx
+++ b/folio-react/contexts/confirm.jsx
@@ -85,7 +85,7 @@ export const ConfirmProvider = props => {
     }, [confirm, hideConfirm]);
 
     return (
-        <ConfirmContext.Provider value={{confirm, showConfirm, hideConfirm}}>
+        <ConfirmContext value={{confirm, showConfirm, hideConfirm}}>
             {props.children}
             {confirm?.visible && createPortal([
                 <React.Fragment key="dialog:confirm">
@@ -113,6 +113,6 @@ export const ConfirmProvider = props => {
                     </Centered>
                 </React.Fragment>
             ], document.body)}
-        </ConfirmContext.Provider>
+        </ConfirmContext>
     );
 };
diff --git a/folio-react/contexts/dialogs.tsx b/folio-react/contexts/dialogs.tsx
index 1512e2f5..24260059 100644
--- a/folio-react/contexts/dialogs.tsx
+++ b/folio-react/contexts/dialogs.tsx
@@ -77,7 +77,7 @@ export const DialogsProvider = (props: DialogsProviderProps): React.JSX.Element
 
     // Render dialog context provider
     return (
-        <DialogsContext.Provider value={{ showDialog, hideDialog }}>
+        <DialogsContext value={{ showDialog, hideDialog }}>
             {props.children}
             {!!DialogComponent && createPortal([
                 <Overlay key="dialog:overlay" className="z-50" />,
@@ -92,6 +92,6 @@ export const DialogsProvider = (props: DialogsProviderProps): React.JSX.Element
                     </Dialog.Content>
                 </Centered>,
             ], document.body)}
-        </DialogsContext.Provider>
+        </DialogsContext>
     );
 };
diff --git a/folio-react/contexts/editor-components.tsx b/folio-react/contexts/editor-components.tsx
index 8714d5bc..ba575ab2 100644
--- a/folio-react/contexts/editor-components.tsx
+++ b/folio-react/contexts/editor-components.tsx
@@ -90,8 +90,8 @@ export const EditorComponentsProvider = (props: EditorComponentsProviderProps):
     }, [props.components]);
 
     return (
-        <EditorComponentsContext.Provider value={editorComponents}>
+        <EditorComponentsContext value={editorComponents}>
             {props.children}
-        </EditorComponentsContext.Provider>
+        </EditorComponentsContext>
     );
 };
diff --git a/folio-react/contexts/editor.tsx b/folio-react/contexts/editor.tsx
index a6a705cb..150b1899 100644
--- a/folio-react/contexts/editor.tsx
+++ b/folio-react/contexts/editor.tsx
@@ -102,10 +102,10 @@ export const EditorProvider = (props: EditorProviderProps): React.JSX.Element =>
 
     // Render editor context provider
     return (
-        <EditorContext.Provider value={[editor, update]}>
+        <EditorContext value={[editor, update]}>
             <div className={"relative overflow-hidden h-full w-full select-none"}>
                 {props.children}
             </div>
-        </EditorContext.Provider>
+        </EditorContext>
     );
 };
diff --git a/folio-react/contexts/library.tsx b/folio-react/contexts/library.tsx
index 1f34b838..6c10f0f1 100644
--- a/folio-react/contexts/library.tsx
+++ b/folio-react/contexts/library.tsx
@@ -275,8 +275,8 @@ export const LibraryProvider = (props: LibraryProviderProps): React.JSX.Element
 
     // render library context provider
     return (
-        <LibraryContext.Provider value={libraryApi}>
+        <LibraryContext value={libraryApi}>
             {props.children}
-        </LibraryContext.Provider>
+        </LibraryContext>
     );
 };
diff --git a/folio-react/contexts/preferences.tsx b/folio-react/contexts/preferences.tsx
index 9c133dbd..0e9fcd99 100644
--- a/folio-react/contexts/preferences.tsx
+++ b/folio-react/contexts/preferences.tsx
@@ -65,8 +65,8 @@ export const usePreferences = (): Preferences => {
 export const PreferencesProvider = (props: PreferencesProviderProps): JSX.Element => {
     const userPreferences = props.preferences;
     return (
-        <UserPreferencesContext.Provider value={userPreferences}>
+        <UserPreferencesContext value={userPreferences}>
             {props.children}
-        </UserPreferencesContext.Provider>
+        </UserPreferencesContext>
     );
 };
diff --git a/folio-react/contexts/tools.tsx b/folio-react/contexts/tools.tsx
index 4c3af490..522e6c9a 100644
--- a/folio-react/contexts/tools.tsx
+++ b/folio-react/contexts/tools.tsx
@@ -348,8 +348,8 @@ export const ToolsProvider = (props: ToolsProviderProps): React.JSX.Element => {
     }), [tools]);
 
     return (
-        <ToolsContext.Provider value={toolsManager}>
+        <ToolsContext value={toolsManager}>
             {props.children}
-        </ToolsContext.Provider>
+        </ToolsContext>
     );
 };
diff --git a/folio-react/contexts/workbench.tsx b/folio-react/contexts/workbench.tsx
index 1c69802b..b3cba114 100644
--- a/folio-react/contexts/workbench.tsx
+++ b/folio-react/contexts/workbench.tsx
@@ -139,9 +139,9 @@ export const WorkbenchProvider = (props: WorkbenchProviderProps): JSX.Element =>
     }, [parts]);
 
     return (
-        <WorkbenchContext.Provider value={{ parts, isViewOpen, openView, closeView, toggleView }}>
+        <WorkbenchContext value={{ parts, isViewOpen, openView, closeView, toggleView }}>
             {props.children}
-        </WorkbenchContext.Provider>
+        </WorkbenchContext>
     );
 };
 
@@ -182,9 +182,9 @@ export const WorkbenchSlot = (props: WorkbenchSlotProps): JSX.Element | null =>
             {parts[props.part].map((view: View, index: number) => {
                 const Component = view.component as ElementType;
                 return (
-                    <WorkbenchViewContext.Provider key={index} value={view}>
+                    <WorkbenchViewContext key={index} value={view}>
                         <Component />
-                    </WorkbenchViewContext.Provider>
+                    </WorkbenchViewContext>
                 );
             })}
         </Fragment>

From b1da8cce00a0781eb2339d5183d0cc443f4ccece Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 3 Jul 2026 18:59:38 +0200
Subject: [PATCH 6/6] Fix context menu position

---
 folio-react/hooks/use-context-menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/folio-react/hooks/use-context-menu.tsx b/folio-react/hooks/use-context-menu.tsx
index 80931a07..dc6b3e46 100644
--- a/folio-react/hooks/use-context-menu.tsx
+++ b/folio-react/hooks/use-context-menu.tsx
@@ -25,9 +25,9 @@ export const ContextMenuWrapper = (): JSX.Element => {
     const { getContext } = useSurface();
     const { top, left } = getContext();
     return (
-        <ContexMenuPositionContext.Provider value={{ top: top as number, left: left as number }}>
+        <ContexMenuPositionContext value={{ top: top as number, left: left as number }}>
             <ContextMenu />
-        </ContexMenuPositionContext.Provider>
+        </ContexMenuPositionContext>
     );
 };