@marimo-team/islands 0.18.5-dev168 → 0.18.5-dev171

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

@@ -2,7 +2,12 @@
 
 import type React from "react";
 import { useMemo } from "react";
-import { ListBox, ListBoxItem, useDragAndDrop } from "react-aria-components";
+import {
+  type DropItem,
+  ListBox,
+  ListBoxItem,
+  useDragAndDrop,
+} from "react-aria-components";
 import { Logger } from "@/utils/Logger";
 import {
   ContextMenu,
@@ -12,15 +17,37 @@ import {
 } from "./context-menu";
 import "./reorderable-list.css";
 
-export interface ReorderableListProps<T extends { id: string | number }> {
+interface DragData<T> {
+  itemId: string;
+  sourceListId: string;
+  item: T;
+}
+
+function getDragMimeType(dragType: string): string {
+  return `application/x-reorderable-${dragType}`;
+}
+
+function parseDragData<T>(text: string): DragData<T> | null {
+  try {
+    return JSON.parse(text) as DragData<T>;
+  } catch {
+    return null;
+  }
+}
+
+export interface ReorderableListProps<T> {
   /**
-   * The current list of items
+   * The current list of items.
    */
   value: T[];
   /**
    * Callback when items are reordered
    */
   setValue: (items: T[]) => void;
+  /**
+   * Function to get a unique key for each item. Used for drag-drop and rendering.
+   */
+  getKey: (item: T) => string;
   /**
    * Render function for each item.
    * Note: Avoid interactive elements (buttons) inside - they break drag behavior.
@@ -50,49 +77,148 @@ export interface ReorderableListProps<T extends { id: string | number }> {
    * Additional class name for the list container
    */
   className?: string;
+  /**
+   * Configuration for cross-list drag-drop. When set, items can be dragged
+   * between lists that share the same `dragType`.
+   */
+  crossListDrag?: {
+    /** Identifier that links lists together - same dragType = can share items */
+    dragType: string;
+    /** Unique identifier for this list */
+    listId: string;
+    /**
+     * Callback when an item is received from another list.
+     * At this point, setValue has been called with the new item included,
+     * but the parent component may not have re-rendered yet.
+     * Use this to remove the item from the source list and handle any side effects.
+     */
+    onReceive: (item: T, fromListId: string, insertIndex: number) => void;
+  };
 }
 
 /**
- * A generic reorderable list component using react-aria-components and react-stately.
- * Items can be reordered via drag and drop.
+ * A generic reorderable list component using react-aria-components.
+ * Items can be reordered via drag and drop within the list.
+ *
+ * For cross-list drag-drop, set the same `dragType` on multiple lists
+ * and provide an `onReceive` callback to handle items dropped from other lists.
  *
  * @example
  * ```tsx
- * interface MyItem {
- *   id: string;
- *   name: string;
- * }
- *
- * const [items, setItems] = useState<MyItem[]>([...]);
- *
+ * // Single list reordering
  * <ReorderableList
  *   value={items}
  *   setValue={setItems}
+ *   getKey={(item) => item.id}
  *   renderItem={(item) => <div>{item.name}</div>}
- *   ariaLabel="My reorderable list"
+ * />
+ *
+ * // Cross-list drag-drop
+ * <ReorderableList
+ *   value={sidebarItems}
+ *   setValue={setSidebarItems}
+ *   getKey={(item) => item.type}
+ *   renderItem={(item) => <div>{item.name}</div>}
+ *   crossListDrag={{
+ *     dragType: "panels",
+ *     listId: "sidebar",
+ *     onReceive: (item, fromListId) => {
+ *       // Remove from source list
+ *       setOtherItems(prev => prev.filter(i => i.type !== item.type));
+ *     },
+ *   }}
  * />
  * ```
  */
-export const ReorderableList = <T extends { id: string | number }>({
+export const ReorderableList = <T extends object>({
   value,
   setValue,
+  getKey,
   renderItem,
   onAction,
   availableItems,
-  getItemLabel = (item) => String(item.id),
+  getItemLabel,
   minItems = 1,
   ariaLabel = "Reorderable list",
   className,
+  crossListDrag,
 }: ReorderableListProps<T>) => {
+  const mimeType = crossListDrag
+    ? getDragMimeType(crossListDrag.dragType)
+    : null;
+  const onReceive = crossListDrag?.onReceive;
+
+  // Shared handler for cross-list drops
+  const handleCrossListDrop = async (
+    items: DropItem[],
+    insertIndex: number,
+  ) => {
+    if (!mimeType || !crossListDrag?.listId || !onReceive) {
+      return;
+    }
+
+    for (const dragItem of items) {
+      if (dragItem.kind !== "text" || !dragItem.types.has(mimeType)) {
+        continue;
+      }
+
+      const text = await dragItem.getText(mimeType);
+      const data = parseDragData<T>(text);
+      if (!data) {
+        continue;
+      }
+
+      // Only accept drops from different lists
+      if (data.sourceListId === crossListDrag.listId) {
+        continue;
+      }
+
+      // Skip if item already exists in this list
+      if (value.some((item) => getKey(item) === getKey(data.item))) {
+        continue;
+      }
+
+      // Add to this list and notify parent
+      setValue([
+        ...value.slice(0, insertIndex),
+        data.item,
+        ...value.slice(insertIndex),
+      ]);
+      onReceive(data.item, data.sourceListId, insertIndex);
+    }
+  };
+
   const { dragAndDropHooks } = useDragAndDrop<T>({
-    getItems: (keys) => [...keys].map((key) => ({ "text/plain": String(key) })),
+    getItems: (keys) =>
+      [...keys].map((key) => {
+        const item = value.find((i) => getKey(i) === key);
+        const baseData: Record<string, string> = {
+          "text/plain": String(key),
+        };
+
+        // Add cross-list drag data if dragType is set
+        if (mimeType && crossListDrag?.listId && item) {
+          const dragData: DragData<T> = {
+            itemId: String(key),
+            sourceListId: crossListDrag.listId,
+            item,
+          };
+          baseData[mimeType] = JSON.stringify(dragData);
+        }
+
+        return baseData;
+      }),
+
+    // Accept drops from lists with the same dragType
+    acceptedDragTypes: mimeType ? [mimeType, "text/plain"] : ["text/plain"],
+
     onReorder(e) {
       const keySet = new Set(e.keys);
-      const draggedItems = value.filter((item) => keySet.has(item.id));
-      const remaining = value.filter((item) => !keySet.has(item.id));
+      const draggedItems = value.filter((item) => keySet.has(getKey(item)));
+      const remaining = value.filter((item) => !keySet.has(getKey(item)));
 
       const targetIndex = remaining.findIndex(
-        (item) => item.id === e.target.key,
+        (item) => getKey(item) === e.target.key,
       );
       const insertIndex =
         e.target.dropPosition === "before" ? targetIndex : targetIndex + 1;
@@ -103,19 +229,34 @@ export const ReorderableList = <T extends { id: string | number }>({
         ...remaining.slice(insertIndex),
       ]);
     },
+
+    // Handle drops from other lists (on a specific item)
+    async onInsert(e) {
+      const targetIndex = value.findIndex(
+        (item) => getKey(item) === e.target.key,
+      );
+      const insertIndex =
+        e.target.dropPosition === "before" ? targetIndex : targetIndex + 1;
+      await handleCrossListDrop(e.items, insertIndex);
+    },
+
+    // Handle drops on empty list or root
+    async onRootDrop(e) {
+      await handleCrossListDrop(e.items, value.length);
+    },
   });
 
   // Track which items are currently in the list
-  const currentItemIds = useMemo(
-    () => new Set(value.map((item) => item.id)),
-    [value],
+  const currentItemKeys = useMemo(
+    () => new Set(value.map((item) => getKey(item))),
+    [value, getKey],
   );
 
   const handleToggleItem = (item: T, isChecked: boolean) => {
     if (isChecked) {
       setValue([...value, item]);
     } else if (value.length > minItems) {
-      setValue(value.filter((v) => v.id !== item.id));
+      setValue(value.filter((v) => getKey(v) !== getKey(item)));
     }
   };
 
@@ -124,12 +265,12 @@ export const ReorderableList = <T extends { id: string | number }>({
       return;
     }
 
-    const item = value.find((i) => i.id === key);
+    const item = value.find((i) => getKey(i) === key);
 
     if (!item) {
       Logger.warn("handleAction: item not found for key", {
         key,
-        availableIds: value.map((v) => v.id),
+        availableKeys: value.map((v) => getKey(v)),
       });
       return;
     }
@@ -137,19 +278,36 @@ export const ReorderableList = <T extends { id: string | number }>({
     onAction(item);
   };
 
+  // When list is empty, show a drop zone placeholder
+  const isEmpty = value.length === 0;
+
   const listBox = (
     <ListBox
       aria-label={ariaLabel}
       selectionMode="none"
-      items={value}
       dragAndDropHooks={dragAndDropHooks}
       className={className}
       onAction={handleAction}
     >
-      {(item) => (
-        <ListBoxItem className="active:cursor-grabbing data-[dragging]:opacity-60">
+      {value.map((item) => (
+        <ListBoxItem
+          key={getKey(item)}
+          id={getKey(item)}
+          className="active:cursor-grabbing data-[dragging]:opacity-60 outline-none"
+        >
           {renderItem(item)}
         </ListBoxItem>
+      ))}
+      {/*
+       * When the list is empty, render an invisible placeholder item.
+       * This ensures the ListBox maintains minimum dimensions so users can:
+       * 1. Right-click to access the context menu and add items back
+       * 2. Drag items from another list into this empty list
+       */}
+      {isEmpty && (
+        <ListBoxItem id="__empty__" className="min-h-[40px] min-w-[40px]">
+          <span />
+        </ListBoxItem>
       )}
     </ListBox>
   );
@@ -164,19 +322,20 @@ export const ReorderableList = <T extends { id: string | number }>({
       <ContextMenuTrigger asChild={true}>{listBox}</ContextMenuTrigger>
       <ContextMenuContent>
         {availableItems.map((item) => {
-          const isChecked = currentItemIds.has(item.id);
+          const key = getKey(item);
+          const isChecked = currentItemKeys.has(key);
           const isDisabled = isChecked && value.length <= minItems;
 
           return (
             <ContextMenuCheckboxItem
-              key={item.id}
+              key={key}
               checked={isChecked}
               disabled={isDisabled}
               onCheckedChange={(checked) => {
                 handleToggleItem(item, checked);
               }}
             >
-              {getItemLabel(item)}
+              {getItemLabel ? getItemLabel(item) : key}
             </ContextMenuCheckboxItem>
           );
         })}

package/src/core/codemirror/cells/extensions.ts

@@ -7,6 +7,7 @@ import { createTracebackInfoAtom } from "@/core/cells/cells";
 import { type CellId, HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
 import type { KeymapConfig } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
+import { duplicateWithCtrlModifier } from "@/core/hotkeys/shortcuts";
 import { store } from "@/core/state/jotai";
 import { createObservable } from "@/core/state/observable";
 import { formatKeymapExtension } from "../extensions";
@@ -33,8 +34,9 @@ function cellKeymaps({
 }): Extension[] {
   const keybindings: KeyBinding[] = [];
 
+  // Run-related keybindings get Ctrl equivalents on macOS for Jupyter/Colab users
   keybindings.push(
-    {
+    ...duplicateWithCtrlModifier({
       key: hotkeys.getHotkey("cell.run").key,
       preventDefault: true,
       stopPropagation: true,
@@ -43,8 +45,9 @@ function cellKeymaps({
         actions.onRun();
         return true;
       },
-    },
+    }),
     {
+      // Shift-Enter has no Cmd, so no Ctrl equivalent needed
       key: hotkeys.getHotkey("cell.runAndNewBelow").key,
       preventDefault: true,
       stopPropagation: true,
@@ -59,7 +62,7 @@ function cellKeymaps({
         return true;
       },
     },
-    {
+    ...duplicateWithCtrlModifier({
       key: hotkeys.getHotkey("cell.runAndNewAbove").key,
       preventDefault: true,
       stopPropagation: true,
@@ -73,7 +76,7 @@ function cellKeymaps({
         actions.moveToNextCell({ cellId, before: true });
         return true;
       },
-    },
+    }),
     {
       key: hotkeys.getHotkey("cell.aiCompletion").key,
       preventDefault: true,

package/src/core/hotkeys/__tests__/shortcuts.test.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it, vi } from "vitest";
-import { parseShortcut } from "../shortcuts";
+import { duplicateWithCtrlModifier, parseShortcut } from "../shortcuts";
 
 describe("parseShortcut", () => {
   it("should recognize single key shortcuts", () => {
@@ -21,10 +21,14 @@ describe("parseShortcut", () => {
     expect(shortcut(event)).toBe(true);
   });
 
-  it("should recognize combined Cmd key shortcuts", () => {
+  it("should recognize combined Cmd key shortcuts with meta or ctrl", () => {
     const shortcut = parseShortcut("Cmd-a");
-    const event = new KeyboardEvent("keydown", { key: "a", metaKey: true });
-    expect(shortcut(event)).toBe(true);
+    // Cmd should accept both metaKey and ctrlKey (like Mod)
+    const metaEvent = new KeyboardEvent("keydown", { key: "a", metaKey: true });
+    expect(shortcut(metaEvent)).toBe(true);
+
+    const ctrlEvent = new KeyboardEvent("keydown", { key: "a", ctrlKey: true });
+    expect(shortcut(ctrlEvent)).toBe(true);
   });
 
   it("should recognize Arrow key shortcuts", () => {
@@ -164,3 +168,56 @@ describe("parseShortcut", () => {
     expect(parseShortcut("Ctrl+A")(event)).toBe(false);
   });
 });
+
+describe("duplicateWithCtrlModifier", () => {
+  it("should duplicate Cmd binding with Ctrl variant on macOS", () => {
+    // Mock macOS platform
+    vi.spyOn(window.navigator, "platform", "get").mockReturnValue("MacIntel");
+
+    const binding = { key: "Cmd-Enter", run: () => true };
+    const result = duplicateWithCtrlModifier(binding);
+
+    expect(result).toHaveLength(2);
+    expect(result[0].key).toBe("Cmd-Enter");
+    expect(result[1].key).toBe("Ctrl-Enter");
+
+    vi.restoreAllMocks();
+  });
+
+  it("should not duplicate binding without Cmd", () => {
+    vi.spyOn(window.navigator, "platform", "get").mockReturnValue("MacIntel");
+
+    const binding = { key: "Shift-Enter", run: () => true };
+    const result = duplicateWithCtrlModifier(binding);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].key).toBe("Shift-Enter");
+
+    vi.restoreAllMocks();
+  });
+
+  it("should not duplicate Cmd-Ctrl binding to avoid Ctrl-Ctrl", () => {
+    vi.spyOn(window.navigator, "platform", "get").mockReturnValue("MacIntel");
+
+    const binding = { key: "Cmd-Ctrl-Enter", run: () => true };
+    const result = duplicateWithCtrlModifier(binding);
+
+    // Should NOT create a Ctrl-Ctrl-Enter variant
+    expect(result).toHaveLength(1);
+    expect(result[0].key).toBe("Cmd-Ctrl-Enter");
+
+    vi.restoreAllMocks();
+  });
+
+  it("should not duplicate on non-macOS platforms", () => {
+    vi.spyOn(window.navigator, "platform", "get").mockReturnValue("Win32");
+
+    const binding = { key: "Cmd-Enter", run: () => true };
+    const result = duplicateWithCtrlModifier(binding);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].key).toBe("Cmd-Enter");
+
+    vi.restoreAllMocks();
+  });
+});

package/src/core/hotkeys/shortcuts.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { KeyBinding } from "@codemirror/view";
 import { Logger } from "@/utils/Logger";
 import { NOT_SET } from "./hotkeys";
 
@@ -106,8 +107,8 @@ function areKeysPressed(keys: string[], e: IKeyboardEvent): boolean {
 function normalizeKey(key: string): string {
   const specialKeys: { [key: string]: string } = {
     control: "ctrl",
-    command: "meta",
-    cmd: "meta",
+    command: "mod",
+    cmd: "mod",
     option: "alt",
     return: "enter",
   };
@@ -144,3 +145,34 @@ export function resolvePlatform(): Platform {
   }
   return "linux";
 }
+
+/**
+ * On macOS, duplicate a Cmd-based keybinding to also work with Ctrl.
+ * This allows users coming from Jupyter/Colab to use Ctrl-Enter to run cells.
+ *
+ * Returns an array with the original binding, plus a Ctrl variant on macOS.
+ * For use with CodeMirror keymap bindings.
+ *
+ * Design decision: User-defined Cmd shortcuts also get Ctrl equivalents.
+ * The edge case is if a user wants `Cmd+<x>` and `Ctrl+<x>` to trigger
+ * different actions, this isn't currently supported. Given the relatively
+ * small number of keymaps, we're keeping this simple. If it becomes an issue,
+ * we can refactor to resolve a special "Mod" key internally and require users
+ * to specify explicit single-key mappings.
+ *
+ * Note: If the binding already contains Ctrl (e.g., Cmd-Ctrl-Enter),
+ * no duplication is done to avoid producing invalid Ctrl-Ctrl-key combos.
+ */
+export function duplicateWithCtrlModifier<T extends KeyBinding>(
+  binding: T,
+): T[] {
+  // Skip if not macOS, not a Cmd binding, or already has Ctrl
+  if (
+    !isPlatformMac() ||
+    !binding.key?.includes("Cmd") ||
+    binding.key.includes("Ctrl")
+  ) {
+    return [binding];
+  }
+  return [binding, { ...binding, key: binding.key.replaceAll("Cmd", "Ctrl") }];
+}