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

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

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { z } from "zod";
+import { FieldOptions } from "@/components/forms/options";
+
+export const S3StorageSchema = z
+  .object({
+    type: z.literal("s3"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "my-bucket",
+        }),
+      ),
+    region: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Region",
+          placeholder: "us-east-1",
+          optionRegex: ".*region.*",
+        }),
+      ),
+    access_key_id: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Access Key ID",
+          inputType: "password",
+          optionRegex: ".*access_key.*",
+        }),
+      ),
+    secret_access_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Secret Access Key",
+          inputType: "password",
+          optionRegex: ".*secret.*access.*",
+        }),
+      ),
+    endpoint_url: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Endpoint URL",
+          placeholder: "https://s3.amazonaws.com",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const GCSStorageSchema = z
+  .object({
+    type: z.literal("gcs"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "my-bucket",
+        }),
+      ),
+    service_account_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Service Account Key (JSON)",
+          inputType: "textarea",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const AzureStorageSchema = z
+  .object({
+    type: z.literal("azure"),
+    container: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Container",
+          placeholder: "my-container",
+        }),
+      ),
+    account_name: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Account Name",
+          placeholder: "storageaccount",
+          optionRegex: ".*account.*",
+        }),
+      ),
+    account_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Account Key",
+          inputType: "password",
+          optionRegex: ".*azure.*key.*",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const GoogleDriveStorageSchema = z
+  .object({
+    type: z.literal("gdrive"),
+    credentials_json: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Service Account JSON",
+          description: "Leave empty to use browser-based authentication",
+          inputType: "textarea",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
+export const StorageConnectionSchema = z.discriminatedUnion("type", [
+  S3StorageSchema,
+  GCSStorageSchema,
+  AzureStorageSchema,
+  GoogleDriveStorageSchema,
+]);
+
+export type StorageConnection = z.infer<typeof StorageConnectionSchema>;

package/src/components/storage/components.tsx

@@ -19,8 +19,10 @@ import {
   ImageIcon,
 } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
+import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
 import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 
 export function renderFileIcon(name: string): React.ReactNode {
   const ext = name.split(".").pop()?.toLowerCase();
@@ -67,12 +69,14 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
   http: GlobeIcon,
   file: HardDriveIcon,
   "in-memory": DatabaseZapIcon,
+  gdrive: { src: GoogleDriveIcon },
   github: GithubIcon,
 };
 
 export const ProtocolIcon: React.FC<{
   protocol: KnownStorageProtocol | (string & {});
-}> = ({ protocol }) => {
+  className?: string;
+}> = ({ protocol, className }) => {
   const { theme } = useTheme();
   const entry =
     PROTOCOL_ICONS[protocol.toLowerCase() as KnownStorageProtocol] ??
@@ -80,9 +84,11 @@ export const ProtocolIcon: React.FC<{
 
   if ("src" in entry) {
     const src = theme === "dark" && entry.dark ? entry.dark : entry.src;
-    return <img src={src} alt={protocol} className="h-3.5 w-3.5" />;
+    return (
+      <img src={src} alt={protocol} className={cn("h-3.5 w-3.5", className)} />
+    );
   }
 
   const Icon = entry;
-  return <Icon className="h-3.5 w-3.5" />;
+  return <Icon className={cn("h-3.5 w-3.5", className)} />;
 };

package/src/components/storage/storage-inspector.tsx

@@ -10,6 +10,7 @@ import {
   HelpCircleIcon,
   LoaderCircle,
   MoreVerticalIcon,
+  PlusIcon,
   RefreshCwIcon,
   ViewIcon,
   XIcon,
@@ -18,6 +19,7 @@ import React, { useCallback, useState } from "react";
 import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
+import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import {
   DropdownMenu,
@@ -550,6 +552,14 @@ export const StorageInspector: React.FC = () => {
             .
           </span>
         }
+        action={
+          <AddConnectionDialog defaultTab="storage">
+            <Button variant="outline" size="sm">
+              Add remote storage
+              <PlusIcon className="h-4 w-4 ml-2" />
+            </Button>
+          </AddConnectionDialog>
+        }
         icon={<HardDriveIcon className="h-8 w-8" />}
       />
     );
@@ -595,8 +605,17 @@ export const StorageInspector: React.FC = () => {
             content="Filters loaded entries only. Expand directories to include their contents in the search."
             delayDuration={200}
           >
-            <HelpCircleIcon className="h-3.5 w-3.5 mr-2 shrink-0 cursor-help text-muted-foreground hover:text-foreground" />
+            <HelpCircleIcon className="h-3.5 w-3.5 shrink-0 cursor-help text-muted-foreground hover:text-foreground mr-2" />
           </Tooltip>
+          <AddConnectionDialog defaultTab="storage">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="px-2 border-0 border-l border-muted-background rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
+            >
+              <PlusIcon className="h-4 w-4" />
+            </Button>
+          </AddConnectionDialog>
         </div>
         <CommandList className="flex flex-col">
           {namespaces.map((ns) => (

package/src/core/cells/__tests__/session.test.ts

@@ -70,7 +70,7 @@ describe("notebookStateFromSession", () => {
     cells: SessionCell[],
   ): api.Session["NotebookSessionV1"] => ({
     version: "1",
-    metadata: { marimo_version: "1" },
+    metadata: { marimo_version: "1", script_metadata_hash: null },
     cells,
   });
 

package/src/core/codemirror/__tests__/format.test.ts

@@ -4,7 +4,7 @@ import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { atom } from "jotai";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import type { NotebookState } from "@/core/cells/cells";
 import { getNotebook } from "@/core/cells/cells";
@@ -44,6 +44,7 @@ vi.mock("@/core/config/config", () => ({
 }));
 
 const updateCellCode = vi.fn();
+const createdViews: EditorView[] = [];
 
 function createEditor(content: string, cellId: CellId) {
   const state = EditorState.create({
@@ -74,6 +75,7 @@ function createEditor(content: string, cellId: CellId) {
     parent: document.body,
   });
 
+  createdViews.push(view);
   return view;
 }
 
@@ -88,6 +90,12 @@ beforeEach(() => {
   store.set(requestClientAtom, mockRequestClient);
 });
 
+afterEach(() => {
+  for (const view of createdViews) {
+    view.destroy();
+  }
+});
+
 describe("format", () => {
   describe("formatEditorViews", () => {
     it("should format code in editor views", async () => {

package/src/core/storage/types.ts

@@ -54,5 +54,6 @@ export type KnownStorageProtocol =
   | "cloudflare"
   | "http"
   | "file"
+  | "gdrive"
   | "in-memory"
   | "github";

package/src/plugins/core/__test__/sanitize.test.ts

@@ -288,9 +288,54 @@ describe("sanitizeHtml", () => {
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(`"<div>Text</div>"`);
   });
 
-  test("removes use element from SVG", () => {
+  test("preserves use element in SVG", () => {
     const html = '<svg><use xlink:href="#icon"></use></svg>';
-    expect(sanitizeHtml(html)).toMatchInlineSnapshot(`"<svg></svg>"`);
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<svg><use xlink:href="#icon"></use></svg>"`,
+    );
+  });
+
+  test("preserves SVG defs and use pattern", () => {
+    const html = [
+      '<svg width="60" height="60">',
+      '<circle cx="30" cy="30" r="30" fill="orange"></circle>',
+      '<defs><circle id="myCircle" cx="0" cy="0" r="10" fill="green"></circle></defs>',
+      '<use href="#myCircle" x="20" y="20"></use>',
+      "</svg>",
+    ].join("");
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<svg width="60" height="60"><circle cx="30" cy="30" r="30" fill="orange"></circle><defs><circle id="myCircle" cx="0" cy="0" r="10" fill="green"></circle></defs><use href="#myCircle" x="20" y="20"></use></svg>"`,
+    );
+  });
+
+  test("strips javascript: href from SVG use element", () => {
+    const html = '<svg><use href="javascript:alert(1)"></use></svg>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<svg><use></use></svg>"`,
+    );
+  });
+
+  test("strips javascript: xlink:href from SVG use element", () => {
+    const html = '<svg><use xlink:href="javascript:alert(1)"></use></svg>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<svg><use></use></svg>"`,
+    );
+  });
+
+  test("preserves external href on SVG use element", () => {
+    const html =
+      '<svg><use href="https://example.com/sprite.svg#icon"></use></svg>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<svg><use href="https://example.com/sprite.svg#icon"></use></svg>"`,
+    );
+  });
+
+  test("preserves external xlink:href on SVG use element", () => {
+    const html =
+      '<svg><use xlink:href="https://example.com/sprite.svg#icon"></use></svg>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<svg><use xlink:href="https://example.com/sprite.svg#icon"></use></svg>"`,
+    );
   });
 
   test("removes javascript in SVG href", () => {

package/src/plugins/core/sanitize.ts

@@ -74,6 +74,10 @@ export function sanitizeHtml(html: string) {
   const sanitizationOptions: Config = {
     // Default to permit HTML, SVG and MathML, this limits to HTML only
     USE_PROFILES: { html: true, svg: true, mathMl: true },
+    // Allow SVG <use> elements and their href attributes, which are needed
+    // for SVGs that reference <defs> (e.g., Matplotlib SVG output).
+    ADD_TAGS: ["use"],
+    ADD_ATTR: ["href", "xlink:href"],
     // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
     FORCE_BODY: true,
     CUSTOM_ELEMENT_HANDLING: {