@marimo-team/islands 0.23.9-dev4 → 0.23.9-dev6

package/dist/{reveal-component-DZtPMEoM.js → reveal-component-Pq7C0LSU.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { ct as kioskModeAtom } from "./html-to-image-CiSinpSR.js";
 import "./chunk-5FQGJX7Z-BNjes6Yx.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
-import { G as PanelGroup, Gt as Code, Ht as Expand, K as PanelResizeHandle, Vt as EyeOff, W as Panel, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-VZebNmSs.js";
+import { G as PanelGroup, Gt as Code, Ht as Expand, K as PanelResizeHandle, Vt as EyeOff, W as Panel, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-DILs4Gug.js";
 import { q as useDebouncedCallback } from "./input-CZD2z6X2.js";
 import "./toDate-ZVVIBmdk.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

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

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

@@ -7,8 +7,13 @@ import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Button } from "../ui/button";
 import { toast } from "../ui/use-toast";
+import { getUserColumnVisibilityCounts } from "./hooks/use-column-visibility";
 import { DataTablePagination, prettifyRowColumnCount } from "./pagination";
 import { CellSelectionStats } from "./range-focus/cell-selection-stats";
 import type { DataTableSelection } from "./types";
@@ -22,6 +27,7 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
+  togglePanel?: (panelType: PanelType) => void;
   part?: string;
   className?: string;
 }
@@ -35,6 +41,7 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
+  togglePanel,
   part,
   className,
 }: TableBottomBarProps<TData>) => {
@@ -140,13 +147,30 @@ export const TableBottomBar = <TData,>({
       );
     }
 
+    const counts = getUserColumnVisibilityCounts(table);
+    // When columns are clipped, the table instance only has the rendered
+    // subset, so the visible/hidden math must use that subset's total. The
+    // dataset-wide `totalColumns` prop is only correct for the no-hidden
+    // "N columns" label.
+    const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
+      numRows: table.getRowCount(),
+      totalColumns: counts.hidden > 0 ? counts.total : totalColumns,
+      hiddenColumns: counts.hidden,
+      locale,
+    });
+
     return (
-      <span>
-        {prettifyRowColumnCount({
-          numRows: table.getRowCount(),
-          totalColumns,
-          locale,
-        })}
+      <span className="flex items-center gap-1">
+        <span>{rowsAndColumns}</span>
+        {hiddenSuffix && (
+          <button
+            type="button"
+            className="text-xs underline-offset-2 hover:underline cursor-pointer"
+            onClick={() => togglePanel?.(PANEL_TYPES.COLUMN_EXPLORER)}
+          >
+            {hiddenSuffix}
+          </button>
+        )}
       </span>
     );
   };

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

@@ -0,0 +1,73 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { CellSelectionProvider } from "../range-focus/provider";
+import { TableBottomBar } from "../TableBottomBar";
+
+function renderWithTable(opts: {
+  totalColumns: number;
+  hiddenColumns?: string[];
+  togglePanel?: (panelType: string) => void;
+}) {
+  const Wrapper = () => {
+    const table = useReactTable({
+      data: [] as Array<Record<string, unknown>>,
+      columns: Array.from({ length: opts.totalColumns }, (_, i) => ({
+        id: `col${i}`,
+        enableHiding: true,
+      })),
+      getCoreRowModel: getCoreRowModel(),
+      locale: "en-US",
+      state: {
+        columnVisibility: Object.fromEntries(
+          (opts.hiddenColumns ?? []).map((c) => [c, false]),
+        ),
+      },
+    });
+
+    return (
+      <TableBottomBar
+        pagination={false}
+        totalColumns={opts.totalColumns}
+        table={table}
+        togglePanel={opts.togglePanel}
+      />
+    );
+  };
+
+  return render(
+    <TooltipProvider>
+      <CellSelectionProvider>
+        <Wrapper />
+      </CellSelectionProvider>
+    </TooltipProvider>,
+  );
+}
+
+describe("TableBottomBar — hidden column count", () => {
+  it("does not render '(n hidden)' when no columns are hidden", () => {
+    renderWithTable({ totalColumns: 3 });
+    expect(screen.queryByText(/hidden/)).toBeNull();
+  });
+
+  it("renders 'X visible (n hidden)' when columns are hidden", () => {
+    renderWithTable({ totalColumns: 3, hiddenColumns: ["col1"] });
+    expect(screen.getByText(/2 visible/)).toBeInTheDocument();
+    expect(screen.getByText(/\(1 hidden\)/)).toBeInTheDocument();
+  });
+
+  it("invokes togglePanel('column-explorer') when '(n hidden)' is clicked", () => {
+    const togglePanel = vi.fn();
+    renderWithTable({
+      totalColumns: 3,
+      hiddenColumns: ["col1"],
+      togglePanel,
+    });
+    screen.getByText(/\(1 hidden\)/).click();
+    expect(togglePanel).toHaveBeenCalledWith("column-explorer");
+  });
+});

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

@@ -5,7 +5,7 @@ import type {
   RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
-import { render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -251,3 +251,54 @@ describe("DataTable", () => {
     expect(within(updatedRows[3]).getByText("pending")).toBeTruthy();
   });
 });
+
+describe("DataTable — all-hidden banner", () => {
+  interface Row {
+    a: number;
+    b: number;
+  }
+
+  const columns: ColumnDef<Row>[] = [
+    { accessorKey: "a", header: "A" },
+    { accessorKey: "b", header: "B" },
+  ];
+  const data: Row[] = [{ a: 1, b: 2 }];
+
+  const renderWithVisibility = (hiddenColumns: string[]) =>
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={data}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={2}
+          pagination={false}
+          hiddenColumns={hiddenColumns}
+        />
+      </TooltipProvider>,
+    );
+
+  it("renders banner when every user column is hidden", () => {
+    renderWithVisibility(["a", "b"]);
+    expect(screen.getByText(/All columns are hidden/i)).toBeInTheDocument();
+    expect(screen.getByText(/Unhide all/i)).toBeInTheDocument();
+  });
+
+  it("does not render the banner when at least one column is visible", () => {
+    renderWithVisibility(["a"]);
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+
+  it("does not render the banner when no columns are hidden", () => {
+    renderWithVisibility([]);
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+
+  it("'Unhide all' restores columns hidden via the Python kwarg", () => {
+    renderWithVisibility(["a", "b"]);
+    expect(screen.getByText(/All columns are hidden/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByText(/Unhide all/i));
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+});

package/src/components/data-table/__tests__/header-items.test.tsx

@@ -1,7 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { SortingState } from "@tanstack/react-table";
+import type { Column, SortingState } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { HideColumn } from "../header-items";
 
 describe("multi-column sorting logic", () => {
   // Extract the core sorting logic to test in isolation
@@ -146,3 +153,42 @@ describe("multi-column sorting logic", () => {
     // After removal, dept should move from priority 3 to priority 2
   });
 });
+
+describe("HideColumn", () => {
+  const makeColumn = ({
+    canHide = true,
+    toggleVisibility = vi.fn(),
+  }: {
+    canHide?: boolean;
+    toggleVisibility?: (value?: boolean) => void;
+  } = {}) =>
+    ({
+      getCanHide: () => canHide,
+      toggleVisibility,
+    }) as unknown as Column<unknown, unknown>;
+
+  const renderInMenu = (node: React.ReactNode) =>
+    render(
+      <DropdownMenu open={true}>
+        <DropdownMenuTrigger />
+        <DropdownMenuContent>{node}</DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+  it("renders 'Hide column' when canHide is true", () => {
+    renderInMenu(<HideColumn column={makeColumn()} />);
+    expect(screen.getByText("Hide column")).toBeInTheDocument();
+  });
+
+  it("returns null when getCanHide is false", () => {
+    renderInMenu(<HideColumn column={makeColumn({ canHide: false })} />);
+    expect(screen.queryByText("Hide column")).toBeNull();
+  });
+
+  it("calls toggleVisibility(false) on click", () => {
+    const toggleVisibility = vi.fn();
+    renderInMenu(<HideColumn column={makeColumn({ toggleVisibility })} />);
+    fireEvent.click(screen.getByText("Hide column"));
+    expect(toggleVisibility).toHaveBeenCalledWith(false);
+  });
+});

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

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useColumnVisibility } from "../hooks/use-column-visibility";
+
+describe("useColumnVisibility", () => {
+  it("should initialize with correct default values", () => {
+    const { result } = renderHook(() => useColumnVisibility());
+    expect(result.current.columnVisibility).toEqual({});
+  });
+
+  it("should seed hidden columns as { name: false }", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a", "b"]));
+    expect(result.current.columnVisibility).toEqual({ a: false, b: false });
+  });
+
+  it("should treat empty hidden list as a no-op", () => {
+    const { result } = renderHook(() => useColumnVisibility([]));
+    expect(result.current.columnVisibility).toEqual({});
+  });
+
+  it("should update visibility state via setter", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a"]));
+
+    act(() => {
+      result.current.setColumnVisibility({ a: true, b: false });
+    });
+
+    expect(result.current.columnVisibility).toEqual({ a: true, b: false });
+  });
+
+  it("should handle functional updates", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a"]));
+
+    act(() => {
+      result.current.setColumnVisibility((prev) => ({ ...prev, c: false }));
+    });
+
+    expect(result.current.columnVisibility).toEqual({ a: false, c: false });
+  });
+});

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

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

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

@@ -17,6 +17,7 @@ import { useFilterEditor } from "./filter-editor-context";
 import { EDITABLE_FILTER_TYPES, isMembershipFilterType } from "./filters";
 import {
   ClearFilterMenuItem,
+  HideColumn,
   renderColumnPinning,
   renderColumnWrapping,
   renderCopyColumn,
@@ -124,6 +125,7 @@ export const DataTableColumnHeader = <TData, TValue>({
             {renderColumnPinning(column)}
             {renderColumnWrapping(column)}
             {renderFormatOptions(column, locale)}
+            <HideColumn column={column} />
             {canEditFilter && <DropdownMenuSeparator />}
             {canEditFilter && (
               <DropdownMenuItem

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

@@ -44,9 +44,10 @@ import { detectSentinel, splitLeadingTrailingWhitespace } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
 
+export const NAMELESS_COLUMN_PREFIX = "__m_column__";
 // Artificial limit to display long strings
+export const SELECT_ID = "__select__";
 const MAX_STRING_LENGTH = 50;
-const SELECT_ID = "__select__";
 
 function inferDataType(value: unknown): [type: DataType, displayType: string] {
   if (typeof value === "string") {
@@ -106,8 +107,6 @@ export function inferFieldTypes<T>(items: T[]): FieldTypesWithExternalType {
   return Objects.entries(fieldTypes);
 }
 
-export const NAMELESS_COLUMN_PREFIX = "__m_column__";
-
 export function generateColumns<T>({
   rowHeaders,
   selection,
@@ -192,7 +191,7 @@ export function generateColumns<T>({
       accessorFn: (row) => {
         return row[key as keyof T];
       },
-
+      enableHiding: !rowHeadersSet.has(key) && key !== "",
       header: ({ column, table }) => {
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;

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

@@ -22,7 +22,9 @@ import {
 import React, { memo } from "react";
 import { useLocale } from "react-aria";
 
+import { Button } from "@/components/ui/button";
 import { Table } from "@/components/ui/table";
+import { Banner } from "@/plugins/impl/common/error-banner";
 import type {
   CalculateTopKRows,
   GetRowIds,
@@ -63,6 +65,10 @@ import {
   type TooManyRows,
 } from "./types";
 import { getStableRowId } from "./utils";
+import {
+  getUserColumnVisibilityCounts,
+  useColumnVisibility,
+} from "./hooks/use-column-visibility";
 
 interface DataTableProps<TData> extends Partial<ExportActionProps> {
   wrapperClassName?: string;
@@ -107,6 +113,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   // Columns
   freezeColumnsLeft?: string[];
   freezeColumnsRight?: string[];
+  hiddenColumns?: string[];
   toggleDisplayHeader?: () => void;
   // Row viewer panel
   viewedRowIdx?: number;
@@ -158,6 +165,7 @@ const DataTableInternal = <TData,>({
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
+  hiddenColumns,
   toggleDisplayHeader,
   showChartBuilder,
   isChartBuilderOpen,
@@ -176,6 +184,8 @@ const DataTableInternal = <TData,>({
     freezeColumnsLeft,
     freezeColumnsRight,
   );
+  const { columnVisibility, setColumnVisibility } =
+    useColumnVisibility(hiddenColumns);
 
   // Show loading bar only after a short delay to prevent flickering
   React.useEffect(() => {
@@ -267,6 +277,8 @@ const DataTableInternal = <TData,>({
     enableMultiCellSelection: selection === "multi-cell",
     // pinning
     onColumnPinningChange: setColumnPinning,
+    // col visibility
+    onColumnVisibilityChange: setColumnVisibility,
     // focus row
     enableFocusRow: true,
     onFocusRowChange: onViewedRowChange,
@@ -284,6 +296,7 @@ const DataTableInternal = <TData,>({
             { pagination: { pageIndex: 0, pageSize: data.length } }),
       rowSelection: rowSelection ?? {},
       cellSelection: cellSelection ?? [],
+      columnVisibility,
       cellStyling,
       columnPinning: columnPinning,
       cellHoverTemplate: hoverTemplate,
@@ -317,6 +330,10 @@ const DataTableInternal = <TData,>({
     [table],
   );
 
+  const visibilityCounts = getUserColumnVisibilityCounts(table);
+  const allUserColumnsHidden =
+    visibilityCounts.total > 0 && visibilityCounts.visible === 0;
+
   return (
     <FilterEditorProvider value={filterEditor}>
       <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
@@ -346,6 +363,18 @@ const DataTableInternal = <TData,>({
               downloadAs={downloadAs}
               sizeBytes={sizeBytes}
             />
+            {allUserColumnsHidden && (
+              <Banner className="mb-1 mx-2 rounded flex items-center justify-between">
+                <span>All columns are hidden.</span>
+                <Button
+                  variant="link"
+                  size="xs"
+                  onClick={() => table.resetColumnVisibility(true)}
+                >
+                  Unhide all
+                </Button>
+              </Banner>
+            )}
             <Table
               className={cn(
                 "relative",
@@ -377,6 +406,7 @@ const DataTableInternal = <TData,>({
               getRowIds={getRowIds}
               showPageSizeSelector={showPageSizeSelector}
               tableLoading={reloading}
+              togglePanel={togglePanel}
             />
           </div>
         </CellSelectionProvider>

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

@@ -8,6 +8,7 @@ import {
   ArrowUpNarrowWideIcon,
   ChevronsUpDown,
   CopyIcon,
+  EyeOffIcon,
   FilterX,
   PinOffIcon,
   WrapTextIcon,
@@ -139,6 +140,23 @@ export function renderColumnPinning<TData, TValue>(
   );
 }
 
+export function HideColumn<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
+  if (!column.getCanHide()) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+      <EyeOffIcon className="mo-dropdown-icon" />
+      Hide column
+    </DropdownMenuItem>
+  );
+}
+
 export function renderCopyColumn<TData, TValue>(column: Column<TData, TValue>) {
   if (!column.getCanCopy?.()) {
     return null;
@@ -233,7 +251,6 @@ export function renderSorts<TData, TValue>(
         {sortDirection === "desc" && renderSortIndex()}
       </DropdownMenuItem>
       {renderClearSort()}
-      <DropdownMenuSeparator />
     </>
   );
 }

package/src/components/data-table/hooks/use-column-visibility.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
+import type { Table, VisibilityState } from "@tanstack/react-table";
+import { dequal as isDeepEqual } from "dequal";
+import type React from "react";
+
+interface UseColumnVisibilityResult {
+  columnVisibility: VisibilityState;
+  setColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>;
+}
+
+export function useColumnVisibility(
+  hiddenColumns?: string[],
+): UseColumnVisibilityResult {
+  const [columnVisibility, setColumnVisibility] =
+    useInternalStateWithSync<VisibilityState>(
+      Object.fromEntries((hiddenColumns ?? []).map((c) => [c, false])),
+      isDeepEqual,
+    );
+
+  return { columnVisibility, setColumnVisibility };
+}
+
+interface ColumnVisibilityCounts {
+  total: number;
+  visible: number;
+  hidden: number;
+}
+
+export function getUserColumnVisibilityCounts<TData>(
+  table: Table<TData>,
+): ColumnVisibilityCounts {
+  const userColumns = table.getAllLeafColumns().filter((c) => c.getCanHide());
+  const visible = userColumns.filter((c) => c.getIsVisible()).length;
+  return {
+    total: userColumns.length,
+    visible,
+    hidden: userColumns.length - visible,
+  };
+}

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

@@ -443,15 +443,28 @@ export function prettifyRowCount(rowCount: number, locale: string): string {
 export const prettifyRowColumnCount = ({
   numRows,
   totalColumns,
+  hiddenColumns,
   locale,
 }: {
   numRows: number | "too_many";
   totalColumns: number;
+  hiddenColumns?: number;
   locale: string;
-}): string => {
+}): { rowsAndColumns: string; hiddenSuffix: string | null } => {
   const rowsLabel =
     numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows, locale);
-  const columnsLabel = `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;
 
-  return [rowsLabel, columnsLabel].join(", ");
+  const hidden = hiddenColumns ?? 0;
+  const visibleColumns = totalColumns - hidden;
+
+  const columnsLabel =
+    hidden > 0
+      ? `${prettyNumber(visibleColumns, locale)} visible`
+      : `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;
+
+  return {
+    rowsAndColumns: [rowsLabel, columnsLabel].join(", "),
+    hiddenSuffix:
+      hidden > 0 ? `(${prettyNumber(hidden, locale)} hidden)` : null,
+  };
 };

package/src/components/editor/errors/mangled-local-chip.tsx

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { JSX } from "react";
+import { Tooltip } from "@/components/ui/tooltip";
+import type { MangledSegment, UnmangledLocal } from "@/utils/local-variables";
+import { CellLinkError } from "../links/cell-link";
+
+interface Props {
+  local: UnmangledLocal;
+}
+
+/**
+ * Renders a compiler-mangled cell-local variable as the user's original name
+ * (e.g. `_a`) with a tooltip linking to the defining cell.
+ */
+export const MangledLocalChip = ({ local }: Props): JSX.Element => {
+  const tooltipContent = (
+    <div className="max-w-xs">
+      Local variable <span className="font-code">{local.name}</span> in cell{" "}
+      <CellLinkError cellId={local.cellId} />.
+    </div>
+  );
+
+  return (
+    <Tooltip content={tooltipContent}>
+      <span className="font-code cursor-help">{local.name}</span>
+    </Tooltip>
+  );
+};
+
+interface MangledSegmentsProps {
+  segments: MangledSegment[];
+}
+
+/**
+ * Render an array of `splitMangledLocals` segments as alternating text and
+ * `<MangledLocalChip>` nodes.
+ */
+export const MangledSegments = ({
+  segments,
+}: MangledSegmentsProps): JSX.Element => (
+  <>
+    {segments.map((segment, idx) =>
+      typeof segment === "string" ? (
+        <span key={idx}>{segment}</span>
+      ) : (
+        <MangledLocalChip key={idx} local={segment} />
+      ),
+    )}
+  </>
+);