@marimo-team/islands 0.23.17-dev3 → 0.23.17-dev30

package/src/core/codemirror/code-lens/extension.ts

@@ -281,12 +281,8 @@ const codeLensTheme = EditorView.baseTheme({
 /**
  * Inline icons linking datasource/bucket variables and `mo.cache` /
  * `mo.persistent_cache` calls to their panels.
- * Gated behind the `editor_code_lens` feature flag.
  */
 export function codeLensBundle(cellId: CellId): Extension {
-  if (!getFeatureFlag("editor_code_lens")) {
-    return [];
-  }
   return [
     codeLensField,
     codeLensHoverField,

package/src/core/codemirror/find-replace/search-highlight.ts

@@ -140,11 +140,16 @@ export const searchHighlighter = ViewPlugin.fromClass(
 );
 
 export const highlightTheme = EditorView.baseTheme({
-  "&light .cm-searchMatch": { backgroundColor: "#99ff7780" },
-  "&dark .cm-searchMatch": { backgroundColor: "#22bb0070" },
+  "&light .cm-searchMatch": {
+    backgroundColor: "var(--cm-search-match-background-light)",
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: "var(--cm-search-match-background-dark)",
+  },
 
   "&light .cm-searchMatch-selected": { backgroundColor: "transparent" },
   "&dark .cm-searchMatch.cm-searchMatch-selected": {
-    backgroundColor: "#6199ff88 !important",
+    backgroundColor:
+      "var(--cm-search-match-selected-background-dark) !important",
   },
 });

package/src/core/codemirror/theme/__tests__/light.test.ts

@@ -1,136 +1,72 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type Tag, tags as t } from "@lezer/highlight";
-import { describe, expect, it } from "vitest";
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, describe, expect, it } from "vitest";
+import { darkTheme } from "../dark";
 import { lightTheme } from "../light";
 
-// Helper function to get theme configuration from the source
-const getThemeConfig = () => ({
-  variant: "light",
-  settings: {
-    background: "#ffffff",
-    foreground: "#000000",
-    caret: "#000000",
-    selection: "#d7d4f0",
-    lineHighlight: "#cceeff44",
-    gutterBackground: "var(--color-background)",
-    gutterForeground: "var(--gray-10)",
-  },
-  styles: [
-    { tag: t.comment, color: "#708090" },
-    { tag: t.variableName, color: "#000000" },
-    { tag: [t.string, t.special(t.brace)], color: "#a11" },
-    { tag: t.number, color: "#164" },
-    { tag: t.bool, color: "#219" },
-    { tag: t.null, color: "#219" },
-    { tag: t.keyword, color: "#708", fontWeight: 500 },
-    { tag: t.className, color: "#00f" },
-    { tag: t.definition(t.typeName), color: "#00f" },
-    { tag: t.typeName, color: "#085" },
-    { tag: t.angleBracket, color: "#000000" },
-    { tag: t.tagName, color: "#170" },
-    { tag: t.attributeName, color: "#00c" },
-    { tag: t.operator, color: "#a2f", fontWeight: 500 },
-    { tag: [t.function(t.variableName)], color: "#00c" },
-    { tag: [t.propertyName], color: "#05a" },
-  ],
-});
-
-describe("lightTheme", () => {
-  it("should export a theme", () => {
-    expect(lightTheme).toBeDefined();
-    expect(typeof lightTheme).toBe("object");
-  });
-
-  describe("theme configuration", () => {
-    const config = getThemeConfig();
-
-    it("should have correct basic settings", () => {
-      expect(config.variant).toBe("light");
-      expect(config.settings).toEqual({
-        background: "#ffffff",
-        foreground: "#000000",
-        caret: "#000000",
-        selection: "#d7d4f0",
-        lineHighlight: "#cceeff44",
-        gutterBackground: "var(--color-background)",
-        gutterForeground: "var(--gray-10)",
-      });
-    });
+const mounted: Array<{ host: HTMLDivElement; view: EditorView }> = [];
 
-    describe("syntax highlighting", () => {
-      const findStyle = (tag: Tag | readonly Tag[]) =>
-        config.styles.find((s) =>
-          Array.isArray(s.tag) ? s.tag.includes(tag as Tag) : s.tag === tag,
-        );
+function mountTheme(extension: Extension) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = host.attachShadow({ mode: "open" });
+  const parent = document.createElement("div");
+  root.append(parent);
+  const view = new EditorView({ extensions: extension, parent, root });
+  mounted.push({ host, view });
 
-      it("should style comments", () => {
-        expect(findStyle(t.comment)).toEqual({
-          tag: t.comment,
-          color: "#708090",
-        });
-      });
+  const style = root.querySelector("style");
+  if (!style) {
+    throw new Error("CodeMirror did not mount its theme styles");
+  }
+  return { css: style.textContent ?? "", view };
+}
 
-      it("should style strings", () => {
-        const style = findStyle(t.string);
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#a11");
-        expect(Array.isArray(style?.tag)).toBe(true);
-        expect(style?.tag).toContain(t.string);
-        expect(style?.tag).toContain(t.special(t.brace));
-      });
-
-      it("should style numbers and boolean values", () => {
-        expect(findStyle(t.number)).toEqual({
-          tag: t.number,
-          color: "#164",
-        });
-        expect(findStyle(t.bool)).toEqual({
-          tag: t.bool,
-          color: "#219",
-        });
-      });
-
-      it("should style keywords with emphasis", () => {
-        expect(findStyle(t.keyword)).toEqual({
-          tag: t.keyword,
-          color: "#708",
-          fontWeight: 500,
-        });
-      });
+afterEach(() => {
+  for (const { host, view } of mounted.splice(0)) {
+    view.destroy();
+    host.remove();
+  }
+});
 
-      it("should style operators with emphasis", () => {
-        expect(findStyle(t.operator)).toEqual({
-          tag: t.operator,
-          color: "#a2f",
-          fontWeight: 500,
-        });
-      });
+const themeCases = [
+  {
+    name: "light",
+    extension: lightTheme,
+    dark: false,
+    selectionAlias: "var(--cm-selection-background-light)",
+    reactiveColor: "var(--cm-reactive-reference-color-light)",
+  },
+  {
+    name: "dark",
+    extension: darkTheme,
+    dark: true,
+    selectionAlias: "var(--cm-selection-background-dark)",
+    reactiveColor: "var(--cm-reactive-reference-color-dark)",
+  },
+] as const;
 
-      it("should style class and type names", () => {
-        expect(findStyle(t.className)).toEqual({
-          tag: t.className,
-          color: "#00f",
-        });
-        expect(findStyle(t.typeName)).toEqual({
-          tag: t.typeName,
-          color: "#085",
-        });
-      });
+describe.each(themeCases)("$name theme", (theme) => {
+  it("uses the production theme tokens", () => {
+    const { css, view } = mountTheme(theme.extension);
 
-      it("should style function names", () => {
-        const style = findStyle(t.function(t.variableName));
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#00c");
-        expect(Array.isArray(style?.tag)).toBe(true);
-      });
+    expect(view.state.facet(EditorView.darkTheme)).toBe(theme.dark);
+    expect(css).toContain(
+      `--cm-selection-background: ${theme.selectionAlias};`,
+    );
+    expect(css).toContain("background-color: var(--cm-selection-background);");
+    expect(css).toContain(`color: ${theme.reactiveColor};`);
+    expect(css).toContain(
+      "border-bottom: 2px solid var(--cm-reactive-reference-border-color);",
+    );
 
-      it("should style property names", () => {
-        const style = findStyle(t.propertyName);
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#05a");
-        expect(Array.isArray(style?.tag)).toBe(true);
-      });
-    });
+    const hoverRule = css
+      .split("\n")
+      .find((rule) => rule.includes(".mo-cm-reactive-reference-hover"));
+    expect(hoverRule).toBeDefined();
+    expect(hoverRule).toContain("cursor: pointer;");
+    expect(hoverRule).not.toContain("border-bottom");
   });
 });

package/src/core/codemirror/theme/dark.ts

@@ -11,7 +11,7 @@ export const darkTheme = [
       background: "var(--cm-background)",
       foreground: "#abb2bf",
       caret: "#528bff",
-      selection: "#3E4451",
+      selection: "var(--cm-selection-background)",
       lineHighlight: "#2c313c",
       gutterBackground: "var(--color-background)",
       gutterForeground: "var(--gray-10)",
@@ -36,15 +36,16 @@ export const darkTheme = [
     ],
   }),
   EditorView.theme({
+    "&": {
+      "--cm-selection-background": "var(--cm-selection-background-dark)",
+    },
     ".mo-cm-reactive-reference": {
       fontWeight: "400",
-      color: "#2a7aa5",
-      borderBottom: "2px solid #bad3de",
+      color: "var(--cm-reactive-reference-color-dark)",
+      borderBottom: "2px solid var(--cm-reactive-reference-border-color)",
     },
     ".mo-cm-reactive-reference-hover": {
       cursor: "pointer",
-      borderBottomWidth: "3px",
-      borderBottomColor: "#4a90a5",
     },
   }),
 ];

package/src/core/codemirror/theme/light.ts

@@ -11,7 +11,7 @@ export const lightTheme = [
       background: "#ffffff",
       foreground: "#000000",
       caret: "#000000",
-      selection: "#d7d4f0",
+      selection: "var(--cm-selection-background)",
       lineHighlight: "#cceeff44",
       gutterBackground: "var(--color-background)",
       gutterForeground: "var(--gray-10)",
@@ -45,14 +45,16 @@ export const lightTheme = [
     ],
   }),
   EditorView.theme({
+    "&": {
+      "--cm-selection-background": "var(--cm-selection-background-light)",
+    },
     ".mo-cm-reactive-reference": {
       fontWeight: "400",
-      color: "#005f87",
-      borderBottom: "2px solid #bad3de",
+      color: "var(--cm-reactive-reference-color-light)",
+      borderBottom: "2px solid var(--cm-reactive-reference-border-color)",
     },
     ".mo-cm-reactive-reference-hover": {
       cursor: "pointer",
-      borderBottomWidth: "3px",
     },
   }),
 ];

package/src/core/config/feature-flag.tsx

@@ -13,7 +13,6 @@ export interface ExperimentalFeatures {
   external_agents: boolean;
   debugger: boolean; // Live frame-watching debugger (gutter breakpoints + pdb)
   line_timing: boolean; // Green active-line highlight + per-line elapsed timer
-  editor_code_lens: boolean; // Inline icons in cell editors linking datasources/buckets/caches to their panels
   // Add new feature flags here
 }
 
@@ -25,7 +24,6 @@ const defaultValues: ExperimentalFeatures = {
   external_agents: import.meta.env.DEV,
   debugger: false,
   line_timing: false,
-  editor_code_lens: import.meta.env.DEV,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(

package/src/core/dom/outline.ts

@@ -63,13 +63,36 @@ function getOutline(html: string): Outline | null {
   return { items };
 }
 
+function toXPathStringLiteral(value: string): string {
+  if (!value.includes('"')) {
+    return `"${value}"`;
+  }
+  if (!value.includes("'")) {
+    return `'${value}'`;
+  }
+
+  const segments = value.split('"');
+  const literals: string[] = [];
+  for (const [index, segment] of segments.entries()) {
+    if (segment) {
+      literals.push(`"${segment}"`);
+    }
+    if (index < segments.length - 1) {
+      literals.push(`'"'`);
+    }
+  }
+  return `concat(${literals.join(", ")})`;
+}
+
 export function headingToIdentifier(heading: Element): OutlineItem["by"] {
   const id = heading.id;
   if (id) {
     return { id };
   }
-  const name = heading.textContent;
-  return { path: `//${heading.tagName}[contains(., "${name}")]` };
+  const name = heading.textContent ?? "";
+  return {
+    path: `//${heading.tagName}[contains(., ${toXPathStringLiteral(name)})]`,
+  };
 }
 
 export function mergeOutlines(outlines: (Outline | null)[]): Outline {

package/src/core/hotkeys/hotkeys.ts

@@ -393,11 +393,13 @@ const DEFAULT_HOT_KEY = {
     name: "Collapse all sections",
     group: "Editing",
     key: "Mod-Shift-\\",
+    additionalKeywords: ["fold", "headers"],
   },
   "global.expandAllSections": {
     name: "Expand all sections",
     group: "Editing",
     key: "Mod-Shift-/",
+    additionalKeywords: ["unfold", "headers"],
   },
   "global.toggleMinimap": {
     name: "Toggle Minimap",

package/src/core/mode.ts

@@ -55,20 +55,22 @@ export async function runDuringPresentMode(
   fn: () => void | Promise<void>,
 ): Promise<void> {
   const state = store.get(viewStateAtom);
-  if (state.mode === "present") {
+  if (state.mode !== "edit") {
     await fn();
     return;
   }
 
   store.set(viewStateAtom, { ...state, mode: "present" });
-  // Wait 100ms to allow the page to render
-  await new Promise((resolve) => setTimeout(resolve, 100));
-  // Wait 2 frames
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-  await fn();
-  store.set(viewStateAtom, { ...state, mode: "edit" });
-  return undefined;
+  try {
+    // Wait 100ms to allow the page to render
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Wait 2 frames
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await fn();
+  } finally {
+    store.set(viewStateAtom, state);
+  }
 }
 
 export const viewStateAtom = atom<ViewState>({

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -84,6 +84,7 @@ describe("createLazyRequests", () => {
           format: "ipynb",
           dependenciesAvailable: false,
           missingPackages: ["nbformat"],
+          missingSetup: [],
         },
       ],
     };

package/src/core/storage/types.ts

@@ -61,5 +61,6 @@ export type KnownStorageProtocol =
   | "http"
   | "file"
   | "gdrive"
+  | "hf"
   | "in-memory"
   | "github";

package/src/css/app/codemirror.css

@@ -1,14 +1,18 @@
 @reference "../globals.css";
 
 .light .cm-selectionBackground {
-  /* This is the background for selected text when focused,
-  but we want to use it when not in focus either because we
-  will often lose focus during find/replace or in another editor */
-  background-color: #d7d4f0 !important;
+  /* Keep drawn selections visible when focus moves to find/replace or another editor. */
+  background-color: var(
+    --cm-selection-background,
+    var(--cm-selection-background-light)
+  ) !important;
 }
 
 .dark .cm-selectionBackground {
-  background-color: #1177cc80 !important;
+  background-color: var(
+    --cm-selection-background,
+    var(--cm-selection-background-dark)
+  ) !important;
 }
 
 .cm-focused.cm-focused {
@@ -125,7 +129,7 @@
 /* -- Codeium -- */
 
 .cm-codeium-cycle {
-  font-size: 9px;
+  font-size: 0.5625rem;
   background-color: var(--sky-3);
   padding: 2px;
   border-radius: 2px;
@@ -133,7 +137,7 @@
 }
 
 .cm-codeium-cycle-key {
-  font-size: 9px;
+  font-size: 0.5625rem;
   font-family: monospace;
   display: inline-block;
   padding: 2px;

package/src/css/globals.css

@@ -107,6 +107,14 @@
     /* Codemirror editor */
     --cm-background: light-dark(var(--background), #282c34);
     --cm-comment: light-dark(#708090, #6b7280);
+    --cm-selection-background-light: #d7d4f0;
+    --cm-selection-background-dark: #1177cc80;
+    --cm-reactive-reference-color-light: #005f87;
+    --cm-reactive-reference-color-dark: #2a7aa5;
+    --cm-reactive-reference-border-color: #bad3de;
+    --cm-search-match-background-light: #99ff7780;
+    --cm-search-match-background-dark: #22bb0070;
+    --cm-search-match-selected-background-dark: #6199ff88;
   }
 
   .dark,

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -49,6 +49,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
     minHeight: "2rem",
   };
 
+  // The slider's width="100%" images resolve against its shadow-DOM wrappers (circular),
+  // so size the images explicitly and letterbox with object-fit to keep them aligned.
+  // Treat empty strings as "not provided" (normalize_dimension passes them through).
+  const imageStyle: React.CSSProperties | undefined =
+    width || height
+      ? {
+          width: width || undefined,
+          height: height || undefined,
+          objectFit: "contain",
+        }
+      : undefined;
+
   // If an image fails to load, the slider collapses to nothing; surface a
   // visible error instead of silently rendering an empty output.
   if (failedSrcs.size > 0) {
@@ -67,12 +79,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
 
   return (
     <div style={containerStyle}>
-      <ImgComparisonSlider value={value} direction={direction}>
+      <ImgComparisonSlider
+        value={value}
+        direction={direction}
+        // inline-block leaves a baseline gap below the slider; align to top.
+        style={{ verticalAlign: "top" }}
+      >
         <img
           slot="first"
           src={beforeSrc}
           alt="Before"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(beforeSrc)}
         />
         <img
@@ -80,6 +98,7 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
           src={afterSrc}
           alt="After"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(afterSrc)}
         />
       </ImgComparisonSlider>

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -68,4 +68,62 @@ describe("ImageComparisonComponent", () => {
     expect(error?.textContent).toContain("…");
     expect(error?.textContent).not.toContain("A".repeat(200));
   });
+
+  it("sizes both images explicitly when dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.height).toBe("300px");
+      // Letterbox identically so the slider's clip stays aligned.
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies a single dimension to both images when only one is given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies height-only sizing to both images", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.height).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("treats empty-string dimensions as not provided", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="" height="" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
+
+  it("leaves images unstyled when no dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      // No explicit sizing: the slider keeps its intrinsic-size behavior.
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
 });