@marimo-team/islands 0.23.15-dev5 → 0.23.15-dev53

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -303,6 +303,16 @@ const PackagesList: React.FC<{
   onSuccess: () => void;
   packages: { name: string; version: string }[];
 }> = ({ onSuccess, packages }) => {
+  // Sort case-insensitively so packages are strictly alphabetical
+  // regardless of capitalization (package managers sort inconsistently).
+  const sortedPackages = React.useMemo(
+    () =>
+      packages.toSorted((a, b) =>
+        a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+      ),
+    [packages],
+  );
+
   if (packages.length === 0) {
     return (
       <PanelEmptyState
@@ -323,7 +333,7 @@ const PackagesList: React.FC<{
         </TableRow>
       </TableHeader>
       <TableBody>
-        {packages.map((item) => (
+        {sortedPackages.map((item) => (
           <TableRow
             key={item.name}
             className="group"

package/src/components/editor/columns/__tests__/cell-column.test.tsx

@@ -0,0 +1,105 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { CellColumnId } from "@/utils/id-tree";
+import { Column } from "../cell-column";
+
+const columnId = "col-1" as CellColumnId;
+
+function renderColumn({
+  width,
+  presenting,
+}: {
+  width: "compact" | "columns";
+  presenting: boolean;
+}) {
+  const store = createStore();
+  return render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <Column
+          columnId={columnId}
+          index={0}
+          width={width}
+          canDelete={false}
+          canMoveLeft={false}
+          canMoveRight={false}
+          presenting={presenting}
+        >
+          <div data-testid="column-children" />
+        </Column>
+      </TooltipProvider>
+    </Provider>,
+  );
+}
+
+describe("Column (single-column notebook)", () => {
+  it("spaces cells with the --notebook-cell-gap variable", () => {
+    const { getByTestId } = renderColumn({
+      width: "compact",
+      presenting: false,
+    });
+    const column = getByTestId("cell-column");
+    expect(column.classList.contains("gap-(--notebook-cell-gap)")).toBe(true);
+    expect(column.classList.contains("[--notebook-cell-gap:0px]")).toBe(false);
+  });
+
+  it("zeroes the cell gap while presenting", () => {
+    const { getByTestId } = renderColumn({
+      width: "compact",
+      presenting: true,
+    });
+    const column = getByTestId("cell-column");
+    expect(column.classList.contains("gap-(--notebook-cell-gap)")).toBe(true);
+    expect(column.classList.contains("[--notebook-cell-gap:0px]")).toBe(true);
+  });
+});
+
+describe("Column (multi-column notebook)", () => {
+  it("shows column chrome when not presenting", () => {
+    const { getByTestId, getAllByTestId } = renderColumn({
+      width: "columns",
+      presenting: false,
+    });
+
+    expect(getByTestId("column-header").hidden).toBe(false);
+    expect(getByTestId("column-frame").classList.contains("border")).toBe(true);
+    for (const handle of getAllByTestId("column-resize-handle")) {
+      expect(handle.hidden).toBe(false);
+    }
+  });
+
+  it("hides column chrome while presenting, without unmounting it", () => {
+    const { getByTestId, getAllByTestId } = renderColumn({
+      width: "columns",
+      presenting: true,
+    });
+
+    // Header (drag handle, move/delete/add buttons) is hidden but mounted
+    expect(getByTestId("column-header").hidden).toBe(true);
+    // No border around the column
+    expect(getByTestId("column-frame").classList.contains("border")).toBe(
+      false,
+    );
+    // Resize handles are hidden
+    const handles = getAllByTestId("column-resize-handle");
+    expect(handles.length).toBeGreaterThan(0);
+    for (const handle of handles) {
+      expect(handle.hidden).toBe(true);
+    }
+    // Cell gap is zeroed on the column root (cascades to descendants)
+    const columnRoot = getByTestId("column-frame").parentElement;
+    expect(columnRoot?.classList.contains("[--notebook-cell-gap:0px]")).toBe(
+      true,
+    );
+    // Editor geometry (saved widths, min-width, gutters) is replaced by the
+    // published content width
+    const inner = getByTestId("column-children").parentElement;
+    expect(inner?.classList.contains("min-w-[500px]")).toBe(false);
+    expect(inner?.classList.contains("w-(--content-width)")).toBe(true);
+    // Children stay mounted
+    expect(getByTestId("column-children")).toBeTruthy();
+  });
+});

package/src/components/editor/columns/cell-column.tsx

@@ -3,6 +3,7 @@
 import React, { memo, useRef } from "react";
 import type { AppConfig } from "@/core/config/config-schema";
 import { useResizeHandle } from "@/hooks/useResizeHandle";
+import { cn } from "@/utils/cn";
 import type { CellColumnId } from "@/utils/id-tree";
 import { SortableColumn } from "./sortable-column";
 import { storageFn } from "./storage";
@@ -17,6 +18,11 @@ interface Props {
   canDelete: boolean;
   canMoveLeft: boolean;
   canMoveRight: boolean;
+  /**
+   * If true, column chrome (drag handles, resize handles, borders) is hidden
+   * while keeping the same component tree mounted.
+   */
+  presenting?: boolean;
 }
 
 const { getColumnWidth, saveColumnWidth } = storageFn;
@@ -24,6 +30,10 @@ const { getColumnWidth, saveColumnWidth } = storageFn;
 export const Column = memo((props: Props) => {
   const columnRef = useRef<HTMLDivElement>(null);
 
+  // Published cells are not spaced apart. Set once on the column root; the
+  // CSS variable cascades to the gap-using descendants.
+  const zeroGapWhenPresenting = props.presenting && "[--notebook-cell-gap:0px]";
+
   if (props.width === "columns") {
     return (
       <SortableColumn
@@ -33,14 +43,16 @@ export const Column = memo((props: Props) => {
         columnId={props.columnId}
         canMoveLeft={props.canMoveLeft}
         canMoveRight={props.canMoveRight}
-        className="group/column"
+        className={cn("group/column", zeroGapWhenPresenting)}
         footer={props.footer}
+        presenting={props.presenting}
       >
         <ResizableComponent
           startingWidth={getColumnWidth(props.index)}
           onResize={(width: number) => {
             saveColumnWidth(props.index, width);
           }}
+          presenting={props.presenting}
         >
           {props.children}
         </ResizableComponent>
@@ -50,7 +62,13 @@ export const Column = memo((props: Props) => {
 
   return (
     <>
-      <div data-testid="cell-column" className="flex flex-col gap-5">
+      <div
+        data-testid="cell-column"
+        className={cn(
+          "flex flex-col gap-(--notebook-cell-gap)",
+          zeroGapWhenPresenting,
+        )}
+      >
         {props.children}
       </div>
       {props.footer}
@@ -64,12 +82,14 @@ interface ResizableComponentProps {
   startingWidth: number | "contentWidth";
   onResize?: (width: number) => void;
   children: React.ReactNode;
+  presenting?: boolean;
 }
 
 const ResizableComponent = ({
   startingWidth,
   onResize,
   children,
+  presenting,
 }: ResizableComponentProps) => {
   const { resizableDivRef, handleRefs, style } = useResizeHandle({
     startingWidth,
@@ -80,11 +100,13 @@ const ResizableComponent = ({
     return (
       <div
         ref={ref}
+        data-testid="column-resize-handle"
         className={`w-[3px] cursor-col-resize transition-colors duration-200 z-100
           relative before:content-[''] before:absolute before:inset-y-0 before:left-[-3px]
           before:right-[-3px] before:w-[9px] before:z-[-1]
           hover/column:bg-[var(--slate-3)] dark:hover/column:bg-[var(--slate-5)]
           hover/column:hover:bg-primary/60 dark:hover/column:hover:bg-primary/60`}
+        hidden={presenting}
       />
     );
   };
@@ -94,8 +116,16 @@ const ResizableComponent = ({
       {renderResizeHandler(handleRefs.left)}
       <div
         ref={resizableDivRef}
-        className="flex flex-col gap-5 box-content min-h-[100px] px-11 pt-3 pb-6 min-w-[500px] z-1"
-        style={style}
+        className={cn(
+          "flex flex-col gap-(--notebook-cell-gap) box-content z-1",
+          // While presenting, use the published content width instead of the
+          // editor geometry (saved pixel width, 500px minimum, gutters),
+          // which overflows narrow screens.
+          presenting
+            ? "w-(--content-width)"
+            : "min-h-[100px] px-11 pt-3 pb-6 min-w-[500px]",
+        )}
+        style={presenting ? undefined : style}
       >
         {children}
       </div>

package/src/components/editor/columns/sortable-column.tsx

@@ -30,11 +30,24 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   canMoveLeft: boolean;
   canMoveRight: boolean;
   footer?: React.ReactNode;
+  /**
+   * If true, dragging is disabled and the column chrome is hidden
+   * (e.g. while presenting).
+   */
+  presenting?: boolean;
 }
 
 const SortableColumnInternal = React.forwardRef(
   (
-    { columnId, canDelete, canMoveLeft, canMoveRight, footer, ...props }: Props,
+    {
+      columnId,
+      canDelete,
+      canMoveLeft,
+      canMoveRight,
+      footer,
+      presenting,
+      ...props
+    }: Props,
     ref: React.Ref<HTMLDivElement>,
   ) => {
     const {
@@ -45,7 +58,7 @@ const SortableColumnInternal = React.forwardRef(
       transition,
       isDragging,
       isOver,
-    } = useSortable({ id: columnId });
+    } = useSortable({ id: columnId, disabled: presenting });
 
     const style: React.CSSProperties = {
       transform: transform
@@ -78,7 +91,11 @@ const SortableColumnInternal = React.forwardRef(
     };
 
     const dragHandle = (
-      <div className="px-2 pb-0 group flex items-center overflow-hidden border-b border-(--slate-7)">
+      <div
+        data-testid="column-header"
+        className="px-2 pb-0 group flex items-center overflow-hidden border-b border-(--slate-7)"
+        hidden={presenting}
+      >
         <Tooltip content="Move column left" side="top" delayDuration={300}>
           <Button
             variant="text"
@@ -161,7 +178,10 @@ const SortableColumnInternal = React.forwardRef(
           isOver && "bg-accent/20", // Add a background color when dragging over
         )}
       >
-        <div className="border border-(--slate-7)">
+        <div
+          data-testid="column-frame"
+          className={cn(!presenting && "border border-(--slate-7)")}
+        >
           {dragHandle}
           {props.children}
         </div>

package/src/components/editor/file-tree/download.ts

@@ -0,0 +1,46 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { getRequestClient } from "@/core/network/requests";
+import { getRuntimeManager } from "@/core/runtime/config";
+import { isWasm } from "@/core/wasm/utils";
+import { deserializeBlob } from "@/utils/blob";
+import { downloadBlob, downloadByURL } from "@/utils/download";
+import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
+
+/**
+ * Download a workspace file by path.
+ *
+ * Over HTTP this navigates to a streaming download endpoint, so the
+ * browser's download manager handles the transfer and no file contents
+ * are buffered in memory. In WASM there is no HTTP server to stream
+ * from; contents come over the pyodide bridge as base64 and are saved
+ * via a Blob.
+ */
+export async function downloadFile(path: string, name: string): Promise<void> {
+  if (!isWasm()) {
+    const url = getRuntimeManager().formatNavigableHttpURL(
+      "api/files/download",
+      new URLSearchParams({ path }),
+    );
+    downloadByURL(url.toString(), name);
+    return;
+  }
+
+  const details = await getRequestClient().sendFileDetails({ path });
+  if (details.isBase64 && details.contents) {
+    const blob = deserializeBlob(
+      base64ToDataURL(
+        details.contents as Base64String,
+        details.mimeType || "application/octet-stream",
+      ),
+    );
+    downloadBlob(blob, name);
+  } else {
+    downloadBlob(
+      new Blob([details.contents || ""], {
+        type: details.mimeType || "application/octet-stream",
+      }),
+      name,
+    );
+  }
+}

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

@@ -62,16 +62,14 @@ import type { FileInfo } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
-import { deserializeBlob } from "@/utils/blob";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
-import { downloadBlob } from "@/utils/download";
-import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
 import { openNotebook } from "@/utils/links";
 import type { FilePath } from "@/utils/paths";
 import { makeDuplicateName } from "@/utils/pathUtils";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { useTreeDndManager } from "./dnd-wrapper";
+import { downloadFile } from "./download";
 import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
 import { openStateAtom, treeAtom } from "./state";
@@ -393,7 +391,7 @@ const Show = ({
 };
 
 const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
-  const { openFile, sendFileDetails } = useRequestClient();
+  const { openFile } = useRequestClient();
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
   const fileType: FileIconType = node.data.isDirectory
@@ -645,23 +643,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
             <>
               <DropdownMenuItem
                 onSelect={async () => {
-                  const details = await sendFileDetails({
-                    path: node.data.path,
-                  });
-                  if (details.isBase64 && details.contents) {
-                    const blob = deserializeBlob(
-                      base64ToDataURL(
-                        details.contents as Base64String,
-                        details.mimeType || "application/octet-stream",
-                      ),
-                    );
-                    downloadBlob(blob, node.data.name);
-                  } else {
-                    downloadBlob(
-                      new Blob([details.contents || ""]),
-                      node.data.name,
-                    );
-                  }
+                  await downloadFile(node.data.path, node.data.name);
                 }}
                 data-testid="file-explorer-download-menu-item"
               >

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

@@ -21,10 +21,9 @@ import { filenameAtom } from "@/core/saving/file-state";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
-import { deserializeBlob } from "@/utils/blob";
 import { copyToClipboard } from "@/utils/copy";
-import { downloadBlob, downloadByURL } from "@/utils/download";
-import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
+import type { Base64String } from "@/utils/json/base64";
+import { downloadFile } from "./download";
 import { FilePreviewHeader } from "./file-header";
 import {
   FileContentRenderer,
@@ -121,30 +120,8 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     );
   }
 
-  const handleDownload = () => {
-    if (data.isBase64 && data.contents) {
-      if (isMediaMime(mimeType)) {
-        const dataURL = base64ToDataURL(
-          data.contents as Base64String,
-          mimeType,
-        );
-        downloadByURL(dataURL, data.file.name);
-      } else {
-        const blob = deserializeBlob(
-          base64ToDataURL(
-            data.contents as Base64String,
-            data.mimeType || "application/octet-stream",
-          ),
-        );
-        downloadBlob(blob, data.file.name);
-      }
-      return;
-    }
-
-    downloadBlob(
-      new Blob([data.contents || internalValue], { type: mimeType }),
-      data.file.name,
-    );
+  const handleDownload = async () => {
+    await downloadFile(file.path, data.file.name);
   };
 
   const header = (

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -12,6 +12,7 @@ import { MockRequestClient } from "@/__mocks__/requests";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import type { CellActions } from "@/core/cells/cells";
 import { notebookAtom } from "@/core/cells/cells";
+import { signatureHintField } from "@/core/codemirror/completion/signature-hint";
 import {
   configOverridesAtom,
   platformAtom,
@@ -1825,6 +1826,38 @@ describe("useCellEditorNavigationProps", () => {
       expect(focusCell).not.toHaveBeenCalled();
     });
 
+    it("should dismiss the signature hint when Escape is pressed without exiting to command mode", () => {
+      mockSimplifySelection.mockReturnValue(false);
+      mockCompletionStatus.mockReturnValue(null);
+
+      const dispatch = vi.fn();
+      const mockEditorView = {
+        current: {
+          state: {
+            selection: { main: { from: 9, to: 9, empty: true } },
+            field: vi.fn((field: unknown) =>
+              field === signatureHintField ? { pos: 9 } : false,
+            ),
+          },
+          dispatch,
+        } as unknown as EditorView,
+      };
+
+      const { result } = renderWithProvider(() =>
+        useCellEditorNavigationProps(mockCellId, mockEditorView),
+      );
+
+      const mockEvent = Mocks.keyboardEvent({ key: "Escape" });
+
+      act(() => {
+        result.current.onKeyDown?.(mockEvent);
+      });
+
+      // The hint is dismissed (dispatch called) but we stay in edit mode.
+      expect(dispatch).toHaveBeenCalled();
+      expect(focusCell).not.toHaveBeenCalled();
+    });
+
     it("should continue propagation for other keys", () => {
       const mockEditorView = { current: null };
       const { result } = renderWithProvider(() =>

package/src/components/editor/navigation/navigation.ts

@@ -22,6 +22,10 @@ import {
 } from "@/core/cells/pending-cut-service";
 import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import { scrollCellIntoView } from "@/core/cells/scrollCellIntoView";
+import {
+  closeSignatureHint,
+  signatureHintField,
+} from "@/core/codemirror/completion/signature-hint";
 import {
   hotkeysAtom,
   isAiFeatureEnabled,
@@ -713,7 +717,9 @@ export function useCellEditorNavigationProps(
       return;
     }
 
-    const hasSignatureHelp = state.field(signatureHelpTooltipField, false);
+    const hasSignatureHelp =
+      Boolean(state.field(signatureHelpTooltipField, false)) ||
+      Boolean(state.field(signatureHintField, false));
     const hasAutocompletePopup = completionStatus(state) !== null;
     if (hasSignatureHelp) {
       closeSignatureHelp(view);
@@ -784,4 +790,5 @@ export function closeSignatureHelp(view: EditorView) {
   if (view.state.field(signatureHelpTooltipField, false)) {
     view.dispatch({ effects: setSignatureHelpTooltip.of(null) });
   }
+  closeSignatureHint(view);
 }