@marimo-team/islands 0.25.3-dev82 → 0.25.3-dev86

package/dist/{toDate-CjPuEPou.js → toDate-C6BRw8i5.js}

@@ -562,26 +562,23 @@ var G = new Set(Object.values(s)), K = class {
 		});
 		return q(this.appendCrossOriginAuth(n).toString());
 	}
-	getSessionSearchParams(e) {
-		let t = new URL(this.config.url), n = new URLSearchParams(t.search);
-		return new URLSearchParams(window.location.search).forEach((e, t) => {
-			n.has(t) || n.set(t, e);
-		}), n.set(s.sessionId, e), n;
+	getSessionURL(e, t) {
+		let n = this.formatHttpURL({ path: e }), r = new URLSearchParams(this.httpURL.search), i = new URLSearchParams(window.location.search);
+		for (let e of i.keys()) r.delete(e);
+		for (let [e, t] of i) r.append(e, t);
+		return r.delete(s.accessToken), r.delete("refresh_token"), r.delete(s.sessionId), n.searchParams.set("query_params", r.toString()), n.searchParams.set(s.sessionId, t), n;
 	}
 	getWsURL(e) {
-		let t = this.getSessionSearchParams(e);
-		return this.formatWsURL("/ws", t);
+		let t = this.getSessionURL("/ws", e);
+		return q(this.appendCrossOriginAuth(t).toString());
 	}
 	getSseURL(e) {
-		let t = this.formatHttpURL({
-			path: "/sse",
-			searchParams: this.getSessionSearchParams(e),
-			restrictToKnownQueryParams: !1
-		});
+		let t = this.getSessionURL("/sse", e);
 		return t.searchParams.delete(s.accessToken), t;
 	}
 	getWsSyncURL(e) {
-		return this.formatWsURL("/ws_sync", this.getSessionSearchParams(e));
+		let t = this.getSessionURL("/ws_sync", e);
+		return q(this.appendCrossOriginAuth(t).toString());
 	}
 	getTerminalWsURL(e) {
 		let t = this.formatWsURL("/terminal/ws");

package/dist/{vega-component-DnfQeoyt.js → vega-component-B8IjMdad.js}

@@ -3,7 +3,7 @@ import { g as t, h as n, m as r, o as i } from "./button-BxB3RDjN.js";
 import { t as a } from "./react-sHtZdjeP.js";
 import { t as o } from "./compiler-runtime-CldRdSsv.js";
 import { t as s } from "./tooltip-CKO1pHJo.js";
-import { C as c, a as l } from "./toDate-CjPuEPou.js";
+import { C as c, a as l } from "./toDate-C6BRw8i5.js";
 import { t as u } from "./jsx-runtime-3BD1kT0s.js";
 import { n as d } from "./error-banner-Sl2FlSJ4.js";
 import { t as f } from "./debounce-C3jyATpc.js";
@@ -11,7 +11,7 @@ import { A as p, n as ee } from "./useTheme-DympCsQg.js";
 import { c as m, t as h } from "./arrays-R6JsImiT.js";
 import { t as te } from "./objects-DCmMvZtn.js";
 import { t as ne } from "./useAsyncData-ChgNtdmE.js";
-import { a as g, i as re, n as ie, t as ae } from "./formats-6pLWWrY2.js";
+import { a as g, i as re, n as ie, t as ae } from "./formats-ZmooA-MD.js";
 import { D as oe, n as _ } from "./vega-loader.browser-B9Pz0EGP.js";
 import { t as se } from "./react-vega-C4T9Rb_w.js";
 import { a as ce, n as le } from "./loader-Bm8cy3e8.js";

package/package.json

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

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

@@ -14,6 +14,7 @@ import {
   renderCellValue,
 } from "../columns";
 import { getMimeValues, isMimeValue, MimeCell } from "../mime-cell";
+import { buildHighlightPattern } from "../search-highlight";
 import type { FieldTypesWithExternalType } from "../types";
 import { uniformSample } from "../uniformSample";
 import { UrlDetector } from "../url-detector";
@@ -240,6 +241,7 @@ describe("generateColumns", () => {
     // "age" is a number column — should auto right-align
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[1],
       },
@@ -251,6 +253,7 @@ describe("generateColumns", () => {
     // "name" is a string column — should remain left-aligned
     // oxlint-disable-next-line typescript/no-explicit-any
     const nameCell = (columns[0].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[0],
       },
@@ -271,6 +274,7 @@ describe("generateColumns", () => {
     // "age" is numeric but explicitly set to left
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[1],
       },
@@ -311,6 +315,7 @@ describe("generateColumns", () => {
     // Assuming getCellStyleClass is a function that returns a class name
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[0].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[0],
       },
@@ -1359,3 +1364,103 @@ test("column_widths sets fixed size and meta.width", () => {
   expect(b?.size).toBeUndefined();
   expect(b?.meta?.width).toBeUndefined();
 });
+
+describe("renderCellValue with highlightPattern", () => {
+  const createColumn = (
+    dataType: "string" | "number" | "boolean" | "date",
+    dtype = "object",
+  ) =>
+    ({
+      id: "col",
+      columnDef: { meta: { dataType, dtype } },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  const renderCell = (
+    column: Column<unknown>,
+    value: unknown,
+    highlightQuery: string,
+  ) =>
+    render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>
+          {renderCellValue({
+            column,
+            renderValue: () => value,
+            getValue: () => value,
+            selectCell: undefined,
+            cellStyles: "",
+            highlightPattern: buildHighlightPattern(highlightQuery),
+          })}
+        </TooltipProvider>
+      </I18nProvider>,
+    );
+
+  const markTexts = (container: HTMLElement) =>
+    [...container.querySelectorAll("mark")].map((m) => m.textContent);
+
+  it("marks a match in a string cell", () => {
+    const { container } = renderCell(
+      createColumn("string"),
+      "Alice Smith",
+      "smi",
+    );
+    expect(markTexts(container)).toEqual(["Smi"]);
+  });
+
+  it("marks only the middle text when the string has edge whitespace", () => {
+    const { container } = renderCell(createColumn("string"), "  a b  ", " ");
+    expect(markTexts(container)).toEqual([" "]);
+    const edgeMarkers = container.querySelectorAll("span[aria-label]");
+    expect(edgeMarkers).toHaveLength(2);
+    for (const marker of edgeMarkers) {
+      expect(marker.querySelector("mark")).toBeNull();
+    }
+  });
+
+  it("marks a match in the locale display of a number", () => {
+    const { container } = renderCell(createColumn("number"), 1234.5, "234");
+    expect(markTexts(container)).toEqual(["234"]);
+    expect(container.textContent).toBe("1,234.5");
+  });
+
+  it("does not mark a number when the locale display hides the raw match", () => {
+    const { container } = renderCell(createColumn("number"), 1234, "1234");
+    expect(markTexts(container)).toEqual([]);
+    expect(container.textContent).toBe("1,234");
+  });
+
+  it("marks a boolean cell", () => {
+    const { container } = renderCell(createColumn("boolean"), false, "false");
+    expect(markTexts(container)).toEqual(["False"]);
+  });
+
+  it("marks a date cell by its display string", () => {
+    const { container } = renderCell(
+      createColumn("date", "date"),
+      new Date(2026, 0, 15),
+      "2026",
+    );
+    expect(markTexts(container)).toEqual(["2026"]);
+  });
+
+  it("renders no mark for an empty query", () => {
+    for (const [column, value] of [
+      [createColumn("string"), "Alice"],
+      [createColumn("number"), 12],
+      [createColumn("boolean"), false],
+      [createColumn("date", "date"), new Date(2026, 0, 15)],
+    ] as const) {
+      const { container } = renderCell(column, value, "");
+      expect(markTexts(container)).toEqual([]);
+    }
+  });
+
+  it("renders no mark in the trigger of a long-string popout", () => {
+    const value = "x".repeat(60);
+    const { container } = renderCell(createColumn("string"), value, "xxx");
+    expect(markTexts(container)).toEqual([]);
+  });
+});

package/src/components/data-table/__tests__/search-highlight.test.tsx

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  buildHighlightPattern,
+  findMatchRanges,
+  highlightMatches,
+  highlightRanges,
+} from "../search-highlight";
+
+function highlight(text: string, query: string) {
+  return highlightMatches(text, buildHighlightPattern(query));
+}
+
+function marksOf(node: React.ReactNode) {
+  const { container } = render(<span>{node}</span>);
+  return {
+    container,
+    marks: [...container.querySelectorAll("mark")].map((m) => m.textContent),
+  };
+}
+
+describe("buildHighlightPattern", () => {
+  it("returns undefined for an empty or missing query", () => {
+    expect(buildHighlightPattern("")).toBeUndefined();
+    expect(buildHighlightPattern(undefined)).toBeUndefined();
+  });
+
+  it("escapes regex metacharacters so the query matches literally", () => {
+    const { marks } = marksOf(highlight("a.b a-b (x)", ".b"));
+    expect(marks).toEqual([".b"]);
+    expect(marksOf(highlight("f(x)", "(x)")).marks).toEqual(["(x)"]);
+    expect(marksOf(highlight("C and C++", "c++")).marks).toEqual(["C++"]);
+  });
+});
+
+describe("highlightMatches", () => {
+  it("returns the input unchanged without a pattern", () => {
+    expect(highlightMatches("Alice Smith", undefined)).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when there is no match", () => {
+    expect(highlight("Alice Smith", "zzz")).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when the query is longer than the text", () => {
+    expect(highlight("ab", "abc")).toBe("ab");
+  });
+
+  it("wraps a single match and keeps the surrounding text", () => {
+    const { container, marks } = marksOf(highlight("Alice Smith", "ce S"));
+    expect(marks).toEqual(["ce S"]);
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("matches case-insensitively and keeps the original casing", () => {
+    const { marks } = marksOf(highlight("Alice Smith", "smi"));
+    expect(marks).toEqual(["Smi"]);
+  });
+
+  it("wraps every occurrence", () => {
+    const { container, marks } = marksOf(highlight("a-A-a", "a"));
+    expect(marks).toEqual(["a", "A", "a"]);
+    expect(container.textContent).toBe("a-A-a");
+  });
+
+  it("produces no empty segments for matches at the edges", () => {
+    const segments = highlight("xax", "x") as React.ReactNode[];
+    expect(Array.isArray(segments)).toBe(true);
+    expect(segments).toHaveLength(3);
+    expect(segments[1]).toBe("a");
+  });
+
+  it("is safe to reuse one global pattern across calls", () => {
+    const pattern = buildHighlightPattern("a");
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+  });
+});
+
+describe("Unicode case folding", () => {
+  it("folds the Kelvin sign to k like the backend engines", () => {
+    expect(marksOf(highlight("K", "k")).marks).toEqual(["K"]);
+  });
+
+  it("folds every Greek sigma form", () => {
+    expect(marksOf(highlight("ΟΣ ος οσ", "σ")).marks).toEqual(["Σ", "ς", "σ"]);
+  });
+});
+
+describe("highlightRanges", () => {
+  it("applies shared ranges to a segment at an offset", () => {
+    const ranges = findMatchRanges(
+      "see https://x",
+      buildHighlightPattern("see https"),
+    );
+    expect(ranges).toEqual([[0, 9]]);
+    const { marks: textMarks } = marksOf(highlightRanges("see ", ranges, 0));
+    expect(textMarks).toEqual(["see "]);
+    const { marks: linkMarks } = marksOf(
+      highlightRanges("https://x", ranges, 4),
+    );
+    expect(linkMarks).toEqual(["https"]);
+  });
+
+  it("returns the segment unchanged when no range overlaps it", () => {
+    expect(highlightRanges("zzz", [[10, 12]], 0)).toBe("zzz");
+  });
+});

package/src/components/data-table/__tests__/url-detector.test.tsx

@@ -2,6 +2,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { parseContent } from "@/utils/url-parser";
+import { buildHighlightPattern } from "../search-highlight";
 import { isMarkdown, UrlDetector } from "../url-detector";
 
 describe("UrlDetector", () => {
@@ -201,3 +202,76 @@ describe("isMarkdown", () => {
     expect(isMarkdown("Visit [marimo](https://marimo.io)")).toBe(true);
   });
 });
+
+describe("UrlDetector with highlightPattern", () => {
+  it("wraps a text match in a mark", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("smi")}
+      />,
+    );
+    const marks = container.querySelectorAll("mark");
+    expect(marks).toHaveLength(1);
+    expect(marks[0].textContent).toBe("Smi");
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("wraps a match inside a link label", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("marimo")}
+      />,
+    );
+    const link = container.querySelector("a");
+    expect(link).not.toBeNull();
+    const mark = link?.querySelector("mark");
+    expect(mark?.textContent).toBe("marimo");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+  });
+
+  it("renders no mark for an empty query", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("")}
+      />,
+    );
+    expect(container.querySelector("mark")).toBeNull();
+  });
+});
+
+describe("UrlDetector highlight across part boundaries", () => {
+  it("marks a query that spans a text part and a link", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("see https")}
+      />,
+    );
+    const marks = [...container.querySelectorAll("mark")].map(
+      (m) => m.textContent,
+    );
+    expect(marks).toEqual(["see ", "https"]);
+    const link = container.querySelector("a");
+    expect(link?.querySelector("mark")?.textContent).toBe("https");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+    expect(container.textContent).toBe("see https://marimo.io/docs");
+  });
+
+  it("marks the fallback link when an image fails to load", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("https://example.com/image.png")}
+        highlightPattern={buildHighlightPattern("image")}
+      />,
+    );
+    const img = container.querySelector("img");
+    expect(img).not.toBeNull();
+    fireEvent.error(img as HTMLImageElement);
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("href", "https://example.com/image.png");
+    expect(link?.querySelector("mark")?.textContent).toBe("image");
+  });
+});

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

@@ -41,6 +41,7 @@ import {
   isNumericType,
 } from "./types";
 import { SentinelCell, WhitespaceMarkers } from "./sentinel-cell";
+import { highlightMatches } from "./search-highlight";
 import { detectSentinel, splitLeadingTrailingWhitespace } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
@@ -278,7 +279,7 @@ export function generateColumns<T>({
       );
     },
 
-    cell: ({ column, renderValue, getValue, cell }) => {
+    cell: ({ column, renderValue, getValue, cell, table }) => {
       function selectCell() {
         if (selection !== "single-cell" && selection !== "multi-cell") {
           return;
@@ -310,6 +311,7 @@ export function generateColumns<T>({
         getValue,
         selectCell,
         cellStyles,
+        highlightPattern: table.options.meta?.highlightPattern,
       });
 
       // Row headers are bold
@@ -586,12 +588,14 @@ function renderDate({
   dtype,
   displayValue,
   locale,
+  highlightPattern,
 }: {
   value: Date;
   dataType?: DataType;
   dtype?: string;
   displayValue?: string;
   locale: string;
+  highlightPattern?: RegExp;
 }): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
@@ -600,7 +604,7 @@ function renderDate({
 
   return (
     <DatePopover date={value} type={type}>
-      {exactValue}
+      {highlightMatches(exactValue, highlightPattern)}
     </DatePopover>
   );
 }
@@ -611,12 +615,14 @@ export function renderCellValue<TData, TValue>({
   getValue,
   selectCell,
   cellStyles,
+  highlightPattern,
 }: {
   column: Column<TData, TValue>;
   renderValue: () => TValue | null;
   getValue: () => TValue;
   selectCell?: () => void;
   cellStyles?: string;
+  highlightPattern?: RegExp;
 }) {
   const value = getValue();
   const format = column.getColumnFormatting?.();
@@ -626,6 +632,28 @@ export function renderCellValue<TData, TValue>({
 
   const isWrapped = column.getColumnWrapping?.() === "wrap";
 
+  const textCell = (text: string) => (
+    <div onClick={selectCell} className={cellStyles}>
+      {highlightMatches(text, highlightPattern)}
+    </div>
+  );
+  const dateCell = (date: Date, displayValue?: string) => (
+    <div onClick={selectCell} className={cellStyles}>
+      <WithLocale>
+        {(locale) =>
+          renderDate({
+            value: date,
+            dataType,
+            dtype,
+            displayValue,
+            locale,
+            highlightPattern,
+          })
+        }
+      </WithLocale>
+    </div>
+  );
+
   // Sentinel values (null, whitespace, NaN, Infinity, NaT) rendered specially.
   // Empty strings are left as-is
   const sentinel = detectSentinel(value, dataType, dtype);
@@ -641,23 +669,10 @@ export function renderCellValue<TData, TValue>({
     try {
       const date = new Date(value);
       if (!format || !isValid(date)) {
-        return (
-          <div onClick={selectCell} className={cellStyles}>
-            {value}
-          </div>
-        );
+        return textCell(value);
       }
 
-      const displayValue = String(column.applyColumnFormatting(value));
-      return (
-        <div onClick={selectCell} className={cellStyles}>
-          <WithLocale>
-            {(locale) =>
-              renderDate({ value: date, dataType, dtype, displayValue, locale })
-            }
-          </WithLocale>
-        </div>
-      );
+      return dateCell(date, String(column.applyColumnFormatting(value)));
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
     }
@@ -673,17 +688,9 @@ export function renderCellValue<TData, TValue>({
     }
 
     // e.g. 2010-10-07 17:15:00
-    const displayValue = format
-      ? String(column.applyColumnFormatting(value))
-      : undefined;
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        <WithLocale>
-          {(locale) =>
-            renderDate({ value, dataType, dtype, displayValue, locale })
-          }
-        </WithLocale>
-      </div>
+    return dateCell(
+      value,
+      format ? String(column.applyColumnFormatting(value)) : undefined,
     );
   }
 
@@ -729,7 +736,7 @@ export function renderCellValue<TData, TValue>({
           className={cn(cellStyles, isWrapped && COLUMN_WRAPPING_STYLES)}
         >
           <WhitespaceMarkers value={leading} />
-          <UrlDetector parts={parts} />
+          <UrlDetector parts={parts} highlightPattern={highlightPattern} />
           <WhitespaceMarkers value={trailing} />
         </div>
       );
@@ -755,11 +762,7 @@ export function renderCellValue<TData, TValue>({
   }
 
   if (format) {
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {column.applyColumnFormatting(value)}
-      </div>
-    );
+    return textCell(String(column.applyColumnFormatting(value)));
   }
 
   // Format to the correct locale
@@ -769,26 +772,19 @@ export function renderCellValue<TData, TValue>({
         <LocaleNumber
           value={value}
           minFractionDigits={column.columnDef.meta?.minFractionDigits}
+          highlightPattern={highlightPattern}
         />
       </div>
     );
   }
 
   if (typeof value === "boolean") {
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {value ? "True" : "False"}
-      </div>
-    );
+    return textCell(value ? "True" : "False");
   }
 
   if (isPrimitiveOrNullish(value)) {
     const rendered = renderValue();
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {rendered == null ? "" : String(rendered)}
-      </div>
-    );
+    return textCell(rendered == null ? "" : String(rendered));
   }
 
   const mimeValues = getMimeValues(value);
@@ -826,14 +822,16 @@ export function renderCellValue<TData, TValue>({
 export const LocaleNumber = ({
   value,
   minFractionDigits,
+  highlightPattern,
 }: {
   value: number;
   minFractionDigits?: number;
+  highlightPattern?: RegExp;
 }) => {
   const { locale } = useLocale();
   const format = useNumberFormatter({
     minimumFractionDigits: minFractionDigits,
     maximumFractionDigits: maxFractionalDigits(locale),
   });
-  return format.format(value);
+  return highlightMatches(format.format(value), highlightPattern);
 };

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

@@ -58,6 +58,7 @@ import { useColumnPinning } from "./hooks/use-column-pinning";
 import { useScrollContainerHeight } from "./hooks/use-scroll-container-height";
 import { CellSelectionProvider } from "./range-focus/provider";
 import { DataTableBody, renderTableHeader } from "./renderers";
+import { buildHighlightPattern } from "./search-highlight";
 import { TableBottomBar } from "./TableBottomBar";
 import { TableTopBar } from "./TableTopBar";
 import {
@@ -231,6 +232,11 @@ const DataTableInternal = <TData,>({
     return idx + offset;
   }
 
+  const highlightPattern = React.useMemo(
+    () => buildHighlightPattern(searchQuery),
+    [searchQuery],
+  );
+
   const table = useReactTable<TData>({
     _features: [
       ColumnPinning,
@@ -245,7 +251,7 @@ const DataTableInternal = <TData,>({
     ],
     data,
     columns,
-    meta: { rawData },
+    meta: { rawData, highlightPattern },
     getCoreRowModel: getCoreRowModel(),
     // pagination
     rowCount: totalRows === "too_many" ? undefined : totalRows,