@marimo-team/islands 0.21.2-dev92 → 0.21.2-dev94

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

@@ -24,7 +24,10 @@ import { useLocale } from "react-aria";
 import { Table } from "@/components/ui/table";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
-import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { CellHoverTemplateFeature } from "./cell-hover-template/feature";
 import { CellHoverTextFeature } from "./cell-hover-text/feature";
 import { CellSelectionFeature } from "./cell-selection/feature";
@@ -97,10 +100,10 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   // Others
   showChartBuilder?: boolean;
   showPageSizeSelector?: boolean;
-  showColumnExplorer?: boolean;
-  showRowExplorer?: boolean;
+  showTableExplorer?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isPanelOpen?: (panelType: PanelType) => boolean;
+  isAnyPanelOpen?: boolean;
 }
 
 const DataTableInternal = <TData,>({
@@ -142,10 +145,10 @@ const DataTableInternal = <TData,>({
   toggleDisplayHeader,
   showChartBuilder,
   showPageSizeSelector,
-  showColumnExplorer,
-  showRowExplorer,
+  showTableExplorer,
   togglePanel,
   isPanelOpen,
+  isAnyPanelOpen,
   viewedRowIdx,
   onViewedRowChange,
 }: DataTableProps<TData>) => {
@@ -272,7 +275,7 @@ const DataTableInternal = <TData,>({
     },
   });
 
-  const rowViewerPanelOpen = isPanelOpen?.("row-viewer") ?? false;
+  const rowViewerPanelOpen = isPanelOpen?.(PANEL_TYPES.ROW_VIEWER) ?? false;
   const virtualize = !pagination && data.length > MIN_ROWS_TO_VIRTUALIZE;
 
   const tableRef = useScrollContainerHeight({ maxHeight, virtualize });
@@ -324,10 +327,9 @@ const DataTableInternal = <TData,>({
         toggleDisplayHeader={toggleDisplayHeader}
         showChartBuilder={showChartBuilder}
         showPageSizeSelector={showPageSizeSelector}
-        showColumnExplorer={showColumnExplorer}
-        showRowExplorer={showRowExplorer}
+        showTableExplorer={showTableExplorer}
         togglePanel={togglePanel}
-        isPanelOpen={isPanelOpen}
+        isAnyPanelOpen={isAnyPanelOpen}
         tableLoading={reloading}
       />
     </div>

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

@@ -2,7 +2,7 @@
 "use no memo";
 
 import type { ColumnPinningState } from "@tanstack/react-table";
-import { isEqual } from "lodash-es";
+import { dequal as isEqual } from "dequal";
 import React from "react";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { SELECT_COLUMN_ID } from "../types";

package/src/components/data-table/hooks/use-panel-ownership.ts

@@ -13,7 +13,10 @@ import { Logger } from "@/utils/Logger";
 
 interface PanelOwnershipResult {
   isPanelOpen: (panelType: PanelType) => boolean;
-  togglePanel: (panelType: PanelType) => void;
+  isAnyPanelOpen: boolean;
+  togglePanel: (panelType?: PanelType) => void;
+  panelType: PanelType | null;
+  setPanelType: (panelType: PanelType) => void;
 }
 
 export function usePanelOwnership(
@@ -55,24 +58,31 @@ export function usePanelOwnership(
     setPanelOwner(panelId);
   }
 
-  function togglePanel(panelType: PanelType) {
-    if (isPanelOpen(panelType)) {
+  const isAnyPanelOpen = panelOwner === panelId && isContextAwarePanelOpen;
+
+  function togglePanel(requestedType?: PanelType) {
+    if (isAnyPanelOpen) {
       setPanelOwner(null);
       setContextAwarePanelOpen(false);
     } else {
       setPanelOwner(panelId);
-      // if cell-aware, we want to focus on this cell when toggled open
       if (isPanelCellAware && cellId) {
         focusCell({ cellId });
       }
       setContextAwarePanelOpen(true);
-      setPanelType(panelType);
+      // Only set type if explicitly requested and no previous type exists
+      if (requestedType && !panelType) {
+        setPanelType(requestedType);
+      }
     }
   }
 
   return {
     isPanelOpen,
+    isAnyPanelOpen,
     togglePanel,
+    panelType,
+    setPanelType,
   };
 }
 

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

@@ -2,7 +2,6 @@
 "use no memo";
 
 import type { Table } from "@tanstack/react-table";
-import { range } from "lodash-es";
 import {
   ChevronDown,
   ChevronLeft,
@@ -22,6 +21,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { range } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -12,16 +12,16 @@ import {
   ChevronsLeft,
   ChevronsRight,
   Info,
-  SearchIcon,
 } from "lucide-react";
-import { useRef, useState } from "react";
+import { type KeyboardEvent, useId, useRef, useState } from "react";
 import { useLocale } from "react-aria";
 import { ColumnName } from "@/components/datasources/components";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Spinner } from "@/components/icons/spinner";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Command, CommandInput } from "@/components/ui/command";
 import {
   Table,
   TableBody,
@@ -32,7 +32,6 @@ import {
 } from "@/components/ui/table";
 import { DelayMount } from "@/components/utils/delay-mount";
 import { useAsyncData } from "@/hooks/useAsyncData";
-import { useKeydownOnElement } from "@/hooks/useHotkey";
 import { Banner, ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
 import { NAMELESS_COLUMN_PREFIX, renderCellValue } from "../columns";
@@ -68,7 +67,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
 }: RowViewerPanelProps) => {
   const [searchQuery, setSearchQuery] = useState("");
   const panelRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
+  const checkboxId = useId();
   const { locale } = useLocale();
 
   const tooManyRows = totalRows === TOO_MANY_ROWS;
@@ -102,26 +101,29 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
     setRow(totalRows - 1);
   }
 
-  useKeydownOnElement(panelRef, {
-    ArrowLeft: (e) => {
-      if (e?.target === searchInputRef.current) {
-        return false;
-      }
-      setRow(rowIdx - 1);
-    },
-    ArrowRight: (e) => {
-      if (e?.target === searchInputRef.current) {
-        return false;
-      }
-      setRow(rowIdx + 1);
-    },
-    Space: (e) => {
-      if (e?.target === searchInputRef.current) {
-        return false;
-      }
-      toggleRowSelection();
-    },
-  });
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Don't intercept keys when typing in an input
+    if (e.target instanceof HTMLInputElement) {
+      return;
+    }
+    switch (e.key) {
+      case "ArrowLeft":
+        setRow(rowIdx - 1);
+
+        break;
+
+      case "ArrowRight":
+        setRow(rowIdx + 1);
+
+        break;
+
+      case " ":
+        e.preventDefault();
+        toggleRowSelection();
+
+        break;
+    }
+  };
 
   const buttonStyles = "h-6 w-6 p-0.5";
 
@@ -248,19 +250,29 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
       className="flex flex-col gap-3 mt-4 focus:outline-hidden"
       ref={panelRef}
       tabIndex={-1}
+      onKeyDown={handleKeyDown}
     >
-      <div className="flex flex-row gap-2 items-center mr-2">
+      <div className="flex flex-row gap-2 items-center mr-2 px-2">
         {isSelectable && (
-          <div className="flex flex-row gap-1 items-center">
-            <Button
-              variant="link"
-              size="xs"
-              className="pr-0"
-              onClick={toggleRowSelection}
-            >
-              {isRowSelected ? "Deselect row" : "Select row"}
-            </Button>
-            <KeyboardHotkeys shortcut="Space" />
+          <div
+            className="flex items-center"
+            title="Select/unselect the current row"
+          >
+            <div className="flex items-center gap-1.5">
+              <Checkbox
+                id={checkboxId}
+                checked={isRowSelected}
+                onCheckedChange={toggleRowSelection}
+                className="h-3.5 w-3.5"
+              />
+              <label
+                htmlFor={checkboxId}
+                className="text-xs text-muted-foreground cursor-pointer"
+              >
+                Select
+              </label>
+            </div>
+            <KeyboardHotkeys shortcut="Space" className="scale-75" />
           </div>
         )}
 
@@ -315,17 +327,14 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
         </Button>
       </div>
 
-      <div className="mx-2 -mb-1">
-        <Input
-          ref={searchInputRef}
-          type="text"
+      <Command className="bg-background" shouldFilter={false}>
+        <CommandInput
           placeholder="Search"
-          onChange={(e) => setSearchQuery(e.target.value)}
-          icon={<SearchIcon className="w-4 h-4" />}
-          className="mb-0 border-border"
+          value={searchQuery}
+          onValueChange={setSearchQuery}
           data-testid="selection-panel-search-input"
         />
-      </div>
+      </Command>
       {renderTable()}
     </div>
   );

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

@@ -0,0 +1,161 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { Fill } from "@marimo-team/react-slotz";
+import type { OnChangeFn, RowSelectionState } from "@tanstack/react-table";
+import type React from "react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { SlotNames } from "@/core/slots/slots";
+import type {
+  GetRowResult,
+  PreviewColumn,
+} from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
+import { RowViewerPanel } from "../row-viewer-panel/row-viewer";
+import type { FieldTypesWithExternalType, TooManyRows } from "../types";
+
+export interface TableExplorerPanelProps {
+  // Row viewer props
+  rowIdx: number;
+  setRowIdx: (rowIdx: number) => void;
+  totalRows: number | TooManyRows;
+  fieldTypes: FieldTypesWithExternalType | undefined | null;
+  getRow: (rowIdx: number) => Promise<GetRowResult>;
+  isSelectable: boolean;
+  isRowSelected: boolean;
+  handleRowSelectionChange?: OnChangeFn<RowSelectionState>;
+  // Column explorer props
+  previewColumn?: PreviewColumn;
+  totalColumns: number;
+  tableId: string;
+  // Visibility flags
+  showRowExplorer: boolean;
+  showColumnExplorer: boolean;
+  // Tab state (driven by contextAwarePanelType atom)
+  activeTab: PanelType | null;
+  onTabChange: (tab: PanelType) => void;
+}
+
+const tabTriggerClassName =
+  "text-xs uppercase tracking-wide font-semibold cursor-pointer transition-colors";
+const activeClassName = "text-primary";
+const inactiveClassName = "hover:text-foreground";
+
+export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
+  // Row viewer
+  rowIdx,
+  setRowIdx,
+  totalRows,
+  fieldTypes,
+  getRow,
+  isSelectable,
+  isRowSelected,
+  handleRowSelectionChange,
+  // Column explorer
+  previewColumn,
+  totalColumns,
+  tableId,
+  // Visibility
+  showRowExplorer,
+  showColumnExplorer,
+  // Tab state
+  activeTab,
+  onTabChange,
+}) => {
+  const showTabs = showRowExplorer && showColumnExplorer;
+
+  const rowViewer = (
+    <RowViewerPanel
+      rowIdx={rowIdx}
+      setRowIdx={setRowIdx}
+      totalRows={totalRows}
+      fieldTypes={fieldTypes}
+      getRow={getRow}
+      isSelectable={isSelectable}
+      isRowSelected={isRowSelected}
+      handleRowSelectionChange={handleRowSelectionChange}
+    />
+  );
+
+  const columnExplorer = previewColumn && (
+    <ColumnExplorerPanel
+      previewColumn={previewColumn}
+      fieldTypes={fieldTypes}
+      totalRows={totalRows}
+      totalColumns={totalColumns}
+      tableId={tableId}
+    />
+  );
+
+  // If only one panel is visible, don't show tabs
+  if (!showTabs) {
+    if (showRowExplorer) {
+      return rowViewer;
+    }
+    if (showColumnExplorer) {
+      return columnExplorer;
+    }
+    return null;
+  }
+
+  // Resolve active tab — fall back to first available
+  const resolvedTab = activeTab ?? PANEL_TYPES.ROW_VIEWER;
+
+  return (
+    <Tabs
+      value={resolvedTab}
+      onValueChange={(value) => onTabChange(value as PanelType)}
+      className="h-full flex flex-col min-w-[350px]"
+    >
+      <Fill name={SlotNames.CONTEXT_AWARE_PANEL_HEADER}>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => onTabChange(PANEL_TYPES.ROW_VIEWER)}
+            className={cn(
+              tabTriggerClassName,
+              resolvedTab === PANEL_TYPES.ROW_VIEWER
+                ? activeClassName
+                : inactiveClassName,
+            )}
+          >
+            Rows
+          </Button>
+          <span className="text-muted-foreground text-xs">|</span>
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => onTabChange(PANEL_TYPES.COLUMN_EXPLORER)}
+            className={cn(
+              tabTriggerClassName,
+              resolvedTab === PANEL_TYPES.COLUMN_EXPLORER
+                ? activeClassName
+                : inactiveClassName,
+            )}
+          >
+            Explorer
+          </Button>
+        </div>
+      </Fill>
+
+      <TabsContent
+        value={PANEL_TYPES.ROW_VIEWER}
+        className="flex-1 overflow-auto"
+      >
+        {rowViewer}
+      </TabsContent>
+      <TabsContent
+        value={PANEL_TYPES.COLUMN_EXPLORER}
+        className="flex-1 overflow-auto"
+      >
+        {columnExplorer}
+      </TabsContent>
+    </Tabs>
+  );
+};

package/src/components/datasources/datasources.tsx

@@ -2,7 +2,6 @@
 
 import { CommandList } from "cmdk";
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { sortBy } from "lodash-es";
 import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
@@ -49,6 +48,7 @@ import { useRequestClient } from "@/core/network/requests";
 import { variablesAtom } from "@/core/variables/state";
 import type { VariableName } from "@/core/variables/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { sortBy } from "@/utils/arrays";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";

package/src/components/editor/actions/useNotebookActions.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { startCase } from "lodash-es";
 import {
   BookMarkedIcon,
   CheckIcon,
@@ -80,6 +79,7 @@ import {
 import { Filenames } from "@/utils/filenames";
 import { Objects } from "@/utils/objects";
 import type { ProgressState } from "@/utils/progress";
+import { Strings } from "@/utils/strings";
 import { newNotebookURL } from "@/utils/urls";
 import { useRunAllCells } from "../cell/useRunCells";
 import { useChromeActions, useChromeState } from "../chrome/state";
@@ -385,7 +385,7 @@ export function useNotebookActions() {
             return [];
           }
           return {
-            label: startCase(id),
+            label: Strings.startCase(id),
             rightElement: renderCheckboxElement(selectedPanel === id),
             icon: <Icon size={14} strokeWidth={1.5} />,
             handle: () => toggleApplication(id),

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -21,7 +21,12 @@ import {
   isPinnedAtom,
 } from "./atoms";
 
-export type PanelType = "row-viewer" | "column-explorer";
+export const PANEL_TYPES = {
+  ROW_VIEWER: "row-viewer",
+  COLUMN_EXPLORER: "column-explorer",
+} as const;
+
+export type PanelType = (typeof PANEL_TYPES)[keyof typeof PANEL_TYPES];
 
 export const ContextAwarePanel: React.FC = () => {
   const [owner, setOwner] = useAtom(contextAwarePanelOwner);
@@ -51,7 +56,7 @@ export const ContextAwarePanel: React.FC = () => {
             aria-label={isPinned ? "Unpin panel" : "Pin panel"}
           >
             {isPinned ? (
-              <PinIcon className="w-4 h-4" />
+              <PinIcon className="w-4 h-4 text-primary" />
             ) : (
               <PinOffIcon className="w-4 h-4" />
             )}
@@ -95,16 +100,18 @@ export const ContextAwarePanel: React.FC = () => {
 
   const renderBody = () => {
     return (
-      <div className="mt-2 pb-7 mb-4 h-full overflow-auto">
-        <div className="flex flex-row justify-between items-center mx-2">
+      <div className="pb-7 mb-4 h-full overflow-auto">
+        <div className="p-3 border-b flex justify-between items-center">
           {renderModeToggle()}
+          <Slot name={SlotNames.CONTEXT_AWARE_PANEL_HEADER} />
           <Button
-            variant="linkDestructive"
-            size="icon"
+            variant="text"
+            size="xs"
+            className="m-0"
             onClick={closePanel}
             aria-label="Close selection panel"
           >
-            <XIcon className="w-4 h-4" />
+            <XIcon className="w-4 h-4 hover:text-destructive" />
           </Button>
         </div>
 
@@ -126,7 +133,7 @@ export const ContextAwarePanel: React.FC = () => {
         onDragging={handleDragging}
         className="resize-handle border-border z-20 print:hidden border-l"
       />
-      <Panel defaultSize={20} minSize={15} maxSize={80}>
+      <Panel defaultSize={25} minSize={25} maxSize={80}>
         {renderBody()}
       </Panel>
     </>
@@ -150,7 +157,7 @@ interface ResizableComponentProps {
 const ResizableComponent = ({ children }: ResizableComponentProps) => {
   const { resizableDivRef, handleRefs, style } = useResizeHandle({
     startingWidth: 400,
-    minWidth: 300,
+    minWidth: 400,
     maxWidth: 1500,
     onResize: () => {
       raf2(() => {

package/src/components/editor/chrome/wrapper/footer-items/backend-status.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom, useAtomValue, useSetAtom } from "jotai";
-import { startCase } from "lodash-es";
 import { AlertCircleIcon, CheckCircle2Icon, PowerOffIcon } from "lucide-react";
 import type React from "react";
 import { Spinner } from "@/components/icons/spinner";
@@ -18,6 +17,7 @@ import {
 } from "@/core/websocket/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
+import { Strings } from "@/utils/strings";
 
 const CHECK_HEALTH_INTERVAL_MS = 30_000;
 
@@ -84,7 +84,7 @@ export const BackendConnectionStatus: React.FC = () => {
       return "Not connected to a runtime";
     }
 
-    const baseStatus = startCase(connection.toLowerCase());
+    const baseStatus = Strings.startCase(connection.toLowerCase());
     const healthInfo = data?.lastChecked
       ? data.isHealthy
         ? "✓ Healthy"

package/src/components/editor/connections/form-renderers.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { partition } from "lodash-es";
 import { KeyIcon, PlusCircleIcon } from "lucide-react";
 import { createContext, type ReactNode, use } from "react";
 import { z } from "zod";
@@ -28,6 +27,7 @@ import { Input } from "@/components/ui/input";
 import { NumberField } from "@/components/ui/number-field";
 import { SECRETS_REGISTRY } from "@/core/secrets/request-registry";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { partition } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -15,7 +15,6 @@ import type { GridLayout, GridLayoutCellSide } from "./types";
 import "react-grid-layout/css/styles.css";
 import "./styles.css";
 import { BorderAllIcon } from "@radix-ui/react-icons";
-import { startCase } from "lodash-es";
 import {
   AlignEndVerticalIcon,
   AlignHorizontalSpaceAroundIcon,
@@ -43,6 +42,7 @@ import { useIsDragging } from "@/hooks/useIsDragging";
 import { cn } from "@/utils/cn";
 import { Maps } from "@/utils/maps";
 import { Objects } from "@/utils/objects";
+import { Strings } from "@/utils/strings";
 
 type Props = ICellRendererProps<GridLayout>;
 
@@ -637,7 +637,7 @@ const GridHoverActions: React.FC<GridHoverActionsProps> = ({
           {Objects.entries(SIDE_TO_ICON).map(([option, Icon]) => (
             <DropdownMenuItem key={option} onSelect={() => setSide(option)}>
               <Icon className={"h-4 w-3 mr-2"} />
-              <span className="flex-1">{startCase(option)}</span>
+              <span className="flex-1">{Strings.startCase(option)}</span>
               {option === side && <CheckIcon className="h-4 w-4" />}
             </DropdownMenuItem>
           ))}

package/src/components/editor/renderers/layout-select.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { startCase } from "lodash-es";
 import {
   Grid3x3Icon,
   ListIcon,
@@ -21,6 +20,7 @@ import { getFeatureFlag } from "@/core/config/feature-flag";
 import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
 import { isWasm } from "@/core/wasm/utils";
 import { logNever } from "@/utils/assertNever";
+import { Strings } from "@/utils/strings";
 import { LAYOUT_TYPES, type LayoutType } from "./types";
 
 export const LayoutSelect: React.FC = () => {
@@ -82,5 +82,5 @@ export function getLayoutIcon(layoutType: LayoutType) {
 }
 
 export function displayLayoutName(layoutType: LayoutType) {
-  return startCase(layoutType);
+  return Strings.startCase(layoutType);
 }

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

@@ -11,7 +11,6 @@ import {
   type SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-import { sortBy } from "lodash-es";
 import { SquareEqualIcon, WorkflowIcon } from "lucide-react";
 import React, { memo, useMemo } from "react";
 import { useLocale } from "react-aria";
@@ -21,6 +20,7 @@ import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { goToVariableDefinition } from "@/core/codemirror/go-to-definition/commands";
 import type { Variable, Variables } from "@/core/variables/types";
+import { sortBy } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { DataTableColumnHeader } from "../data-table/column-header";
 import { CellLinkList } from "../editor/links/cell-link-list";

package/src/core/cells/cells.ts

@@ -1,9 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { historyField } from "@codemirror/commands";
+import { dequal as isEqual } from "dequal";
 import { type Atom, atom, useAtom, useAtomValue } from "jotai";
 import { atomFamily, selectAtom, splitAtom } from "jotai/utils";
-import { isEqual } from "lodash-es";
 import { createRef, type ReducerWithoutAction } from "react";
 import type { CellHandle } from "@/components/editor/notebook-cell";
 import {