@marimo-team/islands 0.20.5-dev44 → 0.20.5-dev48

package/dist/main.js

@@ -70710,7 +70710,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.5-dev44"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.5-dev48"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$89 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {

package/package.json

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

package/src/components/storage/__tests__/storage-snippets.test.ts

@@ -0,0 +1,253 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import {
+  STORAGE_SNIPPETS,
+  type StorageSnippetContext,
+} from "../storage-snippets";
+
+const readSnippet = STORAGE_SNIPPETS.find((s) => s.id === "read-file")!;
+const downloadSnippet = STORAGE_SNIPPETS.find((s) => s.id === "download-file")!;
+
+function makeCtx(
+  overrides: Partial<StorageSnippetContext> = {},
+): StorageSnippetContext {
+  return {
+    variableName: "store",
+    protocol: "s3",
+    entry: {
+      path: "data/file.csv",
+      kind: "object",
+      size: 1024,
+      lastModified: null,
+    },
+    backendType: "obstore",
+    ...overrides,
+  };
+}
+
+describe("read-file snippet", () => {
+  it("obstore backend", () => {
+    expect(readSnippet.getCode(makeCtx())).toMatchInlineSnapshot(`
+      "_data = store.get("data/file.csv").bytes()
+      _data"
+    `);
+  });
+
+  it("fsspec backend", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({ backendType: "fsspec", variableName: "fs" }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = fs.cat_file("data/file.csv")
+      _data"
+    `);
+  });
+
+  it("returns null for directories", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/",
+            kind: "directory",
+            size: 0,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toBeNull();
+  });
+
+  it("escapes double quotes in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: 'data/"file".csv',
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data/\\"file\\".csv").bytes()
+      _data"
+    `);
+  });
+
+  it("escapes backslashes in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data\\file.csv",
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data\\\\file.csv").bytes()
+      _data"
+    `);
+  });
+
+  it("escapes newlines and tabs in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/file\nname\there.csv",
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data/file\\nname\\there.csv").bytes()
+      _data"
+    `);
+  });
+
+  it("escapes control characters in paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/\u0000\u001F.csv",
+            kind: "object",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "_data = store.get("data/\\u0000\\u001f.csv").bytes()
+      _data"
+    `);
+  });
+});
+
+describe("download-file snippet", () => {
+  it("obstore s3 backend", () => {
+    expect(downloadSnippet.getCode(makeCtx())).toMatchInlineSnapshot(`
+      "from datetime import timedelta
+      from obstore import sign
+
+      signed_url = sign(
+          store, "GET", "data/file.csv",
+          expires_in=timedelta(hours=1),
+      )
+      signed_url"
+    `);
+  });
+
+  it("obstore gcs backend", () => {
+    expect(
+      downloadSnippet.getCode(makeCtx({ protocol: "gcs" })),
+    ).toMatchInlineSnapshot(`
+      "from datetime import timedelta
+      from obstore import sign
+
+      signed_url = sign(
+          store, "GET", "data/file.csv",
+          expires_in=timedelta(hours=1),
+      )
+      signed_url"
+    `);
+  });
+
+  it("obstore cloudflare backend", () => {
+    expect(
+      downloadSnippet.getCode(makeCtx({ protocol: "cloudflare" })),
+    ).toMatchInlineSnapshot(`
+      "from datetime import timedelta
+      from obstore import sign
+
+      signed_url = sign(
+          store, "GET", "data/file.csv",
+          expires_in=timedelta(hours=1),
+      )
+      signed_url"
+    `);
+  });
+
+  it("returns null for http obstore (not signable)", () => {
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "http" }))).toBeNull();
+  });
+
+  it("returns null for file obstore (not signable)", () => {
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "file" }))).toBeNull();
+  });
+
+  it("returns null for in-memory obstore (not signable)", () => {
+    expect(
+      downloadSnippet.getCode(makeCtx({ protocol: "in-memory" })),
+    ).toBeNull();
+  });
+
+  it("fsspec backend", () => {
+    expect(
+      downloadSnippet.getCode(
+        makeCtx({ backendType: "fsspec", variableName: "fs" }),
+      ),
+    ).toMatchInlineSnapshot(`"fs.get("data/file.csv", "file.csv")"`);
+  });
+
+  it("fsspec backend with nested path", () => {
+    expect(
+      downloadSnippet.getCode(
+        makeCtx({
+          backendType: "fsspec",
+          variableName: "fs",
+          entry: {
+            path: "nested/dir/report.parquet",
+            kind: "file",
+            size: 500,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(
+      `"fs.get("nested/dir/report.parquet", "report.parquet")"`,
+    );
+  });
+
+  it("returns null for directories", () => {
+    expect(
+      downloadSnippet.getCode(
+        makeCtx({
+          entry: {
+            path: "data/",
+            kind: "directory",
+            size: 0,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toBeNull();
+  });
+});
+
+describe("all snippets return null for directories", () => {
+  for (const snippet of STORAGE_SNIPPETS) {
+    it(`${snippet.id} returns null for directory entries`, () => {
+      expect(
+        snippet.getCode(
+          makeCtx({
+            entry: {
+              path: "some-dir/",
+              kind: "directory",
+              size: 0,
+              lastModified: null,
+            },
+          }),
+        ),
+      ).toBeNull();
+    });
+  }
+});

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

@@ -15,6 +15,7 @@ import {
 import React, { useCallback, useState } from "react";
 import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
+import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
 import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
 import {
@@ -32,6 +33,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -47,7 +49,7 @@ import type {
   StorageNamespace,
   StoragePathKey,
 } from "@/core/storage/types";
-import { storagePathKey, storageUrl } from "@/core/storage/types";
+import { storagePathKey } from "@/core/storage/types";
 import type { VariableName } from "@/core/variables/types";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -58,6 +60,7 @@ import { ErrorState } from "../datasources/components";
 import { Button } from "../ui/button";
 import { ProtocolIcon } from "./components";
 import { StorageFileViewer } from "./storage-file-viewer";
+import { STORAGE_SNIPPETS } from "./storage-snippets";
 
 interface OpenFileInfo {
   entry: StorageEntry;
@@ -145,6 +148,7 @@ const StorageEntryChildren: React.FC<{
   namespace: string;
   protocol: string;
   rootPath: string;
+  backendType: StorageNamespace["backendType"];
   prefix: string;
   depth: number;
   locale: string;
@@ -154,6 +158,7 @@ const StorageEntryChildren: React.FC<{
   namespace,
   protocol,
   rootPath,
+  backendType,
   prefix,
   depth,
   locale,
@@ -214,6 +219,7 @@ const StorageEntryChildren: React.FC<{
           namespace={namespace}
           protocol={protocol}
           rootPath={rootPath}
+          backendType={backendType}
           depth={depth}
           locale={locale}
           searchValue={searchValue}
@@ -229,6 +235,7 @@ const StorageEntryRow: React.FC<{
   namespace: string;
   protocol: string;
   rootPath: string;
+  backendType: StorageNamespace["backendType"];
   depth: number;
   locale: string;
   searchValue: string;
@@ -238,6 +245,7 @@ const StorageEntryRow: React.FC<{
   namespace,
   protocol,
   rootPath,
+  backendType,
   depth,
   locale,
   searchValue,
@@ -245,6 +253,7 @@ const StorageEntryRow: React.FC<{
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const { entriesByPath } = useStorage();
+  const addCodeToNewCell = useAddCodeToNewCell();
   const isDir = entry.kind === "directory";
   const name = displayName(entry.path);
   const hasSearch = !!searchValue.trim();
@@ -361,13 +370,12 @@ const StorageEntryRow: React.FC<{
               )}
               <DropdownMenuItem
                 onSelect={async () => {
-                  const url = storageUrl(protocol, rootPath, entry.path);
-                  await copyToClipboard(url.toString());
+                  await copyToClipboard(entry.path);
                   toast({ title: "Copied to clipboard" });
                 }}
               >
                 <CopyIcon className={MENU_ITEM_ICON_CLASS} />
-                Copy URL
+                Copy path
               </DropdownMenuItem>
               {!isDir && (
                 <DropdownMenuItem onSelect={() => handleDownload()}>
@@ -375,6 +383,28 @@ const StorageEntryRow: React.FC<{
                   Download
                 </DropdownMenuItem>
               )}
+              <DropdownMenuSeparator />
+              {STORAGE_SNIPPETS.map((snippet) => {
+                const code = snippet.getCode({
+                  variableName: namespace,
+                  protocol,
+                  entry,
+                  backendType,
+                });
+                if (code === null) {
+                  return null;
+                }
+                const Icon = snippet.icon;
+                return (
+                  <DropdownMenuItem
+                    key={snippet.id}
+                    onSelect={() => addCodeToNewCell(code)}
+                  >
+                    <Icon className={MENU_ITEM_ICON_CLASS} />
+                    {snippet.label}
+                  </DropdownMenuItem>
+                );
+              })}
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
@@ -384,6 +414,7 @@ const StorageEntryRow: React.FC<{
           namespace={namespace}
           protocol={protocol}
           rootPath={rootPath}
+          backendType={backendType}
           prefix={entry.path}
           depth={depth + 1}
           locale={locale}
@@ -498,6 +529,7 @@ const StorageNamespaceSection: React.FC<{
               namespace={namespaceName}
               protocol={namespace.protocol}
               rootPath={namespace.rootPath}
+              backendType={namespace.backendType}
               depth={1}
               locale={locale}
               searchValue={searchValue}

package/src/components/storage/storage-snippets.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { LucideIcon } from "lucide-react";
+import { BookOpenIcon, LinkIcon } from "lucide-react";
+import type { StorageEntry, StorageNamespace } from "@/core/storage/types";
+
+type BackendType = StorageNamespace["backendType"];
+
+export interface StorageSnippetContext {
+  variableName: string;
+  protocol: string;
+  entry: StorageEntry;
+  backendType: BackendType;
+}
+
+export interface StorageSnippet {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  /** Return the code string, or null to hide the snippet for this context. */
+  getCode: (ctx: StorageSnippetContext) => string | null;
+}
+
+const NOT_SIGNABLE_PROTOCOLS = new Set(["http", "file", "in-memory"]);
+
+function escapeForPythonString(value: string): string {
+  return JSON.stringify(value).slice(1, -1);
+}
+
+export const STORAGE_SNIPPETS: StorageSnippet[] = [
+  {
+    id: "read-file",
+    label: "Insert read snippet",
+    icon: BookOpenIcon,
+    getCode: (ctx) => {
+      if (ctx.entry.kind === "directory") {
+        return null;
+      }
+      const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "obstore") {
+        return `_data = ${ctx.variableName}.get("${path}").bytes()\n_data`;
+      }
+      return `_data = ${ctx.variableName}.cat_file("${path}")\n_data`;
+    },
+  },
+  {
+    id: "download-file",
+    label: "Insert download snippet",
+    icon: LinkIcon,
+    getCode: (ctx) => {
+      if (ctx.entry.kind === "directory") {
+        return null;
+      }
+      const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "obstore") {
+        if (NOT_SIGNABLE_PROTOCOLS.has(ctx.protocol)) {
+          return null;
+        }
+        return `from datetime import timedelta\nfrom obstore import sign\n\nsigned_url = sign(\n    ${ctx.variableName}, "GET", "${path}",\n    expires_in=timedelta(hours=1),\n)\nsigned_url`;
+      }
+      const filename = escapeForPythonString(
+        ctx.entry.path.split("/").pop() || "download",
+      );
+      return `${ctx.variableName}.get("${path}", "${filename}")`;
+    },
+  },
+];

package/src/core/storage/__tests__/state.test.ts

@@ -10,6 +10,7 @@ function makeNamespace(
   overrides: Partial<StorageNamespace> & { name: string },
 ): StorageNamespace {
   return {
+    backendType: overrides.backendType ?? "obstore",
     displayName: overrides.displayName ?? overrides.name,
     name: overrides.name,
     protocol: overrides.protocol ?? "s3",