@marimo-team/frontend 0.24.1-dev2 → 0.24.1-dev21

package/src/core/codemirror/language/languages/sql/__tests__/renderers.test.tsx

@@ -9,13 +9,18 @@ import type {
 } from "@/core/kernel/messages";
 import { renderColumnInfo, renderTableInfo } from "../renderers";
 
-const geometryColumn = {
+const bogusColumn = {
   name: "geom",
-  type: "geometry" as DataType,
+  type: "bogus_type" as DataType,
   external_type: "geometry",
   sample_values: [],
 } as DataTableColumn;
 
+const geometryColumn = {
+  ...bogusColumn,
+  type: "geometry" as DataType,
+} as DataTableColumn;
+
 describe("SQL renderers", () => {
   it("renders table information with an unrecognized column type", () => {
     const table: DataTable = {
@@ -26,7 +31,7 @@ describe("SQL renderers", () => {
       num_rows: null,
       num_columns: 1,
       variable_name: null,
-      columns: [geometryColumn],
+      columns: [bogusColumn],
       primary_keys: [],
       indexes: [],
     };
@@ -37,8 +42,14 @@ describe("SQL renderers", () => {
   });
 
   it("renders column information with an unrecognized column type", () => {
-    const result = render(renderColumnInfo(geometryColumn));
+    const result = render(renderColumnInfo(bogusColumn));
 
     expect(result.container.querySelector("svg")).not.toBeNull();
   });
+
+  it("renders geometry column information with the map pin icon", () => {
+    const result = render(renderColumnInfo(geometryColumn));
+
+    expect(result.container.querySelector(".lucide-map-pin")).not.toBeNull();
+  });
 });

package/src/core/codemirror/language/languages/sql/renderers.tsx

@@ -41,6 +41,7 @@ const DATA_TYPE_COLORS: Record<DataType, string> = {
   number: "bg-(--purple-4) text-(--purple-11)",
   integer: "bg-(--purple-4) text-(--purple-11)",
   string: "bg-(--blue-4) text-(--blue-11)",
+  geometry: "bg-(--cyan-4) text-(--cyan-11)",
   unknown: "bg-(--slate-4) text-(--slate-11)",
 };
 

package/src/core/islands/bridge.ts

@@ -356,6 +356,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendFileDetails = throwNotImplemented;
   openTutorial = throwNotImplemented;
   getExportAvailability = throwNotImplemented;
+  installExportRequirements = throwNotImplemented;
   exportAsHTML = throwNotImplemented;
   exportAsIPYNB = throwNotImplemented;
   exportAsMarkdown = throwNotImplemented;

package/src/core/kernel/messages.ts

@@ -11,6 +11,7 @@ export const DATA_TYPES = [
   "date",
   "datetime",
   "time",
+  "geometry",
   "unknown",
 ] as const;
 export type ModelLifecycle = NotificationMessageData<"model-lifecycle">;

package/src/core/mode.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom, useAtomValue } from "jotai";
+import { KnownQueryParams } from "@/core/constants";
 import { isIslands } from "@/core/islands/utils";
 import { assertExists } from "@/utils/assertExists";
 import { invariant } from "@/utils/invariant";
@@ -98,5 +99,9 @@ export const kioskModeAtom = atom<boolean>(false);
  */
 export function useInstallAllowed(): boolean {
   const { mode } = useAtomValue(viewStateAtom);
-  return mode !== "read";
+  const kioskMode = useAtomValue(kioskModeAtom);
+  const kioskRequested =
+    new URLSearchParams(window.location.search).get(KnownQueryParams.kiosk) ===
+    "true";
+  return mode !== "read" && !kioskMode && !kioskRequested;
 }

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -2,7 +2,9 @@
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { cellId, requestId, uiElementId } from "@/__tests__/branded";
+import { waitForKernelToBeInstantiated } from "../../kernel/state";
 import type { RuntimeManager } from "../../runtime/runtime";
+import { waitForConnectionOpen } from "../connection";
 import { createLazyRequests } from "../requests-lazy";
 import type {
   EditRequests,
@@ -55,6 +57,10 @@ describe("createLazyRequests", () => {
       sendInterrupt: vi.fn().mockResolvedValue({ interrupted: true }),
       sendPdb: vi.fn().mockResolvedValue({ pdb: true }),
       sendRunScratchpad: vi.fn().mockResolvedValue({ run: true }),
+      installExportRequirements: vi.fn().mockResolvedValue({
+        source: "server",
+        formats: [],
+      }),
     } as unknown as EditRequests & RunRequests;
   });
 
@@ -104,6 +110,40 @@ describe("createLazyRequests", () => {
     expect(mockDelegate.getExportAvailability).toHaveBeenCalledOnce();
   });
 
+  it("installs export requirements without waiting for the kernel", async () => {
+    const lazyRequests = createLazyRequests(
+      mockDelegate,
+      mockGetRuntimeManager,
+    );
+
+    await lazyRequests.installExportRequirements({ format: "pdf" });
+
+    expect(mockInit).toHaveBeenCalledOnce();
+    expect(waitForConnectionOpen).toHaveBeenCalledOnce();
+    expect(waitForKernelToBeInstantiated).not.toHaveBeenCalled();
+    expect(mockDelegate.installExportRequirements).toHaveBeenCalledWith({
+      format: "pdf",
+    });
+  });
+
+  it("sends instantiate without waiting for the kernel", async () => {
+    const lazyRequests = createLazyRequests(
+      mockDelegate,
+      mockGetRuntimeManager,
+    );
+    const request = {
+      objectIds: [uiElementId("obj1")],
+      values: [],
+    };
+
+    await lazyRequests.sendInstantiate(request);
+
+    expect(mockInit).toHaveBeenCalledOnce();
+    expect(waitForConnectionOpen).toHaveBeenCalledOnce();
+    expect(waitForKernelToBeInstantiated).not.toHaveBeenCalled();
+    expect(mockDelegate.sendInstantiate).toHaveBeenCalledWith(request);
+  });
+
   it("should call init once before first request", async () => {
     const lazyRequests = createLazyRequests(
       mockDelegate,

package/src/core/network/__tests__/requests-network.test.ts

@@ -143,6 +143,19 @@ describe("createNetworkRequests", () => {
       expect(mockClient.GET).toHaveBeenCalledWith("/api/export/availability");
     });
 
+    it("installExportRequirements should POST the export format", async () => {
+      const requests = createNetworkRequests();
+      await requests.installExportRequirements({ format: "pdf" });
+
+      expect(mockClient.POST).toHaveBeenCalledWith(
+        "/api/export/requirements/install",
+        expect.objectContaining({
+          body: { format: "pdf" },
+          params: expect.anything(),
+        }),
+      );
+    });
+
     it("discoverDataSources should POST to the discovery endpoint", async () => {
       const requests = createNetworkRequests();
       const request = { requestId: "discovery-request" } as any;

package/src/core/network/requests-lazy.ts

@@ -26,6 +26,10 @@ type AllRequests = EditRequests & RunRequests;
 //   executing. Use for user-initiated actions that should "just work" and
 //   kick off the kernel if needed (e.g., clicking Run).
 //
+// - startConnectionWithoutKernel: Initializes the runtime and waits for an open
+//   connection. Use for session-scoped server requests that do not need an
+//   instantiated kernel.
+//
 // - waitForConnectionOpen: Waits for an existing connection but won't start one.
 //   Use for operations that depend on a running kernel but shouldn't be the
 //   trigger to start it (e.g., saving, interrupting).
@@ -38,6 +42,7 @@ type Action =
   | "throwError"
   | "dropRequest"
   | "startConnection"
+  | "startConnectionWithoutKernel"
   | "waitForConnectionOpen"
   | "serverOnly";
 
@@ -45,7 +50,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   // These will start a connection if not already connected and then wait until the connection is open
   sendComponentValues: "startConnection",
   sendModelValue: "startConnection",
-  sendInstantiate: "startConnection",
+  sendInstantiate: "startConnectionWithoutKernel",
   sendRun: "startConnection",
   sendDeleteCell: "startConnection",
   sendRunScratchpad: "startConnection",
@@ -107,6 +112,9 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   getEnvironmentInfo: "serverOnly",
   getExportAvailability: "serverOnly",
 
+  // Session-scoped server operations
+  installExportRequirements: "startConnectionWithoutKernel",
+
   // Home operations throw errors
   getRecentFiles: "startConnection",
   getWorkspaceFiles: "startConnection",
@@ -186,13 +194,12 @@ export function createLazyRequests(
           await waitForKernelToBeInstantiated();
           return request(...args);
 
+        case "startConnectionWithoutKernel":
         case "startConnection":
           // Start connection and wait for it to be open
           await initOnce(runtimeManager);
           await waitForConnectionOpen();
-          if (key !== "sendInstantiate") {
-            // We don't need to wait for kernel to be instantiated if we are sending an instantiate request
-            // otherwise we will wait forever
+          if (action === "startConnection") {
             await waitForKernelToBeInstantiated();
           }
           return request(...args);

package/src/core/network/requests-network.ts

@@ -417,6 +417,14 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     getExportAvailability: () => {
       return getClient().GET("/api/export/availability").then(handleResponse);
     },
+    installExportRequirements: (request) => {
+      return getClient()
+        .POST("/api/export/requirements/install", {
+          body: request,
+          params: getParams(),
+        })
+        .then(handleResponse);
+    },
     exportAsHTML: async (request) => {
       if (
         process.env.NODE_ENV === "development" ||

package/src/core/network/requests-static.ts

@@ -84,6 +84,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     getRunningNotebooks: throwNotInEditMode,
     shutdownSession: throwNotInEditMode,
     getExportAvailability: throwNotInEditMode,
+    installExportRequirements: throwNotInEditMode,
     exportAsHTML: throwNotInEditMode,
     exportAsIPYNB: throwNotInEditMode,
     exportAsMarkdown: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -65,6 +65,7 @@ export function createErrorToastingRequests(
     getRunningNotebooks: "Failed to get running notebooks",
     shutdownSession: "Failed to shutdown session",
     getExportAvailability: "", // No toast
+    installExportRequirements: "Failed to install export requirements",
     exportAsHTML: "Failed to export HTML",
     exportAsIPYNB: "Failed to export ipynb",
     exportAsMarkdown: "Failed to export Markdown",

package/src/core/network/types.ts

@@ -29,6 +29,8 @@ export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
 export type ExportAsPDFRequest = schemas["ExportAsPDFRequest"];
 export type ExportAvailabilityResponse = schemas["ExportAvailabilityResponse"];
+export type InstallExportRequirementsRequest =
+  schemas["InstallExportRequirementsRequest"];
 export type UpdateCellOutputsRequest = schemas["UpdateCellOutputsRequest"];
 
 export interface ExportedFile<T extends BlobPart = BlobPart> {
@@ -223,6 +225,9 @@ export interface EditRequests {
   ) => Promise<RunningNotebooksResponse>;
   // Export requests
   getExportAvailability: () => Promise<ExportAvailabilityResponse>;
+  installExportRequirements: (
+    request: InstallExportRequirementsRequest,
+  ) => Promise<ExportAvailabilityResponse>;
   exportAsHTML: (request: ExportAsHTMLRequest) => Promise<ExportedFile<string>>;
   exportAsIPYNB: (
     request: ExportAsIPYNBRequest,

package/src/core/wasm/bridge.ts

@@ -675,6 +675,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   getRunningNotebooks = throwNotImplemented;
   shutdownSession = throwNotImplemented;
   getExportAvailability = throwNotImplemented;
+  installExportRequirements = throwNotImplemented;
   exportAsIPYNB = throwNotImplemented;
   exportAsPDF = throwNotImplemented;
   autoExportAsHTML = throwNotImplemented;

package/src/plugins/impl/MatrixPlugin.tsx

@@ -54,6 +54,40 @@ export class MatrixPlugin implements IPlugin<T, Data> {
 }
 
 const PIXELS_PER_STEP = 10;
+const COARSE_MULTIPLIER = 10;
+const FINE_MULTIPLIER = 0.1;
+
+/** Step multiplier from modifier keys: shift = coarse, alt = fine. */
+const stepMultiplier = (e: { shiftKey: boolean; altKey: boolean }): number => {
+  if (e.shiftKey) {
+    return COARSE_MULTIPLIER;
+  }
+  if (e.altKey) {
+    return FINE_MULTIPLIER;
+  }
+  return 1;
+};
+
+/**
+ * Strip floating-point noise from step arithmetic (e.g. 3 * 0.1).
+ * The noise tolerance scales with the step so that legitimately tiny
+ * results (e.g. from a 2e-14 step) are preserved, while noise left over
+ * from arithmetic on ordinary magnitudes (e.g. the 5.55e-17 residue of
+ * 0.3 - 3 * 0.1) still snaps away.
+ */
+const cleanFloat = (x: number, step: number): number => {
+  const rounded = Number(x.toFixed(12));
+  const tolerance =
+    Number.EPSILON * Math.max(Math.abs(x), Math.abs(step)) * 100;
+  return Math.abs(x - rounded) <= tolerance ? rounded : x;
+};
+
+interface EditState {
+  row: number;
+  col: number;
+  text: string;
+  selectAll: boolean;
+}
 
 interface MatrixComponentProps extends Data {
   value: T;
@@ -80,6 +114,7 @@ const MatrixComponent = ({
     col: number;
     startX: number;
     startValue: number;
+    multiplier: number;
   } | null>(null);
   const [activeCell, setActiveCell] = useState<{
     row: number;
@@ -95,6 +130,16 @@ const MatrixComponent = ({
   }, [value]);
   const displayValue = activeCell == null ? value : draft;
 
+  // Editing state is mirrored in a ref so that the blur fired while
+  // committing (refocusing the cell unmounts the input) can't commit twice.
+  const [editing, setEditingState] = useState<EditState | null>(null);
+  const editingRef = useRef<EditState | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const setEditing = useCallback((edit: EditState | null) => {
+    editingRef.current = edit;
+    setEditingState(edit);
+  }, []);
+
   const formatValue = (val: number) =>
     scientific ? val.toExponential(precision) : val.toFixed(precision);
 
@@ -112,22 +157,131 @@ const MatrixComponent = ({
     [minValue, maxValue],
   );
 
+  // The single mutation chokepoint for every edit path (drag, arrow, type).
+  // Bounds are enforced here so no path can escape them. In symmetric mode
+  // the pair must stay equal *and* respect both cells' bounds, so the shared
+  // value is clamped to the intersection of the two ranges. Returns null
+  // when the clamped value is already in place, so callers can skip
+  // redundant updates.
+  const withCellValue = useCallback(
+    (base: T, row: number, col: number, newValue: number): T | null => {
+      const mirrored = symmetric && row !== col;
+      let clamped = clampValue(newValue, row, col);
+      if (mirrored) {
+        clamped = clampValue(clamped, col, row);
+      }
+      if (clamped === base[row][col]) {
+        return null;
+      }
+      const copy = base.map((r) => [...r]);
+      copy[row][col] = clamped;
+      if (mirrored) {
+        copy[col][row] = clamped;
+      }
+      return copy;
+    },
+    [symmetric, clampValue],
+  );
+
+  const startEditing = useCallback(
+    (row: number, col: number, seed?: string) => {
+      if (disabled[row][col]) {
+        return;
+      }
+      dragState.current = null;
+      setActiveCell(null);
+      setEditing({
+        row,
+        col,
+        text: seed ?? String(value[row][col]),
+        selectAll: seed == null,
+      });
+    },
+    [disabled, value, setEditing],
+  );
+
+  // Callback ref: focus the input when it mounts. When editing starts from
+  // a typed character, place the caret after the seed instead of selecting.
+  const focusInput = useCallback((el: HTMLInputElement | null) => {
+    inputRef.current = el;
+    if (el) {
+      el.focus();
+      if (editingRef.current?.selectAll) {
+        el.select();
+      } else {
+        el.setSelectionRange(el.value.length, el.value.length);
+      }
+    }
+  }, []);
+
+  const commitEdit = useCallback(
+    (refocusCell: boolean) => {
+      const edit = editingRef.current;
+      if (!edit) {
+        return;
+      }
+      const cell = refocusCell ? inputRef.current?.closest("td") : null;
+      setEditing(null);
+      const text = edit.text.trim();
+      const parsed = Number(text);
+      // Typed values are clamped to bounds but not snapped to `step`,
+      // so exact values like 2.32e7 survive.
+      if (text !== "" && Number.isFinite(parsed)) {
+        const copy = withCellValue(value, edit.row, edit.col, parsed);
+        if (copy) {
+          setDraft(copy);
+          setValue(copy);
+        }
+      }
+      cell?.focus();
+    },
+    [value, withCellValue, setValue, setEditing],
+  );
+
+  const cancelEdit = useCallback(() => {
+    const cell = inputRef.current?.closest("td");
+    setEditing(null);
+    cell?.focus();
+  }, [setEditing]);
+
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitEdit(true);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancelEdit();
+      }
+    },
+    [commitEdit, cancelEdit],
+  );
+
   const handlePointerDown = useCallback(
-    (e: React.PointerEvent, row: number, col: number) => {
-      if (disabled[row][col] || !(e.target instanceof Element)) {
+    (e: React.PointerEvent<HTMLTableCellElement>, row: number, col: number) => {
+      if (
+        disabled[row][col] ||
+        editing != null ||
+        !(e.target instanceof Element)
+      ) {
         return;
       }
       e.preventDefault();
+      // preventDefault also suppresses the browser's click-to-focus, so
+      // focus the cell explicitly to keep keyboard stepping reachable.
+      e.currentTarget.focus();
       e.target.setPointerCapture(e.pointerId);
       dragState.current = {
         row,
         col,
         startX: e.clientX,
         startValue: displayValue[row][col],
+        multiplier: stepMultiplier(e),
       };
       setActiveCell({ row, col });
     },
-    [disabled, displayValue],
+    [disabled, editing, displayValue],
   );
 
   const handlePointerMove = useCallback(
@@ -136,26 +290,32 @@ const MatrixComponent = ({
       if (!state) {
         return;
       }
+      const multiplier = stepMultiplier(e);
+      if (multiplier !== state.multiplier) {
+        // Rebase so toggling a modifier mid-drag rescales future movement
+        // instead of jumping the value.
+        state.startX = e.clientX;
+        state.startValue = displayValue[state.row][state.col];
+        state.multiplier = multiplier;
+      }
       const { row, col, startX, startValue } = state;
       const dx = e.clientX - startX;
-      const cellStep = step[row][col];
+      const cellStep = step[row][col] * multiplier;
       const steps = Math.round(dx / PIXELS_PER_STEP);
-      const rawValue = startValue + steps * cellStep;
-      const newValue = clampValue(rawValue, row, col);
-
-      if (newValue !== displayValue[row][col]) {
-        const copy = displayValue.map((r) => [...r]);
-        copy[row][col] = newValue;
-        if (symmetric && row !== col) {
-          copy[col][row] = newValue;
-        }
+      const copy = withCellValue(
+        displayValue,
+        row,
+        col,
+        cleanFloat(startValue + steps * cellStep, cellStep),
+      );
+      if (copy) {
         setDraft(copy);
         if (!debounce) {
           setValue(copy);
         }
       }
     },
-    [step, clampValue, displayValue, symmetric, debounce, setValue],
+    [step, displayValue, withCellValue, debounce, setValue],
   );
 
   const handlePointerUp = useCallback(() => {
@@ -168,27 +328,61 @@ const MatrixComponent = ({
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent, row: number, col: number) => {
-      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        if (disabled[row][col]) {
-          return;
-        }
+      if (disabled[row][col]) {
+        return;
+      }
+      if (e.key === "Enter" || e.key === "F2") {
         e.preventDefault();
-        const cellStep = step[row][col];
-        const delta = e.key === "ArrowUp" ? cellStep : -cellStep;
-        const newValue = clampValue(displayValue[row][col] + delta, row, col);
-
-        if (newValue !== displayValue[row][col]) {
-          const copy = displayValue.map((r) => [...r]);
-          copy[row][col] = newValue;
-          if (symmetric && row !== col) {
-            copy[col][row] = newValue;
-          }
-          setDraft(copy);
-          setValue(copy);
-        }
+        startEditing(row, col);
+        return;
+      }
+      // Typing a number starts editing, seeded with the typed character.
+      if (
+        e.key.length === 1 &&
+        /[\d.+-]/.test(e.key) &&
+        !e.ctrlKey &&
+        !e.metaKey &&
+        !e.altKey
+      ) {
+        e.preventDefault();
+        startEditing(row, col, e.key);
+        return;
+      }
+      const cellStep = step[row][col];
+      let delta: number;
+      switch (e.key) {
+        // Right/left mirror up/down, matching the horizontal drag direction
+        // (and the native slider convention).
+        case "ArrowUp":
+        case "ArrowRight":
+          delta = cellStep * stepMultiplier(e);
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          delta = -cellStep * stepMultiplier(e);
+          break;
+        case "PageUp":
+          delta = cellStep * COARSE_MULTIPLIER;
+          break;
+        case "PageDown":
+          delta = -cellStep * COARSE_MULTIPLIER;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      const copy = withCellValue(
+        displayValue,
+        row,
+        col,
+        cleanFloat(displayValue[row][col] + delta, delta),
+      );
+      if (copy) {
+        setDraft(copy);
+        setValue(copy);
       }
     },
-    [disabled, step, displayValue, clampValue, symmetric, setValue],
+    [disabled, startEditing, step, displayValue, withCellValue, setValue],
   );
 
   const hasRowLabels = rowLabels != null && rowLabels.length > 0;
@@ -238,6 +432,10 @@ const MatrixComponent = ({
                   const isDisabled = disabled[i][j];
                   const isActive =
                     activeCell?.row === i && activeCell?.col === j;
+                  const cellEdit =
+                    editing != null && editing.row === i && editing.col === j
+                      ? editing
+                      : null;
                   const rowLabel = rowLabels?.[i] ?? `Row ${i + 1}`;
                   const colLabel = columnLabels?.[j] ?? `Column ${j + 1}`;
                   return (
@@ -247,24 +445,47 @@ const MatrixComponent = ({
                         "relative text-center min-w-14 h-8 px-2 transition-colors touch-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden",
                         isDisabled
                           ? "cursor-default text-muted-foreground"
-                          : "cursor-ew-resize text-link hover:bg-accent",
-                        isActive && "bg-accent",
+                          : cellEdit
+                            ? "cursor-text"
+                            : "cursor-ew-resize text-link hover:bg-accent",
+                        (isActive || cellEdit != null) && "bg-accent",
                         j === 0 && "bracket-l",
                         j === numCols - 1 && "bracket-r",
                         i === 0 && "bracket-t",
                         i === numRows - 1 && "bracket-b",
                       )}
                       tabIndex={isDisabled ? -1 : 0}
+                      title={String(cellValue)}
                       aria-label={`${rowLabel}, ${colLabel}`}
                       aria-valuenow={cellValue}
                       aria-valuemin={minValue?.[i]?.[j]}
                       aria-valuemax={maxValue?.[i]?.[j]}
                       aria-disabled={isDisabled || undefined}
                       onPointerDown={(e) => handlePointerDown(e, i, j)}
+                      onDoubleClick={() => startEditing(i, j)}
                       onKeyDown={(e) => handleKeyDown(e, i, j)}
                       data-testid={`matrix-cell-${i}-${j}`}
                     >
-                      {formatValue(cellValue)}
+                      {cellEdit ? (
+                        <input
+                          ref={focusInput}
+                          className="bg-transparent text-center font-mono text-sm text-foreground outline-none select-text"
+                          style={{
+                            width: `${Math.max(cellEdit.text.length + 2, 6)}ch`,
+                          }}
+                          value={cellEdit.text}
+                          onChange={(e) =>
+                            setEditing({ ...cellEdit, text: e.target.value })
+                          }
+                          onKeyDown={handleInputKeyDown}
+                          onBlur={() => commitEdit(false)}
+                          onPointerDown={(e) => e.stopPropagation()}
+                          aria-label={`Edit ${rowLabel}, ${colLabel}`}
+                          data-testid={`matrix-input-${i}-${j}`}
+                        />
+                      ) : (
+                        formatValue(cellValue)
+                      )}
                     </td>
                   );
                 })}