@marimo-team/islands 0.19.7-dev35 → 0.19.7-dev37

package/dist/{types-DBsIRhMX.js → types-CzEZ3EWT.js}

@@ -5183,7 +5183,7 @@ var DropdownMenuContent = import_react.forwardRef((e4, t) => {
   let n = (0, import_compiler_runtime$3.c)(17), r, i, a, o;
   n[0] === e4 ? (r = n[1], i = n[2], a = n[3], o = n[4]) : ({ className: r, scrollable: a, sideOffset: o, ...i } = e4, n[0] = e4, n[1] = r, n[2] = i, n[3] = a, n[4] = o);
   let s = a === void 0 ? true : a, c = o === void 0 ? 4 : o, l;
-  n[5] !== r || n[6] !== s ? (l = cn(menuContentCommon(), "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", s && "overflow-auto", r), n[5] = r, n[6] = s, n[7] = l) : l = n[7];
+  n[5] !== r || n[6] !== s ? (l = cn(menuContentCommon(), "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden", s && "overflow-auto", r), n[5] = r, n[6] = s, n[7] = l) : l = n[7];
   let u = s ? `calc(var(--radix-dropdown-menu-content-available-height) - ${MAX_HEIGHT_OFFSET}px)` : void 0, d;
   n[8] !== i.style || n[9] !== u ? (d = {
     ...i.style,

package/package.json

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

package/src/components/data-table/TableActions.tsx

@@ -107,13 +107,13 @@ export const TableActions = <TData,>({
   };
 
   return (
-    <div className="flex items-center shrink-0 pt-1 no-print">
+    <div className="flex items-center shrink-0 pt-1">
       {onSearchQueryChange && enableSearch && (
         <Tooltip content="Search">
           <Button
             variant="text"
             size="xs"
-            className="mb-0"
+            className="mb-0 print:hidden"
             onClick={() => setIsSearchEnabled(!isSearchEnabled)}
           >
             <SearchIcon className="w-4 h-4 text-muted-foreground" />
@@ -125,7 +125,7 @@ export const TableActions = <TData,>({
           <Button
             variant="text"
             size="xs"
-            className="mb-0"
+            className="mb-0 print:hidden"
             onClick={toggleDisplayHeader}
           >
             <ChartSplineIcon className="w-4 h-4 text-muted-foreground" />
@@ -140,6 +140,7 @@ export const TableActions = <TData,>({
                 variant="text"
                 size="xs"
                 onClick={() => togglePanel("row-viewer")}
+                className="print:hidden"
               >
                 <PanelRightIcon
                   className={cn(
@@ -156,6 +157,7 @@ export const TableActions = <TData,>({
                 variant="text"
                 size="xs"
                 onClick={() => togglePanel("column-explorer")}
+                className="print:hidden"
               >
                 <ChartColumnStacked
                   className={cn(

package/src/components/data-table/download-actions.tsx

@@ -87,7 +87,12 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   const { locale } = useLocale();
 
   const button = (
-    <Button data-testid="download-as-button" size="xs" variant="link">
+    <Button
+      data-testid="download-as-button"
+      size="xs"
+      variant="link"
+      className="print:hidden"
+    >
       Download <ChevronDownIcon className="w-3 h-3 ml-1" />
     </Button>
   );
@@ -146,7 +151,7 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild={true}>{button}</DropdownMenuTrigger>
-      <DropdownMenuContent side="bottom" className="no-print">
+      <DropdownMenuContent side="bottom" className="print:hidden">
         {options.map((option) => (
           <DropdownMenuItem
             key={option.label}

package/src/components/data-table/pagination.tsx

@@ -67,7 +67,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             data-testid="select-all-button"
             variant="link"
-            className="h-4"
+            className="h-4 print:hidden"
             onMouseDown={Events.preventFocus}
             onClick={() => {
               if (onSelectAllRowsChange) {
@@ -91,7 +91,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             data-testid="clear-selection-button"
             variant="link"
-            className="h-4"
+            className="h-4 print:hidden"
             onMouseDown={Events.preventFocus}
             onClick={() => {
               if (!isCellSelection) {
@@ -139,7 +139,7 @@ export const DataTablePagination = <TData,>({
 
   const renderPageSizeSelector = () => {
     return (
-      <div className="flex items-center gap-1 text-xs whitespace-nowrap mr-1">
+      <div className="flex items-center gap-1 text-xs whitespace-nowrap mr-1 print:hidden">
         <Select
           value={pageSize.toString()}
           onValueChange={(value) => table.setPageSize(Number(value))}
@@ -173,7 +173,7 @@ export const DataTablePagination = <TData,>({
         {showPageSizeSelector && renderPageSizeSelector()}
       </div>
 
-      <div className="flex items-end space-x-2">
+      <div className="flex items-end space-x-2 print:hidden">
         <Button
           size="xs"
           variant="outline"

package/src/components/debug/indicator.tsx

@@ -5,7 +5,7 @@ export const TailwindIndicator = () => {
   }
 
   return (
-    <div className="fixed bottom-10 right-0 z-50 flex items-center justify-center bg-gray-800 py-[2px] px-1 font-mono text-[10px] text-white font-semibold">
+    <div className="fixed bottom-10 right-0 z-50 flex items-center justify-center bg-gray-800 py-[2px] px-1 font-mono text-[10px] text-white font-semibold print:hidden">
       <div className="block sm:hidden">xs</div>
       <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
         sm

package/src/components/editor/actions/useNotebookActions.tsx

@@ -70,6 +70,7 @@ import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
 import { copyToClipboard } from "@/utils/copy";
 import {
+  ADD_PRINTING_CLASS,
   downloadAsPDF,
   downloadBlob,
   downloadHTMLAsImage,
@@ -219,6 +220,8 @@ export function useNotebookActions() {
             await downloadHTMLAsImage({
               element: app,
               filename: document.title,
+              // Add body.printing ONLY when converting the whole notebook to a screenshot
+              prepare: ADD_PRINTING_CLASS,
             });
           },
         },
@@ -241,8 +244,7 @@ export function useNotebookActions() {
 
               const downloadPDF = async (progress: ProgressState) => {
                 await updateCellOutputsWithScreenshots({
-                  takeScreenshots: () =>
-                    takeScreenshots({ progress, snappy: false }),
+                  takeScreenshots: () => takeScreenshots({ progress }),
                   updateCellOutputs,
                 });
                 await downloadAsPDF({

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -123,7 +123,7 @@ export const ContextAwarePanel: React.FC = () => {
     <>
       <PanelResizeHandle
         onDragging={handleDragging}
-        className="resize-handle border-border z-20 no-print border-l"
+        className="resize-handle border-border z-20 print:hidden border-l"
       />
       <Panel defaultSize={20} minSize={15} maxSize={80}>
         {renderBody()}

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -37,6 +37,7 @@ import {
   type PanelType,
 } from "../types";
 import { BackendConnectionStatus } from "./footer-items/backend-status";
+import { LspStatus } from "./footer-items/lsp-status";
 import { PanelsWrapper } from "./panels";
 import { PendingAICells } from "./pending-ai-cells";
 import { useAiPanelTab } from "./useAiPanel";
@@ -227,7 +228,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     <PanelResizeHandle
       onDragging={handleDragging}
       className={cn(
-        "border-border no-print z-10",
+        "border-border print:hidden z-10",
         isSidebarOpen ? "resize-handle" : "resize-handle-collapsed",
         "vertical",
       )}
@@ -238,7 +239,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     <PanelResizeHandle
       onDragging={handleDragging}
       className={cn(
-        "border-border no-print z-20",
+        "border-border print:hidden z-20",
         isDeveloperPanelOpen ? "resize-handle" : "resize-handle-collapsed",
         "horizontal",
       )}
@@ -382,7 +383,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       collapsedSize={0}
       collapsible={true}
       className={cn(
-        "dark:bg-(--slate-1) no-print print:hidden hide-on-fullscreen",
+        "dark:bg-(--slate-1) print:hidden hide-on-fullscreen",
         isSidebarOpen && "border-r border-l border-(--slate-7)",
       )}
       minSize={10}
@@ -427,7 +428,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       collapsedSize={0}
       collapsible={true}
       className={cn(
-        "dark:bg-(--slate-1) no-print print:hidden hide-on-fullscreen",
+        "dark:bg-(--slate-1) print:hidden hide-on-fullscreen",
         isDeveloperPanelOpen && "border-t",
       )}
       minSize={10}
@@ -490,6 +491,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
           />
           <div className="border-l border-border h-4 mx-1" />
           <BackendConnectionStatus />
+          <LspStatus />
           <div className="flex-1" />
           <Button
             size="xs"

package/src/components/editor/chrome/wrapper/footer-items/lsp-status.tsx

@@ -0,0 +1,178 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react";
+import type React from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { Tooltip } from "@/components/ui/tooltip";
+import { toast } from "@/components/ui/use-toast";
+import { API } from "@/core/network/api";
+import { connectionAtom } from "@/core/network/connection";
+import type {
+  LspHealthResponse,
+  LspRestartRequest,
+  LspRestartResponse,
+} from "@/core/network/types";
+import { isAppConnected } from "@/core/websocket/connection-utils";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { useInterval } from "@/hooks/useInterval";
+
+const CHECK_LSP_HEALTH_INTERVAL_MS = 60_000;
+
+export const lspHealthAtom = atom<LspHealthResponse | null>(null);
+
+export const LspStatus: React.FC = () => {
+  const connection = useAtomValue(connectionAtom).state;
+  const setLspHealth = useSetAtom(lspHealthAtom);
+
+  const { isFetching, data, refetch } = useAsyncData(async () => {
+    if (!isAppConnected(connection)) {
+      return null;
+    }
+
+    try {
+      const health = await API.get<LspHealthResponse>("/lsp/health");
+      setLspHealth(health);
+      return health;
+    } catch {
+      return null;
+    }
+  }, [connection]);
+
+  useInterval(refetch, {
+    delayMs: isAppConnected(connection) ? CHECK_LSP_HEALTH_INTERVAL_MS : null,
+    whenVisible: true,
+  });
+
+  const handleRestart = async () => {
+    try {
+      const result = await API.post<LspRestartRequest, LspRestartResponse>(
+        "/lsp/restart",
+        {},
+      );
+
+      if (result.success) {
+        toast({
+          title: "LSP Servers Restarted",
+          description:
+            result.restarted.length > 0
+              ? `Restarted: ${result.restarted.join(", ")}`
+              : "No servers needed restart",
+        });
+      } else {
+        toast({
+          variant: "danger",
+          title: "LSP Restart Failed",
+          description: Object.entries(result.errors ?? {})
+            .map(([k, v]) => `${k}: ${v}`)
+            .join("\n"),
+        });
+      }
+
+      // Refresh health status
+      refetch();
+    } catch (error) {
+      toast({
+        variant: "danger",
+        title: "LSP Restart Failed",
+        description: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  };
+
+  // Don't show if no LSP servers are configured
+  if (!data || data.servers.length === 0) {
+    return null;
+  }
+
+  const getStatusIcon = () => {
+    if (isFetching) {
+      return <Spinner size="small" />;
+    }
+
+    if (!data) {
+      return <AlertCircleIcon className="w-4 h-4" />;
+    }
+
+    switch (data.status) {
+      case "healthy":
+        return <CheckCircle2Icon className="w-4 h-4 text-(--green-9)" />;
+      case "degraded":
+        return <AlertCircleIcon className="w-4 h-4 text-(--yellow-11)" />;
+      case "unhealthy":
+        return <AlertCircleIcon className="w-4 h-4 text-(--yellow-11)" />;
+    }
+  };
+
+  const getServerStatusDisplay = (
+    status: "starting" | "running" | "stopped" | "crashed" | "unresponsive",
+    lastPingMs: number | null | undefined,
+  ) => {
+    switch (status) {
+      case "running":
+        return `✓ OK${lastPingMs == null ? "" : ` (${lastPingMs.toFixed(0)}ms)`}`;
+      case "starting":
+        return "⋯ Starting";
+      case "stopped":
+        return "✗ Stopped";
+      case "crashed":
+        return "✗ Crashed";
+      case "unresponsive":
+        return "✗ Not responding";
+    }
+  };
+
+  const getServerStatusColor = (
+    status: "starting" | "running" | "stopped" | "crashed" | "unresponsive",
+  ) => {
+    switch (status) {
+      case "running":
+        return "text-(--green-9)";
+      case "starting":
+        return "text-(--yellow-11)";
+      default:
+        return "text-(--red-9)";
+    }
+  };
+
+  const tooltipContent = (
+    <div className="text-sm">
+      <b>LSP Status</b>
+      <div className="mt-1 text-xs space-y-1">
+        {data?.servers.map((server) => (
+          <div key={server.serverId} className="flex justify-between gap-2">
+            <span>{server.serverId}</span>
+            <span className={getServerStatusColor(server.status)}>
+              {getServerStatusDisplay(server.status, server.lastPingMs)}
+            </span>
+          </div>
+        ))}
+      </div>
+      {data?.status === "healthy" ? null : (
+        <div className="mt-2 text-xs text-muted-foreground">
+          Click to restart failed servers
+        </div>
+      )}
+    </div>
+  );
+
+  const handleClick = () => {
+    if (data?.status !== "healthy") {
+      void handleRestart();
+    }
+  };
+
+  return (
+    <Tooltip content={tooltipContent} data-testid="footer-lsp-status">
+      <button
+        type="button"
+        onClick={handleClick}
+        className="p-1 hover:bg-accent rounded flex items-center gap-1.5 text-xs text-muted-foreground"
+        data-testid="lsp-status"
+      >
+        {getStatusIcon()}
+        <span>LSP</span>
+      </button>
+    </Tooltip>
+  );
+};

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -57,7 +57,7 @@ export const Footer: React.FC = () => {
   });
 
   return (
-    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none no-print text-sm z-50 print:hidden hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
+    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
       <FooterItem
         className="h-full"
         tooltip={

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -115,7 +115,7 @@ export const Sidebar: React.FC = () => {
   ]);
 
   return (
-    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none no-print text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
+    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
       <ReorderableList<PanelDescriptor>
         value={sidebarItems}
         setValue={handleSetSidebarItems}

package/src/components/editor/controls/Controls.tsx

@@ -212,7 +212,7 @@ const StopControlButton = ({
 };
 
 const topRightControls =
-  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] no-print pointer-events-auto z-30 print:hidden";
+  "absolute top-3 right-5 m-0 flex items-center gap-2 min-h-[28px] print:hidden pointer-events-auto z-30";
 
 const bottomRightControls =
-  "absolute bottom-5 right-5 flex flex-col gap-2 items-center no-print pointer-events-auto z-30 print:hidden";
+  "absolute bottom-5 right-5 flex flex-col gap-2 items-center print:hidden pointer-events-auto z-30";

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -111,7 +111,7 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
       <DropdownMenuTrigger asChild={true} disabled={disabled}>
         {button}
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="no-print w-[240px]">
+      <DropdownMenuContent align="end" className="print:hidden w-[240px]">
         {actions.map((action) => {
           if (action.hidden || action.redundant) {
             return null;

package/src/components/editor/file-tree/file-explorer.tsx

@@ -510,7 +510,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     return (
       <DropdownMenuContent
         align="end"
-        className="no-print w-[220px]"
+        className="print:hidden w-[220px]"
         onClick={(e) => e.stopPropagation()}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >

package/src/components/editor/header/status.tsx

@@ -34,7 +34,7 @@ export const StatusOverlay: React.FC<{
   );
 };
 
-const topLeftStatus = "no-print pointer-events-auto hover:cursor-pointer";
+const topLeftStatus = "print:hidden pointer-events-auto hover:cursor-pointer";
 
 const DisconnectedIcon = () => (
   <Tooltip content="App disconnected">

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -41,7 +41,11 @@ import { downloadAsHTML } from "@/core/static/download-html";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
-import { downloadBlob, downloadHTMLAsImage } from "@/utils/download";
+import {
+  ADD_PRINTING_CLASS,
+  downloadBlob,
+  downloadHTMLAsImage,
+} from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
 import { FloatingOutline } from "../../chrome/panels/outline/floating-outline";
 import { cellDomProps } from "../../common";
@@ -185,7 +189,12 @@ const ActionButtons: React.FC<{
     if (!app) {
       return;
     }
-    await downloadHTMLAsImage({ element: app, filename: document.title });
+    await downloadHTMLAsImage({
+      element: app,
+      filename: document.title,
+      // Add body.printing ONLY when converting the whole notebook to a screenshot
+      prepare: ADD_PRINTING_CLASS,
+    });
   };
 
   const handleDownloadAsHTML = async () => {
@@ -271,7 +280,7 @@ const ActionButtons: React.FC<{
     <div
       data-testid="notebook-actions-dropdown"
       className={cn(
-        "right-0 top-0 z-50 m-4 no-print flex gap-2 print:hidden",
+        "right-0 top-0 z-50 m-4 print:hidden flex gap-2",
         // If the notebook is static, we have a banner at the top, so
         // we can't use fixed positioning. Ideally this is sticky, but the
         // current dom structure makes that difficult.
@@ -284,7 +293,7 @@ const ActionButtons: React.FC<{
             <MoreHorizontalIcon className="w-4 h-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="no-print w-[220px]">
+        <DropdownMenuContent align="end" className="print:hidden w-[220px]">
           {actions}
         </DropdownMenuContent>
       </DropdownMenu>

package/src/components/home/components.tsx

@@ -80,7 +80,7 @@ export const OpenTutorialDropDown: React.FC = () => {
           <CaretDownIcon className="w-3 h-3 ml-1" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent side="bottom" align="end" className="no-print">
+      <DropdownMenuContent side="bottom" align="end" className="print:hidden">
         {Objects.entries(TUTORIALS).map(
           ([tutorialId, [label, Icon, description]]) => (
             <DropdownMenuItem

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

@@ -36,7 +36,7 @@ export const StaticBanner: React.FC = () => {
 
   return (
     <div
-      className="px-4 py-2 bg-(--sky-2) border-b border-(--sky-7) text-(--sky-11) flex justify-between items-center gap-4 no-print text-sm"
+      className="px-4 py-2 bg-(--sky-2) border-b border-(--sky-7) text-(--sky-11) flex justify-between items-center gap-4 print:hidden text-sm"
       data-testid="static-notebook-banner"
     >
       <span>

package/src/components/ui/dropdown-menu.tsx

@@ -83,7 +83,7 @@ const DropdownMenuContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           menuContentCommon(),
-          "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden",
           scrollable && "overflow-auto",
           className,
         )}

package/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto scrollbar-thin flex-1">
+  <div className="w-full overflow-auto scrollbar-thin flex-1 print:overflow-hidden">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}