@marimo-team/islands 0.25.1-dev4 → 0.25.1-dev41

package/src/components/static-html/share-modal.tsx

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { CopyIcon } from "lucide-react";
-import React, { useMemo, useState } from "react";
+import { ExternalLinkIcon } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   DialogContent,
@@ -10,175 +11,144 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { toast } from "@/components/ui/use-toast";
 import { Constants } from "@/core/constants";
 import { getExportLayout } from "@/core/export/layout";
 import { useRequestClient } from "@/core/network/requests";
 import { VirtualFileTracker } from "@/core/static/virtual-file-tracker";
-import { copyToClipboard } from "@/utils/copy";
-import { Events } from "@/utils/events";
-import { Input } from "../ui/input";
-import { Tooltip } from "../ui/tooltip";
+import { Spinner } from "../icons/spinner";
+import { stageForPublish } from "./stage-for-publish";
+
+type PublishState =
+  | { kind: "idle" }
+  | { kind: "publishing" }
+  | { kind: "staged"; claimUrl: string }
+  | { kind: "failed"; message: string };
 
-const BASE_URL = "https://static.marimo.app";
 export const ShareStaticNotebookModal: React.FC<{
   onClose: () => void;
 }> = ({ onClose }) => {
-  const [slug, setSlug] = useState("");
+  const [state, setState] = useState<PublishState>({ kind: "idle" });
   const { exportAsHTML } = useRequestClient();
 
-  // Keep one random suffix for the lifetime of the modal.
-  // oxlint-disable-next-line react/purity
-  const randomHash = useMemo(() => Math.random().toString(36).slice(2, 6), []);
-
-  // Globally unique path
-  const path = `${slug}-${randomHash}`;
-  const url = `${BASE_URL}/static/${path}`;
-
-  return (
-    <DialogContent className="w-fit">
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault();
-
-          onClose();
-          const { contents: html } = await exportAsHTML({
-            download: false,
-            includeCode: true,
-            files: VirtualFileTracker.INSTANCE.filenames(),
-            layout: await getExportLayout(),
-          });
+  const handlePublish = async () => {
+    setState({ kind: "publishing" });
+    try {
+      const { contents: html, filename } = await exportAsHTML({
+        download: false,
+        includeCode: true,
+        files: VirtualFileTracker.INSTANCE.filenames(),
+        layout: await getExportLayout(),
+        // Published notebooks are served from a remote origin, so assets must
+        // come from the CDN — never the local server (which is the dev-mode
+        // default). The server substitutes {version}.
+        assetUrl:
+          "https://cdn.jsdelivr.net/npm/@marimo-team/frontend@{version}/dist",
+      });
 
-          const prevToast = toast({
-            title: "Uploading static notebook...",
-            description: "Please wait.",
-          });
+      const claimUrl = await stageForPublish(filename, html);
 
-          await fetch(`${BASE_URL}/api/static`, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              html: html,
-              path: path,
-            }),
-          }).catch(() => {
-            prevToast.dismiss();
-            toast({
-              title: "Error uploading static page",
-              description: (
-                <div>
-                  Please try again later. If the problem persists, please file a
-                  bug report on{" "}
-                  <a
-                    href={Constants.issuesPage}
-                    target="_blank"
-                    className="underline"
-                  >
-                    GitHub
-                  </a>
-                  .
-                </div>
-              ),
-            });
-          });
+      // Best effort: after the async work above, browsers may treat this as a
+      // popup and block it. The dialog keeps the link either way.
+      window.open(claimUrl, "_blank", "noopener,noreferrer");
+      setState({ kind: "staged", claimUrl });
+    } catch (error) {
+      setState({
+        kind: "failed",
+        message:
+          error instanceof Error ? error.message : "Something went wrong",
+      });
+    }
+  };
 
-          prevToast.dismiss();
-          toast({
-            title: "Static page uploaded!",
-            description: (
-              <div>
-                The URL has been copied to your clipboard.
-                <br />
-                You can share it with anyone.
-              </div>
-            ),
-          });
-        }}
-      >
+  if (state.kind === "staged") {
+    return (
+      <DialogContent className="sm:max-w-[480px]">
         <DialogHeader>
-          <DialogTitle>Share static notebook</DialogTitle>
+          <DialogTitle>Finish publishing</DialogTitle>
           <DialogDescription>
-            You can publish a static, non-interactive version of this notebook
-            to the public web. We will create a link for you that lives on{" "}
-            <a href={BASE_URL} target="_blank">
-              {BASE_URL}
-            </a>
-            .
+            If the confirmation page didn't open in a new tab, open it below.
           </DialogDescription>
         </DialogHeader>
-        <div className="flex flex-col gap-6 py-4">
-          <Input
-            data-testid="slug-input"
-            id="slug"
-            autoFocus={true}
-            value={slug}
-            placeholder="Notebook slug"
-            onChange={(e) => {
-              const newSlug = e.target.value
-                .toLowerCase()
-                .replaceAll(/\s/g, "-")
-                .replaceAll(/[^\da-z-]/g, "");
-              setSlug(newSlug);
-            }}
-            required={true}
-            autoComplete="off"
-          />
-
-          <div className="font-semibold text-sm text-muted-foreground gap-2 flex flex-col">
-            Anyone will be able to access your notebook at this URL:
-            <div className="flex items-center gap-2">
-              <CopyButton text={url} />
-              <span className="text-primary">{url}</span>
-            </div>
-          </div>
-        </div>
         <DialogFooter>
           <Button
-            data-testid="cancel-share-static-notebook-button"
+            data-testid="done-share-static-notebook-button"
             variant="secondary"
             onClick={onClose}
           >
-            Cancel
+            Done
           </Button>
-          <Button
-            data-testid="share-static-notebook-button"
-            aria-label="Save"
-            variant="default"
-            type="submit"
-            onClick={async () => {
-              await copyToClipboard(url);
-            }}
-          >
-            Create
+          <Button asChild={true} variant="default">
+            <a
+              data-testid="open-claim-page-link"
+              href={state.claimUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <ExternalLinkIcon size={14} strokeWidth={1.5} className="mr-2" />
+              Open confirmation page
+            </a>
           </Button>
         </DialogFooter>
-      </form>
-    </DialogContent>
-  );
-};
-
-const CopyButton = (props: { text: string }) => {
-  const [copied, setCopied] = React.useState(false);
+      </DialogContent>
+    );
+  }
 
-  const copy = Events.stopPropagation(async (e) => {
-    e.preventDefault();
-    await copyToClipboard(props.text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  });
+  const isPublishing = state.kind === "publishing";
 
   return (
-    <Tooltip content="Copied!" open={copied}>
-      <Button
-        data-testid="copy-static-notebook-url-button"
-        onClick={copy}
-        size="xs"
-        variant="secondary"
-      >
-        <CopyIcon size={14} strokeWidth={1.5} />
-      </Button>
-    </Tooltip>
+    <DialogContent className="sm:max-w-[480px]">
+      <DialogHeader>
+        <DialogTitle>Publish HTML to web</DialogTitle>
+        <DialogDescription>
+          Publish a static snapshot of this notebook to{" "}
+          <a
+            href={Constants.molab}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            molab
+          </a>
+          . Snapshots can be viewed by anyone on the internet.
+        </DialogDescription>
+      </DialogHeader>
+      {state.kind === "failed" && (
+        <p
+          role="alert"
+          className="text-sm text-destructive"
+          data-testid="share-static-notebook-error"
+        >
+          Publish failed: {state.message}
+        </p>
+      )}
+      <DialogFooter>
+        <Button
+          data-testid="cancel-share-static-notebook-button"
+          variant="secondary"
+          onClick={onClose}
+          disabled={isPublishing}
+        >
+          Cancel
+        </Button>
+        <Button
+          data-testid="share-static-notebook-button"
+          variant="default"
+          disabled={isPublishing}
+          onClick={handlePublish}
+        >
+          {isPublishing ? (
+            <>
+              <Spinner className="mr-2" size="small" />
+              Snapshotting notebook ...
+            </>
+          ) : (
+            <>
+              <ExternalLinkIcon size={14} strokeWidth={1.5} className="mr-2" />
+              {state.kind === "failed" ? "Try again" : "Publish"}
+            </>
+          )}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
   );
 };

package/src/components/static-html/stage-for-publish.ts

@@ -0,0 +1,56 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { Constants } from "@/core/constants";
+
+interface PendingUploadResponse {
+  pendingId: string;
+  presignedUrl: string;
+  claimUrl: string;
+  expiresAt: string;
+}
+
+// Keep in sync with molab.
+export const MAX_PUBLISH_BYTES = 100 * 1024 * 1024;
+
+/**
+ * Stage an HTML export for publishing on molab: reserve a pending upload,
+ * PUT the bytes to the presigned URL, and return the claim URL where the
+ * user finishes publishing after signing in.
+ */
+export async function stageForPublish(
+  fileName: string,
+  html: string,
+): Promise<string> {
+  const blob = new Blob([html], { type: "text/html" });
+  if (blob.size > MAX_PUBLISH_BYTES) {
+    throw new Error("File is too large. Maximum size is 100 MB.");
+  }
+
+  const staged = await fetch(`${Constants.molab}/api/artifacts/pending`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ fileName, fileSize: blob.size }),
+  });
+  if (!staged.ok) {
+    const body = (await staged.json().catch(() => null)) as {
+      error?: string;
+    } | null;
+    throw new Error(
+      body?.error ??
+        (staged.status === 429
+          ? "Too many uploads, try again later"
+          : "Failed to prepare the upload"),
+    );
+  }
+  const { presignedUrl, claimUrl } =
+    (await staged.json()) as PendingUploadResponse;
+
+  // The presigned PUT is capped to the declared size; the browser sends the
+  // matching Content-Length automatically from the blob.
+  const put = await fetch(presignedUrl, { method: "PUT", body: blob });
+  if (!put.ok) {
+    throw new Error("Failed to upload the notebook export");
+  }
+
+  return claimUrl;
+}

package/src/components/static-html/static-banner.tsx

@@ -1,6 +1,4 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* oxlint-disable react/jsx-no-comment-textnodes */
-/* oxlint-disable react/jsx-no-target-blank */
 
 import { useAtomValue } from "jotai";
 import { CopyIcon, DownloadIcon } from "lucide-react";
@@ -49,6 +47,7 @@ export const StaticBanner: React.FC = () => {
         <a
           href={Constants.githubPage}
           target="_blank"
+          rel="noreferrer"
           className="text-(--sky-11) font-medium underline"
         >
           marimo
@@ -93,6 +92,7 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
                 <a
                   href={Constants.githubPage}
                   target="_blank"
+                  rel="noreferrer"
                   className="text-(--sky-11) hover:underline font-medium"
                 >
                   marimo

package/src/components/ui/links.tsx

@@ -21,7 +21,12 @@ export const ExternalLink = ({
   children: React.ReactNode;
 }) => {
   return (
-    <a href={href} target="_blank" className="text-link hover:underline">
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="text-link hover:underline"
+    >
       {children}
     </a>
   );

package/src/components/ui/typography.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/utils/cn";
 const H1 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h1">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h1
       className={cn(
@@ -14,7 +14,9 @@ const H1 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h1>
   );
 });
 H1.displayName = "H1";
@@ -22,7 +24,7 @@ H1.displayName = "H1";
 const H2 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h2">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h2
       className={cn(
@@ -31,7 +33,9 @@ const H2 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h2>
   );
 });
 H2.displayName = "H2";
@@ -39,7 +43,7 @@ H2.displayName = "H2";
 const H3 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h3">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h3
       className={cn(
@@ -48,7 +52,9 @@ const H3 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h3>
   );
 });
 H3.displayName = "H3";
@@ -56,7 +62,7 @@ H3.displayName = "H3";
 const H4 = React.forwardRef<
   HTMLHeadingElement,
   React.ComponentPropsWithoutRef<"h4">
->(({ className, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   return (
     <h4
       className={cn(
@@ -65,7 +71,9 @@ const H4 = React.forwardRef<
       )}
       ref={ref}
       {...props}
-    />
+    >
+      {children}
+    </h4>
   );
 });
 H4.displayName = "H4";

package/src/core/ai/context/__tests__/registry.test.ts

@@ -44,9 +44,9 @@ const mockAttachment2: FileUIPart = {
 
 // Concrete implementation of AIContextProvider for testing
 class MockContextProvider extends AIContextProvider<MockContextItem> {
-  readonly title = "Mock Items";
-  readonly mentionPrefix = "@";
-  readonly contextType = "mock";
+  public readonly title = "Mock Items";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "mock";
 
   private items: MockContextItem[] = [
     {
@@ -72,57 +72,60 @@ class MockContextProvider extends AIContextProvider<MockContextItem> {
     },
   ];
 
-  getItems(): MockContextItem[] {
+  public getItems(): MockContextItem[] {
     return this.items;
   }
 
-  formatContext(item: MockContextItem): string {
+  public formatContext(item: MockContextItem): string {
     return `Mock: ${item.name} (${item.data.value})`;
   }
 
-  formatCompletion(item: MockContextItem): Completion {
+  public formatCompletion(item: MockContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 
   // Method to add items for testing
-  addItem(item: MockContextItem): void {
+  public addItem(item: MockContextItem): void {
     this.items.push(item);
   }
 
   // Method to clear items for testing
-  clearItems(): void {
+  public clearItems(): void {
     this.items = [];
   }
 }
 
 // Test provider that supports attachments
 class AttachmentContextProvider extends AIContextProvider<MockContextItem> {
-  readonly title = "Attachment Items";
-  readonly mentionPrefix = "@";
-  readonly contextType = "attachment";
+  public readonly title = "Attachment Items";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "attachment";
 
   private items: MockContextItem[];
   private attachments: FileUIPart[];
 
-  constructor(items: MockContextItem[] = [], attachments: FileUIPart[] = []) {
+  public constructor(
+    items: MockContextItem[] = [],
+    attachments: FileUIPart[] = [],
+  ) {
     super();
     this.items = items;
     this.attachments = attachments;
   }
 
-  getItems(): MockContextItem[] {
+  public getItems(): MockContextItem[] {
     return this.items;
   }
 
-  formatContext(item: MockContextItem): string {
+  public formatContext(item: MockContextItem): string {
     return `Attachment: ${item.name} (${item.data.value})`;
   }
 
-  formatCompletion(item: MockContextItem): Completion {
+  public formatCompletion(item: MockContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 
-  override async getAttachments(
+  public override async getAttachments(
     items: MockContextItem[],
   ): Promise<FileUIPart[]> {
     // Return attachments for items that need them
@@ -142,9 +145,9 @@ interface FileContextItem extends AIContextItem {
 
 // Another mock provider with different prefix and type
 class FileContextProvider extends AIContextProvider<FileContextItem> {
-  readonly title = "Files";
-  readonly mentionPrefix = "@";
-  readonly contextType = "file";
+  public readonly title = "Files";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "file";
 
   private items: FileContextItem[] = [
     {
@@ -163,26 +166,26 @@ class FileContextProvider extends AIContextProvider<FileContextItem> {
     },
   ];
 
-  getItems(): FileContextItem[] {
+  public getItems(): FileContextItem[] {
     return this.items;
   }
 
-  formatCompletion(item: FileContextItem): Completion {
+  public formatCompletion(item: FileContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 
-  formatContext(item: FileContextItem): string {
+  public formatContext(item: FileContextItem): string {
     return `File: ${item.uri}\nDescription: ${item.description}`;
   }
 }
 
 // Second mock provider with the same context type as MockContextProvider
 class SecondaryMockProvider extends AIContextProvider<MockContextItem> {
-  readonly title = "Secondary Mock Items";
-  readonly mentionPrefix = "@";
-  readonly contextType = "mock";
+  public readonly title = "Secondary Mock Items";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "mock";
 
-  getItems(): MockContextItem[] {
+  public getItems(): MockContextItem[] {
     return [
       {
         type: "mock",
@@ -194,11 +197,11 @@ class SecondaryMockProvider extends AIContextProvider<MockContextItem> {
     ];
   }
 
-  formatContext(item: MockContextItem): string {
+  public formatContext(item: MockContextItem): string {
     return `Secondary: ${item.name}`;
   }
 
-  formatCompletion(item: MockContextItem): Completion {
+  public formatCompletion(item: MockContextItem): Completion {
     return this.createBasicCompletion(item);
   }
 }

package/src/core/ai/context/providers/cell-output.ts

@@ -80,16 +80,16 @@ function isMediaMimetype(
 }
 
 export class CellOutputContextProvider extends AIContextProvider<CellOutputContextItem> {
-  readonly title = "Cell Outputs";
-  readonly mentionPrefix = "@";
-  readonly contextType = "cell-output";
+  public readonly title = "Cell Outputs";
+  public readonly mentionPrefix = "@";
+  public readonly contextType = "cell-output";
   private store: JotaiStore;
-  constructor(store: JotaiStore) {
+  public constructor(store: JotaiStore) {
     super();
     this.store = store;
   }
 
-  getItems(): CellOutputContextItem[] {
+  public getItems(): CellOutputContextItem[] {
     const notebook = this.store.get(notebookAtom);
     const items: CellOutputContextItem[] = [];
 
@@ -116,7 +116,7 @@ export class CellOutputContextProvider extends AIContextProvider<CellOutputConte
     return items;
   }
 
-  formatCompletion(item: CellOutputContextItem): Completion {
+  public formatCompletion(item: CellOutputContextItem): Completion {
     const { cellOutput: data, cellName, cellCode } = item.data;
 
     return {
@@ -224,7 +224,7 @@ export class CellOutputContextProvider extends AIContextProvider<CellOutputConte
     };
   }
 
-  formatContext(item: CellOutputContextItem): string {
+  public formatContext(item: CellOutputContextItem): string {
     const { cellOutput: data, cellName, cellId, cellCode } = item.data;
 
     const contextData = {
@@ -253,7 +253,7 @@ export class CellOutputContextProvider extends AIContextProvider<CellOutputConte
   }
 
   /** Get attachments for cell output items that have shouldDownloadImage=true */
-  override async getAttachments(
+  public override async getAttachments(
     items: CellOutputContextItem[],
   ): Promise<FileUIPart[]> {
     const cellId = items[0].data.cellId;