@marimo-team/frontend 0.19.3-dev8 → 0.19.4-dev0

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

@@ -66,7 +66,6 @@ interface Props extends PluginFunctions {
   showConfigurationControls: boolean;
   maxHeight: number | undefined;
   allowAttachments: boolean | string[];
-  frontendManaged: boolean;
   value: UIMessage[];
   setValue: (messages: UIMessage[]) => void;
   host: HTMLElement;
@@ -75,12 +74,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;
@@ -152,113 +165,42 @@ export const Chatbot: React.FC<Props> = (props) => {
             };
           });
 
-          if (props.frontendManaged) {
-            const stream = new ReadableStream<UIMessageChunk>({
-              start(controller) {
-                frontendStreamControllerRef.current = controller;
-
-                const abortHandler = () => {
-                  try {
-                    controller.close();
-                  } catch (error) {
-                    Logger.debug("Controller may already be closed", { error });
-                  }
-                  frontendStreamControllerRef.current = null;
-                };
-                signal?.addEventListener("abort", abortHandler);
-
-                return () => {
-                  signal?.removeEventListener("abort", abortHandler);
-                };
-              },
-              cancel() {
-                frontendStreamControllerRef.current = null;
-              },
-            });
+          const stream = new ReadableStream<UIMessageChunk>({
+            start(controller) {
+              frontendStreamControllerRef.current = controller;
 
-            // Start the prompt, chunks will be sent via events
-            props
-              .send_prompt({
-                messages: messages,
-                config: chatConfig,
-              })
-              .catch((error: Error) => {
-                frontendStreamControllerRef.current?.error(error);
-                frontendStreamControllerRef.current = null;
-              });
-
-            return createUIMessageStreamResponse({ stream });
-          }
-
-          if (signal?.aborted) {
-            return new Response("Aborted", { status: 499 });
-          }
-
-          // Create a placeholder message for streaming (backend-managed)
-          const messageId = Date.now().toString();
-
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: messageId,
-              role: "assistant",
-              parts: [{ type: "text", text: "" }],
-            },
-          ]);
-
-          // Create an abort-aware promise for the send_prompt call
-          const sendPromptPromise = props.send_prompt({
-            messages: messages,
-            config: chatConfig,
-          });
-
-          // Race the send_prompt with an abort signal
-          const response = await new Promise<string | null>(
-            (resolve, reject) => {
-              // Listen for abort
               const abortHandler = () => {
-                reject(new DOMException("Aborted", "AbortError"));
+                try {
+                  controller.close();
+                } catch (error) {
+                  Logger.debug("Controller may already be closed", { error });
+                }
+                frontendStreamControllerRef.current = null;
               };
               signal?.addEventListener("abort", abortHandler);
 
-              sendPromptPromise
-                .then(resolve)
-                .catch(reject)
-                .finally(() => {
-                  signal?.removeEventListener("abort", abortHandler);
-                });
+              return () => {
+                signal?.removeEventListener("abort", abortHandler);
+              };
             },
-          );
-
-          if (response === null) {
-            Logger.error("Non-frontend-managed response is null", {
-              response,
-            });
-            return new Response("Internal server error", { status: 500 });
-          }
+            cancel() {
+              frontendStreamControllerRef.current = null;
+            },
+          });
 
-          // If streaming didn't happen (non-generator response), update the message
-          // Check if streaming state is still set (meaning no chunks were received)
-          if (
-            streamingStateRef.current.backendMessageId === null &&
-            streamingStateRef.current.frontendMessageIndex === null
-          ) {
-            setMessages((prev) => {
-              const updated = [...prev];
-              const index = updated.findIndex((m) => m.id === messageId);
-              if (index !== -1) {
-                updated[index] = {
-                  ...updated[index],
-                  parts: [{ type: "text", text: response }],
-                };
-              }
-              return updated;
+          // Start the prompt, chunks will be sent via events
+          void props
+            .send_prompt({
+              messages: messages,
+              config: chatConfig,
+            })
+            .catch((error: Error) => {
+              frontendStreamControllerRef.current?.error(error);
+              frontendStreamControllerRef.current = null;
             });
-          }
 
-          return new Response(response);
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } catch (error: any) {
+          return createUIMessageStreamResponse({ stream });
+        } catch (error: unknown) {
           // Clear streaming state on error
           streamingStateRef.current = {
             backendMessageId: null,
@@ -266,13 +208,13 @@ export const Chatbot: React.FC<Props> = (props) => {
           };
 
           // Handle abort gracefully without showing an error
-          if (error.name === "AbortError") {
+          if (error instanceof Error && error.name === "AbortError") {
             return new Response("Aborted", { status: 499 });
           }
 
           // HACK: strip the error message to clean up the response
-          const strippedError = error.message
-            .split("failed with exception ")
+          const strippedError = (error as Error).message
+            ?.split("failed with exception ")
             .pop();
           return new Response(strippedError, { status: 400 });
         }
@@ -293,11 +235,7 @@ export const Chatbot: React.FC<Props> = (props) => {
         frontendMessageIndex: null,
       };
 
-      // For frontend-managed streaming, we set the value directly from the frontend.
-      // Because useChat creates the proper message structure for us.
-      if (props.frontendManaged) {
-        props.setValue(message.messages);
-      }
+      props.setValue(message.messages);
     },
     onError: (error) => {
       Logger.error("An error occurred:", error);
@@ -324,90 +262,28 @@ export const Chatbot: React.FC<Props> = (props) => {
         return;
       }
 
-      if (props.frontendManaged) {
-        // Push to the stream for useChat to process
-        const controller = frontendStreamControllerRef.current;
-        if (!controller) {
-          return;
-        }
-
-        const frontendMessage = message as {
-          type: string;
-          message_id: string;
-          content?: UIMessageChunk;
-          is_final?: boolean;
-        };
-
-        if (frontendMessage.content) {
-          controller.enqueue(frontendMessage.content);
-        }
-        if (frontendMessage.is_final) {
-          controller.close();
-          frontendStreamControllerRef.current = null;
-        }
+      // Push to the stream for useChat to process
+      const controller = frontendStreamControllerRef.current;
+      if (!controller) {
         return;
       }
 
-      // Handle regular text streaming chunks
-      const chunkMessage = message as {
+      const frontendMessage = message as {
         type: string;
         message_id: string;
-        content: string;
-        is_final: boolean;
+        content?: UIMessageChunk;
+        is_final?: boolean;
       };
 
-      // Initialize streaming state on first chunk if not already set
-      if (streamingStateRef.current.backendMessageId === null) {
-        // Find the last assistant message (which should be the placeholder we created)
-        setMessages((prev) => {
-          const updated = [...prev];
-          // Find the last assistant message
-          for (let i = updated.length - 1; i >= 0; i--) {
-            if (updated[i].role === "assistant") {
-              streamingStateRef.current = {
-                backendMessageId: chunkMessage.message_id,
-                frontendMessageIndex: i,
-              };
-              break;
-            }
-          }
-          return updated;
-        });
+      if (frontendMessage.content) {
+        controller.enqueue(frontendMessage.content);
       }
-
-      // Only process chunks for the current streaming message
-      const frontendIndex = streamingStateRef.current.frontendMessageIndex;
-      if (
-        streamingStateRef.current.backendMessageId ===
-          chunkMessage.message_id &&
-        frontendIndex !== null
-      ) {
-        setMessages((prev) => {
-          const updated = [...prev];
-          const index = frontendIndex;
-
-          // Update the message at the tracked index
-          if (index < updated.length) {
-            const messageToUpdate = updated[index];
-            if (messageToUpdate.role === "assistant") {
-              updated[index] = {
-                ...messageToUpdate,
-                parts: [{ type: "text", text: chunkMessage.content }],
-              };
-            }
-          }
-
-          return updated;
-        });
-
-        // Clear streaming state when final chunk arrives
-        if (chunkMessage.is_final) {
-          streamingStateRef.current = {
-            backendMessageId: null,
-            frontendMessageIndex: null,
-          };
-        }
+      if (frontendMessage.is_final) {
+        controller.close();
+        frontendStreamControllerRef.current = null;
       }
+
+      return;
     },
   );
 
@@ -420,10 +296,7 @@ export const Chatbot: React.FC<Props> = (props) => {
       props.delete_chat_message({ index });
       setMessages(newMessages);
 
-      // Since we manage the state in the frontend, we need to update the value.
-      if (props.frontendManaged) {
-        props.setValue(newMessages);
-      }
+      props.setValue(newMessages);
     }
   };
 
@@ -512,7 +385,7 @@ export const Chatbot: React.FC<Props> = (props) => {
 
           return (
             <div
-              key={message.id}
+              key={`${message.id}-${index}`}
               className={cn(
                 "flex flex-col group gap-2",
                 message.role === "user" ? "items-end" : "items-start",
@@ -739,7 +612,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 +626,7 @@ const ConfigPopup: React.FC<{
       finalValue = clampedValue;
     }
 
-    const newConfig = { ...localConfig, [key]: finalValue };
-    setLocalConfig(newConfig);
+    const newConfig = { ...config, [key]: finalValue };
     onChange(newConfig);
   };
 
@@ -782,7 +653,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};