@marimo-team/islands 0.21.2-dev43 → 0.21.2-dev47

package/package.json

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

package/src/components/storage/storage-file-viewer.tsx

@@ -4,27 +4,32 @@ import { FileIcon, LoaderCircle, RefreshCwIcon } from "lucide-react";
 import type React from "react";
 import { useCallback } from "react";
 import { useLocale } from "react-aria";
+import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { FilePreviewHeader } from "@/components/editor/file-tree/file-header";
 import { renderFileIcon } from "@/components/editor/file-tree/file-icons";
 import {
   FileContentRenderer,
   isMediaMime,
 } from "@/components/editor/file-tree/renderers";
+import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { DownloadStorage } from "@/core/storage/request-registry";
-import type { StorageEntry } from "@/core/storage/types";
+import type { StorageEntry, StorageNamespace } from "@/core/storage/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { downloadByURL } from "@/utils/download";
 import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
+import { STORAGE_SNIPPETS } from "./storage-snippets";
 
 const MAX_MEDIA_PREVIEW_SIZE = 100 * 1024 * 1024; // 100 MB
 
 interface Props {
   entry: StorageEntry;
   namespace: string;
+  protocol: string;
+  backendType: StorageNamespace["backendType"];
   onBack: () => void;
 }
 
@@ -41,9 +46,12 @@ type PreviewData =
 export const StorageFileViewer: React.FC<Props> = ({
   entry,
   namespace,
+  protocol,
+  backendType,
   onBack,
 }) => {
   const { locale } = useLocale();
+  const addCodeToNewCell = useAddCodeToNewCell();
   const name = displayName(entry.path);
   const mime = entry.mimeType || "text/plain";
   const isMedia = isMediaMime(mime);
@@ -111,12 +119,38 @@ export const StorageFileViewer: React.FC<Props> = ({
     }
   }, [namespace, entry.path, name]);
 
+  const snippetActions = STORAGE_SNIPPETS.map((snippet) => {
+    const code = snippet.getCode({
+      variableName: namespace,
+      protocol,
+      entry,
+      backendType,
+    });
+    if (code === null) {
+      return null;
+    }
+    const Icon = snippet.icon;
+    return (
+      <Tooltip key={snippet.id} content={snippet.label}>
+        <Button
+          variant="text"
+          size="xs"
+          onClick={() => addCodeToNewCell(code)}
+          aria-label={snippet.label}
+        >
+          <Icon className="h-3.5 w-3.5" />
+        </Button>
+      </Tooltip>
+    );
+  });
+
   const header = (
     <FilePreviewHeader
       filename={name}
       filenameIcon={renderFileIcon(name)}
       onBack={onBack}
       onDownload={handleDownload}
+      actions={snippetActions}
     />
   );
 

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

@@ -64,6 +64,8 @@ import { STORAGE_SNIPPETS } from "./storage-snippets";
 interface OpenFileInfo {
   entry: StorageEntry;
   namespace: string;
+  protocol: string;
+  backendType: StorageNamespace["backendType"];
 }
 
 // Pixels per depth level. Applied as paddingLeft on each full-width item
@@ -315,7 +317,7 @@ const StorageEntryRow: React.FC<{
           if (isDir) {
             setIsExpanded(!effectiveExpanded);
           } else {
-            onOpenFile({ entry, namespace });
+            onOpenFile({ entry, namespace, protocol, backendType });
           }
         }}
       >
@@ -361,7 +363,9 @@ const StorageEntryRow: React.FC<{
             >
               {!isDir && (
                 <DropdownMenuItem
-                  onSelect={() => onOpenFile({ entry, namespace })}
+                  onSelect={() =>
+                    onOpenFile({ entry, namespace, protocol, backendType })
+                  }
                 >
                   <ViewIcon className={MENU_ITEM_ICON_CLASS} />
                   View
@@ -585,6 +589,8 @@ export const StorageInspector: React.FC = () => {
         <StorageFileViewer
           entry={openFile.entry}
           namespace={openFile.namespace}
+          protocol={openFile.protocol}
+          backendType={openFile.backendType}
           onBack={() => setOpenFile(null)}
         />
       )}

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { LucideIcon } from "lucide-react";
-import { BookOpenIcon, LinkIcon } from "lucide-react";
+import { BookPlusIcon, FileSymlink } from "lucide-react";
 import type { StorageEntry, StorageNamespace } from "@/core/storage/types";
 
 type BackendType = StorageNamespace["backendType"];
@@ -31,7 +31,7 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
   {
     id: "read-file",
     label: "Insert read snippet",
-    icon: BookOpenIcon,
+    icon: BookPlusIcon,
     getCode: (ctx) => {
       if (ctx.entry.kind === "directory") {
         return null;
@@ -46,7 +46,7 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
   {
     id: "download-file",
     label: "Insert download snippet",
-    icon: LinkIcon,
+    icon: FileSymlink,
     getCode: (ctx) => {
       if (ctx.entry.kind === "directory") {
         return null;

package/src/css/md-tooltip.css

@@ -3,50 +3,15 @@
 /*
   This allows you to create a basic tooltip using the data-tooltip attribute
   e.g. <span data-tooltip="Hello, World!">Hover me</span>
+
+  The tooltip content is rendered via the React Tooltip component (Radix UI portal),
+  which prevents clipping inside containers with overflow:hidden.
+  See: RenderHTML.tsx -> wrapTooltipTargets
 */
 
 .markdown {
   [data-tooltip] {
-    position: relative;
     cursor: pointer;
     text-decoration: underline dotted;
   }
-
-  [data-tooltip]::before,
-  [data-tooltip]::after {
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.2s ease;
-    position: absolute;
-    z-index: 1000;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  [data-tooltip]::before {
-    content: attr(data-tooltip);
-    bottom: calc(100% + 10px);
-    padding: 5px 10px;
-    width: max-content;
-    max-width: 300px;
-    border-radius: 6px;
-    background-color: ;
-    text-align: center;
-    line-height: 1.4;
-    white-space: pre-wrap;
-
-    @apply bg-background text-foreground shadow-md border text-base;
-  }
-
-  [data-tooltip]:hover::before,
-  [data-tooltip]:hover::after {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  [data-tooltip]:hover::before {
-    /* stylelint-disable-next-line unit-allowed-list */
-    transform: translateX(-50%) translateY(10px);
-  }
 }

package/src/plugins/core/RenderHTML.tsx

@@ -14,6 +14,7 @@ import React, {
 } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { QueryParamPreservingLink } from "@/components/ui/query-param-preserving-link";
+import { Tooltip } from "@/components/ui/tooltip";
 import { DocHoverTarget } from "@/core/documentation/DocHoverTarget";
 import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
 
@@ -160,6 +161,21 @@ const wrapDocHoverTargets: TransformFn = (
   }
 };
 
+// Wrap elements with data-tooltip attribute in a Tooltip component.
+// This renders the tooltip in a portal (top layer), fixing clipping inside
+// containers with overflow:hidden (e.g. grid cells).
+const wrapTooltipTargets: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+): JSX.Element | undefined => {
+  if (domNode instanceof Element && domNode.attribs?.["data-tooltip"]) {
+    const tooltipContent = domNode.attribs["data-tooltip"];
+    return (
+      <Tooltip content={tooltipContent}>{reactNode as JSX.Element}</Tooltip>
+    );
+  }
+};
+
 const CopyableCode = ({ children }: { children: ReactNode }) => {
   const ref = useRef<HTMLDivElement>(null);
   return (
@@ -239,6 +255,7 @@ function parseHtml({
     addCopyButtonToCodehilite,
     preserveQueryParamsInAnchorLinks,
     wrapDocHoverTargets,
+    wrapTooltipTargets,
     removeWrappingBodyTags,
     removeWrappingHtmlTags,
   ];

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

@@ -197,6 +197,51 @@ describe("parseHtml", () => {
   });
 });
 
+describe("wrapTooltipTargets", () => {
+  test("data-tooltip wraps element in Tooltip component", () => {
+    const html = '<span data-tooltip="Hello world">Hover me</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content="Hello world"
+      >
+        <span
+          data-tooltip="Hello world"
+        >
+          Hover me
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("element without data-tooltip is not wrapped", () => {
+    const html = "<span>No tooltip</span>";
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <span>
+        No tooltip
+      </span>
+    `);
+  });
+
+  test("data-tooltip on nested element wraps only that element", () => {
+    const html = '<p>Outer <span data-tooltip="tip">inner</span> text</p>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <p>
+        Outer 
+        <Tooltip
+          content="tip"
+        >
+          <span
+            data-tooltip="tip"
+          >
+            inner
+          </span>
+        </Tooltip>
+         text
+      </p>
+    `);
+  });
+});
+
 describe("parseHtml with < nad >", () => {
   const html =
     'thread <unnamed> panicked at "assertion failed: `(left == right)`"';