@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev262

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, { useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
-import { numColumnsAtom } from "@/core/cells/cells";
+import { numColumnsAtom } from "@/core/cells/layout";
 import type { CellId } from "@/core/cells/ids";
 import { kioskModeAtom } from "@/core/mode";
 import type { ICellRendererProps } from "../types";

package/src/components/editor/renderers/vertical-layout/__tests__/useFocusFirstEditor.test.ts

@@ -25,7 +25,7 @@ describe("useFocusFirstEditor", () => {
     const getNotebookSpy = vi
       .spyOn(cellsModule, "getNotebook")
       .mockReturnValue({
-        cellIds: { iterateTopLevelIds: ["cell-1", "cell-2"] },
+        cellIds: ["cell-1", "cell-2"],
         cellData: {
           "cell-1": { config: { hide_code: false } },
           "cell-2": { config: { hide_code: false } },
@@ -52,7 +52,7 @@ describe("useFocusFirstEditor", () => {
     const getNotebookSpy = vi
       .spyOn(cellsModule, "getNotebook")
       .mockReturnValue({
-        cellIds: { iterateTopLevelIds: ["cell-1", "cell-2"] },
+        cellIds: ["cell-1", "cell-2"],
         cellData: {
           "cell-1": { config: { hide_code: true } }, // hidden
           "cell-2": { config: { hide_code: false } }, // visible
@@ -94,7 +94,7 @@ describe("useFocusFirstEditor", () => {
     // Mock getNotebook
     const mockEditor = { focus: vi.fn() };
     vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
-      cellIds: { iterateTopLevelIds: [] },
+      cellIds: [],
       cellData: {},
       cellHandles: {
         "cell-123": { current: { editorView: mockEditor } },
@@ -129,7 +129,7 @@ describe("useFocusFirstEditor", () => {
 
     const mockEditor = { focus: vi.fn() };
     vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
-      cellIds: { iterateTopLevelIds: ["cell-1"] },
+      cellIds: ["cell-1"],
       cellData: {
         "cell-1": { config: { hide_code: false } },
       },

package/src/components/editor/renderers/vertical-layout/sidebar/toggle.tsx

@@ -12,7 +12,13 @@ interface SidebarToggleProps {
 export const SidebarToggle = ({ isOpen, toggle }: SidebarToggleProps) => {
   return (
     <div className="invisible lg:visible absolute top-[12px] right-[16px] z-20">
-      <Button onClick={toggle} className="w-10 h-8" variant="ghost" size="icon">
+      <Button
+        aria-label={isOpen ? "Collapse sidebar" : "Expand sidebar"}
+        onClick={toggle}
+        className="w-10 h-8"
+        variant="ghost"
+        size="icon"
+      >
         <ChevronLeft
           className={cn(
             "h-5 w-5 transition-transform ease-in-out duration-700",

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -52,7 +52,7 @@ function focusFirstEditor() {
   const { cellIds, cellData, cellHandles } = getNotebook();
 
   // Focus on the first cell if it's been mounted and is not hidden
-  for (const cellId of cellIds.iterateTopLevelIds) {
+  for (const cellId of cellIds) {
     const handle = cellHandles[cellId];
     const hidden = cellData[cellId]?.config.hide_code;
     if (!hidden && handle?.current?.editorView) {

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -81,7 +81,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
     getInitialShowCode({ showCodeInRunModePreference, kioskMode }),
   );
 
-  const canShowCode = useNotebookCodeAvailable(cells);
+  const canShowCode = useNotebookCodeAvailable();
 
   const handleToggleShowCode = () => {
     setShowCode((currentShowCode) => {

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

@@ -13,7 +13,7 @@ const hasBlockingStdinAtom = atom((get) => {
   const notebook = get(notebookAtom);
 
   // Check each cell in order
-  for (const cellId of notebook.cellIds.inOrderIds) {
+  for (const cellId of notebook.cellIds) {
     // Check if the cell is idle and has unresolved stdin
     const runtime = notebook.cellRuntime[cellId];
     if (runtime.status === "idle") {

package/src/components/home/components.tsx

@@ -12,7 +12,6 @@ import {
   GraduationCapIcon,
   GridIcon,
   LayoutIcon,
-  LinkIcon,
   MessagesSquareIcon,
   OrbitIcon,
   PackageIcon,
@@ -82,7 +81,12 @@ export const OpenTutorialDropDown: React.FC = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild={true}>
-        <Button data-testid="open-tutorial-button" size="xs" variant="outline">
+        <Button
+          data-testid="open-tutorial-button"
+          size="sm"
+          variant="outline"
+          className="border-border text-(--gray-11) shadow-none hover:border-(--gray-7) hover:bg-(--gray-3)"
+        >
           <GraduationCapIcon className="w-4 h-4 mr-2" />
           Tutorials
           <CaretDownIcon className="w-3 h-3 ml-1" />
@@ -135,7 +139,7 @@ const RESOURCES = [
     url: Constants.githubPage,
   },
   {
-    title: "Community",
+    title: "Discussion",
     description: "Join the marimo Discord community",
     icon: MessagesSquareIcon,
     url: Constants.discordLink,
@@ -162,9 +166,11 @@ const RESOURCES = [
 
 export const ResourceLinks: React.FC = () => {
   return (
-    <div className="flex flex-col gap-2">
-      <Header Icon={LinkIcon}>Resources</Header>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+    <nav
+      aria-label="Resources"
+      className="mt-12 border-t border-border/60 pt-6"
+    >
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-4">
         {RESOURCES.map((resource) => (
           <a
             key={resource.title}
@@ -172,19 +178,15 @@ export const ResourceLinks: React.FC = () => {
             target="_blank"
             rel="noreferrer"
             aria-label={`${resource.title}: ${resource.description}`}
-            className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
+            title={resource.description}
+            className="flex items-center gap-2 rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
           >
-            <resource.icon className="w-5 h-5 mt-1.5 text-primary" />
-            <div>
-              <h3 className="font-medium">{resource.title}</h3>
-              <p className="text-sm text-muted-foreground">
-                {resource.description}
-              </p>
-            </div>
+            <resource.icon className="h-4 w-4" />
+            <span>{resource.title}</span>
           </a>
         ))}
       </div>
-    </div>
+    </nav>
   );
 };
 
@@ -203,19 +205,3 @@ export const TruncatedWorkspaceBanner: React.FC<{
     </Banner>
   );
 };
-
-export const Header: React.FC<{
-  Icon: React.FC<React.SVGProps<SVGSVGElement>>;
-  control?: React.ReactNode;
-  children: React.ReactNode;
-}> = ({ Icon, control, children }) => {
-  return (
-    <div className="flex items-center justify-between gap-2">
-      <h2 className="flex items-center gap-2 text-xl font-semibold text-muted-foreground select-none">
-        <Icon className="h-5 w-5" />
-        {children}
-      </h2>
-      {control}
-    </div>
-  );
-};

package/src/components/icons/__tests__/large-spinner.test.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { Profiler } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { LargeSpinner } from "../large-spinner";
+
+describe("LargeSpinner", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("fades the old title without a second commit before the timer fires", () => {
+    const onRender = vi.fn();
+    const spinner = (title: string) => (
+      <Profiler id="spinner" onRender={onRender}>
+        <LargeSpinner title={title} />
+      </Profiler>
+    );
+    const { rerender } = render(spinner("Starting"));
+    onRender.mockClear();
+
+    rerender(spinner("Loading"));
+    expect(onRender).toHaveBeenCalledOnce();
+    expect(screen.getByText("Starting")).toHaveClass("opacity-0");
+
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.getByText("Loading")).toHaveClass("opacity-100");
+  });
+
+  it("restores visibility if the title changes back during the fade", () => {
+    const { rerender } = render(<LargeSpinner title="Starting" />);
+    rerender(<LargeSpinner title="Loading" />);
+    rerender(<LargeSpinner title="Starting" />);
+
+    expect(screen.getByText("Starting")).toHaveClass("opacity-100");
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+  });
+});

package/src/components/icons/large-spinner.tsx

@@ -1,23 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Loader2Icon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useDebounce } from "@/hooks/useDebounce";
 import { cn } from "@/utils/cn";
 
 export const LargeSpinner = ({ title }: { title?: string }) => {
-  const [currentTitle, setCurrentTitle] = useState(title);
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    if (title !== currentTitle) {
-      setIsVisible(false);
-      const timer = setTimeout(() => {
-        setCurrentTitle(title);
-        setIsVisible(true);
-      }, 300); // Wait for fade out animation to complete
-      return () => clearTimeout(timer);
-    }
-  }, [title, currentTitle]);
+  const currentTitle = useDebounce(title, 300);
+  const isVisible = title === currentTitle;
 
   return (
     <div className="flex flex-col h-full flex-1 items-center justify-center p-4">

package/src/components/icons/spinner.tsx

@@ -25,7 +25,7 @@ const spinnerVariants = cva("animate-spin", {
 const Spinner = React.forwardRef<
   SVGSVGElement,
   React.SVGProps<SVGSVGElement> & VariantProps<typeof spinnerVariants>
->(({ className, children, centered, size, ...props }, ref) => (
+>(({ className, children: _children, centered, size, ...props }, ref) => (
   <Loader2Icon
     ref={ref}
     className={cn(spinnerVariants({ centered, size }), className)}

package/src/components/markdown/markdown-renderer.tsx

@@ -2,8 +2,7 @@
 
 import { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
-import { BetweenHorizontalStartIcon } from "lucide-react";
-import { memo, Suspense, useState } from "react";
+import { createContext, memo, Suspense, useContext, useState } from "react";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import {
   defaultRehypePlugins,
@@ -12,7 +11,7 @@ import {
 } from "streamdown";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
@@ -25,6 +24,8 @@ import "./markdown-renderer.css";
 
 const extensions = [EditorView.lineWrapping];
 
+const NotebookInsertionContext = createContext(true);
+
 interface CodeBlockProps {
   code: string;
   language: string | undefined;
@@ -71,7 +72,7 @@ function maybeTransform(
 }
 
 const InsertCodeBlockButton = ({ code, language }: CodeBlockProps) => {
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
 
@@ -81,27 +82,23 @@ const InsertCodeBlockButton = ({ code, language }: CodeBlockProps) => {
     if (language === "sql") {
       maybeAddMarimoImport({
         autoInstantiate,
-        createNewCell,
+        createCell,
         fromCellId: lastFocusedCellId,
       });
     }
-    createNewCell({
-      code: result.code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-    });
+    createCell({ after: lastFocusedCellId, code: result.code });
   };
 
   return (
     <Button size="xs" variant="outline" onClick={handleInsertCode}>
       Add to Notebook
-      <BetweenHorizontalStartIcon className="ml-2 h-4 w-4" />
     </Button>
   );
 };
 
 const CodeBlock = ({ code, language }: CodeBlockProps) => {
   const { theme } = useTheme();
+  const allowNotebookInsertion = useContext(NotebookInsertionContext);
   const [value, setValue] = useState(code);
 
   if (value !== code) {
@@ -126,11 +123,13 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
           onChange={setValue}
         />
       </Suspense>
-      <div className="flex justify-end mt-2 space-x-2">
+      <div className="flex justify-end mt-3 gap-2">
         <CopyButton size="xs" variant="outline" onClick={handleCopyCode}>
           Copy
         </CopyButton>
-        <InsertCodeBlockButton code={value} language={language} />
+        {allowNotebookInsertion && (
+          <InsertCodeBlockButton code={value} language={language} />
+        )}
       </div>
     </div>
   );
@@ -178,8 +177,10 @@ const COMPONENTS: Components = {
     if (language && typeof children === "string") {
       const code = children.trim();
       return (
-        <div>
-          <div className="text-xs text-muted-foreground pl-1">{language}</div>
+        <div className="my-4">
+          <div className="mb-1 text-xs text-muted-foreground pl-1">
+            {language}
+          </div>
           <CodeBlock code={code} language={language} />
         </div>
       );
@@ -203,17 +204,27 @@ const useMathPlugin = () => {
   return plugins;
 };
 
-export const MarkdownRenderer = memo(({ content }: { content: string }) => {
-  const plugins = useMathPlugin();
-  return (
-    <Streamdown
-      components={COMPONENTS}
-      plugins={plugins}
-      rehypePlugins={REHYPE_PLUGINS}
-      className="mo-markdown-renderer"
-    >
-      {content}
-    </Streamdown>
-  );
-});
+export const MarkdownRenderer = memo(
+  ({
+    content,
+    allowNotebookInsertion = true,
+  }: {
+    content: string;
+    allowNotebookInsertion?: boolean;
+  }) => {
+    const plugins = useMathPlugin();
+    return (
+      <NotebookInsertionContext.Provider value={allowNotebookInsertion}>
+        <Streamdown
+          components={COMPONENTS}
+          plugins={plugins}
+          rehypePlugins={REHYPE_PLUGINS}
+          className="mo-markdown-renderer"
+        >
+          {content}
+        </Streamdown>
+      </NotebookInsertionContext.Provider>
+    );
+  },
+);
 MarkdownRenderer.displayName = "MarkdownRenderer";

package/src/components/mcp/mcp-status-indicator.tsx

@@ -11,7 +11,7 @@ import { useMCPStatus } from "./hooks";
 
 /**
  * MCP Status indicator component
- * Shows a small icon with status color and a popover with detailed information
+ * Shows connection details and highlights states that need attention
  */
 export const MCPStatusIndicator: React.FC = () => {
   const { data: status, refetch, isFetching } = useMCPStatus();
@@ -41,13 +41,17 @@ export const MCPStatusIndicator: React.FC = () => {
     <Popover>
       <Tooltip content="MCP Status">
         <PopoverTrigger asChild={true}>
-          <Button variant="text" size="icon">
+          <Button
+            className="chat-control"
+            aria-label="MCP status"
+            variant="text"
+            size="icon"
+          >
             <PlugIcon
               className={cn(
-                "h-4 w-4",
-                status?.status === "ok" && "text-green-500",
-                status?.status === "partial" && "text-yellow-500",
-                status?.status === "error" && hasServers && "text-red-500",
+                "h-4 w-4 text-muted-foreground",
+                status?.status === "partial" && "text-(--amber-11)",
+                status?.status === "error" && hasServers && "text-destructive",
               )}
             />
           </Button>
@@ -79,7 +83,7 @@ export const MCPStatusIndicator: React.FC = () => {
                 </div>
               )}
               {status.error && (
-                <div className="text-xs text-red-500 bg-red-50 dark:bg-red-950/20 p-2 rounded">
+                <div className="text-xs text-destructive bg-destructive/10 p-2 rounded">
                   {status.error}
                 </div>
               )}
@@ -129,13 +133,13 @@ export const McpStatusText: React.FC<{
     <span
       className={cn(
         "text-xs font-medium",
-        status === "ok" && "text-green-500",
-        status === "partial" && "text-yellow-500",
-        status === "error" && "text-red-500",
-        status === "failed" && "text-red-500",
-        status === "disconnected" && "text-gray-500",
-        status === "pending" && "text-yellow-500",
-        status === "connected" && "text-green-500",
+        status === "ok" && "text-muted-foreground",
+        status === "partial" && "text-(--amber-11)",
+        status === "error" && "text-destructive",
+        status === "failed" && "text-destructive",
+        status === "disconnected" && "text-muted-foreground",
+        status === "pending" && "text-(--amber-11)",
+        status === "connected" && "text-muted-foreground",
       )}
     >
       {status}

package/src/components/pages/__tests__/home-page.test.tsx

@@ -0,0 +1,116 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { CreateNewNotebook } from "../home-page";
+
+function newNotebookKey(link: HTMLElement): string | null {
+  return new URL(
+    link.getAttribute("href") ?? "",
+    window.location.href,
+  ).searchParams.get("file");
+}
+
+function activate(link: HTMLElement, type: string, init: MouseEventInit) {
+  fireEvent(link, new MouseEvent(type, { bubbles: true, ...init }));
+}
+
+describe("CreateNewNotebook", () => {
+  it("links to an untitled notebook", () => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    expect(newNotebookKey(link)).toMatch(/^__new__/);
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+
+  it.each([
+    { label: "click", type: "click", init: { button: 0, detail: 1 } },
+    // Enter on a focused link fires `click` with detail 0
+    { label: "keyboard activation", type: "click", init: { detail: 0 } },
+    // ctrl/cmd-click opens a tab and still fires `click`
+    { label: "ctrl-click", type: "click", init: { ctrlKey: true } },
+    { label: "cmd-click", type: "click", init: { metaKey: true } },
+    // middle-click opens a tab without firing `click`
+    { label: "middle-click", type: "auxclick", init: { button: 1 } },
+    // "Open link in new tab" from the context menu fires no click at all
+    { label: "right-click", type: "contextmenu", init: { button: 2 } },
+  ])("uses a fresh notebook key on every $label", ({ type, init }) => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    const keys = new Set<string | null>([newNotebookKey(link)]);
+    for (let i = 0; i < 2; i++) {
+      activate(link, type, init);
+      keys.add(newNotebookKey(link));
+    }
+
+    expect(keys.size).toBe(3);
+  });
+
+  it("never hands the browser a key that an earlier activation used", () => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    // The browser reads `href` after every listener ran. Record it there.
+    const followed: Array<string | null> = [];
+    const record = () => followed.push(newNotebookKey(link));
+    document.addEventListener("click", record);
+    document.addEventListener("auxclick", record);
+    try {
+      activate(link, "contextmenu", { button: 2 });
+      activate(link, "click", { button: 0 });
+      activate(link, "click", { button: 0 });
+      activate(link, "auxclick", { button: 1 });
+      activate(link, "contextmenu", { button: 2 });
+      activate(link, "click", { button: 0, metaKey: true });
+    } finally {
+      document.removeEventListener("click", record);
+      document.removeEventListener("auxclick", record);
+    }
+
+    expect(followed).toHaveLength(4);
+    expect(new Set(followed).size).toBe(4);
+    for (const key of followed) {
+      expect(key).toMatch(/^__new__s_/);
+    }
+  });
+
+  it("puts a fresh key into the drag payload", () => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+    const before = newNotebookKey(link);
+
+    const payload = new Map<string, string>();
+    const dataTransfer = {
+      setData: (format: string, data: string) => payload.set(format, data),
+    };
+    fireEvent.dragStart(link, { dataTransfer });
+
+    const dragged = new URL(
+      payload.get("text/uri-list") ?? "",
+      window.location.href,
+    ).searchParams.get("file");
+    expect(dragged).toMatch(/^__new__s_/);
+    expect(dragged).not.toBe(before);
+    expect(payload.get("text/plain")).toBe(payload.get("text/uri-list"));
+    // The link itself moves to the dragged key, so a later click rotates again
+    expect(newNotebookKey(link)).toBe(dragged);
+  });
+
+  it("survives a re-render without reusing a key", () => {
+    const { rerender } = render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    const keys = new Set<string | null>([newNotebookKey(link)]);
+    activate(link, "click", { button: 0 });
+    keys.add(newNotebookKey(link));
+    rerender(<CreateNewNotebook />);
+    keys.add(newNotebookKey(link));
+    activate(link, "click", { button: 0 });
+    keys.add(newNotebookKey(link));
+
+    // A re-render keeps the current key; only activations rotate it
+    expect(keys.size).toBe(3);
+  });
+});

package/src/components/pages/edit-page.tsx

@@ -1,15 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { lazy } from "react";
 import type { AppConfig, UserConfig } from "@/core/config/config-schema";
 import { KnownQueryParams } from "@/core/constants";
 import { EditApp } from "@/core/edit-app";
+import { getSessionId } from "@/core/kernel/session";
+import { DocumentProvider } from "@/core/notebook/document";
+import { useNotebookSession } from "@/core/session/useNotebookSession";
 import { AppChrome } from "../editor/chrome/wrapper/app-chrome";
 
-const LazyCommandPalette = lazy(
-  () => import("../editor/controls/command-palette"),
-);
-
 interface Props {
   userConfig: UserConfig;
   appConfig: AppConfig;
@@ -20,21 +18,25 @@ const hideChrome = (() => {
   return url.searchParams.get(KnownQueryParams.showChrome) === "false";
 })();
 
+/** Own the notebook session and provide its document model to the editor and its chrome. */
 const EditPage = (props: Props) => {
-  if (hideChrome) {
-    return (
-      <>
-        <EditApp hideControls={true} {...props} />
-        <LazyCommandPalette />
-      </>
-    );
-  }
+  const { connection, reconnect, documentModel } = useNotebookSession({
+    autoInstantiate: props.userConfig.runtime.auto_instantiate,
+    sessionId: getSessionId(),
+  });
+  const app = (
+    <EditApp
+      {...props}
+      hideControls={hideChrome}
+      connection={connection}
+      reconnect={reconnect}
+    />
+  );
 
   return (
-    <AppChrome>
-      <EditApp {...props} />
-      <LazyCommandPalette />
-    </AppChrome>
+    <DocumentProvider model={documentModel}>
+      {hideChrome ? app : <AppChrome>{app}</AppChrome>}
+    </DocumentProvider>
   );
 };