@marimo-team/islands 0.21.1-dev94 → 0.21.2-dev0

package/src/core/codemirror/reactive-references/__tests__/analyzer.test.ts

@@ -1115,6 +1115,60 @@ class Foo:
     `);
   });
 
+  test("should not highlight attribute access matching a for-loop variable", () => {
+    // When `tool` is used as a for-loop variable, `mcp.tool` (attribute access)
+    // should NOT have `tool` highlighted — it's a property, not a variable reference.
+    expect(
+      runHighlight(
+        ["mcp", "client"],
+        `
+@mcp.tool
+def roll_dice():
+    pass
+
+async with client:
+    for tool in await client.list_tools():
+        print(tool)
+`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @mcp.tool
+       ^^^
+      def roll_dice():
+          pass
+
+      async with client:
+                 ^^^^^^
+          for tool in await client.list_tools():
+                            ^^^^^^
+              print(tool)
+      "
+    `);
+  });
+
+  test("should not highlight property name matching a global variable", () => {
+    // `tool` is a global variable, but `mcp.tool` should not highlight `tool`
+    // because it's a property access, not a variable reference.
+    expect(
+      runHighlight(
+        ["mcp", "tool"],
+        `
+@mcp.tool
+def roll_dice():
+    pass
+`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @mcp.tool
+       ^^^
+      def roll_dice():
+          pass
+      "
+    `);
+  });
+
   test("class property self-reference", () => {
     expect(
       runHighlight(

package/src/core/codemirror/reactive-references/analyzer.ts

@@ -462,6 +462,7 @@ export function findReactiveVariables(options: {
   ): boolean {
     return (
       allVariableNames.has(varName) &&
+      !isPropertyAccess(cursor) &&
       !isKeywordArgumentName(cursor) &&
       !isAssignmentTarget(cursor)
     );
@@ -529,6 +530,19 @@ function isAssignmentTarget(cursor: TreeCursor): boolean {
   return false;
 }
 
+/** Checks whether a `VariableName` is a property access (e.g. `tool` in `mcp.tool`). */
+function isPropertyAccess(cursor: TreeCursor): boolean {
+  // Check if the previous sibling is a "." node, which means this
+  // VariableName is a property access rather than a standalone variable.
+  // This handles both MemberExpression (e.g. `obj.attr`) and Decorator
+  // (e.g. `@mcp.tool`) where the parser emits flat sibling nodes.
+  const temp = cursor.node.cursor();
+  if (temp.prevSibling() && temp.name === ".") {
+    return true;
+  }
+  return false;
+}
+
 /**
  * Checks if the syntax tree contains any syntax errors.
  * If there are errors, we shouldn't show reactive variable highlighting.

package/src/core/dom/outline.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { sanitizeHtml } from "@/plugins/core/sanitize";
+import { sanitizeHtml } from "@/plugins/core/sanitize-html";
 import { invariant } from "@/utils/invariant";
 import { Logger } from "@/utils/Logger";
 import type { Outline, OutlineItem } from "../cells/outline";

package/src/core/hotkeys/hotkeys.ts

@@ -142,6 +142,14 @@ const DEFAULT_HOT_KEY = {
     group: "Editing",
     key: "Mod-Shift-m",
   },
+  "cell.viewAsSQL": {
+    name: "Toggle SQL",
+    group: "Editing",
+    key: {
+      windows: "Alt-Shift-l",
+      main: "Mod-Shift-l",
+    },
+  },
   "cell.complete": {
     name: "Code completion",
     group: "Editing",

package/src/css/md.css

@@ -41,6 +41,10 @@
   font-family: var(--heading-font);
 }
 
+.markdown hr {
+  margin-block: 0.5rem;
+}
+
 .markdown a {
   cursor: pointer;
   text-decoration: inherit;

package/src/plugins/core/sanitize-html.ts

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import DOMPurify, { type Config } from "dompurify";
+
+// preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
+const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
+DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
+  if (node.tagName === "A") {
+    if (!node.hasAttribute("target")) {
+      node.setAttribute("target", "_self");
+    }
+
+    if (node.hasAttribute("target")) {
+      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
+    }
+  }
+});
+
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
+    node.removeAttribute(TEMPORARY_ATTRIBUTE);
+    if (node.getAttribute("target") === "_blank") {
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+});
+
+/**
+ * This removes script tags, form tags, iframe tags, and other potentially dangerous tags
+ */
+export function sanitizeHtml(html: string) {
+  const sanitizationOptions: Config = {
+    // Default to permit HTML, SVG and MathML, this limits to HTML only
+    USE_PROFILES: { html: true, svg: true, mathMl: true },
+    // Allow SVG <use> elements and their href attributes, which are needed
+    // for SVGs that reference <defs> (e.g., Matplotlib SVG output).
+    ADD_TAGS: ["use"],
+    ADD_ATTR: ["href", "xlink:href"],
+    // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
+    FORCE_BODY: true,
+    CUSTOM_ELEMENT_HANDLING: {
+      tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
+      attributeNameCheck: /^[A-Za-z][\w-]*$/,
+    },
+    // This flag means we should sanitize such that is it safe for XML,
+    // but this is only used for HTML content.
+    SAFE_FOR_XML: !html.includes("marimo-mermaid"),
+  };
+  return DOMPurify.sanitize(html, sanitizationOptions);
+}

package/src/plugins/core/sanitize.ts

@@ -1,10 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import DOMPurify, { type Config } from "dompurify";
 import { atom, useAtomValue } from "jotai";
 import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
 import { autoInstantiateAtom } from "@/core/config/config";
 import { getInitialAppMode } from "@/core/mode";
 
+// Re-export so existing consumers don't break.
+export { sanitizeHtml } from "./sanitize-html";
+
 /**
  * Whether to sanitize the html.
  * When running as an app or with auto_instantiate enabled
@@ -42,51 +44,3 @@ const sanitizeHtmlAtom = atom<boolean>((get) => {
 export function useSanitizeHtml() {
   return useAtomValue(sanitizeHtmlAtom);
 }
-
-// preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
-const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
-DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    if (!node.hasAttribute("target")) {
-      node.setAttribute("target", "_self");
-    }
-
-    if (node.hasAttribute("target")) {
-      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
-    }
-  }
-});
-
-DOMPurify.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute("target") === "_blank") {
-      node.setAttribute("rel", "noopener noreferrer");
-    }
-  }
-});
-
-/**
- * This removes script tags, form tags, iframe tags, and other potentially dangerous tags
- */
-export function sanitizeHtml(html: string) {
-  const sanitizationOptions: Config = {
-    // Default to permit HTML, SVG and MathML, this limits to HTML only
-    USE_PROFILES: { html: true, svg: true, mathMl: true },
-    // Allow SVG <use> elements and their href attributes, which are needed
-    // for SVGs that reference <defs> (e.g., Matplotlib SVG output).
-    ADD_TAGS: ["use"],
-    ADD_ATTR: ["href", "xlink:href"],
-    // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
-    FORCE_BODY: true,
-    CUSTOM_ELEMENT_HANDLING: {
-      tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
-      attributeNameCheck: /^[A-Za-z][\w-]*$/,
-    },
-    // This flag means we should sanitize such that is it safe for XML,
-    // but this is only used for HTML content.
-    SAFE_FOR_XML: !html.includes("marimo-mermaid"),
-  };
-  return DOMPurify.sanitize(html, sanitizationOptions);
-}

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -17,6 +17,7 @@ import { cn } from "@/utils/cn";
 import { Objects } from "@/utils/objects";
 import { ErrorBanner } from "../common/error-banner";
 import { vegaLoadData } from "../vega/loader";
+import { getContainerWidth } from "../vega/utils";
 import { ColumnSummary } from "./components/column-summary";
 import { QueryForm } from "./components/query-form";
 import type { SpecificEncoding } from "./encoding";
@@ -140,16 +141,18 @@ export const DataExplorerComponent = ({
     const responsiveSpec = makeResponsive(spec);
     // TODO: We can optimize by updating the data dynamically. https://github.com/vega/react-vega?tab=readme-ov-file#recipes
     const augmentedSpec = augmentSpecWithData(responsiveSpec, chartData);
-    const isContainerWidth = responsiveSpec.width === "container";
 
     return (
       <div
         className={cn(
           "flex overflow-y-auto justify-center items-center flex-1 w-[90%]",
-          isContainerWidth && "vega-container-width",
         )}
       >
-        <VegaEmbed spec={augmentedSpec} options={chartOptions(theme)} />
+        <VegaEmbed
+          data-container-width={getContainerWidth(augmentedSpec)}
+          spec={augmentedSpec}
+          options={chartOptions(theme)}
+        />
       </div>
     );
   };

package/src/plugins/impl/vega/__tests__/utils.test.ts

@@ -0,0 +1,36 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { getContainerWidth } from "../utils";
+
+describe("getContainerWidth", () => {
+  it('should return "container" when spec width is "container"', () => {
+    expect(getContainerWidth({ width: "container" })).toBe("container");
+  });
+
+  it("should return a numeric width", () => {
+    expect(getContainerWidth({ width: 500 })).toBe(500);
+  });
+
+  it("should return undefined when spec has no width", () => {
+    expect(getContainerWidth({ height: 300 })).toBeUndefined();
+  });
+
+  it("should return undefined for null", () => {
+    expect(getContainerWidth(null)).toBeUndefined();
+  });
+
+  it("should return undefined for undefined", () => {
+    expect(getContainerWidth(undefined)).toBeUndefined();
+  });
+
+  it("should return undefined for non-object values", () => {
+    expect(getContainerWidth("string")).toBeUndefined();
+    expect(getContainerWidth(42)).toBeUndefined();
+    expect(getContainerWidth(true)).toBeUndefined();
+  });
+
+  it("should return undefined when width is explicitly undefined", () => {
+    expect(getContainerWidth({ width: undefined })).toBeUndefined();
+  });
+});

package/src/plugins/impl/vega/utils.ts

@@ -3,6 +3,20 @@
 import { Objects } from "@/utils/objects";
 import type { DataType, FieldTypes, VegaDataType } from "./vega-loader";
 
+export type ContainerWidth = number | "container";
+
+/**
+ * Get the container width from a VegaLite spec.
+ * @param spec - The VegaLite spec.
+ * @returns The container width.
+ */
+export function getContainerWidth(spec: unknown): ContainerWidth | undefined {
+  if (typeof spec === "object" && spec !== null && "width" in spec) {
+    return spec.width as ContainerWidth | undefined;
+  }
+  return undefined;
+}
+
 export function mergeAsArrays<T>(
   left: T | T[] | undefined,
   right: T | T[] | undefined,

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 { getContainerWidth } from "./utils";
 
 // register arrow reader under type 'arrow'
 formats("arrow", arrow);
@@ -305,16 +306,14 @@ const LoadedVegaComponent = ({
         </Alert>
       )}
       <div
-        className={cn(
-          "relative",
-          "width" in selectableSpec &&
-            selectableSpec.width === "container" &&
-            "vega-container-width",
-        )}
+        className={cn("relative")}
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >
-        <div ref={vegaRef} />
+        <div
+          ref={vegaRef}
+          data-container-width={getContainerWidth(selectableSpec)}
+        />
         {renderHelpContent()}
       </div>
     </>

package/src/plugins/impl/vega/vega.css

@@ -4,7 +4,7 @@
   max-width: 100%;
 }
 
-.vega-container-width .vega-embed {
+.vega-embed[data-container-width="container"] {
   width: 100%;
 }