@marimo-team/islands 0.23.10-dev5 → 0.23.10-dev51

package/src/components/storage/__tests__/storage-inspector.test.ts

@@ -0,0 +1,53 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import type { StorageEntry } from "@/core/storage/types";
+import { storageEntryKey } from "../storage-inspector";
+
+function makeEntry(
+  overrides: Partial<StorageEntry> & { path: string },
+): StorageEntry {
+  return {
+    kind: overrides.kind ?? "file",
+    lastModified: overrides.lastModified ?? null,
+    metadata: overrides.metadata ?? {},
+    path: overrides.path,
+    size: overrides.size ?? 0,
+  };
+}
+
+describe("storageEntryKey", () => {
+  it("prefers the backend id when present (e.g. Google Drive)", () => {
+    const entry = makeEntry({
+      path: "Data Resume.pdf",
+      metadata: { id: "drive-file-id-123" },
+    });
+    // Two files can share a path on Drive; the id keeps keys unique.
+    expect(storageEntryKey(entry, 0)).toBe("drive-file-id-123");
+    expect(storageEntryKey(entry, 4)).toBe("drive-file-id-123");
+  });
+
+  it("falls back to path + index when there is no id", () => {
+    const entry = makeEntry({ path: "Data Resume.pdf" });
+    expect(storageEntryKey(entry, 0)).toBe("Data Resume.pdf::0");
+    expect(storageEntryKey(entry, 4)).toBe("Data Resume.pdf::4");
+  });
+
+  it("keeps duplicate-path entries unique via the index fallback", () => {
+    const entries = [
+      makeEntry({ path: "Data Resume.pdf" }),
+      makeEntry({ path: "Data Resume.pdf" }),
+      makeEntry({ path: "Data Resume.pdf" }),
+    ];
+    const keys = entries.map((entry, index) => storageEntryKey(entry, index));
+    expect(new Set(keys).size).toBe(entries.length);
+  });
+
+  it("ignores a non-string or empty id", () => {
+    expect(
+      storageEntryKey(makeEntry({ path: "a.pdf", metadata: { id: "" } }), 2),
+    ).toBe("a.pdf::2");
+    expect(
+      storageEntryKey(makeEntry({ path: "a.pdf", metadata: { id: 5 } }), 2),
+    ).toBe("a.pdf::2");
+  });
+});

package/src/components/storage/storage-inspector.tsx

@@ -94,15 +94,31 @@ function displayName(path: string): string {
   return parts[parts.length - 1] || trimmed;
 }
 
+/**
+ * Stable, unique identity for an entry row. Prefer the
+ * backend's stable id when present and fall back to the list index
+ */
+export function storageEntryKey(entry: StorageEntry, index: number): string {
+  const id = entry.metadata?.id;
+  if (typeof id === "string" && id.length > 0) {
+    return id;
+  }
+  return `${entry.path}::${index}`;
+}
+
+interface SearchContext {
+  namespace: string;
+  searchValue: string;
+  entriesByPath: ReadonlyMap<StoragePathKey, StorageEntry[]>;
+}
+
 /**
  * Recursively check whether an entry (or any of its loaded descendants)
  * matches the search query.
  */
 function entryMatchesSearch(
   entry: StorageEntry,
-  namespace: string,
-  searchValue: string,
-  entriesByPath: ReadonlyMap<StoragePathKey, StorageEntry[]>,
+  { namespace, searchValue, entriesByPath }: SearchContext,
 ): boolean {
   const query = searchValue.toLowerCase();
 
@@ -115,7 +131,7 @@ function entryMatchesSearch(
     const children = entriesByPath.get(storagePathKey(namespace, entry.path));
     if (children) {
       return children.some((child) =>
-        entryMatchesSearch(child, namespace, searchValue, entriesByPath),
+        entryMatchesSearch(child, { namespace, searchValue, entriesByPath }),
       );
     }
   }
@@ -129,18 +145,41 @@ function entryMatchesSearch(
  */
 function filterEntries(
   entries: StorageEntry[],
-  namespace: string,
-  searchValue: string,
-  entriesByPath: ReadonlyMap<StoragePathKey, StorageEntry[]>,
+  context: SearchContext,
 ): StorageEntry[] {
-  if (!searchValue.trim()) {
+  if (!context.searchValue.trim()) {
     return entries;
   }
-  return entries.filter((entry) =>
-    entryMatchesSearch(entry, namespace, searchValue, entriesByPath),
-  );
+  return entries.filter((entry) => entryMatchesSearch(entry, context));
 }
 
+const LoadMoreStorageEntries: React.FC<{
+  depth: number;
+  isLoading: boolean;
+  error?: Error;
+  onLoadMore: () => void;
+}> = ({ depth, isLoading, error, onLoadMore }) => {
+  return (
+    <div className="py-px text-xs" style={indentStyle(depth)}>
+      <Button
+        variant="text"
+        size="xs"
+        className="h-6 px-0 hover:text-blue-600"
+        disabled={isLoading}
+        onClick={onLoadMore}
+      >
+        {isLoading && <LoaderCircle className="h-3 w-3 mr-1 animate-spin" />}
+        {isLoading ? "Loading..." : "Load more"}
+      </Button>
+      {error && (
+        <span className="ml-2 text-destructive">
+          Failed to load: {error.message}
+        </span>
+      )}
+    </div>
+  );
+};
+
 /**
  * Lazily loaded children of a directory entry.
  * Caches fetched entries in the Jotai store so re-expanding doesn't re-fetch.
@@ -171,6 +210,10 @@ const StorageEntryChildren: React.FC<{
     entries: children,
     isPending,
     error,
+    hasMore,
+    loadMore,
+    isLoadingMore,
+    loadMoreError,
   } = useStorageEntries(namespace, prefix);
 
   if (isPending) {
@@ -204,35 +247,47 @@ const StorageEntryChildren: React.FC<{
     );
   }
 
-  const filtered = filterEntries(
-    children,
+  const filtered = filterEntries(children, {
     namespace,
     searchValue,
     entriesByPath,
-  );
+  });
 
   return (
     <>
-      {filtered.map((child) => (
-        <StorageEntryRow
-          key={child.path}
-          entry={child}
-          namespace={namespace}
-          protocol={protocol}
-          rootPath={rootPath}
-          backendType={backendType}
+      {filtered.map((child) => {
+        const rowKey = storageEntryKey(child, children.indexOf(child));
+        return (
+          <StorageEntryRow
+            key={rowKey}
+            rowKey={rowKey}
+            entry={child}
+            namespace={namespace}
+            protocol={protocol}
+            rootPath={rootPath}
+            backendType={backendType}
+            depth={depth}
+            locale={locale}
+            searchValue={searchValue}
+            onOpenFile={onOpenFile}
+          />
+        );
+      })}
+      {hasMore && (
+        <LoadMoreStorageEntries
           depth={depth}
-          locale={locale}
-          searchValue={searchValue}
-          onOpenFile={onOpenFile}
+          isLoading={isLoadingMore}
+          error={loadMoreError}
+          onLoadMore={loadMore}
         />
-      ))}
+      )}
     </>
   );
 };
 
 const StorageEntryRow: React.FC<{
   entry: StorageEntry;
+  rowKey: string;
   namespace: string;
   protocol: string;
   rootPath: string;
@@ -243,6 +298,7 @@ const StorageEntryRow: React.FC<{
   onOpenFile: (info: OpenFileInfo) => void;
 }> = ({
   entry,
+  rowKey,
   namespace,
   protocol,
   rootPath,
@@ -271,7 +327,7 @@ const StorageEntryRow: React.FC<{
     !!entriesByPath
       .get(storagePathKey(namespace, entry.path))
       ?.some((child) =>
-        entryMatchesSearch(child, namespace, searchValue, entriesByPath),
+        entryMatchesSearch(child, { namespace, searchValue, entriesByPath }),
       );
 
   // Folder is shown expanded by manual toggle OR by search auto-expand
@@ -312,7 +368,7 @@ const StorageEntryRow: React.FC<{
           isDir && "font-medium",
         )}
         style={indentStyle(depth)}
-        value={`${namespace}:${entry.path}`}
+        value={`${namespace}:${rowKey}`}
         onSelect={() => {
           if (isDir) {
             setIsExpanded(!effectiveExpanded);
@@ -444,6 +500,10 @@ const StorageNamespaceSection: React.FC<{
     entries: fetchedEntries,
     isPending,
     error,
+    hasMore,
+    loadMore,
+    isLoadingMore,
+    loadMoreError,
     refetch,
   } = useStorageEntries(namespaceName);
 
@@ -458,12 +518,11 @@ const StorageNamespaceSection: React.FC<{
 
   // While loading, fall back to initial entries from the namespace notification
   const entries = isPending ? namespace.storageEntries : fetchedEntries;
-  const filtered = filterEntries(
-    entries,
-    namespaceName,
+  const filtered = filterEntries(entries, {
+    namespace: namespaceName,
     searchValue,
     entriesByPath,
-  );
+  });
 
   return (
     <>
@@ -525,20 +584,32 @@ const StorageNamespaceSection: React.FC<{
               No matches
             </div>
           )}
-          {filtered.map((entry) => (
-            <StorageEntryRow
-              key={entry.path}
-              entry={entry}
-              namespace={namespaceName}
-              protocol={namespace.protocol}
-              rootPath={namespace.rootPath}
-              backendType={namespace.backendType}
+          {filtered.map((entry) => {
+            const rowKey = storageEntryKey(entry, entries.indexOf(entry));
+            return (
+              <StorageEntryRow
+                key={rowKey}
+                rowKey={rowKey}
+                entry={entry}
+                namespace={namespaceName}
+                protocol={namespace.protocol}
+                rootPath={namespace.rootPath}
+                backendType={namespace.backendType}
+                depth={1}
+                locale={locale}
+                searchValue={searchValue}
+                onOpenFile={onOpenFile}
+              />
+            );
+          })}
+          {hasMore && (
+            <LoadMoreStorageEntries
               depth={1}
-              locale={locale}
-              searchValue={searchValue}
-              onOpenFile={onOpenFile}
+              isLoading={isLoadingMore}
+              error={loadMoreError}
+              onLoadMore={loadMore}
             />
-          ))}
+          )}
         </>
       )}
     </>

package/src/components/ui/__tests__/use-toast.test.ts

@@ -0,0 +1,75 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { toast, useToast } from "@/components/ui/use-toast";
+
+describe("toast once", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    const { result } = renderHook(() => useToast());
+    act(() => {
+      result.current.dismiss();
+      vi.runAllTimers();
+    });
+    vi.useRealTimers();
+  });
+
+  it("shows a once-toast a single time per session, even after removal", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ id: "static-notebook", once: true, title: "Static notebook" });
+    });
+    expect(result.current.toasts).toHaveLength(1);
+
+    act(() => {
+      result.current.dismiss("static-notebook");
+      vi.advanceTimersByTime(10_000);
+    });
+    expect(result.current.toasts).toHaveLength(0);
+
+    act(() => {
+      toast({ id: "static-notebook", once: true, title: "Static notebook" });
+    });
+    expect(result.current.toasts).toHaveLength(0);
+  });
+
+  it("does not suppress normal (non-once) toasts", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ id: "normal", title: "First" });
+    });
+    act(() => {
+      result.current.dismiss("normal");
+      vi.advanceTimersByTime(10_000);
+    });
+    expect(result.current.toasts).toHaveLength(0);
+
+    act(() => {
+      toast({ id: "normal", title: "First" });
+    });
+    expect(result.current.toasts).toHaveLength(1);
+  });
+
+  it("does not dedupe a once-toast without a stable id", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ once: true, title: "No id" });
+    });
+    act(() => {
+      result.current.dismiss();
+      vi.advanceTimersByTime(10_000);
+    });
+    expect(result.current.toasts).toHaveLength(0);
+
+    act(() => {
+      toast({ once: true, title: "No id" });
+    });
+    expect(result.current.toasts).toHaveLength(1);
+  });
+});

package/src/components/ui/combobox.tsx

@@ -2,7 +2,7 @@
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Check, ChevronDownIcon, XCircle } from "lucide-react";
-import React, { createContext } from "react";
+import React, { createContext, useCallback, useMemo } from "react";
 import { cn } from "../../utils/cn";
 import { Functions } from "../../utils/functions";
 import { Badge } from "./badge";
@@ -40,6 +40,8 @@ interface ComboboxCommonProps<TValue> {
   id?: string;
   keepPopoverOpenOnSelect?: boolean;
   disabled?: boolean;
+  /** Override the trigger contents with a node (e.g. a compact chip summary). */
+  renderValue?: (value: TValue[] | TValue | null) => React.ReactNode;
 }
 
 type ComboboxFilterProps =
@@ -97,6 +99,7 @@ export const Combobox = <TValue,>({
   keepPopoverOpenOnSelect,
   id,
   disabled = false,
+  renderValue,
   ...rest
 }: ComboboxProps<TValue>) => {
   const [open = false, setOpen] = useControllableState({
@@ -112,39 +115,45 @@ export const Combobox = <TValue,>({
     },
   });
 
-  const isSelected = (selectedValue: unknown) => {
-    if (Array.isArray(value)) {
-      return value.includes(selectedValue as TValue);
-    }
-    return value === selectedValue;
-  };
+  const isSelected = useCallback(
+    (selectedValue: unknown) => {
+      if (Array.isArray(value)) {
+        return value.includes(selectedValue as TValue);
+      }
+      return value === selectedValue;
+    },
+    [value],
+  );
 
-  const handleSelect = (selectedValue: unknown) => {
-    let newValue: TValue | TValue[] | null = selectedValue as TValue;
+  const handleSelect = useCallback(
+    (selectedValue: unknown) => {
+      let newValue: TValue | TValue[] | null = selectedValue as TValue;
 
-    if (multiple) {
-      if (Array.isArray(value)) {
-        if (value.includes(newValue)) {
-          const newArr = value.filter((val) => val !== selectedValue);
-          newValue = newArr.length > 0 ? newArr : [];
+      if (multiple) {
+        if (Array.isArray(value)) {
+          if (value.includes(newValue)) {
+            const newArr = value.filter((val) => val !== selectedValue);
+            newValue = newArr.length > 0 ? newArr : [];
+          } else {
+            newValue = [...value, newValue];
+          }
         } else {
-          newValue = [...value, newValue];
+          newValue = [newValue];
         }
-      } else {
-        newValue = [newValue];
+      } else if (value === selectedValue) {
+        newValue = null;
       }
-    } else if (value === selectedValue) {
-      newValue = null;
-    }
 
-    setValue(newValue);
-    const keepOpen = keepPopoverOpenOnSelect ?? multiple;
-    if (!keepOpen) {
-      setOpen(false);
-    }
-  };
+      setValue(newValue);
+      const keepOpen = keepPopoverOpenOnSelect ?? multiple;
+      if (!keepOpen) {
+        setOpen(false);
+      }
+    },
+    [keepPopoverOpenOnSelect, multiple, value, setValue, setOpen],
+  );
 
-  const renderValue = (): string => {
+  const renderValueLabel = (): string => {
     // If we show chips, we don't want to change the placeholder
     if (multiple && chips && placeholder) {
       return placeholder;
@@ -168,6 +177,14 @@ export const Combobox = <TValue,>({
     return placeholder ?? "--";
   };
 
+  const comboboxContextValue: ComboboxContextValue = useMemo(
+    () => ({
+      isSelected,
+      onSelect: handleSelect,
+    }),
+    [isSelected, handleSelect],
+  );
+
   return (
     <div className={cn("relative")} {...rest}>
       <Popover
@@ -191,7 +208,9 @@ export const Combobox = <TValue,>({
             aria-expanded={open}
             aria-disabled={disabled}
           >
-            <span className="truncate flex-1 min-w-0">{renderValue()}</span>
+            <span className="truncate flex-1 min-w-0">
+              {renderValue ? renderValue(value ?? null) : renderValueLabel()}
+            </span>
             <ChevronDownIcon className="ml-3 w-4 h-4 opacity-50 shrink-0" />
           </button>
         </PopoverTrigger>
@@ -209,7 +228,7 @@ export const Combobox = <TValue,>({
             />
             <CommandList className="max-h-60 py-.5">
               <CommandEmpty>{emptyState}</CommandEmpty>
-              <ComboboxContext value={{ isSelected, onSelect: handleSelect }}>
+              <ComboboxContext value={comboboxContextValue}>
                 {children}
               </ComboboxContext>
             </CommandList>
@@ -277,12 +296,14 @@ export const ComboboxItem = React.forwardRef(
         ? value.value
         : String(value);
     const context = React.use(ComboboxContext);
+    const isOptionSelected = context.isSelected(value);
 
     return (
       <CommandItem
         ref={ref}
         className={cn("pl-6 m-1 py-1", className)}
         role="option"
+        aria-selected={isOptionSelected}
         value={valueAsString}
         disabled={disabled}
         onSelect={() => {
@@ -290,9 +311,7 @@ export const ComboboxItem = React.forwardRef(
           onSelect?.(value);
         }}
       >
-        {context.isSelected(value) && (
-          <Check className="absolute left-1 h-4 w-4" />
-        )}
+        {isOptionSelected && <Check className="absolute left-1 h-4 w-4" />}
         {children}
       </CommandItem>
     );

package/src/components/ui/number-field.tsx

@@ -25,7 +25,10 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
 }
 
 export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
-  ({ placeholder, variant = "default", onInputText, ...props }, ref) => {
+  (
+    { placeholder, variant = "default", onInputText, formatOptions, ...props },
+    ref,
+  ) => {
     const { locale } = useLocale();
     return (
       <AriaNumberField
@@ -33,6 +36,7 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
         formatOptions={{
           minimumFractionDigits: 0,
           maximumFractionDigits: maxFractionalDigits(locale),
+          ...formatOptions,
         }}
       >
         <div

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

@@ -57,6 +57,12 @@ export interface ReorderableListProps<T> {
    * Callback when an item is clicked
    */
   onAction?: (item: T) => void;
+  /**
+   * Fired when an item is hovered or focused. Useful for preloading the
+   * resource the item points to before it is activated. Attached to the
+   * focusable list item so it works for both pointer and keyboard users.
+   */
+  onItemPreloadHint?: (item: T) => void;
   /**
    * All available items that can be added to the list
    */
@@ -142,6 +148,7 @@ export const ReorderableList = <T extends object>({
   ariaLabel = "Reorderable list",
   className,
   crossListDrag,
+  onItemPreloadHint,
 }: ReorderableListProps<T>) => {
   const mimeType = crossListDrag
     ? getDragMimeType(crossListDrag.dragType)
@@ -294,6 +301,12 @@ export const ReorderableList = <T extends object>({
           key={getKey(item)}
           id={getKey(item)}
           className="active:cursor-grabbing data-[dragging]:opacity-60 outline-none"
+          onHoverStart={
+            onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
+          }
+          onFocus={
+            onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
+          }
         >
           {renderItem(item)}
         </ListBoxItem>