@marimo-team/islands 0.23.10-dev3 → 0.23.10-dev30

package/dist/{toDate-x-WRDCH7.js → toDate-d8RCRrRd.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { _ as Logger } from "./button-C5K9fIPF.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 import { r as KnownQueryParams } from "./constants-T20xxyNf.js";
-import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-DHIrRQOe.js";
+import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-DEhDzATN.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{tooltip-C5FYOpQc.js → tooltip-DpcyNkQ2.js}

@@ -2,9 +2,9 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-C1BYNeCR.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-Dk6PV_d3.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-CoBiJ5v4.js";
+import { Q as withSmartCollisionBoundary, Z as withFullScreenAsRoot, _t as createContextScope, at as Portal, ct as DismissableLayer, dt as useId, et as StyleNamespace, ft as Presence, ht as composeEventHandlers, pt as useControllableState, vt as Primitive } from "./zod-aLSua2NL.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (n) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = n, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {

package/dist/{types-CVvp1fKr.js → types-ChtMFmZ2.js}

@@ -1,4 +1,4 @@
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 var Pencil = createLucideIcon("pencil", [["path", {
   d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
   key: "1a8usu"

package/dist/{useAsyncData-iRgKDT5s.js → useAsyncData-PonK__yh.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { T as useEvent_default } from "./useTheme-DHIrRQOe.js";
+import { T as useEvent_default } from "./useTheme-DEhDzATN.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDateFormatter-BA4FCquG.js → useDateFormatter-QB-3MpYr.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
-import { T as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-Bu3vlb6W.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
+import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-J57tzLr3.js";
 var ChartPie = createLucideIcon("chart-pie", [["path", {
   d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
   key: "pzmjnu"

package/dist/{useDeepCompareMemoize-CkQ57VS2.js → useDeepCompareMemoize-D3NGWke6.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { w as dequal } from "./useTheme-DHIrRQOe.js";
+import { w as dequal } from "./useTheme-DEhDzATN.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

package/dist/{useLifecycle-BBO9PIph.js → useLifecycle-00mO3OSS.js}

@@ -2,9 +2,9 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, g as cn, r as cva } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
+import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { b as atom, v as useSetAtom } from "./useTheme-DHIrRQOe.js";
+import { b as atom, v as useSetAtom } from "./useTheme-DEhDzATN.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-DHIrRQOe.js → useTheme-DEhDzATN.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-CoBiJ5v4.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-aLSua2NL.js";
 import { t as merge_default } from "./merge-Be1CqGnU.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

package/dist/{vega-component-Dq-SH463.js → vega-component-9h1ACS78.js}

@@ -2,23 +2,23 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-x-WRDCH7.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-d8RCRrRd.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import "./zod-CoBiJ5v4.js";
-import { n as ErrorBanner } from "./error-banner-5bz0L9hS.js";
-import { t as Tooltip } from "./tooltip-C5FYOpQc.js";
+import "./zod-aLSua2NL.js";
+import { n as ErrorBanner } from "./error-banner-Cc0I3C9e.js";
+import { t as Tooltip } from "./tooltip-DpcyNkQ2.js";
 import { i as debounce_default } from "./constants-T20xxyNf.js";
-import { T as useEvent_default, n as useTheme } from "./useTheme-DHIrRQOe.js";
+import { T as useEvent_default, n as useTheme } from "./useTheme-DEhDzATN.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-DHxc-FdY.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-C4wO47tk.js";
 import { n as formats } from "./vega-loader.browser-CZ-J8Py3.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BWLPpjKK.js";
 import { t as j } from "./react-vega-B0sAlDTL.js";
 import "./defaultLocale-u-3osm0P.js";
 import "./defaultLocale-BoHTsDG6.js";
-import { t as useAsyncData } from "./useAsyncData-iRgKDT5s.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CkQ57VS2.js";
+import { t as useAsyncData } from "./useAsyncData-PonK__yh.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-D3NGWke6.js";
 import { t as Semaphore } from "./semaphore-CNDGTzkX.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {

package/dist/{zod-CoBiJ5v4.js → zod-aLSua2NL.js}

@@ -11758,7 +11758,7 @@ var external_exports = /* @__PURE__ */ __export({
 config(en_default());
 var zod_default = external_exports;
 export {
-  StyleNamespace as $,
+  isInVscodeExtension as $,
   looseObject as A,
   union as B,
   any as C,
@@ -11775,59 +11775,60 @@ export {
   number$1 as N,
   lazy as O,
   object as P,
-  isInVscodeExtension as Q,
+  withSmartCollisionBoundary as Q,
   string$1 as R,
   _null as S,
   boolean$1 as T,
   ZodError as U,
   unknown as V,
   toJSONSchema as W,
-  withFullScreenAsRoot as X,
+  useFullScreenElement as X,
   MAX_HEIGHT_OFFSET as Y,
-  withSmartCollisionBoundary as Z,
+  withFullScreenAsRoot as Z,
   ZodString as _,
-  Primitive as _t,
+  createContextScope as _t,
   ZodIssueCode as a,
-  FocusScope as at,
+  Portal as at,
   _enum as b,
   ZodBoolean as c,
-  Root as ct,
+  DismissableLayer as ct,
   ZodDiscriminatedUnion as d,
-  Presence as dt,
-  hideOthers as et,
+  useId as dt,
+  StyleNamespace as et,
   ZodEnum as f,
-  useControllableState as ft,
+  Presence as ft,
   ZodOptional as g,
-  createContextScope as gt,
+  createContext2 as gt,
   ZodObject as h,
-  createContext2 as ht,
+  composeEventHandlers as ht,
   string as i,
-  Portal as it,
+  useFocusGuards as it,
   nan as j,
   literal as k,
   ZodDate as l,
-  useCallbackRef$1 as lt,
+  Root as lt,
   ZodNumber as m,
-  composeEventHandlers as mt,
+  useLayoutEffect2 as mt,
   date as n,
-  __awaiter as nt,
+  Combination_default as nt,
   ZodAny as o,
-  Branch as ot,
+  FocusScope as ot,
   ZodLiteral as p,
-  useLayoutEffect2 as pt,
+  useControllableState as pt,
   $ZodError as q,
   number as r,
-  useFocusGuards as rt,
+  __awaiter as rt,
   ZodArray as s,
-  DismissableLayer as st,
+  Branch as st,
   zod_default as t,
-  Combination_default as tt,
+  hideOthers as tt,
   ZodDefault as u,
-  useId as ut,
+  useCallbackRef$1 as ut,
   ZodType as v,
-  dispatchDiscreteCustomEvent as vt,
+  Primitive as vt,
   array as w,
   _instanceof as x,
   ZodUnion as y,
+  dispatchDiscreteCustomEvent as yt,
   tuple as z
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev3",
+  "version": "0.23.10-dev30",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -57,7 +57,7 @@
     "@marimo-team/codemirror-ai": "^0.3.7",
     "@marimo-team/codemirror-languageserver": "^1.16.12",
     "@marimo-team/codemirror-mcp": "^0.1.5",
-    "@marimo-team/codemirror-sql": "^0.2.4",
+    "@marimo-team/codemirror-sql": "^0.2.8",
     "@marimo-team/llm-info": "workspace:*",
     "@marimo-team/marimo-api": "workspace:*",
     "@marimo-team/react-slotz": "^0.2.0",
@@ -123,7 +123,7 @@
     "partysocket": "1.1.13",
     "path-to-regexp": "^8.4.0",
     "plotly.js": "^3.3.1",
-    "pyodide": "0.27.7",
+    "pyodide": "314.0.0",
     "radix-ui": "1.4.3",
     "react-arborist": "^3.4.3",
     "react-aria": "3.47.0",

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

@@ -7,10 +7,6 @@ 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 { getColumnCountForDisplay } from "./hooks/use-column-visibility";
@@ -27,7 +23,6 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
-  togglePanel?: (panelType: PanelType) => void;
   part?: string;
   className?: string;
 }
@@ -41,7 +36,6 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
-  togglePanel,
   part,
   className,
 }: TableBottomBarProps<TData>) => {
@@ -159,15 +153,7 @@ export const TableBottomBar = <TData,>({
     return (
       <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>
-        )}
+        {hiddenSuffix && <span className="text-xs">{hiddenSuffix}</span>}
       </span>
     );
   };

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
+import type { Table } from "@tanstack/react-table";
 import { useDebounce } from "@uidotdev/usehooks";
 import {
   ChartSplineIcon,
@@ -17,13 +18,15 @@ import {
 } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Spinner } from "../icons/spinner";
 import { Button } from "../ui/button";
+import { ColumnVisibilityDropdown } from "./column-visibility-dropdown";
 import { type ExportActionProps, ExportMenu } from "./export-actions";
 
 const NOOP_ON_SEARCH = () => {
   /** no-op*/
 };
 
-interface TableTopBarProps extends Partial<ExportActionProps> {
+interface TableTopBarProps<TData> extends Partial<ExportActionProps> {
+  table: Table<TData>;
   enableSearch: boolean;
   searchQuery?: string;
   onSearchQueryChange?: (query: string) => void;
@@ -38,7 +41,8 @@ interface TableTopBarProps extends Partial<ExportActionProps> {
   sizeBytesIsLoading?: boolean;
 }
 
-export const TableTopBar: React.FC<TableTopBarProps> = ({
+export const TableTopBar = <TData,>({
+  table,
   enableSearch,
   searchQuery,
   onSearchQueryChange,
@@ -52,7 +56,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   downloadAs,
   sizeBytes,
   sizeBytesIsLoading,
-}) => {
+}: TableTopBarProps<TData>) => {
   const [internalValue, setInternalValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(internalValue, 500);
   const onSearch = useEvent(onSearchQueryChange ?? NOOP_ON_SEARCH);
@@ -62,16 +66,6 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
     onSearch(debouncedSearch);
   }, [debouncedSearch, onSearch]);
 
-  const hasAnyAction =
-    (enableSearch && onSearchQueryChange) ||
-    showChartBuilder ||
-    showTableExplorer ||
-    downloadAs;
-
-  if (!hasAnyAction) {
-    return null;
-  }
-
   return (
     <div className="flex items-center h-10 px-2 border-b gap-2">
       {onSearchQueryChange && enableSearch && (
@@ -106,6 +100,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
       )}
 
       <div className="flex items-center shrink-0">
+        <ColumnVisibilityDropdown table={table} />
         {showChartBuilder && (
           <Button
             variant="text"

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

@@ -3,7 +3,7 @@
 
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { CellSelectionProvider } from "../range-focus/provider";
 import { TableBottomBar } from "../TableBottomBar";
@@ -11,7 +11,6 @@ import { TableBottomBar } from "../TableBottomBar";
 function renderWithTable(opts: {
   totalColumns: number;
   hiddenColumns?: string[];
-  togglePanel?: (panelType: string) => void;
 }) {
   const Wrapper = () => {
     const table = useReactTable({
@@ -34,7 +33,6 @@ function renderWithTable(opts: {
         pagination={false}
         totalColumns={opts.totalColumns}
         table={table}
-        togglePanel={opts.togglePanel}
       />
     );
   };
@@ -60,14 +58,10 @@ describe("TableBottomBar — hidden column count", () => {
     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");
+  it("renders '(n hidden)' as inert text, not a button", () => {
+    renderWithTable({ totalColumns: 3, hiddenColumns: ["col1"] });
+    const suffix = screen.getByText(/\(1 hidden\)/);
+    expect(suffix.tagName).toBe("SPAN");
+    expect(suffix.closest("button")).toBeNull();
   });
 });

package/src/components/data-table/__tests__/column-visibility-dropdown.test.tsx

@@ -0,0 +1,227 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { ColumnVisibilityDropdown } from "../column-visibility-dropdown";
+import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "../types";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; cmdk calls it on selection.
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+});
+
+type Row = Record<string, unknown>;
+
+const TEST_COLUMNS: ColumnDef<Row>[] = [
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID },
+  { id: INDEX_COLUMN_NAME, accessorKey: INDEX_COLUMN_NAME },
+  { id: "__m_column__0", accessorKey: "__m_column__0" },
+  {
+    id: "customer_name",
+    accessorKey: "customer_name",
+    meta: { dataType: "string" },
+  },
+  { id: "cust_age", accessorKey: "cust_age", meta: { dataType: "integer" } },
+  {
+    id: "order_total",
+    accessorKey: "order_total",
+    meta: { dataType: "number" },
+  },
+];
+
+interface HarnessProps {
+  initiallyHidden?: string[];
+  nonHideable?: string[];
+}
+
+function Harness({ initiallyHidden = [], nonHideable = [] }: HarnessProps) {
+  const table = useReactTable<Row>({
+    data: [],
+    columns: TEST_COLUMNS.map((column) =>
+      nonHideable.includes(column.id as string)
+        ? { ...column, enableHiding: false }
+        : column,
+    ),
+    getCoreRowModel: getCoreRowModel(),
+    locale: "en-US",
+    initialState: {
+      columnVisibility: Object.fromEntries(
+        initiallyHidden.map((id) => [id, false]),
+      ),
+    },
+  });
+  return <ColumnVisibilityDropdown table={table} />;
+}
+
+function renderAndOpen(props?: HarnessProps) {
+  const result = render(<Harness {...(props ?? {})} />);
+  fireEvent.click(screen.getByTestId("column-visibility-trigger"));
+  return result;
+}
+
+function getOptionTexts(): string[] {
+  return screen.getAllByRole("option").map((el) => el.textContent ?? "");
+}
+
+function getColumnOption(name: string): HTMLElement {
+  const option = screen
+    .getAllByRole("option")
+    .find((el) => el.textContent === name);
+  if (!option) {
+    throw new Error(`No option for column ${name}`);
+  }
+  return option;
+}
+
+function getSearchInput() {
+  return screen.getByPlaceholderText("Search columns...");
+}
+
+describe("ColumnVisibilityDropdown", () => {
+  it("renders user columns and excludes select/index/nameless columns", () => {
+    renderAndOpen();
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.getByText("order_total")).toBeInTheDocument();
+    expect(screen.queryByText(SELECT_COLUMN_ID)).not.toBeInTheDocument();
+    expect(screen.queryByText(INDEX_COLUMN_NAME)).not.toBeInTheDocument();
+    expect(screen.queryByText("__m_column__0")).not.toBeInTheDocument();
+  });
+
+  it("lists hidden columns before shown columns", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+  });
+
+  it("toggling a hidden column flips the icon without moving the row", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+
+    fireEvent.click(getColumnOption("cust_age"));
+
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+  });
+
+  it("re-sorts on reopen after a toggle", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    // Hide customer_name: it stays in the shown section until reopen.
+    fireEvent.click(getColumnOption("customer_name"));
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+
+    const trigger = screen.getByTestId("column-visibility-trigger");
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+
+    // Reopen sorts both hidden columns first, preserving table order.
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "customer_name",
+      "cust_age",
+      "order_total",
+    ]);
+  });
+
+  it("filters columns with smartMatch", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+
+  it("shows 'No results.' when nothing matches", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "xyz" } });
+    expect(screen.getByText("No results.")).toBeInTheDocument();
+    expect(screen.queryByText("customer_name")).not.toBeInTheDocument();
+  });
+
+  it("disables 'Show all' when no columns are hidden", () => {
+    renderAndOpen();
+    expect(getColumnOption("Show all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("'Show all' restores hidden columns", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age", "order_total"] });
+    fireEvent.click(getColumnOption("Show all"));
+
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(getColumnOption("Show all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("hides and shows matching columns via bulk actions while searching", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.queryByText(/Show all/)).not.toBeInTheDocument();
+
+    fireEvent.click(getColumnOption("Hide 2 matching"));
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(screen.queryByText(/Hide \d+ matching/)).not.toBeInTheDocument();
+
+    fireEvent.click(getColumnOption("Show 2 matching"));
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(screen.queryByText(/Show \d+ matching/)).not.toBeInTheDocument();
+  });
+
+  it("offers both bulk actions when matches are mixed", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText(/Hide 1 matching/)).toBeInTheDocument();
+    expect(screen.getByText(/Show 1 matching/)).toBeInTheDocument();
+  });
+
+  it("renders non-hideable columns disabled and without an eye toggle", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    const option = getColumnOption("customer_name");
+    expect(option).toHaveAttribute("aria-disabled", "true");
+    expect(option.querySelector(".lucide-eye")).toBeNull();
+    expect(option.querySelector(".lucide-eye-off")).toBeNull();
+  });
+});