@marimo-team/islands 0.23.15-dev7 → 0.23.15-dev72

package/src/plugins/impl/vega/vega-component.tsx

@@ -27,6 +27,7 @@ import { makeSelectable } from "./make-selectable";
 import { getSelectionParamNames, ParamNames } from "./params";
 import { resolveVegaSpecData } from "./resolve-data";
 import type { VegaLiteSpec } from "./types";
+import { useVegaContainerRemeasure } from "./use-vega-container-remeasure";
 import { getContainerWidth } from "./utils";
 
 // register arrow reader under type 'arrow'
@@ -276,6 +277,9 @@ const LoadedVegaComponent = ({
     onEmbed: handleNewView,
   });
 
+  const containerWidth = getContainerWidth(selectableSpec);
+  useVegaContainerRemeasure(vegaRef, containerWidth === "container");
+
   useEffect(() => {
     signalListeners.forEach(({ signalName, handler }) => {
       // Existing bug. TODO: Some signal listeners are invalid
@@ -310,10 +314,7 @@ const LoadedVegaComponent = ({
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >
-        <div
-          ref={vegaRef}
-          data-container-width={getContainerWidth(selectableSpec)}
-        />
+        <div ref={vegaRef} data-container-width={containerWidth} />
         {renderHelpContent()}
       </div>
     </>

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -1,7 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { JSX, PropsWithChildren } from "react";
 import React from "react";
+import { createPortal } from "react-dom";
 import { z } from "zod";
+import { withFullScreenAsRoot } from "@/components/ui/fullscreen";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -9,9 +11,11 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
+  NavigationMenuViewport,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation";
 import { Tooltip } from "@/components/ui/tooltip";
+import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { cn } from "@/utils/cn";
 import { appendQueryParams } from "@/utils/urls";
@@ -21,6 +25,7 @@ import type {
 } from "../stateless-plugin";
 import "./navigation-menu.css";
 import { KnownQueryParams } from "@/core/constants";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
 
 interface MenuItem {
   label: string;
@@ -45,6 +50,150 @@ interface Data {
   orientation: "horizontal" | "vertical";
 }
 
+interface PortalPosition {
+  left: number;
+  top: number;
+}
+
+interface HorizontalMenuGroupProps {
+  item: MenuItemGroup;
+  preserveQueryParams: (href: string) => string;
+  target: (href: string) => string;
+}
+
+const HorizontalMenuGroup = ({
+  item,
+  preserveQueryParams,
+  target,
+}: HorizontalMenuGroupProps): JSX.Element => {
+  const triggerRef = React.useRef<React.ComponentRef<
+    typeof NavigationMenuTrigger
+  > | null>(null);
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <NavigationMenuPrimitive.Root
+      className="relative z-10 max-w-max flex-1 items-center justify-center"
+      orientation="horizontal"
+      onValueChange={(value) => setOpen(value !== "")}
+    >
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger ref={triggerRef}>
+            {renderHTML({ html: item.label })}
+          </NavigationMenuTrigger>
+          <NavigationMenuContent className="w-auto">
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              {item.items.map((subItem) => (
+                <ListItem
+                  key={subItem.label}
+                  label={subItem.label}
+                  href={preserveQueryParams(subItem.href)}
+                  target={target(subItem.href)}
+                >
+                  {subItem.description &&
+                    renderHTML({ html: subItem.description })}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuViewportPortal anchorRef={triggerRef} open={open}>
+        <NavigationMenuViewport />
+      </NavigationMenuViewportPortal>
+    </NavigationMenuPrimitive.Root>
+  );
+};
+
+// Portal into the fullscreen element (or VSCode output container) when
+// present; `position: fixed` elements portaled to document.body render
+// behind a fullscreened cell.
+const NavigationMenuPortal = withFullScreenAsRoot(
+  ({
+    container,
+    children,
+  }: PropsWithChildren<{
+    container?: Element | DocumentFragment | null;
+  }>) => createPortal(children, container ?? document.body),
+);
+
+const VIEWPORT_MARGIN = 8;
+
+const NavigationMenuViewportPortal = ({
+  anchorRef,
+  open,
+  children,
+}: PropsWithChildren<{
+  anchorRef: React.RefObject<HTMLElement | null>;
+  open: boolean;
+}>): React.ReactElement | null => {
+  const [position, setPosition] = React.useState<PortalPosition | null>(null);
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  const updatePosition = React.useCallback(() => {
+    if (!anchorRef.current) {
+      return;
+    }
+
+    const rect = anchorRef.current.getBoundingClientRect();
+    // Clamp so a wide dropdown doesn't run off the right edge of the viewport.
+    const contentWidth =
+      contentRef.current?.firstElementChild?.scrollWidth ?? 0;
+    const maxLeft = window.innerWidth - contentWidth - VIEWPORT_MARGIN;
+    setPosition({
+      left: Math.max(VIEWPORT_MARGIN, Math.min(rect.left, maxLeft)),
+      top: rect.bottom,
+    });
+  }, [anchorRef]);
+
+  // Recompute whenever the menu opens: the trigger may have moved since mount
+  // due to layout shifts that emit no scroll/resize events. The rAF re-measures
+  // after the dropdown content has rendered, so clamping sees its real width.
+  React.useLayoutEffect(() => {
+    updatePosition();
+    if (open) {
+      const raf = requestAnimationFrame(updatePosition);
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [open, updatePosition]);
+
+  useResizeObserver({
+    ref: anchorRef,
+    onResize: updatePosition,
+  });
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    window.addEventListener("resize", updatePosition);
+    document.addEventListener("scroll", updatePosition, { capture: true });
+
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      document.removeEventListener("scroll", updatePosition, { capture: true });
+    };
+  }, [updatePosition]);
+
+  if (!position || typeof document === "undefined") {
+    return null;
+  }
+
+  return (
+    <NavigationMenuPortal>
+      <div
+        ref={contentRef}
+        className="fixed z-50"
+        style={{ left: position.left, top: position.top }}
+      >
+        {children}
+      </div>
+    </NavigationMenuPortal>
+  );
+};
+
 export class NavigationMenuPlugin implements IStatelessPlugin<Data> {
   tagName = "marimo-nav-menu";
 
@@ -109,30 +258,12 @@ const NavMenuComponent = ({
   const renderMenuItem = (item: MenuItem | MenuItemGroup) => {
     if ("items" in item) {
       return orientation === "horizontal" ? (
-        <NavigationMenu orientation="horizontal" key={item.label}>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>
-                {renderHTML({ html: item.label })}
-              </NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                  {item.items.map((subItem) => (
-                    <ListItem
-                      key={subItem.label}
-                      label={subItem.label}
-                      href={preserveQueryParams(subItem.href)}
-                      target={target(subItem.href)}
-                    >
-                      {subItem.description &&
-                        renderHTML({ html: subItem.description })}
-                    </ListItem>
-                  ))}
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
+        <HorizontalMenuGroup
+          key={item.label}
+          item={item}
+          preserveQueryParams={preserveQueryParams}
+          target={target}
+        />
       ) : (
         <NavigationMenuItem key={item.label}>
           <div
@@ -196,7 +327,7 @@ const NavMenuComponent = ({
 };
 
 const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
+  React.ComponentRef<"a">,
   React.ComponentPropsWithoutRef<"a"> & {
     label: string;
   }

package/src/theme/__tests__/useTheme.test.ts

@@ -0,0 +1,68 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it } from "vitest";
+import { configOverridesAtom, userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { store } from "@/core/state/jotai";
+import type { Theme } from "../useTheme";
+import { resolvedThemeAtom, visibleForTesting } from "../useTheme";
+
+const { themeFromQueryParam } = visibleForTesting;
+
+function setQuery(search: string): void {
+  window.history.replaceState({}, "", search === "" ? "/" : `/?${search}`);
+}
+
+function setConfigTheme(theme: Theme): void {
+  const config = defaultUserConfig();
+  store.set(userConfigAtom, {
+    ...config,
+    display: { ...config.display, theme },
+  });
+}
+
+afterEach(() => {
+  setQuery("");
+  store.set(userConfigAtom, defaultUserConfig());
+  store.set(configOverridesAtom, {});
+});
+
+describe("themeFromQueryParam", () => {
+  it.each(["light", "dark", "system"] as const)(
+    "returns the valid theme %s",
+    (theme) => {
+      setQuery(`theme=${theme}`);
+      expect(themeFromQueryParam()).toBe(theme);
+    },
+  );
+
+  it("returns undefined when the param is absent", () => {
+    setQuery("");
+    expect(themeFromQueryParam()).toBeUndefined();
+  });
+
+  it("returns undefined for an invalid value", () => {
+    setQuery("theme=blue");
+    expect(themeFromQueryParam()).toBeUndefined();
+  });
+});
+
+describe("resolvedThemeAtom with a theme query param", () => {
+  it("uses the saved config theme when no param is present", () => {
+    setConfigTheme("dark");
+    setQuery("");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+
+  it("lets the query param override the saved config theme", () => {
+    setConfigTheme("light");
+    setQuery("theme=dark");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+
+  it("falls back to the config theme for an invalid param value", () => {
+    setConfigTheme("dark");
+    setQuery("theme=blue");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+});

package/src/theme/useTheme.ts

@@ -2,6 +2,7 @@
 
 import { atom, useAtomValue } from "jotai";
 import { resolvedMarimoConfigAtom } from "@/core/config/config";
+import { KnownQueryParams } from "@/core/constants";
 import { isIslands } from "@/core/islands/utils";
 import { store } from "@/core/state/jotai";
 
@@ -10,6 +11,16 @@ export type ResolvedTheme = "light" | "dark";
 
 export const THEMES: Theme[] = ["light", "dark", "system"];
 
+function themeFromQueryParam(): Theme | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  const value = new URLSearchParams(window.location.search).get(
+    KnownQueryParams.theme,
+  );
+  return THEMES.includes(value as Theme) ? (value as Theme) : undefined;
+}
+
 const themeAtom = atom((get) => {
   // If it is islands, try a few ways to infer if it is dark mode.
   if (isIslands()) {
@@ -51,7 +62,7 @@ const themeAtom = atom((get) => {
     return "light";
   }
 
-  return get(resolvedMarimoConfigAtom).display.theme;
+  return themeFromQueryParam() ?? get(resolvedMarimoConfigAtom).display.theme;
 });
 
 const prefersDarkModeAtom = atom(false);
@@ -122,3 +133,7 @@ export function useTheme(): { theme: ResolvedTheme } {
   const theme = useAtomValue(resolvedThemeAtom, { store });
   return { theme };
 }
+
+export const visibleForTesting = {
+  themeFromQueryParam,
+};

package/dist/apl-Bdc61P1y.js

@@ -1,4 +0,0 @@
-import { t as apl } from "./apl-BCgCq9iM.js";
-export {
-  apl
-};

package/dist/architecture-7HQA4BMR-Kyc44TmC.js

@@ -1,6 +0,0 @@
-import "./chunk-TCCFYFTB-D58KeXnC.js";
-import "./main-Tj_-QTyF.js";
-import { n as createArchitectureServices, t as ArchitectureModule } from "./chunk-UMXZTB3W-D7uwvNjd.js";
-export {
-  createArchitectureServices
-};

package/dist/asciiarmor-DVRHDGzT.js

@@ -1,4 +0,0 @@
-import { t as asciiArmor } from "./asciiarmor-BtqU-KJQ.js";
-export {
-  asciiArmor
-};

package/dist/asn1-BmuKfkfu.js

@@ -1,4 +0,0 @@
-import { t as asn1 } from "./asn1-Dmb-dTMx.js";
-export {
-  asn1
-};

package/dist/assets/__vite-browser-external-BQCLNwri.js

@@ -1 +0,0 @@
-import{t as e}from"./worker-DAWRHcPq.js";var t=e(((e,t)=>{t.exports={}}));export default t();