@marimo-team/islands 0.25.1-dev15 → 0.25.1-dev17

package/package.json

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

package/src/components/editor/chrome/components/contribute-snippet-button.tsx

@@ -40,7 +40,12 @@ const ContributeSnippetModal: React.FC<{
         <DialogDescription>
           Have a useful snippet you want to share with the community? Make a
           pull request{" "}
-          <a href={Constants.githubPage} target="_blank" className="underline">
+          <a
+            href={Constants.githubPage}
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+          >
             on GitHub
           </a>
           .

package/src/components/editor/notebook-cell.tsx

@@ -762,7 +762,7 @@ const EditableCellComponent = ({
                     href="https://links.marimo.app/reusable-definitions"
                     target="_blank"
                     className="hover:underline text-muted-foreground text-xs font-bold"
-                    rel="noopener"
+                    rel="noreferrer"
                   >
                     reusable
                   </a>
@@ -801,7 +801,7 @@ const EditableCellComponent = ({
                     <a
                       href="https://links.marimo.app/reusable-definitions"
                       target="_blank"
-                      rel="noopener"
+                      rel="noreferrer"
                     >
                       <HelpCircleIcon
                         size={16}

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -177,7 +177,7 @@ export const MarimoTracebackOutput = ({
                 <a
                   target="_blank"
                   href="https://marimo.io/discord?ref=notebook"
-                  rel="noopener"
+                  rel="noreferrer"
                 >
                   <MessageCircleIcon className="h-4 w-4 mr-2" />
                   Ask in Discord

package/src/components/editor/output/VideoOutput.tsx

@@ -7,5 +7,5 @@ interface Props {
 }
 
 export const VideoOutput = ({ src, className }: Props): JSX.Element => {
-  return <iframe className={className} src={src} />;
+  return <iframe className={className} src={src} title="Video output" />;
 };

package/src/components/editor/output/ansi-reduce.ts

@@ -13,8 +13,10 @@ export interface Cursor {
 export class TerminalBuffer {
   private lines: string[] = [""];
   private cursor: Cursor = { row: 0, col: 0 };
-  // oxlint-ignore-next-line no-control-regex -- Needed for ANSI escape sequence parsing
-  private static readonly ESCAPE_REGEX = /\u001B\[([0-9;]*)([A-DJKH])/u;
+  private static readonly ESCAPE_REGEX = new RegExp(
+    String.raw`\u001B\[([0-9;]*)([A-DJKH])`,
+    "u",
+  );
 
   /** Ensure the internal lines array is large enough. */
   private ensureLine(row: number) {
@@ -180,8 +182,10 @@ export class TerminalBuffer {
  */
 export class AnsiParser {
   // Matches both CSI sequences (ESC[...letter) and other escape sequences like character set selection (ESC(B)
-  // oxlint-ignore-next-line no-control-regex -- Needed for ANSI parsing
-  private ESC_REGEX = /\u001B(?:\[[0-9;]*[A-Za-z]|\([0-9A-Za-z])/gu;
+  private ESC_REGEX = new RegExp(
+    String.raw`\u001B(?:\[[0-9;]*[A-Za-z]|\([0-9A-Za-z])`,
+    "gu",
+  );
 
   parse(input: string): { type: "text" | "escape"; value: string }[] {
     const tokens: { type: "text" | "escape"; value: string }[] = [];

package/src/components/editor/output/console/text-rendering.tsx

@@ -256,6 +256,7 @@ export const pipInstallReplacer: Replacer = (domNode: DOMNode) => {
     );
   }
 
+  // oxlint-disable-next-line react/jsx-no-useless-fragment -- html-react-parser replacers must return a React element.
   return <>{segments}</>;
 };
 
@@ -283,6 +284,7 @@ export const urlReplacer: Replacer = (domNode: DOMNode) => {
     return undefined;
   }
 
+  // oxlint-disable-next-line react/jsx-no-useless-fragment -- html-react-parser replacers must return a React element.
   return <>{result}</>;
 };
 
@@ -331,5 +333,5 @@ export const RenderTextWithLinks = ({ text }: { text: string }) => {
     );
   }, [text]);
 
-  return <>{content}</>;
+  return content;
 };

package/src/components/home/components.tsx

@@ -170,6 +170,7 @@ export const ResourceLinks: React.FC = () => {
             key={resource.title}
             href={resource.url}
             target="_blank"
+            rel="noreferrer"
             aria-label={`${resource.title}: ${resource.description}`}
             className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
           >

package/src/components/pages/run-page.tsx

@@ -50,6 +50,7 @@ const Watermark = () => {
       <a
         href={Constants.githubPage}
         target="_blank"
+        rel="noreferrer"
         className="text-sm text-(--grass-11) font-bold tracking-wide transition-colors bg-(--grass-4) hover:bg-(--grass-5) border-t border-l border-(--grass-8) px-3 py-1 rounded-tl-md flex items-center gap-2"
       >
         <span>made with marimo</span>

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

@@ -74,6 +74,7 @@ export const ShareStaticNotebookModal: React.FC<{
                   <a
                     href={Constants.issuesPage}
                     target="_blank"
+                    rel="noreferrer"
                     className="underline"
                   >
                     GitHub
@@ -102,7 +103,7 @@ export const ShareStaticNotebookModal: React.FC<{
           <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">
+            <a href={BASE_URL} target="_blank" rel="noreferrer">
               {BASE_URL}
             </a>
             .

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

@@ -1,6 +1,5 @@
 /* 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 +48,7 @@ export const StaticBanner: React.FC = () => {
         <a
           href={Constants.githubPage}
           target="_blank"
+          rel="noreferrer"
           className="text-(--sky-11) font-medium underline"
         >
           marimo
@@ -93,6 +93,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/css/globals.css

@@ -55,29 +55,21 @@
     --background: light-dark(hsl(0deg 0% 100%), hsl(150deg 7.7% 10.2%));
     --foreground: light-dark(hsl(222.2deg 47.4% 11.2%), hsl(155deg 7% 93%));
     --muted: light-dark(hsl(210deg 40% 96.1%), hsl(180deg 14% 1%));
-    --muted-foreground: light-dark(
-      hsl(215.4deg 16.3% 46.9%),
-      hsl(155deg 5% 68.3%)
-    );
+    --muted-foreground: light-dark(hsl(215.4deg 16.3% 46.9%),
+        hsl(155deg 5% 68.3%));
     --popover: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
-    --popover-foreground: light-dark(
-      hsl(222.2deg 47.4% 11.2%),
-      hsl(155deg 5% 68.3%)
-    );
+    --popover-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
+        hsl(155deg 5% 68.3%));
     --card: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
-    --card-foreground: light-dark(
-      hsl(222.2deg 47.4% 11.2%),
-      hsl(155deg 5% 76.3%)
-    );
+    --card-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
+        hsl(155deg 5% 76.3%));
     --border: light-dark(hsl(214.3deg 31.8% 91.4%), hsl(153deg 3.7% 24.2%));
     --input: light-dark(hsl(0deg 0% 64%), hsl(154deg 3.3% 28.7%));
     --primary: light-dark(hsl(208deg 93.5% 47.4%), hsl(192deg 59.8% 39%));
     --primary-foreground: light-dark(hsl(210deg 40% 98%), hsl(190deg 80% 84%));
     --secondary: light-dark(hsl(210deg 40% 96.1%), hsl(155deg 7% 93%));
-    --secondary-foreground: light-dark(
-      hsl(222.2deg 47.4% 11.2%),
-      hsl(151deg 5.5% 15.2%)
-    );
+    --secondary-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
+        hsl(151deg 5.5% 15.2%));
     --accent: light-dark(hsl(209deg 100% 96.5%), hsl(192deg 56.6% 26.5%));
     --accent-foreground: light-dark(hsl(211deg 90% 42%), hsl(190deg 80% 84%));
     --ring: hsl(215deg 20.2% 65.1%);
@@ -105,10 +97,8 @@
 
     /* Base shadows. */
     --base-shadow: light-dark(hsl(0deg 0% 85% / 40%), hsla(0deg 0% 36% / 60%));
-    --base-shadow-darker: light-dark(
-      hsl(0deg 0% 50% / 40%),
-      hsl(0deg 0% 50% / 60%)
-    );
+    --base-shadow-darker: light-dark(hsl(0deg 0% 50% / 40%),
+        hsl(0deg 0% 50% / 60%));
     --base-shadow-opacity: 5%;
 
     /* Codemirror editor */
@@ -162,7 +152,14 @@
     animation-duration: 0.01ms !important;
     animation-delay: 0s !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+
+    /*
+    Set to 0s, because `transition-property` defaults to `all`, so any non-zero
+    duration gives every element a transition. Libraries that change an
+    attribute and measure synchronously (e.g. Plotly hover labels) would read
+    stale geometry.
+    */
+    transition-duration: 0s !important;
     transition-delay: 0s !important;
   }
 

package/src/plugins/layout/RoutesPlugin.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, {
-  type JSX,
   type PropsWithChildren,
   useEffect,
   useMemo,
@@ -28,7 +27,7 @@ export class RoutesPlugin implements IStatelessPlugin<Data> {
     routes: z.array(z.string()),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  render(props: IStatelessPluginProps<Data>): React.ReactElement {
     return <RoutesComponent {...props.data}>{props.children}</RoutesComponent>;
   }
 }
@@ -36,7 +35,7 @@ export class RoutesPlugin implements IStatelessPlugin<Data> {
 const RoutesComponent = ({
   routes,
   children,
-}: PropsWithChildren<Data>): JSX.Element => {
+}: PropsWithChildren<Data>): React.ReactNode => {
   const childCount = React.Children.count(children);
   if (childCount !== routes.length) {
     throw new Error(
@@ -69,12 +68,11 @@ const RoutesComponent = ({
   }, [handleFindMatch]);
 
   if (!matched) {
-    // oxlint-disable-next-line react/jsx-no-useless-fragment
-    return <></>;
+    return null;
   }
 
   const matchedIndex = routes.indexOf(matched);
   const child = React.Children.toArray(children)[matchedIndex];
 
-  return <>{child}</>;
+  return child;
 };