@marimo-team/islands 0.20.5-dev11 → 0.20.5-dev15

package/dist/{timeline-definition-IT6M3QCI-CdCfdaCF.js → timeline-definition-IT6M3QCI-D8B3p7ID.js}

@@ -1,7 +1,7 @@
-import "./purify.es-CyOIw8ru.js";
+import "./purify.es-DGenX2XH.js";
 import { t as arc_default } from "./arc-DXxE-tFl.js";
 import { i as log, n as __export, r as __name, t as select_default } from "./src-CHUphWwL.js";
-import { G as setupGraphViewbox, Q as is_dark_default, X as darken_default, Z as lighten_default, a as clear, b as getConfig2, o as commonDb_exports } from "./chunk-ABZYJK2D-CRwanrkd.js";
+import { G as setupGraphViewbox, Q as is_dark_default, X as darken_default, Z as lighten_default, a as clear, b as getConfig2, o as commonDb_exports } from "./chunk-ABZYJK2D-7QYXAAhe.js";
 var parser = (function() {
   var t = /* @__PURE__ */ __name(function(t2, S2, C2, w) {
     for (C2 || (C2 = {}), w = t2.length; w--; C2[t2[w]] = S2) ;

package/dist/{tooltip-CL8m4f9y.js → tooltip-CRsmtPeF.js}

@@ -1,9 +1,9 @@
 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 { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-B8Y11RWn.js";
-import { m as useComposedRefs, y as cn } from "./button-KYalaJYu.js";
-import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-Du-o_hC9.js";
+import { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-DpeHj-vP.js";
+import { m as useComposedRefs, y as cn } from "./button-BJaX_M34.js";
+import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-DPrRlMyq.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.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 = (t) => {
   let { __scopeTooltip: k, delayDuration: A = DEFAULT_DELAY_DURATION, skipDelayDuration: j = 300, disableHoverableContent: M = false, children: N } = t, P = import_react.useRef(true), F = import_react.useRef(false), I = import_react.useRef(0);

package/dist/{types-BwnzGcE4.js → types-ChPKdlru.js}

@@ -5,17 +5,17 @@ var _a;
 import { s as __toESM, t as __commonJSMin } 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 { a as Content, i as Arrow, l as createLucideIcon, o as Root2$1, r as Anchor, s as createPopperScope } from "./dist-B8Y11RWn.js";
-import { t as Check } from "./check-C50jsehH.js";
-import { A as $a916eb452884faea$export$b7a616150fdb9f44, C as useDirection, F as $b5e257d569688ac6$export$619500959fc48b26, I as X, L as ChevronUp, M as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronDown, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, k as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants } from "./label-CV0KYhtH.js";
+import { a as Content, i as Arrow, l as createLucideIcon, o as Root2$1, r as Anchor, s as createPopperScope } from "./dist-DpeHj-vP.js";
+import { t as Check } from "./check-C9c-GtvX.js";
+import { A as $a916eb452884faea$export$b7a616150fdb9f44, C as useDirection, F as $b5e257d569688ac6$export$619500959fc48b26, I as X, L as ChevronUp, M as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronDown, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, k as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants } from "./label-kL_UbziI.js";
 import { n as clsx_default } from "./clsx-D2KVTYnW.js";
-import { g as Logger, h as Events, m as useComposedRefs, p as composeRefs, t as Button, y as cn } from "./button-KYalaJYu.js";
-import { _t as createContextScope, at as useControllableState, ct as useId, dt as useCallbackRef, et as MAX_HEIGHT_OFFSET, ft as Primitive, i as useFocusGuards, it as StyleNamespace, mt as createSlot, n as hideOthers, nt as withSmartCollisionBoundary, ot as Presence, pt as dispatchDiscreteCustomEvent, r as FocusScope, st as Portal, t as Combination_default, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-Du-o_hC9.js";
+import { g as Logger, h as Events, m as useComposedRefs, p as composeRefs, t as Button, y as cn } from "./button-BJaX_M34.js";
+import { _t as createContextScope, at as useControllableState, ct as useId, dt as useCallbackRef, et as MAX_HEIGHT_OFFSET, ft as Primitive, i as useFocusGuards, it as StyleNamespace, mt as createSlot, n as hideOthers, nt as withSmartCollisionBoundary, ot as Presence, pt as dispatchDiscreteCustomEvent, r as FocusScope, st as Portal, t as Combination_default, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-DPrRlMyq.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-CqtLRVZP.js";
 import { t as toString_default } from "./toString-Ckpb50uw.js";
 import { i as debounce_default, n as Constants } from "./constants-D1Tbg_6B.js";
-import { C as useEvent_default } from "./useTheme-BNYQnvu-.js";
+import { C as useEvent_default } from "./useTheme-B-ZI3PUl.js";
 import { t as memoizeLastValue } from "./once-BqS42WgZ.js";
 var ChevronRight = createLucideIcon("chevron-right", [["path", {
   d: "m9 18 6-6-6-6",

package/dist/{useAsyncData-B4hMFGnF.js → useAsyncData-CHYjZCox.js}

@@ -1,7 +1,7 @@
 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 useEvent_default } from "./useTheme-BNYQnvu-.js";
+import { C as useEvent_default } from "./useTheme-B-ZI3PUl.js";
 import { t as invariant } from "./invariant-D9QLJ4SZ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-DuPhOXzr.js → useDeepCompareMemoize-C1YH9SDF.js}

@@ -4,12 +4,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { s as __toESM, t as __commonJSMin } 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 { l as createLucideIcon } from "./dist-B8Y11RWn.js";
-import { a as cva, g as Logger, y as cn } from "./button-KYalaJYu.js";
+import { l as createLucideIcon } from "./dist-DpeHj-vP.js";
+import { a as cva, g as Logger, y as cn } from "./button-BJaX_M34.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { r as KnownQueryParams } from "./constants-D1Tbg_6B.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-BNYQnvu-.js";
-import { i as tableFromIPC } from "./loader-eJCvvApN.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-B-ZI3PUl.js";
+import { i as tableFromIPC } from "./loader-C6xHQhFz.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{useIframeCapabilities-CAt6D2EI.js → useIframeCapabilities-Cc4UBysp.js}

@@ -1,7 +1,7 @@
 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 } from "./button-KYalaJYu.js";
+import { g as Logger } from "./button-BJaX_M34.js";
 import { n as once } from "./once-BqS42WgZ.js";
 function testStorage(e) {
   try {

package/dist/{useTheme-BNYQnvu-.js → useTheme-B-ZI3PUl.js}

@@ -1,8 +1,8 @@
 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-KYalaJYu.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-Du-o_hC9.js";
+import { g as Logger, s as OverridingHotkeyProvider, u as resolvePlatform } from "./button-BJaX_M34.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-DPrRlMyq.js";
 import { t as _baseIsEqual_default } from "./_baseIsEqual-5cAxzk6f.js";
 import { t as merge_default } from "./merge-CGQkMGzr.js";
 function isEqual(e, A) {

package/dist/{vega-component-DouPy8AI.js → vega-component-BX_oDKB3.js}

@@ -1,19 +1,19 @@
 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 { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-DuPhOXzr.js";
-import { d as Objects, g as Logger, h as Events } from "./button-KYalaJYu.js";
-import "./Combination-Du-o_hC9.js";
+import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-C1YH9SDF.js";
+import { d as Objects, g as Logger, h as Events } from "./button-BJaX_M34.js";
+import "./Combination-DPrRlMyq.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import "./react-dom-CqtLRVZP.js";
-import { t as Tooltip } from "./tooltip-CL8m4f9y.js";
+import { t as Tooltip } from "./tooltip-CRsmtPeF.js";
 import { i as debounce_default } from "./constants-D1Tbg_6B.js";
-import { C as useEvent_default, n as useTheme } from "./useTheme-BNYQnvu-.js";
-import { a as tooltipHandler, n as vegaLoadData } from "./loader-eJCvvApN.js";
+import { C as useEvent_default, n as useTheme } from "./useTheme-B-ZI3PUl.js";
+import { a as tooltipHandler, n as vegaLoadData } from "./loader-C6xHQhFz.js";
 import { t as uniq_default } from "./uniq-cCc07Q8K.js";
-import { n as ErrorBanner } from "./error-banner-D0tXnwl4.js";
+import { n as ErrorBanner } from "./error-banner-CJWv_j2x.js";
 import { n as formats } from "./vega-loader.browser-CQ-lnUkI.js";
-import { t as useAsyncData } from "./useAsyncData-B4hMFGnF.js";
+import { t as useAsyncData } from "./useAsyncData-CHYjZCox.js";
 import { t as j } from "./react-vega-C6kwcd86.js";
 import "./defaultLocale-Bklbu-Tp.js";
 import "./defaultLocale-CfQ4kBaV.js";

package/dist/{xychartDiagram-PRI3JC2R-rEm_SIsC.js → xychartDiagram-PRI3JC2R-KuxgQuK9.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-import "./purify.es-CyOIw8ru.js";
+import "./purify.es-DGenX2XH.js";
 import { t as linear } from "./linear-DIp6l9sg.js";
 import { n as ordinal } from "./ordinal-Dcvf4J1m.js";
 import { t as range } from "./range-BToS7LsA.js";
 import "./defaultLocale-Bklbu-Tp.js";
 import { t as line_default } from "./line-C1k1rG3Z.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-CsnX6RKs.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-DgI4FlvW.js";
 import { n as initRange } from "./init-Ci8VD8ZH.js";
 import { i as log, r as __name } from "./src-CHUphWwL.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-CRwanrkd.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-CV_DQeaX.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-7QYXAAhe.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-BRFl4iNd.js";
 import "./dist-Bymy0kEH.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-Cmt--e0q.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-C9q_MXZQ.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/package.json

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

package/src/components/datasources/components.tsx

@@ -1,18 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { ChevronRightIcon, LoaderCircle, XIcon } from "lucide-react";
+import { LoaderCircle, XIcon } from "lucide-react";
 import type { CSSProperties } from "react";
+import { TreeChevron } from "@/components/editor/file-tree/tree-actions";
 import type { DataType } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
 import { DATA_TYPE_ICON, getDataTypeColor } from "../datasets/icons";
 
 export const RotatingChevron: React.FC<{ isExpanded: boolean }> = ({
   isExpanded,
-}) => (
-  <ChevronRightIcon
-    className={cn("h-3 w-3 transition-transform", isExpanded && "rotate-90")}
-  />
-);
+}) => <TreeChevron isExpanded={isExpanded} className="h-3 w-3" />;
 
 export const DatasourceLabel: React.FC<{
   children: React.ReactNode;

package/src/components/datasources/datasources.tsx

@@ -3,11 +3,12 @@
 import { CommandList } from "cmdk";
 import { atom, useAtomValue, useSetAtom } from "jotai";
 import { sortBy } from "lodash-es";
-import { PlusIcon, PlusSquareIcon, RefreshCwIcon, XIcon } from "lucide-react";
+import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { DatabaseLogo } from "@/components/databases/icon";
+import { RefreshIconButton } from "@/components/editor/file-tree/tree-actions";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Button } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
@@ -265,15 +266,10 @@ const Engine: React.FC<{
   const engineName = internalEngine ? "In-Memory" : connection.name;
   const { previewDataSourceConnection } = useRequestClient();
 
-  const [isSpinning, setIsSpinning] = React.useState(false);
-
   const handleRefreshConnection = async () => {
-    setIsSpinning(true);
     await previewDataSourceConnection({
       engine: connection.name,
     });
-    // Artificially spin the icon if the request is really fast
-    setTimeout(() => setIsSpinning(false), 500);
   };
 
   return (
@@ -288,21 +284,12 @@ const Engine: React.FC<{
           (<EngineVariable variableName={engineName as VariableName} />)
         </span>
         {!internalEngine && (
-          <Tooltip content="Refresh connection">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="ml-auto hover:bg-transparent hover:shadow-none"
-              onClick={handleRefreshConnection}
-            >
-              <RefreshCwIcon
-                className={cn(
-                  "h-4 w-4 text-muted-foreground hover:text-foreground",
-                  isSpinning && "animate-[spin_0.5s]",
-                )}
-              />
-            </Button>
-          </Tooltip>
+          <RefreshIconButton
+            onClick={handleRefreshConnection}
+            tooltip="Refresh connection"
+            className="ml-auto h-4 p-0"
+            iconClassName="h-3.5 w-3.5"
+          />
         )}
       </DatasourceLabel>
       {hasChildren ? (

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -174,7 +174,9 @@ export const KeyboardShortcuts: React.FC = () => {
                 return;
               }
 
-              let key = e.key.toLowerCase();
+              // Single character keys are always lowercase (e.g. "a", "b", "c")
+              // But we should preserve the original case for other keys (e.g. "Enter", "Escape")
+              let key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
               // Handle edge cases
               if (e.key === " ") {
                 key = "Space";

package/src/components/editor/file-tree/file-explorer.tsx

@@ -6,8 +6,6 @@ import {
   ArrowLeftIcon,
   BetweenHorizontalStartIcon,
   BracesIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   CopyIcon,
   CopyMinusIcon,
   DownloadIcon,
@@ -17,9 +15,7 @@ import {
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
-  MoreVerticalIcon,
   PlaySquareIcon,
-  RefreshCcwIcon,
   Trash2Icon,
   UploadIcon,
   ViewIcon,
@@ -32,6 +28,18 @@ import {
   type TreeApi,
 } from "react-arborist";
 import useEvent from "react-use-event-hook";
+import {
+  FILE_ICON,
+  FILE_ICON_COLOR,
+  type FileIconType,
+  guessFileIconType,
+} from "@/components/editor/file-tree/file-icons";
+import {
+  MENU_ITEM_ICON_CLASS,
+  MoreActionsButton,
+  RefreshIconButton,
+  TreeChevron,
+} from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
@@ -65,12 +73,7 @@ import { useTreeDndManager } from "./dnd-wrapper";
 import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
 import { openStateAtom, treeAtom } from "./state";
-import {
-  FILE_TYPE_ICONS,
-  type FileType,
-  guessFileType,
-  PYTHON_CODE_FOR_FILE_TYPE,
-} from "./types";
+import { PYTHON_CODE_FOR_FILE_TYPE } from "./types";
 import { useFileExplorerUpload } from "./upload";
 
 const hiddenFilesState = atomWithStorage(
@@ -102,7 +105,10 @@ export const FileExplorer: React.FC<{
   const { isPending, error } = useAsyncData(() => tree.initialize(setData), []);
 
   const handleRefresh = useEvent(() => {
-    tree.refreshAll(Object.keys(openState).filter((id) => openState[id]));
+    // Return the promise so callers can await refresh completion
+    return tree.refreshAll(
+      Object.keys(openState).filter((id) => openState[id]),
+    );
   });
 
   const handleHiddenFilesToggle = useEvent(() => {
@@ -322,16 +328,10 @@ const Toolbar = ({
         </button>
       </Tooltip>
       <input {...getInputProps({})} type="file" />
-      <Tooltip content="Refresh">
-        <Button
-          data-testid="file-explorer-refresh-button"
-          onClick={onRefresh}
-          variant="text"
-          size="xs"
-        >
-          <RefreshCcwIcon size={16} />
-        </Button>
-      </Tooltip>
+      <RefreshIconButton
+        data-testid="file-explorer-refresh-button"
+        onClick={onRefresh}
+      />
       <Tooltip content="Toggle hidden files">
         <Button
           data-testid="file-explorer-hidden-files-button"
@@ -421,11 +421,11 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     useRequestClient();
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
-  const fileType: FileType = node.data.isDirectory
+  const fileType: FileIconType = node.data.isDirectory
     ? "directory"
-    : guessFileType(node.data.name);
+    : guessFileIconType(node.data.name);
 
-  const Icon = FILE_TYPE_ICONS[fileType];
+  const Icon = FILE_ICON[fileType];
   const { openConfirm, openPrompt } = useImperativeModal();
   const { createNewCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
@@ -534,11 +534,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
   });
 
   const renderActions = () => {
-    const iconProps = {
-      size: 14,
-      strokeWidth: 1.5,
-      className: "mr-2",
-    };
+    const ic = MENU_ITEM_ICON_CLASS;
     return (
       <DropdownMenuContent
         align="end"
@@ -548,7 +544,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
       >
         {!node.data.isDirectory && (
           <DropdownMenuItem onSelect={() => node.select()}>
-            <ViewIcon {...iconProps} />
+            <ViewIcon className={ic} />
             Open file
           </DropdownMenuItem>
         )}
@@ -558,34 +554,34 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               openFile({ path: node.data.path });
             }}
           >
-            <ExternalLinkIcon {...iconProps} />
+            <ExternalLinkIcon className={ic} />
             Open file in external editor
           </DropdownMenuItem>
         )}
         {node.data.isDirectory && (
           <>
             <DropdownMenuItem onSelect={() => handleCreateNotebook()}>
-              <MarimoPlusIcon {...iconProps} />
+              <MarimoPlusIcon className={ic} />
               Create notebook
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => handleCreateFile()}>
-              <FilePlus2Icon {...iconProps} />
+              <FilePlus2Icon className={ic} />
               Create file
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => handleCreateFolder()}>
-              <FolderPlusIcon {...iconProps} />
+              <FolderPlusIcon className={ic} />
               Create folder
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem onSelect={() => node.edit()}>
-          <Edit3Icon {...iconProps} />
+          <Edit3Icon className={ic} />
           Rename
         </DropdownMenuItem>
         {!node.data.isDirectory && (
           <DropdownMenuItem onSelect={handleDuplicate}>
-            <CopyIcon {...iconProps} />
+            <CopyIcon className={ic} />
             Duplicate
           </DropdownMenuItem>
         )}
@@ -595,7 +591,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             toast({ title: "Copied to clipboard" });
           }}
         >
-          <ListTreeIcon {...iconProps} />
+          <ListTreeIcon className={ic} />
           Copy path
         </DropdownMenuItem>
         {tree && (
@@ -607,7 +603,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               toast({ title: "Copied to clipboard" });
             }}
           >
-            <ListTreeIcon {...iconProps} />
+            <ListTreeIcon className={ic} />
             Copy relative path
           </DropdownMenuItem>
         )}
@@ -620,7 +616,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             handleInsertCode(pythonCode);
           }}
         >
-          <BetweenHorizontalStartIcon {...iconProps} />
+          <BetweenHorizontalStartIcon className={ic} />
           Insert snippet for reading file
         </DropdownMenuItem>
         <DropdownMenuItem
@@ -635,7 +631,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             await copyToClipboard(pythonCode);
           }}
         >
-          <BracesIcon {...iconProps} />
+          <BracesIcon className={ic} />
           Copy snippet for reading file
         </DropdownMenuItem>
         {/* Not shown in WASM */}
@@ -643,7 +639,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           <>
             <DropdownMenuSeparator />
             <DropdownMenuItem onSelect={handleOpenMarimoFile}>
-              <PlaySquareIcon {...iconProps} />
+              <PlaySquareIcon className={ic} />
               Open notebook
             </DropdownMenuItem>
           </>
@@ -658,14 +654,14 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
                 downloadBlob(new Blob([contents]), node.data.name);
               }}
             >
-              <DownloadIcon {...iconProps} />
+              <DownloadIcon className={ic} />
               Download
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem onSelect={handleDeleteFile} variant="danger">
-          <Trash2Icon {...iconProps} />
+          <Trash2Icon className={ic} />
           Delete
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -699,7 +695,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
         {node.data.isMarimoFile ? (
           <MarimoIcon className="w-5 h-5 shrink-0 mr-2" strokeWidth={1.5} />
         ) : (
-          <Icon className="w-5 h-5 shrink-0 mr-2" strokeWidth={1.5} />
+          <Icon
+            className={cn("w-5 h-5 shrink-0 mr-2", FILE_ICON_COLOR[fileType])}
+            strokeWidth={1.5}
+          />
         )}
         {node.isEditing ? (
           <Edit node={node} />
@@ -712,19 +711,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             tabIndex={-1}
             onClick={(e) => e.stopPropagation()}
           >
-            <Button
+            <MoreActionsButton
               data-testid="file-explorer-more-button"
-              variant="text"
-              tabIndex={-1}
-              size="xs"
-              className="mb-0"
-              aria-label="More options"
-            >
-              <MoreVerticalIcon
-                strokeWidth={2}
-                className="w-5 h-5 hidden group-hover:block"
-              />
-            </Button>
+              iconClassName="w-5 h-5"
+            />
           </DropdownMenuTrigger>
           {renderActions()}
         </DropdownMenu>
@@ -735,14 +725,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
 
 const FolderArrow = ({ node }: { node: NodeApi<FileInfo> }) => {
   if (!node.data.isDirectory) {
-    return <span className="w-5 h-5 shrink-0" />;
+    return <span className="w-4 h-4 shrink-0" />;
   }
 
-  return node.isOpen ? (
-    <ChevronDownIcon className="w-5 h-5 shrink-0" />
-  ) : (
-    <ChevronRightIcon className="w-5 h-5 shrink-0" />
-  );
+  return <TreeChevron isExpanded={node.isOpen} className="w-4 h-4" />;
 };
 
 function openMarimoNotebook(