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

package/dist/{useTheme-5GTtjXjy.js → useTheme-BIAKDAh6.js}

@@ -1,14 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { g as Logger, s as OverridingHotkeyProvider, u as resolvePlatform } from "./button-B1ZgJ7Cc.js";
-import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-B_FmEi05.js";
-import { t as _baseIsEqual_default } from "./_baseIsEqual-QWfxbVqg.js";
-import { t as merge_default } from "./merge-CqBPpP0q.js";
-function isEqual(e, A) {
-  return _baseIsEqual_default(e, A);
-}
-var isEqual_default = isEqual, import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
+import { h as Logger, l as resolvePlatform, s as OverridingHotkeyProvider } from "./button-qsiIHncQ.js";
+import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-B--d1_LV.js";
+import { t as merge_default } from "./merge-Byt9w-nO.js";
+var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };
 function useEvent(e) {
   let A = import_react.useRef(useEvent_shouldNotBeInvokedBeforeMount);
@@ -23,7 +19,46 @@ function useEvent(e) {
 function useEvent_shouldNotBeInvokedBeforeMount() {
   throw Error("INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
 }
-var useEvent_default = useEvent;
+var useEvent_default = useEvent, has = Object.prototype.hasOwnProperty;
+function find(e, A, j) {
+  for (j of e.keys()) if (dequal(j, A)) return j;
+}
+function dequal(e, A) {
+  var j, M, N;
+  if (e === A) return true;
+  if (e && A && (j = e.constructor) === A.constructor) {
+    if (j === Date) return e.getTime() === A.getTime();
+    if (j === RegExp) return e.toString() === A.toString();
+    if (j === Array) {
+      if ((M = e.length) === A.length) for (; M-- && dequal(e[M], A[M]); ) ;
+      return M === -1;
+    }
+    if (j === Set) {
+      if (e.size !== A.size) return false;
+      for (M of e) if (N = M, N && typeof N == "object" && (N = find(A, N), !N) || !A.has(N)) return false;
+      return true;
+    }
+    if (j === Map) {
+      if (e.size !== A.size) return false;
+      for (M of e) if (N = M[0], N && typeof N == "object" && (N = find(A, N), !N) || !dequal(M[1], A.get(N))) return false;
+      return true;
+    }
+    if (j === ArrayBuffer) e = new Uint8Array(e), A = new Uint8Array(A);
+    else if (j === DataView) {
+      if ((M = e.byteLength) === A.byteLength) for (; M-- && e.getInt8(M) === A.getInt8(M); ) ;
+      return M === -1;
+    }
+    if (ArrayBuffer.isView(e)) {
+      if ((M = e.byteLength) === A.byteLength) for (; M-- && e[M] === A[M]; ) ;
+      return M === -1;
+    }
+    if (!j || typeof e == "object") {
+      for (j in M = 0, e) if (has.call(e, j) && ++M && !has.call(A, j) || !(j in A) || !dequal(e[j], A[j])) return false;
+      return Object.keys(A).length === M;
+    }
+  }
+  return e !== e && A !== A;
+}
 function hasInitialValue(e) {
   return "init" in e;
 }
@@ -470,7 +505,7 @@ function useJotaiEffect(e, A) {
   ], j[0] = e, j[1] = A, j[2] = M, j[3] = N, j[4] = P) : (N = j[3], P = j[4]), (0, import_react.useEffect)(N, P);
 }
 var sentinel = /* @__PURE__ */ Symbol("sentinel");
-function createDeepEqualAtom(e, A = isEqual_default) {
+function createDeepEqualAtom(e, A = dequal) {
   let j = sentinel;
   return atom((M) => {
     let N = M(e);
@@ -741,7 +776,7 @@ function useTheme() {
   return e[1] === j ? M = e[2] : (M = { theme: j }, e[1] = j, e[2] = M), M;
 }
 export {
-  useEvent_default as C,
+  dequal as C,
   getBuildingBlocks as S,
   useSetAtom as _,
   getResolvedMarimoConfig as a,
@@ -762,7 +797,7 @@ export {
   resolvedThemeAtom as t,
   store as u,
   useStore as v,
-  isEqual_default as w,
+  useEvent_default as w,
   buildStore as x,
   atom as y
 };

package/dist/vb-C9rpn9hN.js

@@ -0,0 +1,4 @@
+import { t as vb } from "./vb-BklM-Nqk.js";
+export {
+  vb
+};

package/dist/vbscript-BQ7rxQU0.js

@@ -0,0 +1,4 @@
+import { t as vbScript } from "./vbscript-DbMEEX0d.js";
+export {
+  vbScript
+};

package/dist/{vega-component-BQNW4qnB.js → vega-component-CTOT0vRO.js}

@@ -1,23 +1,23 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-COI3hP-5.js";
-import { d as Objects, g as Logger, h as Events, y as cn } from "./button-B1ZgJ7Cc.js";
-import "./Combination-B_FmEi05.js";
+import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-BWaG12Pv.js";
+import { h as Logger, m as Events, u as Objects, v as cn } from "./button-qsiIHncQ.js";
+import "./Combination-B--d1_LV.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import "./react-dom-BKwCWYPW.js";
-import { t as Tooltip } from "./tooltip-DnI4CwIS.js";
-import { i as debounce_default } from "./constants-LmeAawHa.js";
-import { C as useEvent_default, n as useTheme } from "./useTheme-5GTtjXjy.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-C51Irhxm.js";
-import { t as uniq_default } from "./uniq-CCKqEs7T.js";
-import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-9dXEtK7u.js";
-import { n as ErrorBanner } from "./error-banner-D-KBGvBj.js";
-import { n as formats } from "./vega-loader.browser-DnqN5nbz.js";
-import { t as useAsyncData } from "./useAsyncData-BtHYXgXF.js";
-import { t as j } from "./react-vega-BBUxfZoV.js";
-import "./defaultLocale-I3_GfJ4U.js";
-import "./defaultLocale-Dr6Bz4JK.js";
+import { t as Tooltip } from "./tooltip-DGHTbHl5.js";
+import { i as debounce_default } from "./constants-CXiS0vdr.js";
+import { n as useTheme, w as useEvent_default } from "./useTheme-BIAKDAh6.js";
+import { c as uniq } from "./arrays--2cd0hte.js";
+import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-D2PKDkrk.js";
+import { n as ErrorBanner } from "./error-banner-DkDzvax3.js";
+import { n as formats } from "./vega-loader.browser-hMqVC9bf.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-DrMJeyDu.js";
+import { t as useAsyncData } from "./useAsyncData-Dqt2tV1E.js";
+import { t as j } from "./react-vega-JMnqwKtN.js";
+import "./defaultLocale-DjFHq3Xk.js";
+import "./defaultLocale-B_A76Zpk.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {
   return e.data && "url" in e.data && (e.data.url = asRemoteURL(e.data.url).href), e;
@@ -193,7 +193,7 @@ function getEncodingAxisForMark(e) {
   }
 }
 function getSelectionParamNames(e) {
-  return "params" in e && e.params && e.params.length > 0 ? uniq_default(e.params.filter((e2) => e2 == null ? false : "select" in e2 && e2.select !== void 0).map((e2) => e2.name)) : "layer" in e ? uniq_default(e.layer.flatMap(getSelectionParamNames)) : "vconcat" in e ? uniq_default(e.vconcat.flatMap(getSelectionParamNames)) : "hconcat" in e ? uniq_default(e.hconcat.flatMap(getSelectionParamNames)) : [];
+  return "params" in e && e.params && e.params.length > 0 ? uniq(e.params.filter((e2) => e2 == null ? false : "select" in e2 && e2.select !== void 0).map((e2) => e2.name)) : "layer" in e ? uniq(e.layer.flatMap(getSelectionParamNames)) : "vconcat" in e ? uniq(e.vconcat.flatMap(getSelectionParamNames)) : "hconcat" in e ? uniq(e.hconcat.flatMap(getSelectionParamNames)) : [];
 }
 function getDirectionOfBar(e) {
   var _a, _b;

package/dist/{vega-loader.browser-DnqN5nbz.js → vega-loader.browser-hMqVC9bf.js}

@@ -1,6 +1,6 @@
-import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-C-DW449D.js";
-import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-I3_GfJ4U.js";
-import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-Dr6Bz4JK.js";
+import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-Duzbr5ur.js";
+import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-DjFHq3Xk.js";
+import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-B_A76Zpk.js";
 function accessor(o, P, F) {
   return o.fields = P || [], o.fname = F, o;
 }

package/dist/velocity-C8WXmzLz.js

@@ -0,0 +1,4 @@
+import { t as velocity } from "./velocity-CERL-_vq.js";
+export {
+  velocity
+};

package/dist/verilog-BUXJEyEq.js

@@ -0,0 +1,4 @@
+import { t as verilog } from "./verilog-BD6jNce6.js";
+export {
+  verilog
+};

package/dist/vhdl-C18YIXfF.js

@@ -0,0 +1,4 @@
+import { t as vhdl } from "./vhdl-U-1_N98i.js";
+export {
+  vhdl
+};

package/dist/webidl-D97EKzDx.js

@@ -0,0 +1,4 @@
+import { t as webIDL } from "./webidl-IUn0dzoa.js";
+export {
+  webIDL
+};

package/dist/xquery-BZM6yzG2.js

@@ -0,0 +1,4 @@
+import { t as xQuery } from "./xquery-QeeHdSO2.js";
+export {
+  xQuery
+};

package/dist/{xychartDiagram-PRI3JC2R-BbEInSqY.js → xychartDiagram-PRI3JC2R-DC0-6FAB.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-import "./purify.es-Co_dANLh.js";
-import { t as linear } from "./linear-DZ8_CGCd.js";
-import { n as ordinal } from "./ordinal-B4zYMadD.js";
-import { t as range } from "./range-Bn3no95s.js";
-import "./defaultLocale-I3_GfJ4U.js";
-import { t as line_default } from "./line-BWRi3U3S.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-CGlk8NH-.js";
-import { n as initRange } from "./init-D-g0ONX1.js";
-import { i as log, r as __name } from "./src-BY0BGg6V.js";
-import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-NPoevJcI.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-BtA6WdD4.js";
-import "./dist-C89sHDXk.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-BeXqAsc9.js";
+import "./purify.es-BwXbuO3r.js";
+import { t as linear } from "./linear-CJ6ctpF3.js";
+import { n as ordinal } from "./ordinal-COPPjmMz.js";
+import { t as range } from "./range-DwpxnYuB.js";
+import "./defaultLocale-DjFHq3Xk.js";
+import { t as line_default } from "./line-LK_5q2B9.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-KAv7zltL.js";
+import { n as initRange } from "./init-BfRhston.js";
+import { i as log, r as __name } from "./src-szye8OCw.js";
+import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-DYZpeLRO.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-anbpETeD.js";
+import "./dist-CqR8FBcH.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-DT9thFja.js";
 function band() {
   var e = ordinal().unknown(void 0), w = e.domain, T = e.range, D = 0, O = 1, k, A, j = false, M = 0, N = 0, P = 0.5;
   delete e.unknown;

package/dist/yacas-CXKck-Ok.js

@@ -0,0 +1,4 @@
+import { t as yacas } from "./yacas-C9XcEPAJ.js";
+export {
+  yacas
+};

package/dist/z80-BbF6ykWc.js

@@ -0,0 +1,4 @@
+import { t as z80 } from "./z80-C-nD1oRy.js";
+export {
+  z80
+};

package/package.json

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

package/src/components/ai/ai-model-dropdown.tsx

@@ -2,7 +2,6 @@
 
 import type { Role } from "@marimo-team/llm-info";
 import { useAtomValue } from "jotai";
-import { capitalize } from "lodash-es";
 import {
   BotIcon,
   BrainIcon,
@@ -19,6 +18,7 @@ import {
 } from "@/core/ai/ids/ids";
 import { type AiModel, AiModelRegistry } from "@/core/ai/model-registry";
 import { aiAtom, completionAtom } from "@/core/config/config";
+import { capitalize } from "@/utils/strings";
 import { useOpenSettingsToTab } from "../app-config/state";
 import {
   DropdownMenu,

package/src/components/chat/acp/agent-panel.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtom, useAtomValue } from "jotai";
-import { capitalize } from "lodash-es";
 import {
   BotMessageSquareIcon,
   RefreshCwIcon,
@@ -24,6 +23,7 @@ import { Button } from "@/components/ui/button";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
+import { capitalize } from "@/utils/strings";
 import { AgentDocs } from "./agent-docs";
 import { AgentSelector } from "./agent-selector";
 import { ModelSelector } from "./model-selector";
@@ -95,7 +95,9 @@ interface AgentTitleProps {
 }
 
 const AgentTitle = memo<AgentTitleProps>(({ currentAgentId }) => (
-  <span className="text-sm font-medium">{capitalize(currentAgentId)}</span>
+  <span className="text-sm font-medium">
+    {capitalize(currentAgentId ?? "")}
+  </span>
 ));
 AgentTitle.displayName = "AgentTitle";
 

package/src/components/chat/acp/blocks.tsx

@@ -5,7 +5,6 @@ import type {
   ToolCallContent,
   ToolCallLocation,
 } from "@zed-industries/agent-client-protocol";
-import { capitalize } from "lodash-es";
 import {
   BotMessageSquareIcon,
   FileAudio2Icon,
@@ -36,7 +35,7 @@ import {
 import { uniqueByTakeLast } from "@/utils/arrays";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
-import { Strings } from "@/utils/strings";
+import { capitalize, Strings } from "@/utils/strings";
 import { SimpleAccordion } from "./common";
 import type {
   AgentNotificationEvent,

package/src/components/chat/acp/state.ts

@@ -2,9 +2,9 @@
 
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
-import { capitalize } from "lodash-es";
 import { isPlatformWindows } from "@/core/hotkeys/shortcuts";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
+import { capitalize } from "@/utils/strings";
 import type { TypedString } from "@/utils/typed";
 import { generateUUID } from "@/utils/uuid";
 import type { ExternalAgentSessionId, SessionSupportType } from "./types";

package/src/components/chat/tool-call-accordion.tsx

@@ -123,6 +123,7 @@ const ToolArgsRenderer: React.FC<{ input: unknown }> = ({ input }) => {
 
   const isObject =
     typeof input === "object" &&
+    !Array.isArray(input) &&
     Object.keys(input as Record<string, unknown>).length > 0;
 
   return (

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

@@ -2,17 +2,15 @@
 "use no memo";
 
 import type { RowSelectionState, Table } from "@tanstack/react-table";
-import {
-  ChartColumnStacked,
-  ChartSplineIcon,
-  PanelRightIcon,
-  SearchIcon,
-} from "lucide-react";
+import { ChartSplineIcon, PanelRightIcon, SearchIcon } from "lucide-react";
 import React from "react";
 import { useLocale } from "react-aria";
 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 { Button } from "../ui/button";
 import { Tooltip } from "../ui/tooltip";
 import { toast } from "../ui/use-toast";
@@ -35,11 +33,10 @@ interface TableActionsProps<TData> {
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
-  showColumnExplorer?: boolean;
-  showRowExplorer?: boolean;
+  showTableExplorer?: boolean;
   showPageSizeSelector?: boolean;
   togglePanel?: (panelType: PanelType) => void;
-  isPanelOpen?: (panelType: PanelType) => boolean;
+  isAnyPanelOpen?: boolean;
   tableLoading?: boolean;
 }
 
@@ -58,11 +55,10 @@ export const TableActions = <TData,>({
   getRowIds,
   toggleDisplayHeader,
   showChartBuilder,
-  showColumnExplorer,
-  showRowExplorer,
+  showTableExplorer,
   showPageSizeSelector,
   togglePanel,
-  isPanelOpen,
+  isAnyPanelOpen,
   tableLoading,
 }: TableActionsProps<TData>) => {
   const { locale } = useLocale();
@@ -136,43 +132,22 @@ export const TableActions = <TData,>({
           </Button>
         </Tooltip>
       )}
-      {togglePanel && isPanelOpen !== undefined && (
-        <>
-          {showRowExplorer && (
-            <Tooltip content="Toggle row viewer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("row-viewer")}
-                className="print:hidden"
-              >
-                <PanelRightIcon
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("row-viewer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-          {showColumnExplorer && (
-            <Tooltip content="Toggle column explorer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("column-explorer")}
-                className="print:hidden"
-              >
-                <ChartColumnStacked
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("column-explorer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-        </>
+      {showTableExplorer && togglePanel && (
+        <Tooltip content="Toggle table explorer">
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
+            className="print:hidden"
+          >
+            <PanelRightIcon
+              className={cn(
+                "w-4 h-4 text-muted-foreground",
+                isAnyPanelOpen && "text-primary",
+              )}
+            />
+          </Button>
+        </Tooltip>
       )}
 
       {pagination ? (

package/src/components/data-table/charts/components/chart-items.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { capitalize } from "lodash-es";
 import { ChevronDown } from "lucide-react";
 import React from "react";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -14,6 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import type { DataType } from "@/core/kernel/messages";
+import { capitalize } from "@/utils/strings";
 import { isFieldSet } from "../chart-spec/spec";
 import { convertDataTypeToSelectable } from "../chart-spec/types";
 import {

package/src/components/data-table/charts/components/form-fields.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { capitalize } from "lodash-es";
 import {
   ArrowDownWideNarrowIcon,
   ArrowUpWideNarrowIcon,
@@ -36,6 +35,7 @@ import { Slider } from "@/components/ui/slider";
 import type { DataType } from "@/core/kernel/messages";
 import { Multiselect } from "@/plugins/impl/MultiselectPlugin";
 import { cn } from "@/utils/cn";
+import { capitalize } from "@/utils/strings";
 import { convertDataTypeToSelectable } from "../chart-spec/types";
 import {
   AGGREGATION_TYPE_DESCRIPTIONS,

package/src/components/data-table/charts/forms/common-chart.tsx

@@ -1,10 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { capitalize } from "lodash-es";
 import { InfoIcon, TriangleAlert } from "lucide-react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { Accordion } from "@/components/ui/accordion";
 import { Tooltip } from "@/components/ui/tooltip";
+import { capitalize } from "@/utils/strings";
 import { isFieldSet } from "../chart-spec/spec";
 import { ColorByAxis, Facet, XAxis, YAxis } from "../components/chart-items";
 import {

package/src/components/data-table/charts/storage.ts

@@ -1,11 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atomWithStorage } from "jotai/utils";
-import { capitalize } from "lodash-es";
 import { z } from "zod";
 import type { CellId } from "@/core/cells/ids";
 import { Logger } from "@/utils/Logger";
 import { NotebookScopedLocalStorage } from "@/utils/storage/typed";
+import { capitalize } from "@/utils/strings";
 import type { TypedString } from "@/utils/typed";
 import { ChartSchema, type ChartSchemaType } from "./schemas";
 import type { ChartType } from "./types";

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
@@ -88,18 +89,21 @@ export const ColumnExplorerPanel = ({
         />
         <CommandList className="max-h-full">
           <CommandEmpty>No results.</CommandEmpty>
-          {filteredColumns?.map(([columnName, [dataType, externalType]]) => {
-            return (
-              <ColumnItem
-                // Tables may have the same column names, hence we use tableId to make it unique
-                key={`${tableId}-${columnName}`}
-                columnName={columnName}
-                dataType={dataType}
-                externalType={externalType}
-                previewColumn={previewColumn}
-              />
-            );
-          })}
+          {filteredColumns?.map(
+            ([columnName, [dataType, externalType]], index) => {
+              return (
+                <ColumnItem
+                  // Tables may have the same column names, hence we use tableId to make it unique
+                  key={`${tableId}-${columnName}`}
+                  columnName={columnName}
+                  dataType={dataType}
+                  externalType={externalType}
+                  previewColumn={previewColumn}
+                  defaultExpanded={index === 0}
+                />
+              );
+            },
+          )}
         </CommandList>
       </Command>
     </div>
@@ -111,13 +115,15 @@ const ColumnItem = ({
   dataType,
   externalType,
   previewColumn,
+  defaultExpanded = false,
 }: {
   columnName: string;
   dataType: DataType;
   externalType: string;
   previewColumn: PreviewColumn;
+  defaultExpanded?: boolean;
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   const columnText = (
     <span className={isExpanded ? "font-semibold" : ""}>{columnName}</span>
@@ -130,6 +136,11 @@ const ColumnItem = ({
         onSelect={() => setIsExpanded(!isExpanded)}
         className="flex flex-row items-center gap-1.5 group w-full cursor-pointer"
       >
+        {isExpanded ? (
+          <ChevronDownIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRightIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
+        )}
         <ColumnName columnName={columnText} dataType={dataType} />
         <div className="ml-auto">
           <Tooltip content="Copy column name" delayDuration={400}>

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

@@ -2,7 +2,6 @@
 "use no memo";
 
 import type { Column, Table } from "@tanstack/react-table";
-import { capitalize } from "lodash-es";
 import { FilterIcon, MinusIcon, TextIcon, XIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useLocale } from "react-aria";
@@ -24,6 +23,7 @@ import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
+import { capitalize } from "@/utils/strings";
 import { Spinner } from "../icons/spinner";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";