@marimo-team/islands 0.23.12-dev2 → 0.23.12-dev20

package/src/components/home/components.tsx

@@ -9,7 +9,6 @@ import {
   DatabaseIcon,
   FileIcon,
   FileTextIcon,
-  GithubIcon,
   GraduationCapIcon,
   GridIcon,
   LayoutIcon,
@@ -17,10 +16,11 @@ import {
   MessagesSquareIcon,
   OrbitIcon,
   PackageIcon,
-  YoutubeIcon,
 } from "lucide-react";
 import type React from "react";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
+import { GitHubIcon } from "@/components/icons/github";
+import { YouTubeIcon } from "@/components/icons/youtube";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -130,7 +130,7 @@ const RESOURCES = [
   {
     title: "GitHub",
     description: "View source code, report issues, or contribute",
-    icon: GithubIcon,
+    icon: GitHubIcon,
     url: Constants.githubPage,
   },
   {
@@ -148,7 +148,7 @@ const RESOURCES = [
   {
     title: "YouTube",
     description: "Watch tutorials and demos",
-    icon: YoutubeIcon,
+    icon: YouTubeIcon,
     url: Constants.youtube,
   },
   {

package/src/components/icons/github.tsx

@@ -0,0 +1,21 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { SVGProps } from "react";
+
+// Artwork from Simple Icons (https://simpleicons.org/?q=github), licensed CC0 1.0.
+// The GitHub name and logo are trademarks of GitHub, Inc.
+export const GitHubIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+};

package/src/components/icons/youtube.tsx

@@ -0,0 +1,21 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { SVGProps } from "react";
+
+// Artwork from Simple Icons (https://simpleicons.org/?q=youtube), licensed CC0 1.0.
+// The YouTube name and logo are trademarks of Google LLC.
+export const YouTubeIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+    </svg>
+  );
+};

package/src/components/slides/minimap.tsx

@@ -514,7 +514,7 @@ const SlideThumbnailRow = ({
       tabIndex={0}
       data-cell-id={cell.id}
       className={cn(
-        "relative shrink-0 appearance-none text-left p-0 bg-transparent outline-none",
+        "relative shrink-0 appearance-none text-left p-0 bg-transparent outline-hidden",
         className,
       )}
       style={rowStyle}
@@ -591,7 +591,7 @@ const InsertCellLine = ({
         data-testid="minimap-insert-cell"
         className={cn(
           "absolute left-0 right-0 z-30 flex h-3 items-center justify-center",
-          "opacity-0 transition-opacity hover:opacity-80 focus-visible:opacity-100 focus:outline-none",
+          "opacity-0 transition-opacity hover:opacity-80 focus-visible:opacity-100 focus:outline-hidden",
           position === "below"
             ? "bottom-0 translate-y-1/2"
             : "top-0 -translate-y-1/2",

package/src/components/slides/reveal-component.tsx

@@ -684,7 +684,7 @@ const RevealSlidesComponent = ({
       <div className="group relative" style={{ width, height }}>
         <Deck
           deckRef={deckRef}
-          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-none focus-visible:outline-none"
+          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-hidden focus-visible:outline-hidden"
           config={revealConfig}
           onReady={handleDeckReady}
           onSlideChange={handleSlideChange}

package/src/components/storage/components.tsx

@@ -6,14 +6,10 @@ import AzureIcon from "@marimo-team/llm-info/icons/azure.svg?inline";
 import CloudflareIcon from "@marimo-team/llm-info/icons/cloudflare.svg?inline";
 import CoreweaveIcon from "@marimo-team/llm-info/icons/coreweave.svg?inline";
 import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?inline";
-import {
-  DatabaseZapIcon,
-  GithubIcon,
-  GlobeIcon,
-  HardDriveIcon,
-} from "lucide-react";
+import { DatabaseZapIcon, GlobeIcon, HardDriveIcon } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
+import { GitHubIcon } from "@/components/icons/github";
 import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
@@ -32,7 +28,7 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
   file: HardDriveIcon,
   "in-memory": DatabaseZapIcon,
   gdrive: { src: GoogleDriveIcon },
-  github: GithubIcon,
+  github: GitHubIcon,
 };
 
 export const ProtocolIcon: React.FC<{

package/src/components/ui/alert.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import { cn } from "@/utils/cn";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] has-[svg]:pl-11",
   {
     variants: {
       variant: {

package/src/components/ui/command.tsx

@@ -44,7 +44,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         className="overflow-hidden p-0 shadow-2xl"
         usePortal={true}
       >
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -113,7 +113,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}

package/src/components/ui/reorderable-list.tsx

@@ -300,7 +300,7 @@ export const ReorderableList = <T extends object>({
         <ListBoxItem
           key={getKey(item)}
           id={getKey(item)}
-          className="active:cursor-grabbing data-[dragging]:opacity-60 outline-none"
+          className="active:cursor-grabbing data-dragging:opacity-60 outline-hidden"
           onHoverStart={
             onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
           }

package/src/components/ui/table.tsx

@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0",
       className,
     )}
     {...props}
@@ -89,10 +89,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn(
-      "p-1.5 align-middle [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
+    className={cn("p-1.5 align-middle has-[[role=checkbox]]:pr-0", className)}
     {...props}
   />
 ));

package/src/core/codemirror/go-to-definition/__tests__/commands.test.ts

@@ -253,6 +253,73 @@ a = 10`;
     `);
   });
 
+  test("from-import alias is the binding, not the imported name", async () => {
+    const code = `\
+from math import sin as my_sin
+print(my_sin)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("my_sin");
+    const result = goToVariableDefinition(view, "my_sin", usagePosition);
+
+    expect(result).toBe(true);
+    await tick();
+    // The alias `my_sin` (after `as`) is the real binding.
+    expect(renderEditorView(view)).toMatchInlineSnapshot(`
+      "
+      from math import sin as my_sin
+                              ^
+      print(my_sin)
+      "
+    `);
+  });
+
+  test("module path in from-import is not a local definition", async () => {
+    const code = `\
+from math import sin
+print(math)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("math");
+    // `math` is a module reference in the from-clause, not a binding in this
+    // cell, so the scoped resolver should return false and let the caller fall
+    // through to cross-cell resolution.
+    const result = goToVariableDefinition(view, "math", usagePosition);
+
+    expect(result).toBe(false);
+    expect(view.state.selection.main.head).toBe(0);
+  });
+
+  test("imported name without `as` is a local definition", async () => {
+    const code = `\
+from math import sin
+print(sin)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("sin");
+    const result = goToVariableDefinition(view, "sin", usagePosition);
+
+    expect(result).toBe(true);
+    await tick();
+    expect(renderEditorView(view)).toMatchInlineSnapshot(`
+      "
+      from math import sin
+                       ^
+      print(sin)
+      "
+    `);
+  });
+
+  test("imported name shadowed by `as` is not a binding", async () => {
+    const code = `\
+from math import sin as my_sin
+print(sin)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("sin");
+    // `sin` here refers to nothing in this cell (it was renamed to `my_sin`),
+    // so the scoped resolver should return false.
+    const result = goToVariableDefinition(view, "sin", usagePosition);
+
+    expect(result).toBe(false);
+  });
+
   test("selects outer-scope function declaration", async () => {
     view = createEditor(`\
 def x():

package/src/core/codemirror/go-to-definition/__tests__/utils.test.ts

@@ -133,4 +133,51 @@ output = _x + 10`;
     await tick();
     expect(view.state.selection.main.head).toBe(code.indexOf("_x = 10"));
   });
+
+  test("falls through to cross-cell when in-cell occurrence is only a module path in a from-import", async () => {
+    // Regression: ImportStatement used to register every VariableName child
+    // (the module path and pre-`as` names) as in-cell declarations, so the
+    // local-first short-circuit would steal F12 from cross-cell resolution.
+    const moduleCell = cellId("module-cell");
+    const usageCell = cellId("usage-cell");
+    const moduleCode = `mymodule = 100`;
+    const usageCode = `\
+from mymodule import something
+print(mymodule)`;
+
+    const moduleView = createEditor(moduleCode, moduleCode.length);
+    const usageView = createEditor(
+      usageCode,
+      usageCode.lastIndexOf("mymodule"),
+    );
+    views.push(moduleView, usageView);
+
+    const notebook = initialNotebookState();
+    notebook.cellHandles[moduleCell] = {
+      current: { editorView: moduleView, editorViewOrNull: moduleView },
+    } as never;
+    notebook.cellHandles[usageCell] = {
+      current: { editorView: usageView, editorViewOrNull: usageView },
+    } as never;
+
+    store.set(notebookAtom, notebook);
+    store.set(variablesAtom, {
+      [variableName("mymodule")]: {
+        dataType: "int",
+        declaredBy: [moduleCell],
+        name: variableName("mymodule"),
+        usedBy: [usageCell],
+        value: "100",
+      },
+    });
+
+    const result = goToDefinitionAtCursorPosition(usageView);
+
+    expect(result).toBe(true);
+    await tick();
+    // Cross-cell jump: moduleView's cursor should land on `mymodule = 100`.
+    expect(moduleView.state.selection.main.head).toBe(
+      moduleCode.indexOf("mymodule"),
+    );
+  });
 });

package/src/core/codemirror/go-to-definition/commands.ts

@@ -307,33 +307,52 @@ function collectMatchingDeclarations(
       break;
     }
     case "ImportStatement": {
+      // The grammar emits one ImportStatement for both `import x [as y]` and
+      // `from m import x [as y], ...`. Direct children include the keywords
+      // (`from`/`import`/`as`), commas, dots, and every VariableName from the
+      // module path AND the import list. We only want the names that actually
+      // bind in the current scope: the post-`as` alias if present, otherwise
+      // the imported name itself. Names before `import` (the from-path) and
+      // the original name when an alias follows it are NOT bindings.
       const subCursor = node.cursor();
       subCursor.firstChild();
-      do {
-        if (
-          subCursor.name === "VariableName" &&
-          state.doc.sliceString(subCursor.from, subCursor.to) === variableName
-        ) {
-          addDeclaration(declarations, currentScope, subCursor.from);
+      let pastImport = false;
+      // Buffer the most recent post-`import` VariableName so we can defer
+      // committing it until we know whether `as` follows.
+      let pending: { from: number; matches: boolean } | null = null;
+      const commit = () => {
+        if (pending?.matches) {
+          addDeclaration(declarations, currentScope, pending.from);
         }
-      } while (subCursor.nextSibling());
-      break;
-    }
-    case "ImportFromStatement": {
-      const subCursor = node.cursor();
-      subCursor.firstChild();
-      let foundImport = false;
+        pending = null;
+      };
       do {
         if (subCursor.name === "import") {
-          foundImport = true;
-        } else if (
-          foundImport &&
-          subCursor.name === "VariableName" &&
-          state.doc.sliceString(subCursor.from, subCursor.to) === variableName
-        ) {
-          addDeclaration(declarations, currentScope, subCursor.from);
+          pastImport = true;
+          continue;
+        }
+        if (!pastImport) {
+          continue;
+        }
+        if (subCursor.name === "as") {
+          // Next VariableName is the alias and replaces `pending`.
+          pending = null;
+          continue;
+        }
+        if (subCursor.name === "VariableName") {
+          // Flush any previous pending name (no `as` followed it).
+          commit();
+          pending = {
+            from: subCursor.from,
+            matches:
+              state.doc.sliceString(subCursor.from, subCursor.to) ===
+              variableName,
+          };
+        } else if (subCursor.name === ",") {
+          commit();
         }
       } while (subCursor.nextSibling());
+      commit();
       break;
     }
     case "TryStatement":
@@ -410,23 +429,21 @@ function findScopedDefinitionPosition(
  * @param view The editor view which contains the variable name.
  * @param variableName The name of the variable to select, if found in the editor.
  * @param usagePosition The position of the variable usage, if available.
- * @param fallbackToFirstMatch Whether to fall back to the first matching
- * variable name when no scoped definition is found. Defaults to true.
  */
 export function goToVariableDefinition(
   view: EditorView,
   variableName: string,
   usagePosition?: number,
-  fallbackToFirstMatch = true,
 ): boolean {
   const { state } = view;
-  let from: number | null = null;
-  if (usagePosition !== undefined) {
-    from = findScopedDefinitionPosition(state, variableName, usagePosition);
-  }
-  if (from === null && fallbackToFirstMatch) {
-    from = findFirstMatchingVariable(state, variableName);
-  }
+  // When the caller knows the usage position, trust the scoped lookup. Falling
+  // back to first-match would defeat the local-vs-cross-cell decision in
+  // goToDefinition: if the symbol only appears as a module path in an import,
+  // scoped resolution returns null and we want the caller to try other cells.
+  const from =
+    usagePosition !== undefined
+      ? findScopedDefinitionPosition(state, variableName, usagePosition)
+      : findFirstMatchingVariable(state, variableName);
 
   if (from === null) {
     return false;

package/src/core/codemirror/go-to-definition/utils.ts

@@ -82,7 +82,6 @@ export function goToDefinition(
       view,
       variableName,
       usagePosition,
-      false,
     );
     if (foundLocally) {
       return true;