@marimo-team/islands 0.16.4 → 0.17.0

package/src/components/editor/errors/auto-fix.tsx

@@ -1,8 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { useAtomValue, useSetAtom } from "jotai";
-import { WrenchIcon } from "lucide-react";
+import { useAtomValue, useSetAtom, useStore } from "jotai";
+import { ChevronDownIcon, SparklesIcon, WrenchIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { notebookAtom, useCellActions } from "@/core/cells/cells";
@@ -10,8 +16,8 @@ import type { CellId } from "@/core/cells/ids";
 import { aiEnabledAtom } from "@/core/config/config";
 import { getAutoFixes } from "@/core/errors/errors";
 import type { MarimoError } from "@/core/kernel/messages";
-import { store } from "@/core/state/jotai";
 import { cn } from "@/utils/cn";
+import { type FixMode, useFixMode } from "./fix-mode";
 
 export const AutoFixButton = ({
   errors,
@@ -22,6 +28,7 @@ export const AutoFixButton = ({
   cellId: CellId;
   className?: string;
 }) => {
+  const store = useStore();
   const { createNewCell } = useCellActions();
   const aiEnabled = useAtomValue(aiEnabledAtom);
   const autoFixes = errors.flatMap((error) =>
@@ -37,35 +44,134 @@ export const AutoFixButton = ({
   // multiple fixes.
   const firstFix = autoFixes[0];
 
+  const handleFix = (triggerFix: boolean) => {
+    const editorView =
+      store.get(notebookAtom).cellHandles[cellId].current?.editorView;
+    firstFix.onFix({
+      addCodeBelow: (code: string) => {
+        createNewCell({
+          cellId: cellId,
+          autoFocus: false,
+          before: false,
+          code: code,
+        });
+      },
+      editor: editorView,
+      cellId: cellId,
+      aiFix: {
+        setAiCompletionCell,
+        triggerFix,
+      },
+    });
+    // Focus the editor
+    editorView?.focus();
+  };
+
+  return (
+    <div className={cn("my-2", className)}>
+      {firstFix.fixType === "ai" ? (
+        <AIFixButton
+          tooltip={firstFix.description}
+          openPrompt={() => handleFix(false)}
+          applyAutofix={() => handleFix(true)}
+        />
+      ) : (
+        <Tooltip content={firstFix.description} align="start">
+          <Button
+            size="xs"
+            variant="outline"
+            className="font-normal"
+            onClick={() => handleFix(false)}
+          >
+            <WrenchIcon className="h-3 w-3 mr-2" />
+            {firstFix.title}
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+const PromptIcon = SparklesIcon;
+const AutofixIcon = WrenchIcon;
+
+const PromptTitle = "Suggest a prompt";
+const AutofixTitle = "Fix with AI";
+
+export const AIFixButton = ({
+  tooltip,
+  openPrompt,
+  applyAutofix,
+}: {
+  tooltip: string;
+  openPrompt: () => void;
+  applyAutofix: () => void;
+}) => {
+  const { fixMode, setFixMode } = useFixMode();
+
+  return (
+    <div className="flex">
+      <Tooltip content={tooltip} align="start">
+        <Button
+          size="xs"
+          variant="outline"
+          className="font-normal rounded-r-none border-r-0"
+          onClick={fixMode === "prompt" ? openPrompt : applyAutofix}
+        >
+          {fixMode === "prompt" ? (
+            <PromptIcon className="h-3 w-3 mr-2 mb-0.5" />
+          ) : (
+            <AutofixIcon className="h-3 w-3 mr-2 mb-0.5" />
+          )}
+          {fixMode === "prompt" ? PromptTitle : AutofixTitle}
+        </Button>
+      </Tooltip>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild={true}>
+          <Button
+            size="xs"
+            variant="outline"
+            className="rounded-l-none px-2"
+            aria-label="Fix options"
+          >
+            <ChevronDownIcon className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuItem
+            className="flex items-center gap-2"
+            onClick={() => {
+              setFixMode(fixMode === "prompt" ? "autofix" : "prompt");
+            }}
+          >
+            <AiModeItem mode={fixMode === "prompt" ? "autofix" : "prompt"} />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+const AiModeItem = ({ mode }: { mode: FixMode }) => {
+  const icon =
+    mode === "prompt" ? (
+      <PromptIcon className="h-4 w-4" />
+    ) : (
+      <AutofixIcon className="h-4 w-4" />
+    );
+  const title = mode === "prompt" ? PromptTitle : AutofixTitle;
+  const description =
+    mode === "prompt"
+      ? "Edit the prompt before applying"
+      : "Apply AI fixes automatically";
+
   return (
-    <Tooltip content={firstFix.description} align="start">
-      <Button
-        size="xs"
-        variant="outline"
-        className={cn("my-2 font-normal", className)}
-        onClick={() => {
-          const editorView =
-            store.get(notebookAtom).cellHandles[cellId].current?.editorView;
-          firstFix.onFix({
-            addCodeBelow: (code: string) => {
-              createNewCell({
-                cellId: cellId,
-                autoFocus: false,
-                before: false,
-                code: code,
-              });
-            },
-            editor: editorView,
-            cellId: cellId,
-            setAiCompletionCell,
-          });
-          // Focus the editor
-          editorView?.focus();
-        }}
-      >
-        <WrenchIcon className="h-3 w-3 mr-2" />
-        {firstFix.title}
-      </Button>
-    </Tooltip>
+    <div className="flex items-center gap-2">
+      {icon}
+      <div className="flex flex-col">
+        <span className="font-medium">{title}</span>
+        <span className="text-xs text-muted-foreground">{description}</span>
+      </div>
+    </div>
   );
 };

package/src/components/editor/errors/fix-mode.ts

@@ -0,0 +1,15 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+export type FixMode = "prompt" | "autofix";
+
+const BASE_KEY = "marimo:ai-autofix-mode";
+
+const fixModeAtom = atomWithStorage<FixMode>(BASE_KEY, "autofix");
+
+export function useFixMode() {
+  const [fixMode, setFixMode] = useAtom(fixModeAtom);
+  return { fixMode, setFixMode };
+}

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -178,11 +178,6 @@ describe("useCellClipboard", () => {
         "Failed to copy cells to clipboard",
         expect.any(Error),
       );
-      expect(toast).toHaveBeenCalledWith({
-        title: "Copy failed",
-        description: "Failed to copy cells to clipboard.",
-        variant: "danger",
-      });
     });
 
     it("should filter out non-existent cells", async () => {

package/src/components/editor/navigation/clipboard.ts

@@ -5,6 +5,7 @@ import { z } from "zod";
 import { toast } from "@/components/ui/use-toast";
 import { getNotebook, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
 
 // According to MDN, custom mimetypes should start with "web "
@@ -70,7 +71,7 @@ export function useCellClipboard() {
       // Fallback to simple text copy
       try {
         const plainText = cells.map((cell) => cell.code).join("\n\n");
-        await navigator.clipboard.writeText(plainText);
+        await copyToClipboard(plainText);
         toastSuccess(cells.length);
       } catch {
         toastError();

package/src/components/editor/{Cell.tsx → notebook-cell.tsx}

@@ -86,7 +86,7 @@ import {
   useTemporarilyShownCode,
   useTemporarilyShownCodeActions,
 } from "./navigation/state";
-import { OutputArea } from "./Output";
+import { type OnRefactorWithAI, OutputArea } from "./Output";
 import { ConsoleOutput } from "./output/ConsoleOutput";
 import { CellDragHandle, SortableCell } from "./SortableCell";
 
@@ -532,9 +532,15 @@ const EditableCellComponent = ({
       isMarkdownCodeHidden && hasOutput && !navigationProps["data-selected"],
   });
 
-  const handleRefactorWithAI = useEvent((opts: { prompt: string }) => {
-    setAiCompletionCell({ cellId, initialPrompt: opts.prompt });
-  });
+  const handleRefactorWithAI: OnRefactorWithAI = useEvent(
+    (opts: { prompt: string; triggerImmediately: boolean }) => {
+      setAiCompletionCell({
+        cellId,
+        initialPrompt: opts.prompt,
+        triggerImmediately: opts.triggerImmediately,
+      });
+    },
+  );
 
   // TODO(akshayka): Move to our own Tooltip component once it's easier
   // to get the tooltip to show next to the cursor ...
@@ -622,6 +628,7 @@ const EditableCellComponent = ({
                 showHiddenCode={showHiddenCode}
                 languageAdapter={languageAdapter}
                 setLanguageAdapter={setLanguageAdapter}
+                outputArea={cellOutput}
               />
               <CellRightSideActions
                 className={cn(
@@ -1027,9 +1034,15 @@ const SetupCellComponent = ({
     },
   );
 
-  const handleRefactorWithAI = useEvent((opts: { prompt: string }) => {
-    setAiCompletionCell({ cellId, initialPrompt: opts.prompt });
-  });
+  const handleRefactorWithAI: OnRefactorWithAI = useEvent(
+    (opts: { prompt: string; triggerImmediately: boolean }) => {
+      setAiCompletionCell({
+        cellId,
+        initialPrompt: opts.prompt,
+        triggerImmediately: opts.triggerImmediately,
+      });
+    },
+  );
 
   // TODO(akshayka): Move to our own Tooltip component once it's easier
   // to get the tooltip to show next to the cursor ...
@@ -1051,12 +1064,16 @@ const SetupCellComponent = ({
           data-status={cellRuntime.status}
           ref={cellRef}
           {...mergeProps(navigationProps, {
-            className,
+            className: cn(
+              className,
+              "focus:ring-1 focus:ring-(--blue-7) focus:ring-offset-0",
+            ),
             onBlur: closeCompletionHandler,
             onKeyDown: resumeCompletionHandler,
           })}
           {...cellDomProps(cellId, cellData.name)}
           title={renderCellTitle()}
+          tabIndex={-1}
           data-setup-cell={true}
         >
           <div className={cn("tray")} data-hidden={!isCellCodeShown}>

package/src/components/editor/output/ConsoleOutput.tsx

@@ -1,10 +1,11 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { AnsiUp } from "ansi_up";
-import { ChevronRightIcon, CopyIcon, WrapTextIcon } from "lucide-react";
+import { ChevronRightIcon, WrapTextIcon } from "lucide-react";
 import React, { useLayoutEffect } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Input } from "@/components/ui/input";
 import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
@@ -13,13 +14,12 @@ import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { useSelectAllContent } from "@/hooks/useSelectAllContent";
 import { cn } from "@/utils/cn";
-import { copyToClipboard } from "@/utils/copy";
 import { ansiToPlainText, parseHtmlContent } from "@/utils/dom";
 import { invariant } from "@/utils/invariant";
 import { Strings } from "@/utils/strings";
 import { NameCellContentEditable } from "../actions/name-cell-input";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import { OutputRenderer } from "../Output";
+import { type OnRefactorWithAI, OutputRenderer } from "../Output";
 import { useWrapText } from "./useWrapText";
 
 const ansiUp = new AnsiUp();
@@ -31,7 +31,7 @@ interface Props {
   consoleOutputs: WithResponse<OutputMessage>[];
   stale: boolean;
   debuggerActive: boolean;
-  onRefactorWithAI?: (opts: { prompt: string }) => void;
+  onRefactorWithAI?: OnRefactorWithAI;
   onClear?: () => void;
   onSubmitDebugger: (text: string, index: number) => void;
 }
@@ -112,39 +112,33 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
     (output) => output.channel === "stdin",
   );
 
+  const getOutputString = (): string => {
+    const text = consoleOutputs
+      .filter((output) => output.channel !== "pdb")
+      .map((output) => {
+        if (
+          output.mimetype.startsWith("application/vnd.marimo") ||
+          output.mimetype === "text/html"
+        ) {
+          return parseHtmlContent(Strings.asString(output.data));
+        }
+
+        // Convert ANSI to HTML, then parse as HTML
+        return ansiToPlainText(Strings.asString(output.data));
+      })
+      .join("\n");
+    return text;
+  };
+
   return (
     <div className="relative group">
       {hasOutputs && (
         <div className="absolute top-1 right-5 z-10 opacity-0 group-hover:opacity-100 flex gap-1">
-          <Tooltip content="Copy all">
-            <span>
-              <button
-                aria-label="Copy all console output"
-                className="p-1 rounded bg-transparent text-muted-foreground hover:text-foreground"
-                type="button"
-                onClick={() => {
-                  const text = reversedOutputs
-                    .filter((output) => output.channel !== "pdb")
-                    .map((output) => {
-                      // If starts with `<`, then assume it's HTML
-                      if (
-                        typeof output.data === "string" &&
-                        output.data.startsWith("<")
-                      ) {
-                        return parseHtmlContent(output.data);
-                      }
-
-                      // Otherwise, convert the ANSI to HTML, then parse as HTML
-                      return ansiToPlainText(Strings.asString(output.data));
-                    })
-                    .join("\n");
-                  void copyToClipboard(text);
-                }}
-              >
-                <CopyIcon className="h-4 w-4" />
-              </button>
-            </span>
-          </Tooltip>
+          <CopyClipboardIcon
+            tooltip="Copy console output"
+            value={getOutputString}
+            className="h-4 w-4"
+          />
           <Tooltip content={wrapText ? "Disable wrap text" : "Wrap text"}>
             <span>
               <ToggleButton

package/src/components/editor/output/JsonOutput.tsx

@@ -194,6 +194,7 @@ const LEAF_RENDERERS = {
   "video/": (value: string) => <VideoOutput src={value} />,
   "text/html:": (value: string) => <HtmlOutput html={value} inline={true} />,
   "text/plain+float:": (value: string) => <span>{value}</span>,
+  "text/plain+bigint:": (value: string) => <span>{value}</span>,
   "text/plain+set:": (value: string) => <span>set{value}</span>,
   "text/plain+tuple:": (value: string) => <span>{value}</span>,
   "text/plain:": (value: string) => <CollapsibleTextOutput text={value} />,
@@ -351,6 +352,9 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
   if (typeof value === "object") {
     return value;
   }
+  if (typeof value === "bigint") {
+    return `${REPLACE_PREFIX}${value}${REPLACE_SUFFIX}`;
+  }
   if (Array.isArray(value)) {
     return value;
   }
@@ -359,6 +363,11 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
     if (value.startsWith("text/plain+float:")) {
       return `${REPLACE_PREFIX}${leafData(value)}${REPLACE_SUFFIX}`;
     }
+    if (value.startsWith("text/plain+bigint:")) {
+      // Use BigInt to avoid precision loss
+      const number = BigInt(leafData(value));
+      return `${REPLACE_PREFIX}${number}${REPLACE_SUFFIX}`;
+    }
     if (value.startsWith("text/plain+tuple:")) {
       // replace first and last characters [] with ()
       return `${REPLACE_PREFIX}(${leafData(value).slice(1, -1)})${REPLACE_SUFFIX}`;

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -1,10 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import {
-  InfoIcon,
-  NotebookPenIcon,
-  SquareArrowOutUpRightIcon,
-} from "lucide-react";
+import { NotebookPenIcon, SquareArrowOutUpRightIcon } from "lucide-react";
 import { Fragment, type JSX } from "react";
 import {
   Accordion,
@@ -499,37 +495,11 @@ export const MarimoErrorOutput = ({
       messages.push(
         <div key="sql-errors">
           {sqlErrors.map((error, idx) => {
-            const line =
-              error.sql_line == null ? null : Math.trunc(error?.sql_line) + 1;
-            const col =
-              error.sql_col == null ? null : Math.trunc(error?.sql_col) + 1;
             return (
               <div key={`sql-error-${idx}`} className="space-y-2 mt-2">
-                <p className="text-muted-foreground font-medium">{error.msg}</p>
-                {error.hint && (
-                  <div className="flex items-start gap-2">
-                    <InfoIcon
-                      size={11}
-                      className="text-muted-foreground mt-1 flex-shrink-0"
-                    />
-                    <p className="whitespace-pre-wrap text-sm text-muted-foreground">
-                      {error.hint}
-                    </p>
-                  </div>
-                )}
-                {error.sql_statement && (
-                  <pre
-                    lang="sql"
-                    className="text-xs bg-muted/80 rounded whitespace-pre-wrap p-3.5"
-                  >
-                    {error.sql_statement.trim()}
-                  </pre>
-                )}
-                {line !== null && col !== null && (
-                  <p className="text-xs text-muted-foreground">
-                    Error at line {line}, column {col}
-                  </p>
-                )}
+                <p className="text-muted-foreground whitespace-pre-wrap">
+                  {error.msg}
+                </p>
               </div>
             );
           })}

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -3,7 +3,6 @@
 import { type DOMNode, Element, Text } from "html-react-parser";
 import { useAtomValue } from "jotai";
 import {
-  BugIcon,
   BugPlayIcon,
   ChevronDown,
   CopyIcon,
@@ -40,12 +39,14 @@ import {
   getTracebackInfo,
 } from "@/utils/traceback";
 import { cn } from "../../../utils/cn";
+import { AIFixButton } from "../errors/auto-fix";
 import { CellLinkTraceback } from "../links/cell-link";
+import type { OnRefactorWithAI } from "../Output";
 
 interface Props {
   cellId: CellId | undefined;
   traceback: string;
-  onRefactorWithAI?: (opts: { prompt: string }) => void;
+  onRefactorWithAI?: OnRefactorWithAI;
 }
 
 const KEY = "item";
@@ -69,9 +70,10 @@ export const MarimoTracebackOutput = ({
   // Get last traceback info
   const tracebackInfo = extractAllTracebackInfo(traceback)?.at(0);
 
-  const handleRefactorWithAI = () => {
+  const handleRefactorWithAI = (triggerImmediately: boolean) => {
     onRefactorWithAI?.({
       prompt: `My code gives the following error:\n\n${lastTracebackLine}`,
+      triggerImmediately,
     });
   };
 
@@ -103,10 +105,11 @@ export const MarimoTracebackOutput = ({
       </Accordion>
       <div className="flex gap-2">
         {onRefactorWithAI && aiEnabled && (
-          <Button size="xs" variant="outline" onClick={handleRefactorWithAI}>
-            <BugIcon className="h-3 w-3 mr-2" />
-            Fix with AI
-          </Button>
+          <AIFixButton
+            tooltip="Fix with AI"
+            openPrompt={() => handleRefactorWithAI(false)}
+            applyAutofix={() => handleRefactorWithAI(true)}
+          />
         )}
         {tracebackInfo && tracebackInfo.kind === "cell" && !isWasm() && (
           <Tooltip content={"Attach pdb to the exception point."}>

package/src/components/editor/output/__tests__/json-output.test.ts

@@ -218,6 +218,49 @@ describe("getCopyValue", () => {
     `,
     );
   });
+
+  it("should handle bigint", () => {
+    const bigint = String(BigInt(2 ** 64));
+    const value = `text/plain+bigint:${bigint}`;
+    const result = getCopyValue(value);
+    expect(result).toMatchInlineSnapshot(`"18446744073709551616"`);
+
+    const nestedBigInt = {
+      key1: bigint, // this will be just a string
+      key2: `text/plain+bigint:${bigint}`, // this will convert to number
+      key3: true,
+    };
+    const nestedResult = getCopyValue(nestedBigInt);
+    expect(nestedResult).toMatchInlineSnapshot(
+      `
+      "{
+        "key1": "18446744073709551616",
+        "key2": 18446744073709551616,
+        "key3": True
+      }"
+      `,
+    );
+
+    const bigintRaw = BigInt(2 ** 64);
+    const bigintRawResult = getCopyValue(bigintRaw);
+    expect(bigintRawResult).toMatchInlineSnapshot(`"18446744073709551616"`);
+
+    const nestedBigIntRaw = {
+      key1: bigintRaw, // raw number
+      key2: `text/plain+bigint:${bigintRaw}`,
+      key3: true,
+    };
+    const nestedBigIntRawResult = getCopyValue(nestedBigIntRaw);
+    expect(nestedBigIntRawResult).toMatchInlineSnapshot(
+      `
+      "{
+        "key1": 18446744073709551616,
+        "key2": 18446744073709551616,
+        "key3": True
+      }"
+      `,
+    );
+  });
 });
 
 describe("determineMaxDisplayLength", () => {

package/src/components/editor/package-alert.tsx

@@ -463,6 +463,7 @@ const ExtrasSelector: React.FC<ExtrasSelectorProps> = ({
               <button
                 className="hover:bg-muted/50 rounded text-sm px-1 transition-colors border border-muted-foreground/30 hover:border-muted-foreground/60 min-w-0 flex-1 truncate text-left"
                 title={`Selected extras: ${selectedExtras.join(", ")}`}
+                type="button"
               >
                 {selectedExtras.join(",")}
               </button>
@@ -523,6 +524,7 @@ const ExtrasSelector: React.FC<ExtrasSelectorProps> = ({
                 !canSelectExtras && "opacity-50 cursor-not-allowed",
               )}
               title={canSelectExtras ? "Add extras" : "Loading extras..."}
+              type="button"
             >
               <PlusIcon className="w-3 h-3 shrink-0" />
             </button>
@@ -619,6 +621,7 @@ const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
       <button
         onClick={() => setIsExpanded(!isExpanded)}
         className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+        type="button"
       >
         {isExpanded ? (
           <ChevronDownIcon className="w-4 h-4" />

package/src/components/editor/renderers/{CellArray.tsx → cell-array.tsx}

@@ -14,7 +14,7 @@ import {
 } from "lucide-react";
 import { useEffect } from "react";
 import { StartupLogsAlert } from "@/components/editor/alerts/startup-logs-alert";
-import { Cell } from "@/components/editor/Cell";
+import { Cell } from "@/components/editor/notebook-cell";
 import { PackageAlert } from "@/components/editor/package-alert";
 import { SortableCellsProvider } from "@/components/sort/SortableCellsProvider";
 import { Button } from "@/components/ui/button";

package/src/components/forms/__tests__/form-utils.test.ts

@@ -189,18 +189,20 @@ describe("getDefaults", () => {
     const schema = z.object({
       map: z.map(z.string(), z.number()).default(new Map([["a", 1]])),
     });
-    const result = getDefaults(schema) as { map: Map<string, number> };
+    const defaults = getDefaults(schema);
+    const result = defaults as { map: Map<string, number> };
     expect(result.map instanceof Map).toBe(true);
-    expect(Array.from(result.map.entries())).toEqual([["a", 1]]);
+    expect([...result.map.entries()]).toEqual([["a", 1]]);
   });
 
   it("should handle ZodSet with default", () => {
     const schema = z.object({
       set: z.set(z.string()).default(new Set(["a", "b"])),
     });
-    const result = getDefaults(schema) as { set: Set<string> };
+    const defaults = getDefaults(schema);
+    const result = defaults as { set: Set<string> };
     expect(result.set instanceof Set).toBe(true);
-    expect(Array.from(result.set)).toEqual(["a", "b"]);
+    expect([...result.set]).toEqual(["a", "b"]);
   });
 
   it("should handle deeply nested defaults", () => {