@marimo-team/frontend 0.21.2-dev37 → 0.21.2-dev40

package/src/core/storage/__tests__/state.test.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it } from "vitest";
+import { variableName } from "@/__tests__/branded";
 import type { VariableName } from "../../variables/types";
 import { exportedForTesting } from "../state";
 import type { StorageEntry, StorageNamespace, StorageState } from "../types";
@@ -7,7 +8,7 @@ import type { StorageEntry, StorageNamespace, StorageState } from "../types";
 const { initialState, reducer, createActions } = exportedForTesting;
 
 function makeNamespace(
-  overrides: Partial<StorageNamespace> & { name: string },
+  overrides: Partial<StorageNamespace> & { name: VariableName },
 ): StorageNamespace {
   return {
     backendType: overrides.backendType ?? "obstore",
@@ -53,8 +54,14 @@ describe("storage state", () => {
 
   describe("setNamespaces", () => {
     it("should add namespaces from an empty state", () => {
-      const ns1 = makeNamespace({ name: "my_s3", protocol: "s3" });
-      const ns2 = makeNamespace({ name: "my_gcs", protocol: "gcs" });
+      const ns1 = makeNamespace({
+        name: variableName("my_s3"),
+        protocol: "s3",
+      });
+      const ns2 = makeNamespace({
+        name: variableName("my_gcs"),
+        protocol: "gcs",
+      });
 
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
@@ -63,15 +70,18 @@ describe("storage state", () => {
 
     it("should merge namespaces by name, replacing existing ones", () => {
       const nsOld = makeNamespace({
-        name: "my_s3",
+        name: variableName("my_s3"),
         protocol: "s3",
         rootPath: "/old",
       });
-      const nsOther = makeNamespace({ name: "my_gcs", protocol: "gcs" });
+      const nsOther = makeNamespace({
+        name: variableName("my_gcs"),
+        protocol: "gcs",
+      });
       actions.setNamespaces({ namespaces: [nsOld, nsOther] });
 
       const nsUpdated = makeNamespace({
-        name: "my_s3",
+        name: variableName("my_s3"),
         protocol: "s3",
         rootPath: "/new",
       });
@@ -82,10 +92,10 @@ describe("storage state", () => {
     });
 
     it("should add new namespaces alongside existing ones", () => {
-      const ns1 = makeNamespace({ name: "ns1" });
+      const ns1 = makeNamespace({ name: variableName("ns1") });
       actions.setNamespaces({ namespaces: [ns1] });
 
-      const ns2 = makeNamespace({ name: "ns2" });
+      const ns2 = makeNamespace({ name: variableName("ns2") });
       actions.setNamespaces({ namespaces: [ns2] });
 
       expect(state.namespaces).toHaveLength(2);
@@ -101,7 +111,7 @@ describe("storage state", () => {
       });
 
       actions.setNamespaces({
-        namespaces: [makeNamespace({ name: "ns" })],
+        namespaces: [makeNamespace({ name: variableName("ns") })],
       });
 
       expect(state.entriesByPath.get("ns::")).toEqual([entry]);
@@ -205,7 +215,7 @@ describe("storage state", () => {
     });
 
     it("should not affect namespaces", () => {
-      const ns = makeNamespace({ name: "ns" });
+      const ns = makeNamespace({ name: variableName("ns") });
       actions.setNamespaces({ namespaces: [ns] });
 
       actions.setEntries({
@@ -263,7 +273,7 @@ describe("storage state", () => {
     });
 
     it("should not affect namespaces", () => {
-      const ns = makeNamespace({ name: "my_s3" });
+      const ns = makeNamespace({ name: variableName("my_s3") });
       actions.setNamespaces({ namespaces: [ns] });
       actions.setEntries({
         namespace: "my_s3",
@@ -293,31 +303,31 @@ describe("storage state", () => {
 
   describe("filterFromVariables", () => {
     it("should keep namespaces whose variable is still in scope", () => {
-      const ns1 = makeNamespace({ name: "var_a" });
-      const ns2 = makeNamespace({ name: "var_b" });
+      const ns1 = makeNamespace({ name: variableName("var_a") });
+      const ns2 = makeNamespace({ name: variableName("var_b") });
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
       actions.filterFromVariables([
-        "var_a" as VariableName,
-        "var_b" as VariableName,
+        variableName("var_a"),
+        variableName("var_b"),
       ]);
 
       expect(state.namespaces).toEqual([ns1, ns2]);
     });
 
     it("should remove namespaces whose variable is no longer in scope", () => {
-      const ns1 = makeNamespace({ name: "var_a" });
-      const ns2 = makeNamespace({ name: "var_b" });
+      const ns1 = makeNamespace({ name: variableName("var_a") });
+      const ns2 = makeNamespace({ name: variableName("var_b") });
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
-      actions.filterFromVariables(["var_a" as VariableName]);
+      actions.filterFromVariables([variableName("var_a")]);
 
       expect(state.namespaces).toEqual([ns1]);
     });
 
     it("should remove all named namespaces when given an empty variable list", () => {
-      const ns1 = makeNamespace({ name: "var_a" });
-      const ns2 = makeNamespace({ name: "var_b" });
+      const ns1 = makeNamespace({ name: variableName("var_a") });
+      const ns2 = makeNamespace({ name: variableName("var_b") });
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
       actions.filterFromVariables([]);
@@ -326,7 +336,7 @@ describe("storage state", () => {
     });
 
     it("should not affect entriesByPath", () => {
-      const ns = makeNamespace({ name: "ns" });
+      const ns = makeNamespace({ name: variableName("ns") });
       actions.setNamespaces({ namespaces: [ns] });
 
       const entry = makeEntry({ path: "file.txt" });

package/src/core/storage/state.ts

@@ -71,7 +71,7 @@ const {
     const names = new Set(variableNames);
     // Filter out namespaces whose backing variable is no longer in scope
     const namespaces = state.namespaces.filter((ns) => {
-      return names.has(ns.name as VariableName);
+      return names.has(ns.name);
     });
     return { ...state, namespaces };
   },

package/src/core/variables/__tests__/state.test.ts

@@ -1,19 +1,19 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it } from "vitest";
-import type { CellId } from "@/core/cells/ids";
+import { cellId, variableName } from "@/__tests__/branded";
 import { exportedForTesting } from "../state";
-import type { VariableName, Variables } from "../types";
+import type { Variables } from "../types";
 
 const { initialState, reducer, createActions } = exportedForTesting;
 
 const CellIds = {
-  a: "a" as CellId,
-  b: "b" as CellId,
+  a: cellId("a"),
+  b: cellId("b"),
 };
 
 const Names = {
-  x: "x" as VariableName,
-  y: "y" as VariableName,
+  x: variableName("x"),
+  y: variableName("y"),
 };
 
 describe("cell reducer", () => {

package/src/core/variables/types.ts

@@ -1,9 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { TypedString } from "../../utils/typed";
+import type { components } from "@marimo-team/marimo-api";
 import type { CellId } from "../cells/ids";
 
-export type VariableName = TypedString<"VariableName">;
+export type VariableName = components["schemas"]["VariableName"];
 
 export interface Variable {
   name: VariableName;

package/src/core/wasm/__tests__/state.test.ts

@@ -2,9 +2,9 @@
 
 import { createRef } from "react";
 import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { NotebookState } from "@/core/cells/cells";
 import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
 import { createCell, createCellRuntimeState } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { store } from "@/core/state/jotai";
@@ -17,17 +17,17 @@ describe("hasAnyOutputAtom", () => {
   ): NotebookState => ({
     ...initialNotebookState(),
     cellIds: new MultiColumn([
-      CollapsibleTree.from(outputs.map((_, i) => `${i}` as CellId)),
+      CollapsibleTree.from(outputs.map((_, i) => cellId(`${i}`))),
     ]),
     cellData: Object.fromEntries(
       outputs.map((_, i) => [
-        `${i}` as CellId,
-        createCell({ id: `${i}` as CellId }),
+        cellId(`${i}`),
+        createCell({ id: cellId(`${i}`) }),
       ]),
     ),
     cellRuntime: Object.fromEntries(
       outputs.map((output, i) => [
-        `${i}` as CellId,
+        `${i}`,
         createCellRuntimeState({
           output,
           status: "queued",
@@ -36,7 +36,7 @@ describe("hasAnyOutputAtom", () => {
       ]),
     ),
     cellHandles: Object.fromEntries(
-      outputs.map((_, i) => [`${i}` as CellId, createRef()]),
+      outputs.map((_, i) => [cellId(`${i}`), createRef()]),
     ),
   });
 
@@ -90,8 +90,8 @@ describe("hasAnyOutputAtom", () => {
 
   it("should return true when all outputs are idle", () => {
     const notebookState = createNotebookState([null, null]);
-    const cellId0 = "0" as CellId;
-    const cellId1 = "1" as CellId;
+    const cellId0 = cellId("0");
+    const cellId1 = cellId("1");
     // Some idle cell, so returns false
     store.set(notebookAtom, {
       ...notebookState,

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -24,7 +24,7 @@ import { Logger } from "@/utils/Logger";
 import { reloadSafe } from "@/utils/reload-safe";
 import { useAlertActions } from "../alerts/state";
 import { cacheInfoAtom } from "../cache/requests";
-import { type CellId, SCRATCH_CELL_ID, type UIElementId } from "../cells/ids";
+import { SCRATCH_CELL_ID } from "../cells/ids";
 import { useRunsActions } from "../cells/runs";
 import { focusAndScrollCellOutputIntoView } from "../cells/scrollCellIntoView";
 import type { CellData } from "../cells/types";
@@ -153,7 +153,7 @@ export function useMarimoKernelConnection(opts: {
         if (uiElement) {
           const buffers = safeExtractSetUIElementMessageBuffers(msg.data);
           UI_ELEMENT_REGISTRY.broadcastMessage(
-            uiElement as UIElementId,
+            uiElement,
             msg.data.message,
             buffers,
           );
@@ -173,14 +173,11 @@ export function useMarimoKernelConnection(opts: {
         AUTOCOMPLETER.resolve(msg.data.completion_id as RequestId, msg.data);
         return;
       case "function-call-result":
-        FUNCTIONS_REGISTRY.resolve(
-          msg.data.function_call_id as RequestId,
-          msg.data,
-        );
+        FUNCTIONS_REGISTRY.resolve(msg.data.function_call_id, msg.data);
         return;
       case "cell-op": {
         handleCellNotificationeration(msg.data, handleCellMessage);
-        const cellData = getNotebook().cellData[msg.data.cell_id as CellId];
+        const cellData = getNotebook().cellData[msg.data.cell_id];
         if (!cellData) {
           return;
         }
@@ -195,8 +192,8 @@ export function useMarimoKernelConnection(opts: {
         setVariables(
           msg.data.variables.map((v) => ({
             name: v.name as VariableName,
-            declaredBy: v.declared_by as CellId[],
-            usedBy: v.used_by as CellId[],
+            declaredBy: v.declared_by,
+            usedBy: v.used_by,
           })),
         );
         filterDatasetsFromVariables(
@@ -271,16 +268,16 @@ export function useMarimoKernelConnection(opts: {
         addColumnPreview(msg.data);
         return;
       case "sql-table-preview":
-        PreviewSQLTable.resolve(msg.data.request_id as RequestId, msg.data);
+        PreviewSQLTable.resolve(msg.data.request_id, msg.data);
         return;
       case "sql-table-list-preview":
-        PreviewSQLTableList.resolve(msg.data.request_id as RequestId, msg.data);
+        PreviewSQLTableList.resolve(msg.data.request_id, msg.data);
         return;
       case "validate-sql-result":
         ValidateSQL.resolve(msg.data.request_id as RequestId, msg.data);
         return;
       case "secret-keys-result":
-        SECRETS_REGISTRY.resolve(msg.data.request_id as RequestId, msg.data);
+        SECRETS_REGISTRY.resolve(msg.data.request_id, msg.data);
         return;
       case "cache-info":
         setCacheInfo(msg.data);
@@ -310,19 +307,19 @@ export function useMarimoKernelConnection(opts: {
         return;
 
       case "focus-cell":
-        focusAndScrollCellOutputIntoView(msg.data.cell_id as CellId);
+        focusAndScrollCellOutputIntoView(msg.data.cell_id);
         return;
       case "update-cell-codes":
         setCellCodes({
           codes: msg.data.codes,
-          ids: msg.data.cell_ids as CellId[],
+          ids: msg.data.cell_ids,
           codeIsStale: msg.data.code_is_stale,
           names: msg.data.names,
           configs: msg.data.configs,
         });
         return;
       case "update-cell-ids":
-        setCellIds({ cellIds: msg.data.cell_ids as CellId[] });
+        setCellIds({ cellIds: msg.data.cell_ids });
         return;
       default:
         logNever(msg.data);

package/src/plugins/impl/anywidget/model.ts

@@ -323,8 +323,7 @@ export async function handleWidgetMessage(
   const msg = notification.message;
 
   // Decode base64 buffers to DataViews (present in open/update/custom messages)
-  const base64Buffers: Base64String[] =
-    "buffers" in msg ? (msg.buffers as Base64String[]) : [];
+  const base64Buffers: Base64String[] = "buffers" in msg ? msg.buffers : [];
   const buffers = base64Buffers.map(base64ToDataView);
 
   switch (msg.method) {

package/src/stories/cell.stories.tsx

@@ -3,6 +3,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { createStore, Provider } from "jotai";
 import { createRef } from "react";
+import { cellId } from "@/__tests__/branded";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import {
   type CellRuntimeState,
@@ -18,7 +19,6 @@ import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { Cell as EditorCell } from "../components/editor/notebook-cell";
 import { TooltipProvider } from "../components/ui/tooltip";
-import type { CellId } from "../core/cells/ids";
 
 type Story = StoryObj<typeof Cell>;
 
@@ -34,11 +34,11 @@ const Cell: React.FC<{
     config?: CellConfig;
   };
 }> = ({ overrides = {} }) => {
-  const cellId = "1" as CellId;
+  const cid = cellId("1");
   const notebook: NotebookState = {
     cellData: {
-      [cellId]: {
-        id: cellId,
+      [cid]: {
+        id: cid,
         name: "cell_1",
         code: "import marimo as mo",
         edited: overrides.edited ?? false,
@@ -52,9 +52,9 @@ const Cell: React.FC<{
         lastExecutionTime: null,
       },
     },
-    cellIds: MultiColumn.from([[cellId]]),
+    cellIds: MultiColumn.from([[cid]]),
     cellRuntime: {
-      [cellId]: createCellRuntimeState({
+      [cid]: createCellRuntimeState({
         output: overrides.output ?? null,
         runElapsedTimeMs: overrides.runElapsedTimeMs ?? (10 as Milliseconds),
         status: overrides.status ?? "idle",
@@ -70,7 +70,7 @@ const Cell: React.FC<{
       }),
     },
     cellHandles: {
-      [cellId]: createRef(),
+      [cid]: createRef(),
     },
     cellLogs: [],
     history: [],
@@ -86,7 +86,7 @@ const Cell: React.FC<{
     <Provider store={store}>
       <TooltipProvider>
         <EditorCell
-          cellId={cellId}
+          cellId={cid}
           theme={"light"}
           showPlaceholder={false}
           mode={"edit"}

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -3,6 +3,7 @@
 import type { Meta } from "@storybook/react-vite";
 import { createStore, Provider } from "jotai";
 import { createRef } from "react";
+import { cellId } from "@/__tests__/branded";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import { createCellRuntimeState } from "@/core/cells/types";
 import { defaultUserConfig, parseAppConfig } from "@/core/config/config-schema";
@@ -99,8 +100,8 @@ export default {
 type W = Window & { __MARIMO_STATIC__?: { files: Record<string, unknown> } };
 
 const EditModeCodeShown = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid);
 
   const store = createStore();
   store.set(notebookAtom, notebook);
@@ -124,8 +125,8 @@ const EditModeCodeShown = () => {
 };
 
 const EditModeCodeHidden = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId, true);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid, true);
 
   const store = createStore();
   store.set(notebookAtom, notebook);
@@ -149,8 +150,8 @@ const EditModeCodeHidden = () => {
 };
 
 const ReadModeCodeShown = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid);
 
   const store = createStore();
   store.set(notebookAtom, notebook);
@@ -168,8 +169,8 @@ const ReadModeCodeShown = () => {
 };
 
 const ReadModeCodeHidden = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid);
 
   const store = createStore();
   store.set(notebookAtom, notebook);

package/src/stories/log-viewer.stories.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { cellId } from "@/__tests__/branded";
 import { LogViewer } from "@/components/editor/chrome/panels/logs-panel";
-import type { CellId } from "@/core/cells/ids";
 import { Dialog } from "../components/ui/dialog";
 import { TooltipProvider } from "../components/ui/tooltip";
 
@@ -23,37 +23,37 @@ export const Primary: Story = {
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Hello world!",
             },
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Running cell...",
             },
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Done!",
             },
             {
               timestamp: Date.now(),
               level: "stderr",
-              cellId: "cell2" as CellId,
+              cellId: cellId("cell2"),
               message: "Output is too large!",
             },
             {
               timestamp: Date.now(),
               level: "stderr",
-              cellId: "cell2" as CellId,
+              cellId: cellId("cell2"),
               message: "String length is too short.".repeat(100),
             },
-            ...Array.from({ length: 100 }).map((_, index) => ({
+            ...Array.from({ length: 100 }).map(() => ({
               timestamp: Date.now(),
               level: "stdout" as const,
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Running cell...",
             })),
           ]}

package/src/stories/variables.stories.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { cellId } from "@/__tests__/branded";
 import { VariableTable } from "@/components/variables/variables-table";
-import type { CellId } from "@/core/cells/ids";
 
 const meta: Meta<typeof VariableTable> = {
   title: "VariableTable",
@@ -51,7 +51,7 @@ export const Primary: Story = {
     <div className="max-w-4xl">
       <VariableTable
         variables={variables}
-        cellIds={["2", "1", "3"] as CellId[]}
+        cellIds={[cellId("2"), cellId("1"), cellId("3")]}
       />
     </div>
   ),