@marimo-team/islands 0.23.15-dev7 → 0.23.15-dev72

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/chrome/panels/write-secret-modal.tsx

@@ -43,10 +43,11 @@ export const WriteSecretModal: React.FC<{
   providerNames: string[];
   onClose: () => void;
   onSuccess: (secretName: string) => void;
-}> = ({ providerNames, onClose, onSuccess }) => {
+  initialValue?: string;
+}> = ({ providerNames, onClose, onSuccess, initialValue }) => {
   const { writeSecret } = useRequestClient();
   const [key, setKey] = React.useState("");
-  const [value, setValue] = React.useState("");
+  const [value, setValue] = React.useState(initialValue || "");
   const [location, setLocation] = React.useState<string | undefined>(
     providerNames[0],
   );

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/connections/__tests__/secret-combobox.test.ts

@@ -0,0 +1,134 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, test } from "vitest";
+import { partitionSecretKeys } from "../secret-combobox";
+
+describe("partitionSecretKeys", () => {
+  const keys = [
+    "HOSTNAME",
+    "PGHOST",
+    "DB_HOST",
+    "KUBERNETES_SERVICE_HOST",
+    "GPG_KEY",
+    "HOME",
+    "POSTGRES_PASSWORD",
+    "DB_PASSWORD",
+    "USERNAME",
+    "PGUSER",
+    "USER_AGENT",
+    "AWS_ACCESS_KEY_ID",
+    "AWS_SECRET_ACCESS_KEY",
+    "AWS_SESSION_TOKEN",
+    "OBJECT_STORAGE_KEY",
+    "OBJECT_STORAGE_SECRET",
+    "DATABASE_URL",
+    "SNOWFLAKE_PRIVATE_KEY_PASSPHRASE",
+    "PATH",
+    "GITHUB_PAT",
+  ];
+
+  test("returns all keys as other when regex is empty", () => {
+    expect(partitionSecretKeys(keys, "")).toEqual({
+      recommended: [],
+      other: keys,
+    });
+  });
+
+  test("handles invalid regex", () => {
+    expect(partitionSecretKeys(keys, "[invalid")).toEqual({
+      recommended: [],
+      other: keys,
+    });
+  });
+
+  test("recommends host-like keys and excludes kubernetes", () => {
+    const hostRegex =
+      "^(?!.*(kubernetes|gpg)).*(host(name)?|pghost|db.?host|database.?host|mysql.?host|postgres.?host|server.?host)";
+    const { recommended, other } = partitionSecretKeys(keys, hostRegex);
+
+    expect(recommended).toEqual(["HOSTNAME", "PGHOST", "DB_HOST"]);
+    expect(other).toContain("KUBERNETES_SERVICE_HOST");
+    expect(other).toContain("GPG_KEY");
+    expect(other).toContain("HOME");
+  });
+
+  test("recommends password-like keys", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(password|passwd|pgpassword|db.?pass(word)?)",
+    );
+    expect(recommended).toEqual(["POSTGRES_PASSWORD", "DB_PASSWORD"]);
+  });
+
+  test("recommends username keys without matching USER_AGENT", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(username|pguser|db.?user|^USER$|_USER$)",
+    );
+    expect(recommended).toEqual(["USERNAME", "PGUSER"]);
+    expect(recommended).not.toContain("USER_AGENT");
+  });
+
+  test("recommends aws access key id without matching the secret key", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(access.?key.?id|aws.?access.?key)",
+    );
+    expect(recommended).toEqual(["AWS_ACCESS_KEY_ID"]);
+  });
+
+  test("recommends aws secret access key", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(secret.?access.?key|aws.?secret)",
+    );
+    expect(recommended).toEqual(["AWS_SECRET_ACCESS_KEY"]);
+  });
+
+  test("recommends aws session token", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(session.?token|aws.?session)",
+    );
+    expect(recommended).toEqual(["AWS_SESSION_TOKEN"]);
+  });
+
+  test("recommends object storage credentials", () => {
+    expect(
+      partitionSecretKeys(
+        keys,
+        "(access.?key.?id|object.?storage.?key|aws.?access.?key)",
+      ).recommended,
+    ).toEqual(["AWS_ACCESS_KEY_ID", "OBJECT_STORAGE_KEY"]);
+    expect(
+      partitionSecretKeys(
+        keys,
+        "(secret.?access.?key|object.?storage.?secret|aws.?secret)",
+      ).recommended,
+    ).toEqual(["AWS_SECRET_ACCESS_KEY", "OBJECT_STORAGE_SECRET"]);
+  });
+
+  test("recommends uri/url-like keys", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(uri|url|connection.?string|database.?url|jdbc)",
+    );
+    expect(recommended).toEqual(["DATABASE_URL"]);
+  });
+
+  test("recommends token keys and bounds PAT so PATH is excluded", () => {
+    const { recommended, other } = partitionSecretKeys(
+      keys,
+      "(token|api.?key|access.?token|auth.?token|(^|_)pat(_|$))",
+    );
+    expect(recommended).toEqual(["AWS_SESSION_TOKEN", "GITHUB_PAT"]);
+    expect(other).toContain("PATH");
+  });
+
+  test("recommends passphrase keys", () => {
+    const { recommended } = partitionSecretKeys(
+      keys,
+      "(passphrase|private.?key.?passphrase|key.?passphrase)",
+    );
+    expect(recommended).toEqual(["SNOWFLAKE_PRIVATE_KEY_PASSPHRASE"]);
+  });
+});

package/src/components/editor/connections/database/schemas.ts

@@ -10,8 +10,7 @@ function passwordField() {
       FieldOptions.of({
         label: "Password",
         inputType: "password",
-        placeholder: "password",
-        optionRegex: ".*password.*",
+        optionRegex: "(password|passwd|pgpassword|db.?pass(word)?)",
       }),
     );
 }
@@ -24,8 +23,7 @@ function tokenField(label?: string, required?: boolean) {
     FieldOptions.of({
       label: label || "Token",
       inputType: "password",
-      placeholder: "token",
-      optionRegex: ".*token.*",
+      optionRegex: "(token|api.?key|access.?token|auth.?token|(^|_)pat(_|$))",
     }),
   );
   return field;
@@ -38,8 +36,7 @@ function warehouseNameField() {
     .describe(
       FieldOptions.of({
         label: "Warehouse Name",
-        placeholder: "warehouse",
-        optionRegex: ".*warehouse.*",
+        optionRegex: "(warehouse|snowflake.?warehouse)",
       }),
     );
 }
@@ -49,7 +46,10 @@ function uriField(label?: string, required?: boolean) {
   field = required ? field.nonempty() : field.optional();
 
   return field.describe(
-    FieldOptions.of({ label: label || "URI", optionRegex: ".*uri.*" }),
+    FieldOptions.of({
+      label: label || "URI",
+      optionRegex: "(uri|url|connection.?string|database.?url|jdbc)",
+    }),
   );
 }
 
@@ -60,8 +60,9 @@ function hostField(label?: string) {
     .describe(
       FieldOptions.of({
         label: label || "Host",
-        placeholder: "localhost",
-        optionRegex: ".*host.*",
+        // Exclude kubernetes/system host vars that match a naive "host" search.
+        optionRegex:
+          "^(?!.*(kubernetes|gpg)).*(host(name)?|pghost|db.?host|database.?host|mysql.?host|postgres.?host|server.?host)",
       }),
     );
 }
@@ -70,8 +71,7 @@ function databaseField() {
   return z.string().describe(
     FieldOptions.of({
       label: "Database",
-      placeholder: "db name",
-      optionRegex: ".*database.*",
+      optionRegex: "(database|db.?name|pgdatabase|^DB$|^DATABASE$)",
     }),
   );
 }
@@ -80,8 +80,7 @@ function schemaField() {
   return z.string().describe(
     FieldOptions.of({
       label: "Schema",
-      placeholder: "schema name",
-      optionRegex: ".*schema.*",
+      optionRegex: "(^SCHEMA$|db.?schema|postgres.?schema|pg.?schema|_SCHEMA$)",
     }),
   );
 }
@@ -93,8 +92,7 @@ function usernameField() {
     .describe(
       FieldOptions.of({
         label: "Username",
-        placeholder: "username",
-        optionRegex: ".*username.*",
+        optionRegex: "(username|pguser|db.?user|^USER$|_USER$)",
       }),
     );
 }
@@ -196,7 +194,7 @@ export const SnowflakeConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Account",
-          optionRegex: ".*snowflake.*",
+          optionRegex: "(snowflake.?account|^SNOWFLAKE_ACCOUNT$|account.?id)",
         }),
       ),
     warehouse: z
@@ -205,7 +203,7 @@ export const SnowflakeConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Warehouse",
-          optionRegex: ".*snowflake.*",
+          optionRegex: "(snowflake.?warehouse|warehouse)",
         }),
       ),
     database: databaseField(),
@@ -215,7 +213,7 @@ export const SnowflakeConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Schema",
-          optionRegex: ".*snowflake.*",
+          optionRegex: "(snowflake.?schema|^SCHEMA$|_SCHEMA$)",
         }),
       ),
     role: z
@@ -256,7 +254,8 @@ export const SnowflakeConnectionSchema = z
               FieldOptions.of({
                 label: "Private Key Passphrase",
                 inputType: "password",
-                optionRegex: ".*passphrase.*",
+                optionRegex:
+                  "(passphrase|private.?key.?passphrase|key.?passphrase)",
               }),
             ),
         }),
@@ -283,7 +282,8 @@ export const BigQueryConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Project ID",
-          optionRegex: ".*bigquery.*",
+          optionRegex:
+            "(bigquery.?project|gcp.?project|google.?cloud.?project|project.?id)",
         }),
       ),
     dataset: z
@@ -292,7 +292,7 @@ export const BigQueryConnectionSchema = z
       .describe(
         FieldOptions.of({
           label: "Dataset",
-          optionRegex: ".*bigquery.*",
+          optionRegex: "(bigquery.?dataset|dataset)",
         }),
       ),
     credentials_json: z
@@ -377,7 +377,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "URI",
               placeholder: "https://",
-              optionRegex: ".*uri.*",
+              optionRegex: "(uri|url|connection.?string|database.?url|jdbc)",
             }),
           ),
         token: tokenField(),
@@ -392,7 +392,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "URI",
               placeholder: "jdbc:iceberg://host:port/database",
-              optionRegex: ".*uri.*",
+              optionRegex: "(uri|url|connection.?string|database.?url|jdbc)",
             }),
           ),
       }),
@@ -419,7 +419,13 @@ export const IcebergConnectionSchema = z.object({
         "dynamodb.access-key-id": z
           .string()
           .optional()
-          .describe(FieldOptions.of({ label: "Access Key ID" })),
+          .describe(
+            FieldOptions.of({
+              label: "Access Key ID",
+              inputType: "password",
+              optionRegex: "(access.?key.?id|aws.?access.?key)",
+            }),
+          ),
         "dynamodb.secret-access-key": z
           .string()
           .optional()
@@ -427,6 +433,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "Secret Access Key",
               inputType: "password",
+              optionRegex: "(secret.?access.?key|aws.?secret)",
             }),
           ),
         "dynamodb.session-token": z
@@ -436,6 +443,7 @@ export const IcebergConnectionSchema = z.object({
             FieldOptions.of({
               label: "Session Token",
               inputType: "password",
+              optionRegex: "(session.?token|aws.?session)",
             }),
           ),
       }),
@@ -484,7 +492,7 @@ export const RedshiftConnectionSchema = z
               FieldOptions.of({
                 label: "AWS Access Key ID",
                 inputType: "password",
-                optionRegex: ".*aws_access_key_id.*",
+                optionRegex: "(access.?key.?id|aws.?access.?key)",
               }),
             ),
           aws_secret_access_key: z
@@ -494,7 +502,7 @@ export const RedshiftConnectionSchema = z
               FieldOptions.of({
                 label: "AWS Secret Access Key",
                 inputType: "password",
-                optionRegex: ".*aws_secret_access_key.*",
+                optionRegex: "(secret.?access.?key|aws.?secret)",
               }),
             ),
           aws_session_token: z
@@ -504,7 +512,7 @@ export const RedshiftConnectionSchema = z
               FieldOptions.of({
                 label: "AWS Session Token",
                 inputType: "password",
-                optionRegex: ".*aws_session_token.*",
+                optionRegex: "(session.?token|aws.?session)",
               }),
             ),
         }),