@marimo-team/islands 0.23.2-dev33 → 0.23.2-dev37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.2-dev33",
+  "version": "0.23.2-dev37",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/__tests__/sentinel-cell.test.tsx

@@ -0,0 +1,83 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SentinelCell } from "../sentinel-cell";
+import type { CellValueSentinel } from "../types";
+
+function renderSentinel(sentinel: CellValueSentinel) {
+  const { container } = render(<SentinelCell sentinel={sentinel} />);
+  return container.querySelector("span")!;
+}
+
+describe("SentinelCell", () => {
+  it("renders null as None", () => {
+    const span = renderSentinel({ type: "null", value: null });
+    expect(span.textContent).toBe("None");
+    expect(span.getAttribute("aria-label")).toBe("None");
+    expect(span.className).toContain("italic");
+    expect(span.className).toContain("bg-muted");
+  });
+
+  it("renders empty string as <empty>", () => {
+    const span = renderSentinel({ type: "empty-string", value: "" });
+    expect(span.textContent).toBe("<empty>");
+    expect(span.getAttribute("aria-label")).toBe("empty string");
+  });
+
+  it("renders single space", () => {
+    const span = renderSentinel({ type: "whitespace", value: " " });
+    expect(span.textContent).toBe("\u2423");
+    expect(span.getAttribute("aria-label")).toBe("1 space");
+  });
+
+  it("renders multiple spaces", () => {
+    const span = renderSentinel({ type: "whitespace", value: "   " });
+    expect(span.textContent).toBe("\u2423\u2423\u2423");
+    expect(span.getAttribute("aria-label")).toBe("3 spaces");
+  });
+
+  it("renders tab", () => {
+    const span = renderSentinel({ type: "whitespace", value: "\t" });
+    expect(span.textContent).toBe("\\t");
+    expect(span.getAttribute("aria-label")).toBe("1 tab");
+  });
+
+  it("renders newline", () => {
+    const span = renderSentinel({ type: "whitespace", value: "\n" });
+    expect(span.textContent).toBe("\\n");
+    expect(span.getAttribute("aria-label")).toBe("1 newline");
+  });
+
+  it("renders mixed whitespace", () => {
+    const span = renderSentinel({ type: "whitespace", value: "\t \n" });
+    expect(span.textContent).toBe("\\t\u2423\\n");
+    expect(span.getAttribute("aria-label")).toBe("1 tab, 1 space, 1 newline");
+  });
+
+  it("renders NaN", () => {
+    const span = renderSentinel({ type: "nan", value: Number.NaN });
+    expect(span.textContent).toBe("NaN");
+  });
+
+  it("renders inf", () => {
+    const span = renderSentinel({ type: "positive-infinity", value: Infinity });
+    expect(span.textContent).toBe("inf");
+    expect(span.getAttribute("title")).toBe("Infinity");
+  });
+
+  it("renders -inf", () => {
+    const span = renderSentinel({
+      type: "negative-infinity",
+      value: -Infinity,
+    });
+    expect(span.textContent).toBe("-inf");
+    expect(span.getAttribute("title")).toBe("-Infinity");
+  });
+
+  it("renders NaT", () => {
+    const span = renderSentinel({ type: "nat", value: "NaT" });
+    expect(span.textContent).toBe("NaT");
+    expect(span.getAttribute("title")).toBe("NaT (Not a Time)");
+  });
+});

package/src/components/data-table/__tests__/utils.test.ts

@@ -3,6 +3,7 @@
 import type { Table } from "@tanstack/react-table";
 import { describe, expect, it } from "vitest";
 import {
+  detectSentinel,
   getClipboardContent,
   getPageIndexForRow,
   getRawValue,
@@ -186,6 +187,133 @@ describe("getClipboardContent", () => {
   });
 });
 
+describe("detectSentinel", () => {
+  it("should detect null and undefined", () => {
+    expect(detectSentinel(null, undefined)).toEqual({
+      type: "null",
+      value: null,
+    });
+    expect(detectSentinel(undefined, undefined)).toEqual({
+      type: "null",
+      value: undefined,
+    });
+  });
+
+  it("should detect empty string", () => {
+    expect(detectSentinel("", "string")).toEqual({
+      type: "empty-string",
+      value: "",
+    });
+  });
+
+  it("should detect whitespace-only strings", () => {
+    expect(detectSentinel(" ", "string")).toEqual({
+      type: "whitespace",
+      value: " ",
+    });
+    expect(detectSentinel("   ", "string")).toEqual({
+      type: "whitespace",
+      value: "   ",
+    });
+    expect(detectSentinel("\t", "string")).toEqual({
+      type: "whitespace",
+      value: "\t",
+    });
+    expect(detectSentinel("\n", "string")).toEqual({
+      type: "whitespace",
+      value: "\n",
+    });
+    expect(detectSentinel("\t \n", "string")).toEqual({
+      type: "whitespace",
+      value: "\t \n",
+    });
+  });
+
+  it("should detect NaN", () => {
+    expect(detectSentinel(Number.NaN, "number")).toEqual({
+      type: "nan",
+      value: Number.NaN,
+    });
+  });
+
+  it("should detect Infinity", () => {
+    expect(detectSentinel(Number.POSITIVE_INFINITY, "number")).toEqual({
+      type: "positive-infinity",
+      value: Number.POSITIVE_INFINITY,
+    });
+    expect(detectSentinel(Number.NEGATIVE_INFINITY, "number")).toEqual({
+      type: "negative-infinity",
+      value: Number.NEGATIVE_INFINITY,
+    });
+  });
+
+  it("should return null for normal values", () => {
+    expect(detectSentinel("hello", "string")).toBeNull();
+    expect(detectSentinel(42, "number")).toBeNull();
+    expect(detectSentinel(0, "number")).toBeNull();
+    expect(detectSentinel(-1.5, "number")).toBeNull();
+    expect(detectSentinel(true, "boolean")).toBeNull();
+    expect(detectSentinel(false, "boolean")).toBeNull();
+    expect(detectSentinel({}, "unknown")).toBeNull();
+    expect(detectSentinel([], "unknown")).toBeNull();
+  });
+
+  it("should not match literal null-like strings", () => {
+    expect(detectSentinel("null", "string")).toBeNull();
+    expect(detectSentinel("NULL", "string")).toBeNull();
+    expect(detectSentinel("None", "string")).toBeNull();
+  });
+
+  it("should not match string NaN/Infinity in non-numeric columns", () => {
+    expect(detectSentinel("NaN", "string")).toBeNull();
+    expect(detectSentinel("Infinity", "string")).toBeNull();
+    expect(detectSentinel("-Infinity", "string")).toBeNull();
+  });
+
+  it("should match string NaN/Infinity in numeric columns", () => {
+    expect(detectSentinel("NaN", "number")).toEqual({
+      type: "nan",
+      value: "NaN",
+    });
+    expect(detectSentinel("Infinity", "number")).toEqual({
+      type: "positive-infinity",
+      value: "Infinity",
+    });
+    expect(detectSentinel("-Infinity", "number")).toEqual({
+      type: "negative-infinity",
+      value: "-Infinity",
+    });
+    expect(detectSentinel("inf", "number")).toEqual({
+      type: "positive-infinity",
+      value: "inf",
+    });
+    expect(detectSentinel("-inf", "number")).toEqual({
+      type: "negative-infinity",
+      value: "-inf",
+    });
+  });
+
+  it("should still not match normal strings in numeric columns", () => {
+    expect(detectSentinel("hello", "number")).toBeNull();
+    expect(detectSentinel("42", "number")).toBeNull();
+  });
+
+  it("should not match NaT in non-temporal columns", () => {
+    expect(detectSentinel("NaT", "string")).toBeNull();
+  });
+
+  it("should match NaT in temporal columns", () => {
+    expect(detectSentinel("NaT", "datetime")).toEqual({
+      type: "nat",
+      value: "NaT",
+    });
+    expect(detectSentinel("NaT", "date")).toEqual({
+      type: "nat",
+      value: "NaT",
+    });
+  });
+});
+
 function createMockTableWithMeta<TData>(rawData?: TData[]): Table<TData> {
   return {
     options: {

package/src/components/data-table/column-header.tsx

@@ -53,6 +53,7 @@ import {
   SelectValue,
 } from "../ui/select";
 import { type ColumnFilterForType, Filter } from "./filters";
+import { SentinelCell } from "./sentinel-cell";
 import {
   ClearFilterMenuItem,
   FilterButtons,
@@ -65,7 +66,7 @@ import {
   renderSortFilterIcon,
   renderSorts,
 } from "./header-items";
-import { stringifyUnknownValue } from "./utils";
+import { detectSentinel, stringifyUnknownValue } from "./utils";
 
 const TOP_K_ROWS = 30;
 
@@ -647,6 +648,10 @@ const PopoverFilterByValues = <TData, TValue>({
             {filteredData.map(([value, count], rowIndex) => {
               const isSelected = chosenValues.has(value);
               const valueString = stringifyUnknownValue({ value });
+              const sentinel = detectSentinel(
+                value,
+                column.columnDef.meta?.dataType,
+              );
 
               return (
                 <CommandItem
@@ -661,7 +666,11 @@ const PopoverFilterByValues = <TData, TValue>({
                     className="mr-3 h-3.5 w-3.5"
                   />
                   <span className="flex-1 overflow-hidden max-h-20 line-clamp-3">
-                    {valueString}
+                    {sentinel ? (
+                      <SentinelCell sentinel={sentinel} />
+                    ) : (
+                      valueString
+                    )}
                   </span>
                   <span className="ml-3">{count}</span>
                 </CommandItem>

package/src/components/data-table/columns.tsx

@@ -37,7 +37,10 @@ import {
   extractTimezone,
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
+  isNumericType,
 } from "./types";
+import { SentinelCell } from "./sentinel-cell";
+import { detectSentinel } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
 
@@ -163,7 +166,7 @@ export function generateColumns<T>({
     }
     // Auto right-align numeric columns
     const dataType = getMeta(key).dataType;
-    if (dataType === "number" || dataType === "integer") {
+    if (isNumericType(dataType)) {
       return "right";
     }
     return undefined;
@@ -269,7 +272,7 @@ export function generateColumns<T>({
           !isCellSelected;
 
         const dataType = column.columnDef.meta?.dataType;
-        const isNumeric = dataType === "number" || dataType === "integer";
+        const isNumeric = isNumericType(dataType);
         const cellStyles = getCellStyleClass({
           justify,
           wrapped,
@@ -522,6 +525,17 @@ export function renderCellValue<TData, TValue>({
 
   const isWrapped = column.getColumnWrapping?.() === "wrap";
 
+  // Sentinel values (null, whitespace, NaN, Infinity, NaT) rendered specially.
+  // Empty strings are left as-is
+  const sentinel = detectSentinel(value, dataType);
+  if (sentinel && sentinel.type !== "empty-string") {
+    return (
+      <div onClick={selectCell} className={cellStyles}>
+        <SentinelCell sentinel={sentinel} />
+      </div>
+    );
+  }
+
   if (dataType === "datetime" && typeof value === "string") {
     try {
       if (!isValid(value)) {

package/src/components/data-table/sentinel-cell.tsx

@@ -0,0 +1,90 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellValueSentinel, CellValueSentinelType } from "./types";
+
+const WHITESPACE_CHARS: Record<string, { marker: string; name: string }> = {
+  " ": { marker: "\u2423", name: "space" }, // open box (space symbol)
+  "\t": { marker: "\\t", name: "tab" },
+  "\n": { marker: "\\n", name: "newline" },
+  "\r": { marker: "\\r", name: "newline" },
+};
+
+function renderWhitespaceMarkers(str: string): string {
+  return [...str].map((ch) => WHITESPACE_CHARS[ch]?.marker ?? ch).join("");
+}
+
+function describeWhitespace(str: string): string {
+  const counts: Record<string, number> = {};
+  for (const ch of str) {
+    const name = WHITESPACE_CHARS[ch]?.name ?? "character";
+    counts[name] = (counts[name] ?? 0) + 1;
+  }
+  return Object.entries(counts)
+    .map(([name, count]) => `${count} ${name}${count > 1 ? "s" : ""}`)
+    .join(", ");
+}
+
+interface SentinelConfig {
+  label: (value: CellValueSentinel["value"]) => string;
+  tooltip: (value: CellValueSentinel["value"]) => string;
+  ariaLabel: (value: CellValueSentinel["value"]) => string;
+}
+
+const SENTINEL_CONFIG: Record<CellValueSentinelType, SentinelConfig> = {
+  null: {
+    label: () => "None",
+    tooltip: () => "None",
+    ariaLabel: () => "None",
+  },
+  "empty-string": {
+    label: () => "<empty>",
+    tooltip: () => "<empty>",
+    ariaLabel: () => "empty string",
+  },
+  whitespace: {
+    label: (value) => renderWhitespaceMarkers(String(value)),
+    tooltip: (value) => describeWhitespace(String(value)),
+    ariaLabel: (value) => describeWhitespace(String(value)),
+  },
+  nan: {
+    label: () => "NaN",
+    tooltip: () => "NaN",
+    ariaLabel: () => "NaN",
+  },
+  "positive-infinity": {
+    label: () => "inf",
+    tooltip: () => "Infinity",
+    ariaLabel: () => "infinity",
+  },
+  "negative-infinity": {
+    label: () => "-inf",
+    tooltip: () => "-Infinity",
+    ariaLabel: () => "negative infinity",
+  },
+  nat: {
+    label: () => "NaT",
+    tooltip: () => "NaT (Not a Time)",
+    ariaLabel: () => "Not a Time",
+  },
+};
+
+export function SentinelCell({
+  sentinel,
+}: {
+  sentinel: CellValueSentinel;
+}): React.ReactElement {
+  const config = SENTINEL_CONFIG[sentinel.type];
+  const label = config.label(sentinel.value);
+  const tooltip = config.tooltip(sentinel.value);
+  const ariaLabel = config.ariaLabel(sentinel.value);
+
+  return (
+    <span
+      className="italic text-muted-foreground bg-muted rounded px-1"
+      aria-label={ariaLabel}
+      title={tooltip}
+    >
+      <span className="opacity-70">{label}</span>
+    </span>
+  );
+}

package/src/components/data-table/types.ts

@@ -95,6 +95,29 @@ export type DataTableSelection =
   | "multi-cell"
   | null;
 
+export type CellValueSentinel =
+  | { type: "null"; value: null | undefined }
+  | { type: "empty-string"; value: string }
+  | { type: "whitespace"; value: string }
+  | { type: "nan"; value: number | string }
+  | { type: "positive-infinity"; value: number | string }
+  | { type: "negative-infinity"; value: number | string }
+  | { type: "nat"; value: string };
+
+export type CellValueSentinelType = CellValueSentinel["type"];
+
+export function isNumericType(
+  dataType: DataType | undefined,
+): dataType is "number" | "integer" {
+  return dataType === "number" || dataType === "integer";
+}
+
+export function isTemporalType(
+  dataType: DataType | undefined,
+): dataType is "date" | "datetime" | "time" {
+  return dataType === "date" || dataType === "datetime" || dataType === "time";
+}
+
 export function extractTimezone(dtype: string | undefined): string | undefined {
   if (!dtype) {
     return undefined;

package/src/components/data-table/utils.ts

@@ -5,7 +5,15 @@ import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { getMimeValues } from "./mime-cell";
-import { INDEX_COLUMN_NAME } from "./types";
+import type { DataType } from "@/core/kernel/messages";
+import {
+  type CellValueSentinel,
+  INDEX_COLUMN_NAME,
+  isNumericType,
+  isTemporalType,
+} from "./types";
+
+const WHITESPACE_ONLY_RE = /^[\s]+$/;
 
 /**
  * Convenience function to load table data.
@@ -85,6 +93,71 @@ export function getPageIndexForRow(
   return null;
 }
 
+// String representations of numeric special values.
+// Only matched when the caller indicates the column is numeric.
+type StringValueSentinelType = Extract<
+  CellValueSentinel,
+  { value: number | string }
+>["type"];
+
+const NUMERIC_STRING_SPECIALS: Record<string, StringValueSentinelType> = {
+  NaN: "nan",
+  Infinity: "positive-infinity",
+  "-Infinity": "negative-infinity",
+  inf: "positive-infinity",
+  "-inf": "negative-infinity",
+};
+
+/**
+ * Detect if a cell value is a sentinel (null, empty string, whitespace,
+ * NaN, infinity, NaT). Column-type-dependent sentinels (string "NaN",
+ * "NaT", etc.) are matched based on `dataType`.
+ */
+export function detectSentinel(
+  value: unknown,
+  dataType: DataType | undefined,
+): CellValueSentinel | null {
+  if (value == null) {
+    return { type: "null", value };
+  }
+
+  if (typeof value === "string") {
+    if (value === "") {
+      return { type: "empty-string", value };
+    }
+    if (WHITESPACE_ONLY_RE.test(value)) {
+      return { type: "whitespace", value };
+    }
+    // String "NaN"/"Infinity" in a numeric column = actual special float value
+    if (isNumericType(dataType)) {
+      const type = NUMERIC_STRING_SPECIALS[value];
+      if (type) {
+        return { type, value };
+      }
+    }
+    // String "NaT" in a temporal column = pandas Not-a-Time sentinel
+    if (isTemporalType(dataType) && value === "NaT") {
+      return { type: "nat", value };
+    }
+    return null;
+  }
+
+  if (typeof value === "number") {
+    if (Number.isNaN(value)) {
+      return { type: "nan", value };
+    }
+    if (value === Number.POSITIVE_INFINITY) {
+      return { type: "positive-infinity", value };
+    }
+    if (value === Number.NEGATIVE_INFINITY) {
+      return { type: "negative-infinity", value };
+    }
+    return null;
+  }
+
+  return null;
+}
+
 /**
  * Stringify an unknown value. Converts objects to JSON strings.
  * @param opts.value - The value to stringify.

package/src/components/ui/toast.tsx

@@ -24,32 +24,41 @@ const ToastViewport = React.forwardRef<
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
+const VARIANT_CLASSES = {
+  default: "bg-background border",
+  danger:
+    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error",
+} as const satisfies Record<string, string>;
+
+type ToastVariant = keyof typeof VARIANT_CLASSES;
+
 const toastVariants = cva(
   "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
   {
     variants: {
-      variant: {
-        default: "bg-background border",
-        danger:
-          "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error",
-      },
+      variant: VARIANT_CLASSES,
     },
     defaultVariants: {
-      variant: "default",
+      variant: "default" satisfies ToastVariant,
     },
   },
 );
 
+function isToastVariant(value: unknown): value is ToastVariant {
+  return typeof value === "string" && value in VARIANT_CLASSES;
+}
+
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
     VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
+  const resolvedVariant = isToastVariant(variant) ? variant : "default";
   return (
     <ToastPrimitives.Root
       ref={ref}
       className={cn(
-        toastVariants({ variant: variant || "default" }),
+        toastVariants({ variant: resolvedVariant }),
         "print:hidden",
         className,
       )}