@marimo-team/islands 0.20.3-dev92 → 0.20.3-dev96

package/package.json

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

package/src/components/databases/icons/google-drive.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>

package/src/components/datasources/datasources.tsx

@@ -60,7 +60,7 @@ import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { PythonIcon } from "../editor/cell/code/icons";
 import { useAddCodeToNewCell } from "../editor/cell/useAddCell";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
-import { AddDatabaseDialog } from "../editor/database/add-database-form";
+import { AddConnectionDialog } from "../editor/connections/add-connection-dialog";
 import { DatasetColumnPreview } from "./column-preview";
 import {
   ColumnName,
@@ -160,12 +160,12 @@ export const DataSources: React.FC = () => {
         title="No tables found"
         description="Any datasets/dataframes in the global scope will be shown here."
         action={
-          <AddDatabaseDialog>
+          <AddConnectionDialog>
             <Button variant="outline" size="sm">
               Add database or catalog
               <PlusIcon className="h-4 w-4 ml-2" />
             </Button>
-          </AddDatabaseDialog>
+          </AddConnectionDialog>
         }
         icon={<DatabaseIcon />}
       />
@@ -201,7 +201,7 @@ export const DataSources: React.FC = () => {
           </button>
         )}
 
-        <AddDatabaseDialog>
+        <AddConnectionDialog>
           <Button
             variant="ghost"
             size="sm"
@@ -209,7 +209,7 @@ export const DataSources: React.FC = () => {
           >
             <PlusIcon className="h-4 w-4" />
           </Button>
-        </AddDatabaseDialog>
+        </AddConnectionDialog>
       </div>
 
       <CommandList className="flex flex-col">

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

@@ -24,6 +24,7 @@ import {
   FolderDownIcon,
   GithubIcon,
   GlobeIcon,
+  HardDrive,
   Home,
   ImageIcon,
   KeyboardIcon,
@@ -78,9 +79,9 @@ import { newNotebookURL } from "@/utils/urls";
 import { useRunAllCells } from "../cell/useRunCells";
 import { useChromeActions, useChromeState } from "../chrome/state";
 import { PANELS } from "../chrome/types";
+import { AddConnectionDialogContent } from "../connections/add-connection-dialog";
 import { keyboardShortcutsAtom } from "../controls/keyboard-shortcuts";
 import { commandPaletteAtom } from "../controls/state";
-import { AddDatabaseDialogContent } from "../database/add-database-form";
 import { displayLayoutName, getLayoutIcon } from "../renderers/layout-select";
 import { LAYOUT_TYPES } from "../renderers/types";
 import { runServerSidePDFDownload } from "./pdf-export";
@@ -450,7 +451,19 @@ export function useNotebookActions() {
       icon: <DatabaseIcon size={14} strokeWidth={1.5} />,
       label: "Add database connection",
       handle: () => {
-        openModal(<AddDatabaseDialogContent onClose={closeModal} />);
+        openModal(<AddConnectionDialogContent onClose={closeModal} />);
+      },
+    },
+    {
+      icon: <HardDrive size={14} strokeWidth={1.5} />,
+      label: "Add remote storage",
+      handle: () => {
+        openModal(
+          <AddConnectionDialogContent
+            defaultTab="storage"
+            onClose={closeModal}
+          />,
+        );
       },
     },
     {

package/src/components/editor/connections/add-connection-dialog.tsx

@@ -0,0 +1,83 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ExternalLink } from "@/components/ui/links";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { AddDatabaseForm } from "./database/add-database-form";
+import { AddStorageForm } from "./storage/add-storage-form";
+
+type ConnectionTab = "databases" | "storage";
+
+export const AddConnectionDialog: React.FC<{
+  children: React.ReactNode;
+  defaultTab?: ConnectionTab;
+}> = ({ children, defaultTab = "databases" }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild={true}>{children}</DialogTrigger>
+      <AddConnectionDialogContent
+        defaultTab={defaultTab}
+        onClose={() => setOpen(false)}
+      />
+    </Dialog>
+  );
+};
+
+export const AddConnectionDialogContent: React.FC<{
+  defaultTab?: ConnectionTab;
+  onClose: () => void;
+}> = ({ defaultTab = "databases", onClose }) => {
+  const tabHeader = (
+    <TabsList className="w-full mb-4">
+      <TabsTrigger value="databases" className="flex-1">
+        Databases & Catalogs
+      </TabsTrigger>
+      <TabsTrigger value="storage" className="flex-1">
+        Remote Storages
+      </TabsTrigger>
+    </TabsList>
+  );
+
+  return (
+    <DialogContent className="max-h-[75vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>Add Connection</DialogTitle>
+        <DialogDescription>
+          Connect to a{" "}
+          <ExternalLink href="https://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database">
+            database, data catalog
+          </ExternalLink>{" "}
+          or{" "}
+          <ExternalLink href="https://docs.marimo.io/guides/working_with_data/remote_storage/">
+            remote storage
+          </ExternalLink>{" "}
+          to work with data directly from your notebook.
+        </DialogDescription>
+      </DialogHeader>
+      <Tabs defaultValue={defaultTab}>
+        <TabsContent
+          value="databases"
+          className="mt-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        >
+          <AddDatabaseForm onSubmit={onClose} header={tabHeader} />
+        </TabsContent>
+        <TabsContent
+          value="storage"
+          className="mt-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        >
+          <AddStorageForm onSubmit={onClose} header={tabHeader} />
+        </TabsContent>
+      </Tabs>
+    </DialogContent>
+  );
+};

package/src/components/editor/connections/components.tsx

@@ -0,0 +1,177 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { type DefaultValues, type FieldValues, useForm } from "react-hook-form";
+import type { z } from "zod";
+import { type FormRenderer, ZodForm } from "@/components/forms/form";
+import { getDefaults } from "@/components/forms/form-utils";
+import { Button } from "@/components/ui/button";
+import { FormErrorsBanner } from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useCellActions } from "@/core/cells/cells";
+import { useLastFocusedCellId } from "@/core/cells/focus";
+import { ENV_RENDERER, SecretsProvider } from "./form-renderers";
+
+const RENDERERS: FormRenderer[] = [ENV_RENDERER];
+
+/**
+ * Grid layout for provider/database selector buttons.
+ */
+export const SelectorGrid: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => <div className="grid grid-cols-2 md:grid-cols-3 gap-4">{children}</div>;
+
+/**
+ * A colored button tile for selecting a provider/database.
+ */
+export const SelectorButton: React.FC<{
+  name: string;
+  color: string;
+  icon: React.ReactNode;
+  onSelect: () => void;
+}> = ({ name, color, icon, onSelect }) => (
+  <button
+    type="button"
+    className="py-3 flex flex-col items-center justify-center gap-1 transition-all hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
+    style={{ backgroundColor: color }}
+    onClick={onSelect}
+  >
+    {icon}
+    <span className="text-white font-medium text-lg">{name}</span>
+  </button>
+);
+
+/**
+ * Footer with Back/Add buttons and a library picker.
+ */
+export const ConnectionFormFooter = <L extends string>({
+  onBack,
+  isValid,
+  libraries,
+  preferredLibrary,
+  onLibraryChange,
+  displayNames,
+  libraryLabel = "Preferred library",
+}: {
+  onBack: () => void;
+  isValid: boolean;
+  libraries: L[];
+  preferredLibrary: L;
+  onLibraryChange: (library: L) => void;
+  displayNames: Record<L, string>;
+  libraryLabel?: string;
+}) => (
+  <div className="flex gap-2 justify-between">
+    <div className="flex gap-2">
+      <Button type="button" variant="outline" onClick={onBack}>
+        Back
+      </Button>
+      <Button type="submit" disabled={!isValid}>
+        Add
+      </Button>
+    </div>
+    <div>
+      <Select value={preferredLibrary} onValueChange={onLibraryChange}>
+        <div className="flex flex-col gap-1 items-end">
+          <SelectTrigger>
+            <SelectValue placeholder="Select a library" />
+          </SelectTrigger>
+          <span className="text-xs text-muted-foreground">{libraryLabel}</span>
+        </div>
+        <SelectContent>
+          <SelectGroup>
+            {libraries.map((library) => (
+              <SelectItem key={library} value={library}>
+                {displayNames[library] ?? library}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  </div>
+);
+
+/**
+ * Returns a callback that inserts code into a new cell after the last focused cell.
+ */
+export function useInsertCode() {
+  const { createNewCell } = useCellActions();
+  const lastFocusedCellId = useLastFocusedCellId();
+
+  return (code: string) => {
+    createNewCell({
+      code,
+      before: false,
+      cellId: lastFocusedCellId ?? "__end__",
+      skipIfCodeExists: true,
+    });
+  };
+}
+
+/**
+ * Generic connection form: Zod-driven form with secrets support, a library
+ * picker, and Back/Add buttons. Used by both database and storage forms.
+ */
+export const ConnectionForm = <T extends FieldValues, L extends string>({
+  schema,
+  libraries,
+  preferredLibrary: initialPreferred,
+  displayNames,
+  libraryLabel,
+  generateCode,
+  onSubmit,
+  onBack,
+}: {
+  schema: z.ZodType<T, FieldValues>;
+  libraries: L[];
+  preferredLibrary: L;
+  displayNames: Record<L, string>;
+  libraryLabel?: string;
+  generateCode: (values: T, library: L) => string;
+  onSubmit: () => void;
+  onBack: () => void;
+}) => {
+  const defaults = getDefaults(schema);
+  const form = useForm<T>({
+    defaultValues: defaults as DefaultValues<T>,
+    resolver: zodResolver(schema),
+    reValidateMode: "onChange",
+  });
+
+  const [preferredLibrary, setPreferredLibrary] =
+    React.useState<L>(initialPreferred);
+  const insertCode = useInsertCode();
+
+  const handleSubmit = (values: T) => {
+    insertCode(generateCode(values, preferredLibrary));
+    onSubmit();
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+      <SecretsProvider>
+        <ZodForm schema={schema} form={form} renderers={RENDERERS}>
+          <FormErrorsBanner />
+        </ZodForm>
+      </SecretsProvider>
+      <ConnectionFormFooter
+        onBack={onBack}
+        isValid={form.formState.isValid}
+        libraries={libraries}
+        preferredLibrary={preferredLibrary}
+        onLibraryChange={setPreferredLibrary}
+        displayNames={displayNames}
+        libraryLabel={libraryLabel}
+      />
+    </form>
+  );
+};

package/src/components/editor/{database → connections/database}/__tests__/as-code.test.ts

@@ -1,8 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { prefixSecret } from "../../secrets";
 import { type ConnectionLibrary, generateDatabaseCode } from "../as-code";
 import type { DatabaseConnection } from "../schemas";
-import { prefixSecret } from "../secrets";
 
 describe("generateDatabaseCode", () => {
   // Test fixtures

package/src/components/editor/connections/database/add-database-form.tsx

@@ -0,0 +1,303 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useState } from "react";
+import type { FieldValues } from "react-hook-form";
+import type { z } from "zod";
+import { DatabaseLogo, type DBLogoName } from "@/components/databases/icon";
+import { ConnectionForm, SelectorButton, SelectorGrid } from "../components";
+import {
+  ConnectionDisplayNames,
+  type ConnectionLibrary,
+  generateDatabaseCode,
+} from "./as-code";
+import {
+  BigQueryConnectionSchema,
+  ChdbConnectionSchema,
+  ClickhouseConnectionSchema,
+  type DatabaseConnection,
+  DatabricksConnectionSchema,
+  DataFusionConnectionSchema,
+  DuckDBConnectionSchema,
+  IcebergConnectionSchema,
+  MotherDuckConnectionSchema,
+  MySQLConnectionSchema,
+  PostgresConnectionSchema,
+  PySparkConnectionSchema,
+  RedshiftConnectionSchema,
+  SnowflakeConnectionSchema,
+  SQLiteConnectionSchema,
+  SupabaseConnectionSchema,
+  TimeplusConnectionSchema,
+  TrinoConnectionSchema,
+} from "./schemas";
+
+interface ConnectionSchema {
+  name: string;
+  schema: z.ZodType<DatabaseConnection, FieldValues>;
+  color: string;
+  logo: DBLogoName;
+  connectionLibraries: {
+    libraries: ConnectionLibrary[];
+    preferred: ConnectionLibrary;
+  };
+}
+
+const DATABASES = [
+  {
+    name: "PostgreSQL",
+    schema: PostgresConnectionSchema,
+    color: "#336791",
+    logo: "postgres",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "MySQL",
+    schema: MySQLConnectionSchema,
+    color: "#00758F",
+    logo: "mysql",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "SQLite",
+    schema: SQLiteConnectionSchema,
+    color: "#003B57",
+    logo: "sqlite",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "DuckDB",
+    schema: DuckDBConnectionSchema,
+    color: "#FFD700",
+    logo: "duckdb",
+    connectionLibraries: {
+      libraries: ["duckdb"],
+      preferred: "duckdb",
+    },
+  },
+  {
+    name: "MotherDuck",
+    schema: MotherDuckConnectionSchema,
+    color: "#ff9538",
+    logo: "motherduck",
+    connectionLibraries: {
+      libraries: ["duckdb"],
+      preferred: "duckdb",
+    },
+  },
+  {
+    name: "Snowflake",
+    schema: SnowflakeConnectionSchema,
+    color: "#29B5E8",
+    logo: "snowflake",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "ClickHouse",
+    schema: ClickhouseConnectionSchema,
+    color: "#2C2C1D",
+    logo: "clickhouse",
+    connectionLibraries: {
+      libraries: ["clickhouse_connect"],
+      preferred: "clickhouse_connect",
+    },
+  },
+  {
+    name: "Timeplus",
+    schema: TimeplusConnectionSchema,
+    color: "#B83280",
+    logo: "timeplus",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "BigQuery",
+    schema: BigQueryConnectionSchema,
+    color: "#4285F4",
+    logo: "bigquery",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "ClickHouse Embedded",
+    schema: ChdbConnectionSchema,
+    color: "#f2b611",
+    logo: "clickhouse",
+    connectionLibraries: {
+      libraries: ["chdb"],
+      preferred: "chdb",
+    },
+  },
+  {
+    name: "Trino",
+    schema: TrinoConnectionSchema,
+    color: "#d466b6",
+    logo: "trino",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "DataFusion",
+    schema: DataFusionConnectionSchema,
+    color: "#202A37",
+    logo: "datafusion",
+    connectionLibraries: {
+      libraries: ["ibis"],
+      preferred: "ibis",
+    },
+  },
+  {
+    name: "PySpark",
+    schema: PySparkConnectionSchema,
+    color: "#1C5162",
+    logo: "pyspark",
+    connectionLibraries: {
+      libraries: ["ibis"],
+      preferred: "ibis",
+    },
+  },
+  {
+    name: "Redshift",
+    schema: RedshiftConnectionSchema,
+    color: "#522BAE",
+    logo: "redshift",
+    connectionLibraries: {
+      libraries: ["redshift"],
+      preferred: "redshift",
+    },
+  },
+  {
+    name: "Databricks",
+    schema: DatabricksConnectionSchema,
+    color: "#c41e0c",
+    logo: "databricks",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel", "ibis"],
+      preferred: "sqlalchemy",
+    },
+  },
+  {
+    name: "Supabase",
+    schema: SupabaseConnectionSchema,
+    color: "#238F5F",
+    logo: "supabase",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel"],
+      preferred: "sqlalchemy",
+    },
+  },
+] satisfies ConnectionSchema[];
+
+const DATA_CATALOGS = [
+  {
+    name: "Iceberg",
+    schema: IcebergConnectionSchema,
+    color: "#000000",
+    logo: "iceberg",
+    connectionLibraries: {
+      libraries: ["pyiceberg"],
+      preferred: "pyiceberg",
+    },
+  },
+] satisfies ConnectionSchema[];
+
+const ALL_ENTRIES = [...DATABASES, ...DATA_CATALOGS];
+
+const DatabaseSchemaSelector: React.FC<{
+  onSelect: (schema: z.ZodType<DatabaseConnection, FieldValues>) => void;
+}> = ({ onSelect }) => {
+  return (
+    <>
+      <SelectorGrid>
+        {DATABASES.map(({ name, schema, color, logo }) => (
+          <SelectorButton
+            key={name}
+            name={name}
+            color={color}
+            icon={
+              <DatabaseLogo
+                name={logo}
+                className="w-8 h-8 text-white brightness-0 invert dark:invert"
+              />
+            }
+            onSelect={() => onSelect(schema)}
+          />
+        ))}
+      </SelectorGrid>
+      <h4 className="font-semibold text-muted-foreground text-lg flex items-center gap-4 my-2">
+        Data Catalogs
+        <hr className="flex-1" />
+      </h4>
+      <SelectorGrid>
+        {DATA_CATALOGS.map(({ name, schema, color, logo }) => (
+          <SelectorButton
+            key={name}
+            name={name}
+            color={color}
+            icon={
+              <DatabaseLogo
+                name={logo}
+                className="w-8 h-8 text-white brightness-0 invert dark:invert"
+              />
+            }
+            onSelect={() => onSelect(schema)}
+          />
+        ))}
+      </SelectorGrid>
+    </>
+  );
+};
+
+export const AddDatabaseForm: React.FC<{
+  onSubmit: () => void;
+  header?: React.ReactNode;
+}> = ({ onSubmit, header }) => {
+  const [selectedSchema, setSelectedSchema] = useState<z.ZodType<
+    DatabaseConnection,
+    FieldValues
+  > | null>(null);
+
+  if (!selectedSchema) {
+    return (
+      <>
+        {header}
+        <div>
+          <DatabaseSchemaSelector onSelect={setSelectedSchema} />
+        </div>
+      </>
+    );
+  }
+
+  const entry = ALL_ENTRIES.find((e) => e.schema === selectedSchema);
+  const libs = entry?.connectionLibraries;
+
+  return (
+    <ConnectionForm<DatabaseConnection, ConnectionLibrary>
+      schema={selectedSchema}
+      libraries={libs?.libraries ?? []}
+      preferredLibrary={libs?.preferred ?? "sqlalchemy"}
+      displayNames={ConnectionDisplayNames}
+      libraryLabel="Preferred connection library"
+      generateCode={(values, library) => generateDatabaseCode(values, library)}
+      onSubmit={onSubmit}
+      onBack={() => setSelectedSchema(null)}
+    />
+  );
+};

package/src/components/editor/{database → connections/database}/as-code.ts

@@ -2,8 +2,8 @@
 
 import dedent from "string-dedent";
 import { assertNever } from "@/utils/assertNever";
+import { isSecret, unprefixSecret } from "../secrets";
 import { type DatabaseConnection, DatabaseConnectionSchema } from "./schemas";
-import { isSecret, unprefixSecret } from "./secrets";
 
 export type ConnectionLibrary =
   | "sqlmodel"