diff --git a/apps/lite/package.json b/apps/lite/package.json
index aed149b9..d30ea6f5 100644
--- a/apps/lite/package.json
+++ b/apps/lite/package.json
@@ -13,11 +13,11 @@
         "@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",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "lowcss": "^0.34.1",
+        "lowcss-forms": "^0.34.1",
+        "lowcss-helpers": "^0.34.1",
+        "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..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": "^18.2.0",
-        "react-dom": "^18.2.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/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
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>
+    );
+};
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>
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>
     );
 };
 
diff --git a/folio-react/package.json b/folio-react/package.json
index 3f62951b..58b398dc 100644
--- a/folio-react/package.json
+++ b/folio-react/package.json
@@ -16,16 +16,16 @@
         "./package.json": "./package.json"
     },
     "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": ">=19",
+        "react-dom": ">=19"
     },
     "devDependencies": {
         "@josemi-icons/react": "^0.7.0",
         "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 95aa8a7c..f887d9f2 100644
--- a/package.json
+++ b/package.json
@@ -60,9 +60,9 @@
     },
     "dependencies": {
         "@josemi-icons/svg": "^0.7.0",
-        "lowcss": "^0.33.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "lowcss": "^0.34.1",
+        "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"