@marimo-team/frontend 0.19.3-dev4 → 0.19.3-dev42

package/src/core/network/requests-lazy.ts

@@ -1,4 +1,4 @@
-/* Copyright 2024 Marimo. All rights reserved. */
+/* Copyright 2026 Marimo. All rights reserved. */
 
 import { NoKernelConnectedError } from "@/utils/errors";
 import { Logger } from "@/utils/Logger";
@@ -67,6 +67,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   autoExportAsHTML: "waitForConnectionOpen",
   autoExportAsMarkdown: "waitForConnectionOpen",
   autoExportAsIPYNB: "waitForConnectionOpen",
+  updateCellOutputs: "waitForConnectionOpen",
 
   // Sidebar operations that wait for connection
   listSecretKeys: "throwError",
@@ -152,7 +153,7 @@ export function createLazyRequests(
             `Dropping request: ${key}, since not connected to a kernel.`,
           );
           // Silently drop the request
-          return Promise.resolve();
+          return;
 
         case "throwError":
           throw new NoKernelConnectedError();

package/src/core/network/requests-network.ts

@@ -2,9 +2,8 @@
 
 import { once } from "lodash-es";
 import { getRuntimeManager } from "../runtime/config";
-import { store } from "../state/jotai";
 import { API, createClientWithRuntimeManager } from "./api";
-import { isConnectedAtom, waitForConnectionOpen } from "./connection";
+import { waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
 const { handleResponse, handleResponseReturnNull } = API;
@@ -105,11 +104,7 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         .then(handleResponseReturnNull);
     },
     sendRun: async (request) => {
-      // Rather than waiting, we just drop all sendRun requests if the connection is not open.
-      // Otherwise we can get into a weird state of sending requests for cells that no longer exist.
-      if (!store.get(isConnectedAtom)) {
-        return null;
-      }
+      await waitForConnectionOpen();
       return getClient()
         .POST("/api/kernel/run", {
           body: request,
@@ -410,6 +405,14 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
+    updateCellOutputs: async (request) => {
+      return getClient()
+        .POST("/api/export/update_cell_outputs", {
+          body: request,
+          params: getParams(),
+        })
+        .then(handleResponseReturnNull);
+    },
     addPackage: (request) => {
       return getClient()
         .POST("/api/packages/add", {

package/src/core/network/requests-static.ts

@@ -79,6 +79,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     autoExportAsHTML: throwNotInEditMode,
     autoExportAsMarkdown: throwNotInEditMode,
     autoExportAsIPYNB: throwNotInEditMode,
+    updateCellOutputs: throwNotInEditMode,
     addPackage: throwNotInEditMode,
     removePackage: throwNotInEditMode,
     getPackageList: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -64,6 +64,7 @@ export function createErrorToastingRequests(
     autoExportAsHTML: "", // No toast
     autoExportAsMarkdown: "", // No toast
     autoExportAsIPYNB: "", // No toast
+    updateCellOutputs: "", // No toast
     addPackage: "Failed to add package",
     removePackage: "Failed to remove package",
     getPackageList: "Failed to get package list",

package/src/core/network/types.ts

@@ -21,6 +21,7 @@ export type ExportAsHTMLRequest = schemas["ExportAsHTMLRequest"];
 export type ExportAsMarkdownRequest = schemas["ExportAsMarkdownRequest"];
 export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
+export type UpdateCellOutputsRequest = schemas["UpdateCellOutputsRequest"];
 export type FileCreateRequest = schemas["FileCreateRequest"];
 export type FileCreateResponse = schemas["FileCreateResponse"];
 export type FileDeleteRequest = schemas["FileDeleteRequest"];
@@ -175,6 +176,7 @@ export interface EditRequests {
   autoExportAsHTML: (request: ExportAsHTMLRequest) => Promise<null>;
   autoExportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<null>;
   autoExportAsIPYNB: (request: ExportAsIPYNBRequest) => Promise<null>;
+  updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>;
   // Package requests
   getPackageList: () => Promise<ListPackagesResponse>;
   getDependencyTree: () => Promise<DependencyTreeResponse>;

package/src/core/wasm/bridge.ts

@@ -589,6 +589,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   autoExportAsHTML = throwNotImplemented;
   autoExportAsMarkdown = throwNotImplemented;
   autoExportAsIPYNB = throwNotImplemented;
+  updateCellOutputs = throwNotImplemented;
   writeSecret = throwNotImplemented;
   invokeAiTool = throwNotImplemented;
   clearCache = throwNotImplemented;

package/src/core/websocket/types.ts

@@ -16,6 +16,7 @@ export const WebSocketClosedReason = {
   KERNEL_DISCONNECTED: "KERNEL_DISCONNECTED",
   ALREADY_RUNNING: "ALREADY_RUNNING",
   MALFORMED_QUERY: "MALFORMED_QUERY",
+  KERNEL_STARTUP_ERROR: "KERNEL_STARTUP_ERROR",
 } as const;
 
 export type WebSocketClosedReason =

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -40,7 +40,7 @@ import {
 } from "../datasets/request-registry";
 import { useDatasetsActions } from "../datasets/state";
 import { UI_ELEMENT_REGISTRY } from "../dom/uiregistry";
-import { useBannersActions } from "../errors/state";
+import { kernelStartupErrorAtom, useBannersActions } from "../errors/state";
 import { FUNCTIONS_REGISTRY } from "../functions/FunctionRegistry";
 import {
   handleCellNotificationeration,
@@ -105,6 +105,7 @@ export function useMarimoKernelConnection(opts: {
   const setCapabilities = useSetAtom(capabilitiesAtom);
   const runtimeManager = useRuntimeManager();
   const setCacheInfo = useSetAtom(cacheInfoAtom);
+  const setKernelStartupError = useSetAtom(kernelStartupErrorAtom);
 
   const handleMessage = (e: MessageEvent<JsonString<NotificationPayload>>) => {
     const msg = jsonParseWithSpecialChar(e.data);
@@ -134,6 +135,11 @@ export function useMarimoKernelConnection(opts: {
       case "interrupted":
         return;
 
+      case "kernel-startup-error":
+        // Full error received via message before websocket close
+        setKernelStartupError(msg.data.error);
+        return;
+
       case "send-ui-element-message": {
         const modelId = msg.data.model_id;
         const uiElement = msg.data.ui_element;
@@ -413,6 +419,17 @@ export function useMarimoKernelConnection(opts: {
           return;
 
         default:
+          // Check for kernel startup error (full error already received via message)
+          if (e.reason === "MARIMO_KERNEL_STARTUP_ERROR") {
+            setConnection({
+              state: WebSocketState.CLOSED,
+              code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+              reason: "Failed to start kernel sandbox",
+            });
+            ws.close(); // prevent reconnecting
+            return;
+          }
+
           // Session should be valid
           // - browser tab might have been closed or re-opened
           // - computer might have just woken from sleep

package/src/css/globals.css

@@ -184,8 +184,10 @@
   --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);
 
   /* Solid shadows with lighter shade color */
+
   /* biome-ignore format: definition needs to be oneline or breaks variants */
   --shadow-sm-solid-shade: 2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+
   /* biome-ignore format: definition needs to be oneline or breaks variants */
   --shadow-md-solid-shade: 4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 }

package/src/hooks/__tests__/useInterval.test.tsx

@@ -67,4 +67,108 @@ describe("useInterval", () => {
     vi.advanceTimersByTime(1000);
     expect(callback).not.toHaveBeenCalled();
   });
+
+  describe("skipIfRunning", () => {
+    it("should allow overlapping async calls by default", async () => {
+      let concurrentCalls = 0;
+      let maxConcurrentCalls = 0;
+
+      const callback = vi.fn(async () => {
+        concurrentCalls++;
+        maxConcurrentCalls = Math.max(maxConcurrentCalls, concurrentCalls);
+        // Simulate slow async work
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        concurrentCalls--;
+      });
+
+      renderHook(() =>
+        useInterval(callback, { delayMs: 500, whenVisible: false }),
+      );
+
+      // First call at 500ms
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second call at 1000ms (while first is still running)
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      // Third call at 1500ms
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(3);
+
+      // Multiple concurrent calls should have occurred
+      expect(maxConcurrentCalls).toBeGreaterThan(1);
+    });
+
+    it("should skip calls when skipIfRunning is true", async () => {
+      let concurrentCalls = 0;
+      let maxConcurrentCalls = 0;
+
+      const callback = vi.fn(async () => {
+        concurrentCalls++;
+        maxConcurrentCalls = Math.max(maxConcurrentCalls, concurrentCalls);
+        // Simulate slow async work (3 seconds)
+        await new Promise<void>((resolve) => setTimeout(resolve, 3000));
+        concurrentCalls--;
+      });
+
+      renderHook(() =>
+        useInterval(callback, {
+          delayMs: 500,
+          whenVisible: false,
+          skipIfRunning: true,
+        }),
+      );
+
+      // First call at 500ms
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second interval tick at 1000ms - should be skipped since first is still running
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1); // Still 1, not 2
+
+      // Third interval tick at 1500ms - should still be skipped
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1); // Still 1
+
+      // Only one concurrent call should have occurred
+      expect(maxConcurrentCalls).toBe(1);
+
+      // Advance past the 3 second timeout to complete first callback
+      await vi.advanceTimersByTimeAsync(2000);
+
+      // Next interval tick should now be able to run
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it("should allow next call after previous async call completes with skipIfRunning true", async () => {
+      const callback = vi.fn(async () => {
+        // Quick async operation
+        await Promise.resolve();
+      });
+
+      renderHook(() =>
+        useInterval(callback, {
+          delayMs: 1000,
+          whenVisible: false,
+          skipIfRunning: true,
+        }),
+      );
+
+      // First call
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second call - should proceed since first completed
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      // Third call
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(3);
+    });
+  });
 });

package/src/hooks/useInterval.ts

@@ -1,9 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useEventListener } from "./useEventListener";
 
 /**
  * Creates an interval that runs a callback every `delayMs` milliseconds.
+ *
+ * @param callback - The callback to run.
+ * @param opts - The options for the interval.
+ * @param opts.delayMs - The delay in milliseconds between runs.
+ * @param opts.whenVisible - Whether to run the callback when the document is visible.
+ * @param opts.disabled - Whether to disable the interval.
+ * @param opts.skipIfRunning - Whether to skip the callback if it is already running.
  */
 export function useInterval(
   callback: () => void,
@@ -11,16 +18,35 @@ export function useInterval(
     delayMs: number | null;
     whenVisible: boolean;
     disabled?: boolean;
+    skipIfRunning?: boolean;
   },
 ) {
-  const { delayMs, whenVisible, disabled = false } = opts;
-  const savedCallback = useRef<() => void>(undefined);
+  const {
+    delayMs,
+    whenVisible,
+    disabled = false,
+    skipIfRunning = false,
+  } = opts;
+  const savedCallback = useRef<() => void | Promise<void>>(undefined);
+  const isRunning = useRef(false);
 
   // Store the callback
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
+  const runCallback = useCallback(async () => {
+    if (isRunning.current && skipIfRunning) {
+      return;
+    }
+    isRunning.current = true;
+    try {
+      await savedCallback.current?.();
+    } finally {
+      isRunning.current = false;
+    }
+  }, [skipIfRunning]);
+
   // Run the interval
   useEffect(() => {
     if (delayMs === null || disabled) {
@@ -32,16 +58,16 @@ export function useInterval(
         return;
       }
 
-      savedCallback.current?.();
+      runCallback();
     }, delayMs);
 
     return () => clearInterval(id);
-  }, [delayMs, whenVisible, disabled]);
+  }, [delayMs, whenVisible, disabled, runCallback]);
 
   // When the document becomes visible, run the callback
   useEventListener(document, "visibilitychange", () => {
     if (document.visibilityState === "visible" && whenVisible && !disabled) {
-      savedCallback.current?.();
+      runCallback();
     }
   });
 

package/src/mount.tsx

@@ -29,6 +29,7 @@ import {
 import { MarimoApp, preloadPage } from "./core/MarimoApp";
 import { type AppMode, initialModeAtom, viewStateAtom } from "./core/mode";
 import { cleanupAuthQueryParams } from "./core/network/auth";
+import { connectionAtom } from "./core/network/connection";
 import { requestClientAtom } from "./core/network/requests";
 import { resolveRequestClient } from "./core/network/resolve";
 import {
@@ -42,6 +43,7 @@ import { isStaticNotebook } from "./core/static/static-state";
 import { maybeRegisterVSCodeBindings } from "./core/vscode/vscode-bindings";
 import type { FileStore } from "./core/wasm/store";
 import { notebookFileStore } from "./core/wasm/store";
+import { WebSocketState } from "./core/websocket/types";
 import { vegaLoader } from "./plugins/impl/vega/loader";
 import { initializePlugins } from "./plugins/plugins";
 import { ThemeProvider } from "./theme/ThemeProvider";
@@ -304,6 +306,10 @@ function initStore(options: unknown) {
       ...firstRuntimeConfig,
       serverToken: parsedOptions.data.serverToken,
     });
+    // If the remote runtime is not lazy, start it in CONNECTING
+    if (!firstRuntimeConfig.lazy && !isStaticNotebook()) {
+      store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+    }
   } else {
     store.set(runtimeConfigAtom, {
       ...DEFAULT_RUNTIME_CONFIG,

package/src/plugins/impl/chat/chat-ui.tsx

@@ -75,12 +75,26 @@ interface Props extends PluginFunctions {
 export const Chatbot: React.FC<Props> = (props) => {
   const [input, setInput] = useState("");
   const [config, setConfig] = useState<ChatConfig>(props.config);
+  const [prevPropsConfig, setPrevPropsConfig] = useState<ChatConfig>(
+    props.config,
+  );
   const [files, setFiles] = useState<File[] | undefined>(undefined);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const codeMirrorInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  const configChanged = Object.keys(props.config).some(
+    (key) =>
+      props.config[key as keyof ChatConfig] !==
+      prevPropsConfig[key as keyof ChatConfig],
+  );
+
+  if (configChanged) {
+    setConfig(props.config);
+    setPrevPropsConfig(props.config);
+  }
+
   // Use a ref to avoid stale closure in the fetch callback
   const configRef = useRef<ChatConfig>(config);
   configRef.current = config;
@@ -739,7 +753,6 @@ const ConfigPopup: React.FC<{
   config: ChatConfig;
   onChange: (newConfig: ChatConfig) => void;
 }> = ({ config, onChange }) => {
-  const [localConfig, setLocalConfig] = useState<ChatConfig>(config);
   const [open, setOpen] = useState(false);
 
   const handleChange = (key: keyof ChatConfig, value: number | null) => {
@@ -754,8 +767,7 @@ const ConfigPopup: React.FC<{
       finalValue = clampedValue;
     }
 
-    const newConfig = { ...localConfig, [key]: finalValue };
-    setLocalConfig(newConfig);
+    const newConfig = { ...config, [key]: finalValue };
     onChange(newConfig);
   };
 
@@ -782,7 +794,7 @@ const ConfigPopup: React.FC<{
       <PopoverContent className="w-70 border">
         <div className="grid gap-3">
           <h4 className="font-bold leading-none">Configuration</h4>
-          {Objects.entries(localConfig).map(([key, value]) => (
+          {Objects.entries(config).map(([key, value]) => (
             <div key={key} className="grid grid-cols-3 items-center gap-1">
               <Label
                 htmlFor={key}

package/src/plugins/impl/chat/types.ts

@@ -8,18 +8,6 @@ export interface ChatMessage extends UIMessage {
   content: string | null; // Content is only added for backwards compatibility
 }
 
-export interface SendMessageRequest {
-  messages: ChatMessage[];
-  config: {
-    max_tokens: number | null;
-    temperature: number | null;
-    top_p: number | null;
-    top_k: number | null;
-    frequency_penalty: number | null;
-    presence_penalty: number | null;
-  };
-}
-
 /**
  * These are snake_case because they come from the backend,
  * and are not modified when sent to the frontend.
@@ -32,3 +20,8 @@ export interface ChatConfig {
   frequency_penalty: number | null;
   presence_penalty: number | null;
 }
+
+export interface SendMessageRequest {
+  messages: ChatMessage[];
+  config: ChatConfig;
+}

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -202,6 +202,8 @@ export const DataFrameComponent = memo(
       sql_code,
     } = data || {};
 
+    const totalColumns = field_types?.length;
+
     const [internalValue, setInternalValue] = useState<Transformations>(
       value || EMPTY,
     );
@@ -317,7 +319,7 @@ export const DataFrameComponent = memo(
           data={url || ""}
           hasStableRowId={false}
           totalRows={total_rows ?? 0}
-          totalColumns={Object.keys(columns).length}
+          totalColumns={totalColumns ?? 0}
           maxColumns="all"
           pageSize={pageSize}
           pagination={true}

package/src/utils/events.ts

@@ -42,6 +42,7 @@ export const Events = {
       target.tagName === "INPUT" ||
       target.tagName === "TEXTAREA" ||
       target.tagName.startsWith("MARIMO") ||
+      target.isContentEditable ||
       Events.fromCodeMirror(e)
     );
   },

package/dist/assets/VisuallyHidden-BodIky8L.js

@@ -1 +0,0 @@
-import{s as be}from"./chunk-LvLJmgfZ.js";import{t as me}from"./react-BGmjiNul.js";import{L as ve,P as Ee,R as Te}from"./input-CaEtLL8p.js";import{A as w,C as ge,M as we,N as v,O as Re,b as J,c as Ce,j as S,k as X,l as ye,w as Se,z as R}from"./usePress-C2LPFxyv.js";import{t as ke}from"./context-BAYdLMF_.js";var f=be(me(),1),_e=(0,f.createContext)(null);(0,f.createContext)(null),(0,f.createContext)(null),(0,f.createContext)(null),(0,f.createContext)(null);var Le=(0,f.createContext)({}),xe=(0,f.createContext)(null);(0,f.createContext)(null);var Fe=class{get currentNode(){return this._currentNode}set currentNode(e){if(!X(this.root,e))throw Error("Cannot set currentNode to a node that is not contained by the root node.");let t=[],r=e,n=e;for(this._currentNode=e;r&&r!==this.root;)if(r.nodeType===Node.DOCUMENT_FRAGMENT_NODE){let i=r,l=this._doc.createTreeWalker(i,this.whatToShow,{acceptNode:this._acceptNode});t.push(l),l.currentNode=n,this._currentSetFor.add(l),r=n=i.host}else r=r.parentNode;let o=this._doc.createTreeWalker(this.root,this.whatToShow,{acceptNode:this._acceptNode});t.push(o),o.currentNode=n,this._currentSetFor.add(o),this._walkerStack=t}get doc(){return this._doc}firstChild(){let e=this.currentNode,t=this.nextNode();return X(e,t)?(t&&(this.currentNode=t),t):(this.currentNode=e,null)}lastChild(){let e=this._walkerStack[0].lastChild();return e&&(this.currentNode=e),e}nextNode(){var t;let e=this._walkerStack[0].nextNode();if(e){if(e.shadowRoot){let r;if(typeof this.filter=="function"?r=this.filter(e):(t=this.filter)!=null&&t.acceptNode&&(r=this.filter.acceptNode(e)),r===NodeFilter.FILTER_ACCEPT)return this.currentNode=e,e;let n=this.nextNode();return n&&(this.currentNode=n),n}return e&&(this.currentNode=e),e}else if(this._walkerStack.length>1){this._walkerStack.shift();let r=this.nextNode();return r&&(this.currentNode=r),r}else return null}previousNode(){var r;let e=this._walkerStack[0];if(e.currentNode===e.root){if(this._currentSetFor.has(e))if(this._currentSetFor.delete(e),this._walkerStack.length>1){this._walkerStack.shift();let n=this.previousNode();return n&&(this.currentNode=n),n}else return null;return null}let t=e.previousNode();if(t){if(t.shadowRoot){let n;if(typeof this.filter=="function"?n=this.filter(t):(r=this.filter)!=null&&r.acceptNode&&(n=this.filter.acceptNode(t)),n===NodeFilter.FILTER_ACCEPT)return t&&(this.currentNode=t),t;let o=this.lastChild();return o&&(this.currentNode=o),o}return t&&(this.currentNode=t),t}else if(this._walkerStack.length>1){this._walkerStack.shift();let n=this.previousNode();return n&&(this.currentNode=n),n}else return null}nextSibling(){return null}previousSibling(){return null}parentNode(){return null}constructor(e,t,r,n){this._walkerStack=[],this._currentSetFor=new Set,this._acceptNode=i=>{var l;if(i.nodeType===Node.ELEMENT_NODE){let s=i.shadowRoot;if(s){let u=this._doc.createTreeWalker(s,this.whatToShow,{acceptNode:this._acceptNode});return this._walkerStack.unshift(u),NodeFilter.FILTER_ACCEPT}else{if(typeof this.filter=="function")return this.filter(i);if((l=this.filter)!=null&&l.acceptNode)return this.filter.acceptNode(i);if(this.filter===null)return NodeFilter.FILTER_ACCEPT}}return NodeFilter.FILTER_SKIP},this._doc=e,this.root=t,this.filter=n??null,this.whatToShow=r??NodeFilter.SHOW_ALL,this._currentNode=t,this._walkerStack.unshift(e.createTreeWalker(t,r,this._acceptNode));let o=t.shadowRoot;if(o){let i=this._doc.createTreeWalker(o,this.whatToShow,{acceptNode:this._acceptNode});this._walkerStack.unshift(i)}}};function Me(e,t,r,n){return we()?new Fe(e,t,r,n):e.createTreeWalker(t,r,n)}function Ie(e,t){let r=(0,f.useRef)(!0),n=(0,f.useRef)(null);(0,f.useEffect)(()=>(r.current=!0,()=>{r.current=!1}),[]),(0,f.useEffect)(()=>{let o=n.current;r.current?r.current=!1:(!o||t.some((i,l)=>!Object.is(i,o[l])))&&e(),n.current=t},t)}function x(e,t){if(!e)return!1;let r=window.getComputedStyle(e),n=/(auto|scroll)/.test(r.overflow+r.overflowX+r.overflowY);return n&&t&&(n=e.scrollHeight!==e.clientHeight||e.scrollWidth!==e.clientWidth),n}function Pe(e,t){let r=e;for(x(r,t)&&(r=r.parentElement);r&&!x(r,t);)r=r.parentElement;return r||document.scrollingElement||document.documentElement}function Ae(e,t){let r=[];for(;e&&e!==document.documentElement;)x(e,t)&&r.push(e),e=e.parentElement;return r}function We(e){return ge()?e.metaKey:e.ctrlKey}var Ke=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function He(e){return e instanceof HTMLInputElement&&!Ke.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}var Oe=0,z=new Map;function De(e){let[t,r]=(0,f.useState)();return R(()=>{if(!e)return;let n=z.get(e);if(n)r(n.element.id);else{let o=`react-aria-description-${Oe++}`;r(o);let i=document.createElement("div");i.id=o,i.style.display="none",i.textContent=e,document.body.appendChild(i),n={refCount:0,element:i},z.set(e,n)}return n.refCount++,()=>{n&&--n.refCount===0&&(n.element.remove(),z.delete(e))}},[e]),{"aria-describedby":e?t:void 0}}function Y(e,t){let r=Q(e,t,"left"),n=Q(e,t,"top"),o=t.offsetWidth,i=t.offsetHeight,l=e.scrollLeft,s=e.scrollTop,{borderTopWidth:u,borderLeftWidth:c,scrollPaddingTop:a,scrollPaddingRight:p,scrollPaddingBottom:d,scrollPaddingLeft:N}=getComputedStyle(e),{scrollMarginTop:m,scrollMarginRight:L,scrollMarginBottom:k,scrollMarginLeft:ce}=getComputedStyle(t),se=l+parseInt(c,10),G=s+parseInt(u,10),M=se+e.clientWidth,I=G+e.clientHeight,P=parseInt(a,10)||0,A=parseInt(d,10)||0,W=parseInt(p,10)||0,K=parseInt(N,10)||0,ae=parseInt(m,10)||0,ue=parseInt(k,10)||0,de=parseInt(L,10)||0,H=r-(parseInt(ce,10)||0),O=r+o+de,D=n-ae,j=n+i+ue,fe=l+parseInt(c,10)+K,pe=M-W,he=s+parseInt(u,10)+P,Ne=I-A;(H>fe||O<pe)&&(H<=l+K?l=H-parseInt(c,10)-K:O>M-W&&(l+=O-M+W)),(D>he||j<Ne)&&(D<=G+P?s=D-parseInt(u,10)-P:j>I-A&&(s+=j-I+A)),e.scrollTo({left:l,top:s})}function Q(e,t,r){let n=r==="left"?"offsetLeft":"offsetTop",o=0;for(;t.offsetParent&&(o+=t[n],t.offsetParent!==e);){if(t.offsetParent.contains(e)){o-=e[n];break}t=t.offsetParent}return o}function je(e,t){if(e&&document.contains(e)){let l=document.scrollingElement||document.documentElement;if(window.getComputedStyle(l).overflow!=="hidden"&&!J()){var r;let{left:s,top:u}=e.getBoundingClientRect();e==null||(r=e.scrollIntoView)==null||r.call(e,{block:"nearest"});let{left:c,top:a}=e.getBoundingClientRect();if(Math.abs(s-c)>1||Math.abs(u-a)>1){var n,o,i;t==null||(o=t.containingElement)==null||(n=o.scrollIntoView)==null||n.call(o,{block:"center",inline:"center"}),(i=e.scrollIntoView)==null||i.call(e,{block:"nearest"})}}else{let s=Ae(e);for(let u of s)Y(u,e)}}}var B=new Map;function ze(e){let{locale:t}=ke(),r=t+(e?Object.entries(e).sort((o,i)=>o[0]<i[0]?-1:1).join():"");if(B.has(r))return B.get(r);let n=new Intl.Collator(t,e);return B.set(r,n),n}var Z=f.createContext(null),q="react-aria-focus-scope-restore",h=null;function Be(e){let{children:t,contain:r,restoreFocus:n,autoFocus:o}=e,i=(0,f.useRef)(null),l=(0,f.useRef)(null),s=(0,f.useRef)([]),{parentNode:u}=(0,f.useContext)(Z)||{},c=(0,f.useMemo)(()=>new $({scopeRef:s}),[s]);R(()=>{let d=u||b.root;if(b.getTreeNode(d.scopeRef)&&h&&!F(h,d.scopeRef)){let N=b.getTreeNode(h);N&&(d=N)}d.addChild(c),b.addNode(c)},[c,u]),R(()=>{let d=b.getTreeNode(s);d&&(d.contain=!!r)},[r]),R(()=>{var L;let d=(L=i.current)==null?void 0:L.nextSibling,N=[],m=k=>k.stopPropagation();for(;d&&d!==l.current;)N.push(d),d.addEventListener(q,m),d=d.nextSibling;return s.current=N,()=>{for(let k of N)k.removeEventListener(q,m)}},[t]),Je(s,n,r),Ve(s,r),Xe(s,n,r),Ge(s,o),(0,f.useEffect)(()=>{let d=w(v(s.current?s.current[0]:void 0)),N=null;if(g(d,s.current)){for(let m of b.traverse())m.scopeRef&&g(d,m.scopeRef.current)&&(N=m);N===b.getTreeNode(s)&&(h=N.scopeRef)}},[s]),R(()=>()=>{var N,m;let d=((m=(N=b.getTreeNode(s))==null?void 0:N.parent)==null?void 0:m.scopeRef)??null;(s===h||F(s,h))&&(!d||b.getTreeNode(d))&&(h=d),b.removeTreeNode(s)},[s]);let a=(0,f.useMemo)(()=>qe(s),[]),p=(0,f.useMemo)(()=>({focusManager:a,parentNode:c}),[c,a]);return f.createElement(Z.Provider,{value:p},f.createElement("span",{"data-focus-scope-start":!0,hidden:!0,ref:i}),t,f.createElement("span",{"data-focus-scope-end":!0,hidden:!0,ref:l}))}function qe(e){return{focusNext(t={}){let r=e.current,{from:n,tabbable:o,wrap:i,accept:l}=t,s=n||w(v(r[0]??void 0)),u=r[0].previousElementSibling,c=T(y(r),{tabbable:o,accept:l},r);c.currentNode=g(s,r)?s:u;let a=c.nextNode();return!a&&i&&(c.currentNode=u,a=c.nextNode()),a&&E(a,!0),a},focusPrevious(t={}){let r=e.current,{from:n,tabbable:o,wrap:i,accept:l}=t,s=n||w(v(r[0]??void 0)),u=r[r.length-1].nextElementSibling,c=T(y(r),{tabbable:o,accept:l},r);c.currentNode=g(s,r)?s:u;let a=c.previousNode();return!a&&i&&(c.currentNode=u,a=c.previousNode()),a&&E(a,!0),a},focusFirst(t={}){let r=e.current,{tabbable:n,accept:o}=t,i=T(y(r),{tabbable:n,accept:o},r);i.currentNode=r[0].previousElementSibling;let l=i.nextNode();return l&&E(l,!0),l},focusLast(t={}){let r=e.current,{tabbable:n,accept:o}=t,i=T(y(r),{tabbable:n,accept:o},r);i.currentNode=r[r.length-1].nextElementSibling;let l=i.previousNode();return l&&E(l,!0),l}}}function y(e){return e[0].parentElement}function _(e){let t=b.getTreeNode(h);for(;t&&t.scopeRef!==e;){if(t.contain)return!1;t=t.parent}return!0}function Ue(e){var r,n;if(e.checked)return!0;let t=[];return t=e.form?[...((n=(r=e.form)==null?void 0:r.elements)==null?void 0:n.namedItem(e.name))??[]]:[...v(e).querySelectorAll(`input[type="radio"][name="${CSS.escape(e.name)}"]`)].filter(o=>!o.form),t?!t.some(o=>o.checked):!1}function Ve(e,t){let r=(0,f.useRef)(void 0),n=(0,f.useRef)(void 0);R(()=>{let o=e.current;if(!t){n.current&&(n.current=(cancelAnimationFrame(n.current),void 0));return}let i=v(o?o[0]:void 0),l=c=>{if(c.key!=="Tab"||c.altKey||c.ctrlKey||c.metaKey||!_(e)||c.isComposing)return;let a=w(i),p=e.current;if(!p||!g(a,p))return;let d=T(y(p),{tabbable:!0},p);if(!a)return;d.currentNode=a;let N=c.shiftKey?d.previousNode():d.nextNode();N||(N=(d.currentNode=c.shiftKey?p[p.length-1].nextElementSibling:p[0].previousElementSibling,c.shiftKey?d.previousNode():d.nextNode())),c.preventDefault(),N&&E(N,!0)},s=c=>{(!h||F(h,e))&&g(S(c),e.current)?(h=e,r.current=S(c)):_(e)&&!C(S(c),e)?r.current?r.current.focus():h&&h.current&&U(h.current):_(e)&&(r.current=S(c))},u=c=>{n.current&&cancelAnimationFrame(n.current),n.current=requestAnimationFrame(()=>{let a=Te(),p=(a==="virtual"||a===null)&&Se()&&J(),d=w(i);if(!p&&d&&_(e)&&!C(d,e)){h=e;let m=S(c);if(m&&m.isConnected){var N;r.current=m,(N=r.current)==null||N.focus()}else h.current&&U(h.current)}})};return i.addEventListener("keydown",l,!1),i.addEventListener("focusin",s,!1),o==null||o.forEach(c=>c.addEventListener("focusin",s,!1)),o==null||o.forEach(c=>c.addEventListener("focusout",u,!1)),()=>{i.removeEventListener("keydown",l,!1),i.removeEventListener("focusin",s,!1),o==null||o.forEach(c=>c.removeEventListener("focusin",s,!1)),o==null||o.forEach(c=>c.removeEventListener("focusout",u,!1))}},[e,t]),R(()=>()=>{n.current&&cancelAnimationFrame(n.current)},[n])}function ee(e){return C(e)}function g(e,t){return!e||!t?!1:t.some(r=>r.contains(e))}function C(e,t=null){if(e instanceof Element&&e.closest("[data-react-aria-top-layer]"))return!0;for(let{scopeRef:r}of b.traverse(b.getTreeNode(t)))if(r&&g(e,r.current))return!0;return!1}function $e(e){return C(e,h)}function F(e,t){var n;let r=(n=b.getTreeNode(t))==null?void 0:n.parent;for(;r;){if(r.scopeRef===e)return!0;r=r.parent}return!1}function E(e,t=!1){if(e!=null&&!t)try{ve(e)}catch{}else if(e!=null)try{e.focus()}catch{}}function te(e,t=!0){let r=e[0].previousElementSibling,n=y(e),o=T(n,{tabbable:t},e);o.currentNode=r;let i=o.nextNode();return t&&!i&&(n=y(e),o=T(n,{tabbable:!1},e),o.currentNode=r,i=o.nextNode()),i}function U(e,t=!0){E(te(e,t))}function Ge(e,t){let r=f.useRef(t);(0,f.useEffect)(()=>{r.current&&(h=e,!g(w(v(e.current?e.current[0]:void 0)),h.current)&&e.current&&U(e.current)),r.current=!1},[e])}function Je(e,t,r){R(()=>{if(t||r)return;let n=e.current,o=v(n?n[0]:void 0),i=l=>{let s=S(l);g(s,e.current)?h=e:ee(s)||(h=null)};return o.addEventListener("focusin",i,!1),n==null||n.forEach(l=>l.addEventListener("focusin",i,!1)),()=>{o.removeEventListener("focusin",i,!1),n==null||n.forEach(l=>l.removeEventListener("focusin",i,!1))}},[e,t,r])}function re(e){let t=b.getTreeNode(h);for(;t&&t.scopeRef!==e;){if(t.nodeToRestore)return!1;t=t.parent}return(t==null?void 0:t.scopeRef)===e}function Xe(e,t,r){let n=(0,f.useRef)(typeof document<"u"?w(v(e.current?e.current[0]:void 0)):null);R(()=>{let o=e.current,i=v(o?o[0]:void 0);if(!t||r)return;let l=()=>{(!h||F(h,e))&&g(w(i),e.current)&&(h=e)};return i.addEventListener("focusin",l,!1),o==null||o.forEach(s=>s.addEventListener("focusin",l,!1)),()=>{i.removeEventListener("focusin",l,!1),o==null||o.forEach(s=>s.removeEventListener("focusin",l,!1))}},[e,r]),R(()=>{let o=v(e.current?e.current[0]:void 0);if(!t)return;let i=l=>{if(l.key!=="Tab"||l.altKey||l.ctrlKey||l.metaKey||!_(e)||l.isComposing)return;let s=o.activeElement;if(!C(s,e)||!re(e))return;let u=b.getTreeNode(e);if(!u)return;let c=u.nodeToRestore,a=T(o.body,{tabbable:!0});a.currentNode=s;let p=l.shiftKey?a.previousNode():a.nextNode();if((!c||!c.isConnected||c===o.body)&&(c=void 0,u.nodeToRestore=void 0),(!p||!C(p,e))&&c){a.currentNode=c;do p=l.shiftKey?a.previousNode():a.nextNode();while(C(p,e));l.preventDefault(),l.stopPropagation(),p?E(p,!0):ee(c)?E(c,!0):s.blur()}};return r||o.addEventListener("keydown",i,!0),()=>{r||o.removeEventListener("keydown",i,!0)}},[e,t,r]),R(()=>{let o=v(e.current?e.current[0]:void 0);if(!t)return;let i=b.getTreeNode(e);if(i)return i.nodeToRestore=n.current??void 0,()=>{let l=b.getTreeNode(e);if(!l)return;let s=l.nodeToRestore,u=w(o);if(t&&s&&(u&&C(u,e)||u===o.body&&re(e))){let c=b.clone();requestAnimationFrame(()=>{if(o.activeElement===o.body){let a=c.getTreeNode(e);for(;a;){if(a.nodeToRestore&&a.nodeToRestore.isConnected){ne(a.nodeToRestore);return}a=a.parent}for(a=c.getTreeNode(e);a;){if(a.scopeRef&&a.scopeRef.current&&b.getTreeNode(a.scopeRef)){ne(te(a.scopeRef.current,!0));return}a=a.parent}}})}}},[e,t])}function ne(e){e.dispatchEvent(new CustomEvent(q,{bubbles:!0,cancelable:!0}))&&E(e)}function T(e,t,r){let n=t!=null&&t.tabbable?ye:Ce,o=v((e==null?void 0:e.nodeType)===Node.ELEMENT_NODE?e:null),i=Me(o,e||o,NodeFilter.SHOW_ELEMENT,{acceptNode(l){var s;return t!=null&&((s=t.from)!=null&&s.contains(l))||t!=null&&t.tabbable&&l.tagName==="INPUT"&&l.getAttribute("type")==="radio"&&(!Ue(l)||i.currentNode.tagName==="INPUT"&&i.currentNode.type==="radio"&&i.currentNode.name===l.name)?NodeFilter.FILTER_REJECT:n(l)&&(!r||g(l,r))&&(!(t!=null&&t.accept)||t.accept(l))?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});return t!=null&&t.from&&(i.currentNode=t.from),i}function Ye(e,t={}){return{focusNext(r={}){let n=e.current;if(!n)return null;let{from:o,tabbable:i=t.tabbable,wrap:l=t.wrap,accept:s=t.accept}=r,u=o||w(v(n)),c=T(n,{tabbable:i,accept:s});n.contains(u)&&(c.currentNode=u);let a=c.nextNode();return!a&&l&&(c.currentNode=n,a=c.nextNode()),a&&E(a,!0),a},focusPrevious(r=t){let n=e.current;if(!n)return null;let{from:o,tabbable:i=t.tabbable,wrap:l=t.wrap,accept:s=t.accept}=r,u=o||w(v(n)),c=T(n,{tabbable:i,accept:s});if(n.contains(u))c.currentNode=u;else{let p=V(c);return p&&E(p,!0),p??null}let a=c.previousNode();if(!a&&l){c.currentNode=n;let p=V(c);if(!p)return null;a=p}return a&&E(a,!0),a??null},focusFirst(r=t){let n=e.current;if(!n)return null;let{tabbable:o=t.tabbable,accept:i=t.accept}=r,l=T(n,{tabbable:o,accept:i}).nextNode();return l&&E(l,!0),l},focusLast(r=t){let n=e.current;if(!n)return null;let{tabbable:o=t.tabbable,accept:i=t.accept}=r,l=V(T(n,{tabbable:o,accept:i}));return l&&E(l,!0),l??null}}}function V(e){let t,r;do r=e.lastChild(),r&&(t=r);while(r);return t}var Qe=class le{get size(){return this.fastMap.size}getTreeNode(t){return this.fastMap.get(t)}addTreeNode(t,r,n){let o=this.fastMap.get(r??null);if(!o)return;let i=new $({scopeRef:t});o.addChild(i),i.parent=o,this.fastMap.set(t,i),n&&(i.nodeToRestore=n)}addNode(t){this.fastMap.set(t.scopeRef,t)}removeTreeNode(t){if(t===null)return;let r=this.fastMap.get(t);if(!r)return;let n=r.parent;for(let i of this.traverse())i!==r&&r.nodeToRestore&&i.nodeToRestore&&r.scopeRef&&r.scopeRef.current&&g(i.nodeToRestore,r.scopeRef.current)&&(i.nodeToRestore=r.nodeToRestore);let o=r.children;n&&(n.removeChild(r),o.size>0&&o.forEach(i=>n&&n.addChild(i))),this.fastMap.delete(r.scopeRef)}*traverse(t=this.root){if(t.scopeRef!=null&&(yield t),t.children.size>0)for(let r of t.children)yield*this.traverse(r)}clone(){var r;let t=new le;for(let n of this.traverse())t.addTreeNode(n.scopeRef,((r=n.parent)==null?void 0:r.scopeRef)??null,n.nodeToRestore);return t}constructor(){this.fastMap=new Map,this.root=new $({scopeRef:null}),this.fastMap.set(null,this.root)}},$=class{addChild(e){this.children.add(e),e.parent=this}removeChild(e){this.children.delete(e),e.parent=void 0}constructor(e){this.children=new Set,this.contain=!1,this.scopeRef=e.scopeRef}},b=new Qe,oe={border:0,clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap"};function ie(e={}){let{style:t,isFocusable:r}=e,[n,o]=(0,f.useState)(!1),{focusWithinProps:i}=Ee({isDisabled:!r,onFocusWithinChange:s=>o(s)}),l=(0,f.useMemo)(()=>n?t:t?{...oe,...t}:oe,[n]);return{visuallyHiddenProps:{...i,style:l}}}function Ze(e){let{children:t,elementType:r="div",isFocusable:n,style:o,...i}=e,{visuallyHiddenProps:l}=ie(e);return f.createElement(r,Re(i,l),t)}export{xe as _,T as a,Y as c,We as d,He as f,_e as g,Ie as h,Be as i,je as l,x as m,ie as n,Ye as o,Pe as p,$e as r,ze as s,Ze as t,De as u,Le as v};