@marimo-team/islands 0.23.2-dev7 → 0.23.2-dev70

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

@@ -0,0 +1,171 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SentinelCell, WhitespaceMarkers } from "../sentinel-cell";
+import type { CellValueSentinel } from "../types";
+
+function renderSentinel(sentinel: CellValueSentinel) {
+  const { container } = render(<SentinelCell sentinel={sentinel} />);
+  return container.querySelector("span")!;
+}
+
+function renderMarkers(value: string) {
+  return render(<WhitespaceMarkers value={value} />);
+}
+
+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)");
+  });
+});
+
+describe("WhitespaceMarkers", () => {
+  it("renders nothing for empty string", () => {
+    const { container } = renderMarkers("");
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders a single space as open box", () => {
+    const { container } = renderMarkers(" ");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\u2423");
+    expect(outer.getAttribute("aria-label")).toBe("1 space");
+  });
+
+  it("renders multiple spaces as multiple open boxes", () => {
+    const { container } = renderMarkers("   ");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\u2423\u2423\u2423");
+    expect(outer.getAttribute("aria-label")).toBe("3 spaces");
+  });
+
+  it("renders tab, newline, CR with escape labels", () => {
+    const { container } = renderMarkers("\t\n\r");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\t\\n\\r");
+  });
+
+  it("renders each char in its own span for CSS spacing", () => {
+    const { container } = renderMarkers("   ");
+    const outer = container.querySelector("span")!;
+    // Outer wrapper + three inner spans (one per char)
+    expect(outer.querySelectorAll("span")).toHaveLength(3);
+  });
+
+  it("renders unknown whitespace (NBSP) as \\uXXXX escape", () => {
+    const { container } = renderMarkers("\u00a0");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\u00a0");
+  });
+
+  it("renders BOM as \\ufeff", () => {
+    const { container } = renderMarkers("\ufeff");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\ufeff");
+  });
+
+  it("renders en space and em space as escapes", () => {
+    const { container } = renderMarkers("\u2002\u2003");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\u2002\\u2003");
+  });
+
+  it("mixes known glyphs and unknown escapes correctly", () => {
+    const { container } = renderMarkers(" \t\u00a0");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\u2423\\t\\u00a0");
+  });
+
+  it("describes mixed whitespace in aria-label", () => {
+    const { container } = renderMarkers(" \t\n");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe("1 space, 1 tab, 1 newline");
+  });
+
+  it("describes unknown whitespace as 'unicode whitespace'", () => {
+    const { container } = renderMarkers("\u00a0");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe("1 unicode whitespace");
+  });
+
+  it("pluralizes unknown whitespace in aria-label", () => {
+    const { container } = renderMarkers("\u00a0\u00a0\u2002");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe("3 unicode whitespaces");
+  });
+
+  it("mixes known and unknown whitespace labels", () => {
+    const { container } = renderMarkers(" \u00a0\t");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe(
+      "1 space, 1 unicode whitespace, 1 tab",
+    );
+  });
+});

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

@@ -1,6 +1,39 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
-import { extractTimezone } from "../types";
+import {
+  extractTimezone,
+  type FieldTypesWithExternalType,
+  toFieldTypes,
+} from "../types";
+
+describe("toFieldTypes", () => {
+  // Regression: https://github.com/marimo-team/marimo/issues/9269.
+  // When `FieldTypes` was a plain `Record<string, DataType>`, column
+  // names that look like non-negative integers (e.g. "2000", "2010")
+  // were hoisted to the front in numeric order by ECMAScript's
+  // `OrdinaryOwnPropertyKeys` algorithm. `Map` preserves insertion
+  // order for all keys.
+  it("preserves insertion order for digit-string column names", () => {
+    const input: FieldTypesWithExternalType = [
+      ["here", ["string", ""]],
+      ["is", ["string", ""]],
+      ["a", ["string", ""]],
+      ["2010", ["number", ""]],
+      ["column", ["string", ""]],
+      ["2000", ["number", ""]],
+      ["set", ["string", ""]],
+    ];
+    expect([...toFieldTypes(input).keys()]).toEqual([
+      "here",
+      "is",
+      "a",
+      "2010",
+      "column",
+      "2000",
+      "set",
+    ]);
+  });
+});
 
 describe("extractTimezone", () => {
   it("should return undefined when dtype is undefined", () => {

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

@@ -3,9 +3,11 @@
 import type { Table } from "@tanstack/react-table";
 import { describe, expect, it } from "vitest";
 import {
+  detectSentinel,
   getClipboardContent,
   getPageIndexForRow,
   getRawValue,
+  splitLeadingTrailingWhitespace,
   stringifyUnknownValue,
 } from "../utils";
 
@@ -186,6 +188,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: {
@@ -214,3 +343,101 @@ describe("getRawValue", () => {
     expect(getRawValue(table, 5, "a")).toBeUndefined();
   });
 });
+
+describe("splitLeadingTrailingWhitespace", () => {
+  it("returns all empty for empty string", () => {
+    expect(splitLeadingTrailingWhitespace("")).toEqual({
+      leading: "",
+      middle: "",
+      trailing: "",
+    });
+  });
+
+  it("returns value as middle when no edge whitespace", () => {
+    expect(splitLeadingTrailingWhitespace("abc")).toEqual({
+      leading: "",
+      middle: "abc",
+      trailing: "",
+    });
+  });
+
+  it("preserves inner whitespace in middle", () => {
+    expect(splitLeadingTrailingWhitespace("abc d ef")).toEqual({
+      leading: "",
+      middle: "abc d ef",
+      trailing: "",
+    });
+  });
+
+  it("splits leading whitespace only", () => {
+    expect(splitLeadingTrailingWhitespace("   abc")).toEqual({
+      leading: "   ",
+      middle: "abc",
+      trailing: "",
+    });
+  });
+
+  it("splits trailing whitespace only", () => {
+    expect(splitLeadingTrailingWhitespace("abc   ")).toEqual({
+      leading: "",
+      middle: "abc",
+      trailing: "   ",
+    });
+  });
+
+  it("splits both leading and trailing whitespace", () => {
+    expect(splitLeadingTrailingWhitespace("  abc  ")).toEqual({
+      leading: "  ",
+      middle: "abc",
+      trailing: "  ",
+    });
+  });
+
+  it("handles mixed whitespace types at edges", () => {
+    expect(splitLeadingTrailingWhitespace("\t\n abc \r\t")).toEqual({
+      leading: "\t\n ",
+      middle: "abc",
+      trailing: " \r\t",
+    });
+  });
+
+  it("preserves inner whitespace when edges have whitespace", () => {
+    expect(splitLeadingTrailingWhitespace("  a b c  ")).toEqual({
+      leading: "  ",
+      middle: "a b c",
+      trailing: "  ",
+    });
+  });
+
+  it("handles Unicode whitespace (NBSP) at edges", () => {
+    expect(splitLeadingTrailingWhitespace("\u00a0abc\u00a0")).toEqual({
+      leading: "\u00a0",
+      middle: "abc",
+      trailing: "\u00a0",
+    });
+  });
+
+  it("puts whitespace-only string in leading (caller should handle sentinel first)", () => {
+    expect(splitLeadingTrailingWhitespace("   ")).toEqual({
+      leading: "   ",
+      middle: "",
+      trailing: "",
+    });
+  });
+
+  it("handles single whitespace char", () => {
+    expect(splitLeadingTrailingWhitespace(" ")).toEqual({
+      leading: " ",
+      middle: "",
+      trailing: "",
+    });
+  });
+
+  it("handles single non-whitespace char", () => {
+    expect(splitLeadingTrailingWhitespace("a")).toEqual({
+      leading: "",
+      middle: "a",
+      trailing: "",
+    });
+  });
+});

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -74,7 +74,7 @@ export const ColumnExplorerPanel = ({
   return (
     <div className="mb-3">
       <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount(totalRows, totalColumns, locale)}
+        {prettifyRowColumnCount({ numRows: totalRows, totalColumns, locale })}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}

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/column-summary/chart-spec-model.tsx

@@ -41,7 +41,7 @@ export class ColumnChartSpecModel<T> {
 
   public static readonly EMPTY = new ColumnChartSpecModel(
     [],
-    {},
+    new Map(),
     {},
     {},
     {},
@@ -97,7 +97,7 @@ export class ColumnChartSpecModel<T> {
   public getHeaderSummary(column: string) {
     return {
       stats: this.columnStats.get(column),
-      type: this.fieldTypes[column],
+      type: this.fieldTypes.get(column),
       spec: this.opts.includeCharts ? this.getVegaSpec(column) : undefined,
     };
   }
@@ -141,7 +141,10 @@ export class ColumnChartSpecModel<T> {
     }
 
     const base = this.createBase(data);
-    const type = this.fieldTypes[column];
+    const type = this.fieldTypes.get(column);
+    if (type === undefined) {
+      return null;
+    }
 
     // https://github.com/vega/altair/blob/32990a597af7c09586904f40b3f5e6787f752fa5/doc/user_guide/encodings/index.rst#escaping-special-characters-in-column-names
     // escape periods in column names

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

@@ -75,7 +75,7 @@ export const TableColumnSummary = <TData, TValue>({
   };
 
   const renderStats = () => {
-    if (!stats) {
+    if (!stats || type === undefined) {
       return null;
     }
 

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

@@ -37,7 +37,10 @@ import {
   extractTimezone,
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
+  isNumericType,
 } from "./types";
+import { SentinelCell, WhitespaceMarkers } from "./sentinel-cell";
+import { detectSentinel, splitLeadingTrailingWhitespace } 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,
@@ -343,6 +346,7 @@ const PopoutColumn = ({
   cellStyles,
   selectCell,
   rawStringValue,
+  edges,
   contentClassName,
   buttonText,
   wrapped,
@@ -351,11 +355,25 @@ const PopoutColumn = ({
   cellStyles?: string;
   selectCell?: () => void;
   rawStringValue: string;
+  // Edge whitespace shown as visible markers in the trigger; copy/title
+  // still use `rawStringValue`. Middle is sliced from `rawStringValue`.
+  edges?: { leading: string; trailing: string };
   contentClassName?: string;
   buttonText?: string;
   wrapped?: boolean;
   children: React.ReactNode;
 }) => {
+  const hasEdgeWhitespace =
+    edges !== undefined &&
+    (edges.leading.length > 0 || edges.trailing.length > 0);
+
+  const displayText = hasEdgeWhitespace
+    ? rawStringValue.slice(
+        edges.leading.length,
+        rawStringValue.length - edges.trailing.length,
+      )
+    : rawStringValue;
+
   return (
     <EmotionCacheProvider container={null}>
       <Popover>
@@ -374,7 +392,9 @@ const PopoutColumn = ({
             )}
             title={rawStringValue}
           >
-            {rawStringValue}
+            {edges ? <WhitespaceMarkers value={edges.leading} /> : null}
+            {displayText}
+            {edges ? <WhitespaceMarkers value={edges.trailing} /> : null}
           </span>
         </PopoverTrigger>
         <PopoverContent
@@ -522,6 +542,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)) {
@@ -568,7 +599,13 @@ export function renderCellValue<TData, TValue>({
       ? String(column.applyColumnFormatting(value))
       : String(renderValue());
 
-    const parts = parseContent(stringValue);
+    const { leading, middle, trailing } =
+      splitLeadingTrailingWhitespace(stringValue);
+    const hasEdgeWhitespace = leading.length > 0 || trailing.length > 0;
+
+    // Parse only the inner content for URL detection so URLDetector doesn't
+    // split on the whitespace padding.
+    const parts = parseContent(hasEdgeWhitespace ? middle : stringValue);
     const allMarkup = parts.every((part) => part.type !== "text");
     if (allMarkup || stringValue.length < MAX_STRING_LENGTH || isWrapped) {
       return (
@@ -576,7 +613,9 @@ export function renderCellValue<TData, TValue>({
           onClick={selectCell}
           className={cn(cellStyles, isWrapped && COLUMN_WRAPPING_STYLES)}
         >
+          <WhitespaceMarkers value={leading} />
           <UrlDetector parts={parts} />
+          <WhitespaceMarkers value={trailing} />
         </div>
       );
     }
@@ -586,11 +625,15 @@ export function renderCellValue<TData, TValue>({
         cellStyles={cellStyles}
         selectCell={selectCell}
         rawStringValue={stringValue}
+        edges={{ leading, trailing }}
         contentClassName="max-h-64 overflow-auto whitespace-pre-wrap break-words text-sm w-96"
         buttonText="X"
         wrapped={isWrapped}
       >
-        <MarkdownUrlDetector content={stringValue} parts={parts} />
+        <MarkdownUrlDetector
+          content={stringValue}
+          parts={parseContent(stringValue)}
+        />
       </PopoutColumn>
     );
   }