feat(rendering): component based

src/context/TerminalCanvasContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+import { type TerminalRenderer } from "~/utils/terminal/renderer";
+
+const TerminalCanvasContext = createContext<TerminalRenderer | undefined>(
+  undefined,
+);
+
+export const TerminalCanvasContextProvider = TerminalCanvasContext.Provider;
+
+export const useTerminalCanvas = () => {
+  const context = useContext(TerminalCanvasContext);
+  if (!context)
+    throw new Error(
+      "useTerminalCanvas must be used inside a Terminal component",
+    );
+
+  return context;
+};

src/context/TerminalContext.tsx

@@ -1,8 +1,8 @@
 import { createContext, useContext } from "react";
 
-const TerminalContext = createContext<{ cols: number; rows: number } | null>(
-  null,
-);
+const TerminalContext = createContext<
+  { cols: number; rows: number } | undefined
+>(undefined);
 
 export const TerminalContextProvider = TerminalContext.Provider;