@marimo-team/islands 0.23.17-dev1 → 0.23.17-dev13

package/src/components/editor/actions/export-dialog/export-command.ts

@@ -0,0 +1,149 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { Filenames } from "@/utils/filenames";
+import { shellQuote } from "@/utils/shell";
+import type { ExportFormat, ExportOptions, MarkdownFlavor } from "./state";
+
+const MARKDOWN_EXTENSIONS: Record<MarkdownFlavor, string> = {
+  pymdown: "md",
+  qmd: "qmd",
+  mystmd: "myst.md",
+  mdx: "mdx",
+};
+
+const MARKDOWN_SUFFIXES = [".myst.md", ".markdown", ".qmd", ".mdx", ".md"];
+
+function inferMarkdownFlavor(filename: string): MarkdownFlavor {
+  if (filename.endsWith(".myst.md")) {
+    return "mystmd";
+  }
+  if (filename.endsWith(".qmd")) {
+    return "qmd";
+  }
+  if (filename.endsWith(".mdx")) {
+    return "mdx";
+  }
+  return "pymdown";
+}
+
+function markdownOutputFilename(
+  filename: string,
+  selectedFlavor: MarkdownFlavor | null,
+): string {
+  const flavor = selectedFlavor ?? inferMarkdownFlavor(filename);
+  const extension = MARKDOWN_EXTENSIONS[flavor];
+  const suffix = MARKDOWN_SUFFIXES.find((candidate) =>
+    filename.endsWith(candidate),
+  );
+  let stem = Filenames.withoutExtension(filename);
+  if (suffix) {
+    stem = filename.slice(0, -suffix.length);
+  }
+  const output = `${stem}.${extension}`;
+  if (output !== filename) {
+    return output;
+  }
+  return `${filename.slice(0, -(extension.length + 1))}.export.${extension}`;
+}
+
+type FlagValue = boolean | string | null;
+
+function translateFlags(values: Record<string, FlagValue>): string[] {
+  return Object.entries(values).flatMap(([name, value]) => {
+    if (value === null) {
+      return [];
+    }
+    if (value === true) {
+      return [`--${name}`];
+    }
+    if (value === false) {
+      return [`--no-${name}`];
+    }
+    return [`--${name}=${value}`];
+  });
+}
+
+function webPDFFlagValue(pdf: ExportOptions["pdf"]): boolean | null {
+  if (pdf.preset === "document") {
+    return pdf.webpdf;
+  }
+  return null;
+}
+
+type CommandFormat = Exclude<ExportFormat, "png">;
+
+interface ExportCommandDefinition {
+  subcommand: string;
+  flags: (options: ExportOptions) => Record<string, FlagValue>;
+  outputFilename: (source: string, options: ExportOptions) => string;
+}
+
+const EXPORT_COMMAND_DEFINITIONS: Record<
+  CommandFormat,
+  ExportCommandDefinition
+> = {
+  html: {
+    subcommand: "html",
+    flags: ({ html }) => ({ "include-code": html.includeCode }),
+    outputFilename: (source) => Filenames.toHTML(source),
+  },
+  markdown: {
+    subcommand: "md",
+    flags: ({ markdown }) => ({ flavor: markdown.flavor }),
+    outputFilename: (source, { markdown }) =>
+      markdownOutputFilename(source, markdown.flavor),
+  },
+  ipynb: {
+    subcommand: "ipynb",
+    flags: ({ ipynb }) => ({
+      sort: ipynb.sortMode,
+      "include-outputs": ipynb.includeOutputs,
+    }),
+    outputFilename: (source) => Filenames.toIPYNB(source),
+  },
+  pdf: {
+    subcommand: "pdf",
+    flags: ({ pdf }) => ({
+      as: pdf.preset,
+      "include-inputs": pdf.includeInputs,
+      "include-outputs": pdf.includeOutputs,
+      webpdf: webPDFFlagValue(pdf),
+    }),
+    outputFilename: (source) => Filenames.toPDF(source),
+  },
+  script: {
+    subcommand: "script",
+    flags: () => ({}),
+    outputFilename: (source) =>
+      `${Filenames.withoutExtension(source)}.script.py`,
+  },
+};
+
+export function getExportCommand({
+  format,
+  filename,
+  options,
+}: {
+  format: ExportFormat;
+  filename: string | null;
+  options: ExportOptions;
+}): string | null {
+  if (
+    format === "png" ||
+    (format === "script" && options.script.type === "source") ||
+    !filename
+  ) {
+    return null;
+  }
+
+  const definition = EXPORT_COMMAND_DEFINITIONS[format];
+  return [
+    "marimo",
+    "export",
+    definition.subcommand,
+    shellQuote(filename),
+    ...translateFlags(definition.flags(options)),
+    "-o",
+    shellQuote(definition.outputFilename(filename, options)),
+  ].join(" ");
+}

package/src/components/editor/actions/export-dialog/export-dialog.tsx

@@ -0,0 +1,194 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useMediaQuery } from "@uidotdev/usehooks";
+import type React from "react";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { Spinner } from "@/components/icons/spinner";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/utils/cn";
+import { FORMAT_DEFINITIONS } from "./format-options";
+import { FormatNotice, FormatStatusIcon } from "./format-notice";
+import type { ExportFormat } from "./state";
+import { useExportDialog } from "./use-export-dialog";
+
+const DESKTOP_LAYOUT_QUERY = "(min-width: 640px)";
+
+export const ExportDialog: React.FC<{
+  initialFormat?: ExportFormat;
+  onClose: () => void;
+  returnFocusRef?: React.RefObject<HTMLElement | null>;
+}> = ({ initialFormat, onClose, returnFocusRef }) => {
+  const {
+    dialogRef,
+    isExporting,
+    formats,
+    options,
+    selected,
+    selectFormat,
+    updateOptions,
+    submit,
+  } = useExportDialog({ initialFormat, onClose });
+  const desktopLayout = useMediaQuery(DESKTOP_LAYOUT_QUERY);
+  const {
+    format,
+    status,
+    usesBrowserPrint,
+    actionLabel,
+    command,
+    footerDescription,
+  } = selected;
+  const definition = FORMAT_DEFINITIONS[format];
+  const FormatOptions = definition.Options;
+
+  const returnFocusProps = returnFocusRef
+    ? {
+        onCloseAutoFocus: (event: Event) => {
+          event.preventDefault();
+          returnFocusRef.current?.focus();
+        },
+      }
+    : {};
+
+  return (
+    <DialogContent
+      ref={dialogRef}
+      className="grid h-dvh max-h-[760px] min-w-0 w-[calc(100vw-2rem)] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden p-0 sm:top-[5vh] sm:h-[90vh] sm:max-h-[640px] sm:max-w-3xl"
+      data-testid="export-dialog"
+      {...returnFocusProps}
+    >
+      <DialogHeader className="border-b px-5 py-4 pr-12">
+        <DialogTitle>Export notebook</DialogTitle>
+        <DialogDescription>
+          Choose a format and adjust its options.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Tabs
+        value={format}
+        onValueChange={selectFormat}
+        orientation={desktopLayout ? "vertical" : "horizontal"}
+        className="flex min-h-0 min-w-0 flex-col overflow-hidden sm:grid sm:grid-cols-[168px_minmax(0,1fr)]"
+      >
+        <TabsList
+          aria-label="Export format"
+          className="grid max-h-none shrink-0 grid-cols-2 items-stretch justify-start gap-1 overflow-auto rounded-none border-b bg-muted/20 p-2 min-[360px]:grid-cols-3 sm:flex sm:h-full sm:flex-col sm:border-b-0 sm:border-r"
+        >
+          {formats.map(({ format: candidate, status: candidateStatus }) => {
+            const candidateDefinition = FORMAT_DEFINITIONS[candidate];
+            return (
+              <TabsTrigger
+                key={candidate}
+                value={candidate}
+                disabled={isExporting}
+                className="min-w-0 justify-start gap-2 px-2.5 py-2 text-xs data-[state=active]:shadow-xs sm:w-full sm:text-sm"
+                data-testid={`export-format-${candidate}`}
+              >
+                <candidateDefinition.Icon
+                  className="size-3.5 shrink-0"
+                  strokeWidth={1.5}
+                />
+                <span className="truncate">{candidateDefinition.label}</span>
+                <FormatStatusIcon status={candidateStatus} />
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+
+        {/* One panel per tab so each trigger's aria-controls resolves. */}
+        {formats.map(({ format: candidate }) => (
+          <TabsContent
+            key={candidate}
+            value={candidate}
+            className="mt-0 min-h-0 min-w-0 overflow-y-auto px-4 py-3"
+          >
+            <div className="mb-3">
+              <h3 className="text-base font-semibold">{definition.label}</h3>
+              <p className="mt-0.5 text-sm text-muted-foreground">
+                {definition.description}
+              </p>
+            </div>
+
+            <FormatNotice
+              format={format}
+              formatLabel={definition.label}
+              status={status}
+            />
+
+            {usesBrowserPrint ? null : (
+              <FormatOptions
+                options={options}
+                updateOptions={updateOptions}
+                disabled={isExporting}
+              />
+            )}
+          </TabsContent>
+        ))}
+      </Tabs>
+
+      <footer className="min-w-0 border-t bg-muted/20 px-4 py-3">
+        {command ? (
+          <div className="flex min-w-0 items-center gap-2 rounded-md border bg-background px-2.5 py-2 font-mono text-xs">
+            <span
+              className="select-none text-muted-foreground"
+              aria-hidden={true}
+            >
+              $
+            </span>
+            <code
+              className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap"
+              data-testid="export-cli-command"
+              aria-label="Equivalent POSIX shell command"
+            >
+              {command}
+            </code>
+            <CopyClipboardIcon
+              value={command}
+              className="size-3.5"
+              buttonClassName={cn(
+                buttonVariants({ variant: "ghost", size: "icon" }),
+                "shrink-0",
+              )}
+              tooltip="Copy POSIX shell command"
+              ariaLabel="Copy POSIX shell command"
+              toastTitle="Command copied"
+            />
+          </div>
+        ) : null}
+
+        <div
+          className={cn(
+            "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+            command && "mt-3",
+          )}
+        >
+          {footerDescription ? (
+            <p className="text-xs text-muted-foreground">{footerDescription}</p>
+          ) : null}
+          <Button
+            type="button"
+            disabled={!status.available || isExporting}
+            aria-busy={isExporting}
+            onClick={submit}
+            className={cn(
+              "border-(--blue-11) bg-(--blue-11) hover:border-(--blue-12) hover:bg-(--blue-12) sm:min-w-36 dark:border-(--blue-7) dark:bg-(--blue-5) dark:text-(--blue-12) dark:hover:border-(--blue-8) dark:hover:bg-(--blue-6)",
+              !footerDescription && "sm:ml-auto",
+            )}
+            data-testid="export-submit"
+          >
+            {isExporting && (
+              <Spinner size="small" className="mr-2" aria-hidden={true} />
+            )}
+            {usesBrowserPrint ? "Print to PDF" : actionLabel}
+          </Button>
+        </div>
+      </footer>
+    </DialogContent>
+  );
+};

package/src/components/editor/actions/export-dialog/export-notebook.ts

@@ -0,0 +1,98 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { EditRequests, ExportedFile } from "@/core/network/types";
+import { assertNever } from "@/utils/assertNever";
+import { runServerSidePDFDownload } from "../pdf-export";
+import type { ExportFormat, ExportOptions } from "./state";
+
+type ExportRequests = Pick<
+  EditRequests,
+  | "exportAsHTML"
+  | "exportAsMarkdown"
+  | "exportAsIPYNB"
+  | "exportAsPDF"
+  | "exportAsScript"
+  | "readCode"
+>;
+
+export async function exportNotebook({
+  format,
+  options,
+  requests,
+  sourceFilename,
+  htmlFiles,
+  captureOutputs,
+  capturePNG,
+  downloadFile,
+}: {
+  format: ExportFormat;
+  options: ExportOptions;
+  requests: ExportRequests;
+  sourceFilename: string;
+  htmlFiles: string[];
+  captureOutputs: () => Promise<void>;
+  capturePNG: () => Promise<void>;
+  downloadFile: (file: ExportedFile) => void;
+}): Promise<void> {
+  switch (format) {
+    case "html": {
+      const file = await requests.exportAsHTML({
+        download: false,
+        files: htmlFiles,
+        includeCode: options.html.includeCode,
+      });
+      downloadFile(file);
+      return;
+    }
+    case "markdown": {
+      const file = await requests.exportAsMarkdown({
+        download: false,
+        flavor: options.markdown.flavor,
+      });
+      downloadFile(file);
+      return;
+    }
+    case "ipynb": {
+      if (options.ipynb.includeOutputs) {
+        await captureOutputs();
+      }
+      const file = await requests.exportAsIPYNB({
+        download: false,
+        sortMode: options.ipynb.sortMode,
+        includeOutputs: options.ipynb.includeOutputs,
+      });
+      downloadFile(file);
+      return;
+    }
+    case "pdf":
+      await runServerSidePDFDownload({
+        exportOptions: options.pdf,
+        captureOutputs,
+        downloadPDF: async (exportOptions) => {
+          const file = await requests.exportAsPDF(exportOptions);
+          downloadFile(file);
+        },
+      });
+      return;
+
+    case "script": {
+      if (options.script.type === "source") {
+        const source = await requests.readCode();
+        downloadFile({
+          contents: source.contents,
+          filename: sourceFilename,
+          mediaType: "text/plain",
+        });
+        return;
+      }
+      const file = await requests.exportAsScript({ download: false });
+      downloadFile(file);
+      return;
+    }
+    case "png":
+      await capturePNG();
+      return;
+    default:
+      assertNever(format);
+  }
+}

package/src/components/editor/actions/export-dialog/format-notice.tsx

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { AlertCircleIcon } from "lucide-react";
+import type { PropsWithChildren } from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { assertNever } from "@/utils/assertNever";
+import { cn } from "@/utils/cn";
+import type {
+  ExportBlockReason,
+  ExportFormat,
+  ExportFormatStatus,
+  ExportSetupRequirement,
+} from "./state";
+
+const SETUP_REQUIREMENTS: Record<
+  ExportSetupRequirement["name"],
+  { description: string }
+> = {
+  "playwright-chromium": {
+    description: "PDF export requires Playwright Chromium.",
+  },
+};
+
+export function FormatStatusIcon({ status }: { status: ExportFormatStatus }) {
+  if (status.available && !status.availabilityCheckFailed) {
+    return null;
+  }
+  if (status.reason?.type === "checking-requirements") {
+    return (
+      <span className="ml-auto flex shrink-0">
+        <Spinner size="small" className="size-3" />
+        <span className="sr-only">Checking requirements</span>
+      </span>
+    );
+  }
+  const statusLabel = status.availabilityCheckFailed
+    ? "Requirements unknown"
+    : "Unavailable";
+  return (
+    <span className="ml-auto flex shrink-0">
+      <AlertCircleIcon
+        className={cn(
+          "size-3",
+          status.availabilityCheckFailed
+            ? "text-muted-foreground"
+            : "text-(--yellow-11)",
+        )}
+      />
+      <span className="sr-only">{statusLabel}</span>
+    </span>
+  );
+}
+
+export function FormatNotice({
+  format,
+  formatLabel,
+  status,
+}: {
+  format: ExportFormat;
+  formatLabel: string;
+  status: ExportFormatStatus;
+}) {
+  if (status.availabilityCheckFailed) {
+    return (
+      <div className="mb-2.5">
+        <Notice>
+          Couldn't check whether this export is available. You can still try it.
+        </Notice>
+      </div>
+    );
+  }
+  if (!status.reason) {
+    return null;
+  }
+
+  return (
+    <div className="mb-2.5">
+      <ReasonNotice
+        format={format}
+        formatLabel={formatLabel}
+        reason={status.reason}
+      />
+    </div>
+  );
+}
+
+function Notice({ children }: PropsWithChildren) {
+  return (
+    <Alert
+      variant="warning"
+      className="flex items-start gap-2.5 p-3 text-(--yellow-12) has-[svg]:pl-3 sm:items-center [&>svg]:static [&>svg+div]:translate-y-0"
+    >
+      <AlertCircleIcon className="mt-0.5 size-4 shrink-0 sm:mt-0" />
+      <AlertDescription className="min-w-0 flex-1 text-sm leading-5">
+        {children}
+      </AlertDescription>
+    </Alert>
+  );
+}
+
+function ReasonNotice({
+  format,
+  formatLabel,
+  reason,
+}: {
+  format: ExportFormat;
+  formatLabel: string;
+  reason: ExportBlockReason;
+}) {
+  switch (reason.type) {
+    case "checking-requirements":
+      return (
+        <Alert
+          role="status"
+          variant="info"
+          className="flex items-center gap-2.5 p-3 has-[svg]:pl-3 [&>svg]:static [&>svg+div]:translate-y-0"
+        >
+          <Spinner className="size-4 shrink-0" size="small" />
+          <AlertDescription className="min-w-0 flex-1 text-sm leading-5">
+            Checking {formatLabel} requirements…
+          </AlertDescription>
+        </Alert>
+      );
+    case "notebook-must-be-named":
+      return <Notice>Name and save this notebook before exporting.</Notice>;
+    case "missing-packages":
+      return (
+        <Notice>
+          Install{" "}
+          <code className="break-words font-mono">
+            {reason.packages.join(", ")}
+          </code>{" "}
+          where marimo is running to use this export.
+        </Notice>
+      );
+    case "missing-setup":
+      return (
+        <Notice>
+          <span className="block min-w-0">
+            {reason.requirements.map((requirement) => {
+              const details = SETUP_REQUIREMENTS[requirement.name];
+              return (
+                <span className="block" key={requirement.name}>
+                  {details.description}
+                  <code className="mt-1 block break-all font-mono">
+                    {requirement.command}
+                  </code>
+                </span>
+              );
+            })}
+          </span>
+        </Notice>
+      );
+    case "wasm-runtime":
+      return (
+        <Notice>
+          {format === "pdf"
+            ? "Use your browser's print dialog to save the current app view as a PDF."
+            : "Open this notebook in a local marimo session to use this export."}
+        </Notice>
+      );
+    default:
+      assertNever(reason);
+  }
+}