@marimo-team/frontend 0.23.14-dev3 → 0.23.14-dev30

package/src/plugins/impl/data-editor/__tests__/glide-data-editor.test.tsx

@@ -0,0 +1,187 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import React from "react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { GlideDataEditor } from "../glide-data-editor";
+
+const capturedPortalRef = vi.hoisted(() => ({
+  ref: undefined as React.RefObject<HTMLElement> | undefined,
+}));
+
+vi.mock("@glideapps/glide-data-grid", async () => {
+  const React = await import("react");
+  return {
+    default: React.forwardRef(function MockDataEditor(
+      props: { portalElementRef?: React.RefObject<HTMLElement> },
+      _ref: React.Ref<HTMLDivElement>,
+    ) {
+      capturedPortalRef.ref = props.portalElementRef;
+      return <div data-testid="mock-data-editor" />;
+    }),
+    CompactSelection: {
+      empty: () => ({}),
+    },
+    GridCellKind: {
+      Text: "text",
+      Number: "number",
+      Boolean: "boolean",
+    },
+    GridColumnIcon: {
+      ProtectedColumnOverlay: "protected",
+    },
+  };
+});
+
+vi.mock("@/theme/useTheme", () => ({
+  useTheme: () => ({ theme: "light" }),
+}));
+
+const editorProps = {
+  data: [{ name: "alice" }],
+  setData: vi.fn(),
+  columnFields: new Map([["name", "string"]]) as Map<string, "string">,
+  setColumnFields: vi.fn(),
+  editableColumns: "all" as const,
+  edits: [],
+  onAddEdits: vi.fn(),
+  onAddRows: vi.fn(),
+  onDeleteRows: vi.fn(),
+  onRenameColumn: vi.fn(),
+  onDeleteColumn: vi.fn(),
+  onAddColumn: vi.fn(),
+};
+
+describe("GlideDataEditor portal", () => {
+  let fullscreenElement: Element | null;
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, "fullscreenElement", {
+      get: () => fullscreenElement,
+      configurable: true,
+    });
+    document.body
+      .querySelectorAll("[data-testid='glide-data-editor-portal']")
+      .forEach((node) => {
+        node.remove();
+      });
+  });
+
+  it("renders a body-level portal and passes it to DataEditor", async () => {
+    const { container } = render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    const portal = screen.getByTestId("glide-data-editor-portal");
+    expect(portal.parentElement).toBe(document.body);
+    expect(container.contains(portal)).toBe(false);
+    expect(capturedPortalRef.ref).toBeDefined();
+    await waitFor(() => {
+      expect(capturedPortalRef.ref?.current).toBe(portal);
+    });
+  });
+
+  it("mounts into the fullscreen element when fullscreen is already active", () => {
+    const fullscreenContainer = document.createElement("div");
+    document.body.appendChild(fullscreenContainer);
+    fullscreenElement = fullscreenContainer;
+
+    render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    const portal = fullscreenContainer.querySelector(
+      "[data-testid='glide-data-editor-portal']",
+    );
+    expect(portal).not.toBeNull();
+    expect(portal?.parentElement).toBe(fullscreenContainer);
+
+    fullscreenContainer.remove();
+  });
+
+  it("moves the portal into the fullscreen element while fullscreen is active", async () => {
+    render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    expect(
+      document.body.querySelector("[data-testid='glide-data-editor-portal']"),
+    ).not.toBeNull();
+
+    const fullscreenContainer = document.createElement("div");
+    document.body.appendChild(fullscreenContainer);
+
+    act(() => {
+      fullscreenElement = fullscreenContainer;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    await waitFor(() => {
+      const portal = fullscreenContainer.querySelector(
+        "[data-testid='glide-data-editor-portal']",
+      );
+      expect(portal?.parentElement).toBe(fullscreenContainer);
+    });
+
+    act(() => {
+      fullscreenElement = null;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    await waitFor(() => {
+      const portal = document.body.querySelector(
+        "[data-testid='glide-data-editor-portal']",
+      );
+      expect(portal?.parentElement).toBe(document.body);
+    });
+
+    fullscreenContainer.remove();
+  });
+
+  it("unmounts cleanly while fullscreen is active", async () => {
+    const fullscreenContainer = document.createElement("div");
+    document.body.appendChild(fullscreenContainer);
+
+    const { unmount } = render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    act(() => {
+      fullscreenElement = fullscreenContainer;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    await waitFor(() => {
+      expect(
+        fullscreenContainer.querySelector(
+          "[data-testid='glide-data-editor-portal']",
+        ),
+      ).not.toBeNull();
+    });
+
+    expect(() => {
+      act(() => unmount());
+    }).not.toThrow();
+
+    expect(
+      fullscreenContainer.querySelector(
+        "[data-testid='glide-data-editor-portal']",
+      ),
+    ).toBeNull();
+    expect(
+      document.body.querySelector("[data-testid='glide-data-editor-portal']"),
+    ).toBeNull();
+
+    fullscreenContainer.remove();
+  });
+});

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -56,6 +56,7 @@ import {
   removeColumn,
   renameColumn,
 } from "./data-utils";
+import { GlideDataEditorPortal } from "./glide-portal";
 
 interface GlideDataEditorProps<T> {
   data: T[];
@@ -88,6 +89,7 @@ export const GlideDataEditor = <T,>({
 }: GlideDataEditorProps<T>) => {
   const { theme } = useTheme();
   const dataEditorRef = useRef<DataEditorRef>(null);
+  const portalElementRef = useRef<HTMLDivElement>(null);
 
   const [menu, setMenu] = useState<{ col: number; bounds: Rectangle }>();
   const [showSearch, setShowSearch] = useState<boolean>(false);
@@ -613,9 +615,13 @@ export const GlideDataEditor = <T,>({
 
   return (
     <div className="relative w-full min-w-0">
+      <GlideDataEditorPortal portalRef={portalElementRef} />
       <ErrorBoundary>
         <DataEditor
           ref={dataEditorRef}
+          // Glide types portalElementRef as RefObject<HTMLElement> (non-null); React 19 refs include null.
+          // @ts-expect-error glide-data-grid stale RefObject typing
+          portalElementRef={portalElementRef}
           getCellContent={getCellContent}
           columns={columns}
           gridSelection={selection}

package/src/plugins/impl/data-editor/glide-portal.tsx

@@ -0,0 +1,73 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+/**
+ * Dismiss any open Glide Data Grid overlay by firing Escape on it.
+ */
+export function dismissGlideOverlay() {
+  const overlay = document.querySelector(
+    "[data-testid='glide-data-editor-portal'] .gdg-clip-region",
+  );
+  if (overlay) {
+    overlay.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+    );
+  }
+}
+
+function getGlidePortalContainer(): Element {
+  return document.fullscreenElement ?? document.body;
+}
+
+function useGlidePortalContainer(): Element {
+  const [container, setContainer] = useState<Element>(getGlidePortalContainer);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      if (document.fullscreenElement) {
+        setContainer(document.fullscreenElement);
+      } else {
+        dismissGlideOverlay();
+        setContainer(document.body);
+      }
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    // Sync on mount in case fullscreen became active before this editor mounted.
+    handleFullscreenChange();
+
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, []);
+
+  return container;
+}
+
+/**
+ * Per-instance Glide Data Grid overlay portal on document.body.
+ * Moves into the active fullscreen element via createPortal so edit overlays stay visible
+ */
+export function GlideDataEditorPortal({
+  portalRef,
+}: {
+  portalRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const container = useGlidePortalContainer();
+
+  return createPortal(
+    <div
+      ref={portalRef}
+      data-testid="glide-data-editor-portal"
+      style={{
+        position: "fixed",
+        left: 0,
+        top: 0,
+        zIndex: 9999,
+      }}
+    />,
+    container,
+  );
+}

package/dist/assets/CellStatus-B43aF1fe.js

@@ -1 +0,0 @@
-import{s as $}from"./chunk-LvLJmgfZ.js";import{t as O}from"./react-Bj1aDYRI.js";import{mt as F}from"./cells-DQ5n6Zef.js";import{t as z}from"./compiler-runtime-B3qBwwSJ.js";import{_ as B}from"./useEventListener-BakX-tnw.js";import{t as L}from"./jsx-runtime-PbYoItBR.js";import{t as _}from"./tooltip-CgQpRVyN.js";import{t as k}from"./ban-CttLZK8l.js";import{c as V,l as A,n as G,t as M}from"./toDate-DCE7d2fN.js";import{t as J}from"./ellipsis-D0iYysLh.js";import{t as R}from"./refresh-cw-DcEasnos.js";import{t as K}from"./workflow-ClrYl5m7.js";import{i as Q,n as Y,r as C,t as U}from"./en-US-DZwIjHwu.js";import{t as E}from"./useDateFormatter-CANi6nSX.js";import{t as I}from"./multi-icon-CGXdgpE4.js";function X(n,e){let t=M(n)-+M(e);return t<0?-1:t>0?1:t}function Z(n){return G(n,Date.now())}function ee(n,e,t){let[d,l]=Y(t==null?void 0:t.in,n,e),h=d.getFullYear()-l.getFullYear(),o=d.getMonth()-l.getMonth();return h*12+o}function te(n){return e=>{let t=(n?Math[n]:Math.trunc)(e);return t===0?0:t}}function se(n,e){return M(n)-+M(e)}function ae(n,e){let t=M(n,e==null?void 0:e.in);return t.setHours(23,59,59,999),t}function le(n,e){let t=M(n,e==null?void 0:e.in),d=t.getMonth();return t.setFullYear(t.getFullYear(),d+1,0),t.setHours(23,59,59,999),t}function ne(n,e){let t=M(n,e==null?void 0:e.in);return+ae(t,e)==+le(t,e)}function re(n,e,t){let[d,l,h]=Y(t==null?void 0:t.in,n,n,e),o=X(l,h),b=Math.abs(ee(l,h));if(b<1)return 0;l.getMonth()===1&&l.getDate()>27&&l.setDate(30),l.setMonth(l.getMonth()-o*b);let m=X(l,h)===-o;ne(d)&&b===1&&X(d,h)===1&&(m=!1);let x=o*(b-+m);return x===0?0:x}function ie(n,e,t){let d=se(n,e)/1e3;return te(t==null?void 0:t.roundingMethod)(d)}function ce(n,e,t){let d=Q(),l=(t==null?void 0:t.locale)??d.locale??U,h=X(n,e);if(isNaN(h))throw RangeError("Invalid time value");let o=Object.assign({},t,{addSuffix:t==null?void 0:t.addSuffix,comparison:h}),[b,m]=Y(t==null?void 0:t.in,...h>0?[e,n]:[n,e]),x=ie(m,b),D=(C(m)-C(b))/1e3,j=Math.round((x-D)/60),T;if(j<2)return t!=null&&t.includeSeconds?x<5?l.formatDistance("lessThanXSeconds",5,o):x<10?l.formatDistance("lessThanXSeconds",10,o):x<20?l.formatDistance("lessThanXSeconds",20,o):x<40?l.formatDistance("halfAMinute",0,o):x<60?l.formatDistance("lessThanXMinutes",1,o):l.formatDistance("xMinutes",1,o):j===0?l.formatDistance("lessThanXMinutes",1,o):l.formatDistance("xMinutes",j,o);if(j<45)return l.formatDistance("xMinutes",j,o);if(j<90)return l.formatDistance("aboutXHours",1,o);if(j<1440){let g=Math.round(j/60);return l.formatDistance("aboutXHours",g,o)}else{if(j<2520)return l.formatDistance("xDays",1,o);if(j<43200){let g=Math.round(j/V);return l.formatDistance("xDays",g,o)}else if(j<43200*2)return T=Math.round(j/A),l.formatDistance("aboutXMonths",T,o)}if(T=re(m,b),T<12){let g=Math.round(j/A);return l.formatDistance("xMonths",g,o)}else{let g=T%12,u=Math.trunc(T/12);return g<3?l.formatDistance("aboutXYears",u,o):g<9?l.formatDistance("overXYears",u,o):l.formatDistance("almostXYears",u+1,o)}}function oe(n,e){return ce(n,Z(n),e)}var q=$(O(),1);function ue(n){let e=(0,q.useRef)(n),[t,d]=(0,q.useState)(n);return(0,q.useEffect)(()=>{let l=setInterval(()=>{d(F.now().toMilliseconds())},17);return()=>clearInterval(l)},[]),t-e.current}var P=z(),s=$(L(),1);const de=n=>{let e=(0,P.c)(79),{editing:t,status:d,disabled:l,staleInputs:h,edited:o,interrupted:b,elapsedTime:m,runStartTimestamp:x,lastRunStartTimestamp:D,uninstantiated:j}=n;if(!t)return null;let T=x??D,g;e[0]===T?g=e[1]:(g=T?(0,s.jsx)(me,{lastRanTime:T}):null,e[0]=T,e[1]=g);let u=g;if(l&&d==="running")return B.error("CellStatusComponent: disabled and running"),null;if(l&&h){let c;e[2]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is stale, but it's disabled and can't be run"}),e[2]=c):c=e[2];let a;e[3]===u?a=e[4]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[3]=u,e[4]=a);let i;e[5]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"stale",children:(0,s.jsxs)(I,{children:[(0,s.jsx)(k,{className:"h-5 w-5",strokeWidth:1.5}),(0,s.jsx)(R,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[5]=i):i=e[5];let r;return e[6]===a?r=e[7]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[6]=a,e[7]=r),r}if(l){let c;e[8]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is disabled"}),e[8]=c):c=e[8];let a;e[9]===u?a=e[10]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[9]=u,e[10]=a);let i;e[11]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-disabled","data-testid":"cell-status","data-status":"disabled",children:(0,s.jsx)(k,{className:"h-5 w-5",strokeWidth:1.5})}),e[11]=i):i=e[11];let r;return e[12]===a?r=e[13]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[12]=a,e[13]=r),r}if(!h&&d==="disabled-transitively"){let c;e[14]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"An ancestor of this cell is disabled, so it can't be run"}),e[14]=c):c=e[14];let a;e[15]===u?a=e[16]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[15]=u,e[16]=a);let i;e[17]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"disabled-transitively",children:(0,s.jsxs)(I,{layerTop:!0,children:[(0,s.jsx)(K,{className:"h-5 w-5",strokeWidth:1.5}),(0,s.jsx)(k,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[17]=i):i=e[17];let r;return e[18]===a?r=e[19]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[18]=a,e[19]=r),r}if(h&&d==="disabled-transitively"){let c;e[20]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is stale, but an ancestor is disabled so it can't be run"}),e[20]=c):c=e[20];let a;e[21]===u?a=e[22]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[21]=u,e[22]=a);let i;e[23]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"stale",children:(0,s.jsxs)(I,{children:[(0,s.jsx)(R,{className:"h-5 w-5",strokeWidth:1}),(0,s.jsx)(k,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[23]=i):i=e[23];let r;return e[24]===a?r=e[25]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[24]=a,e[25]=r),r}if(d==="running"){let c;e[26]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is running"}),e[26]=c):c=e[26];let a;e[27]===u?a=e[28]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[27]=u,e[28]=a);let i;e[29]===x?i=e[30]:(i=F.fromSeconds(x)||F.now(),e[29]=x,e[30]=i);let r;e[31]===i?r=e[32]:(r=(0,s.jsx)("div",{className:"cell-status-icon elapsed-time running","data-testid":"cell-status","data-status":"running",children:(0,s.jsx)(he,{startTime:i})}),e[31]=i,e[32]=r);let f;return e[33]!==a||e[34]!==r?(f=(0,s.jsx)(_,{content:a,usePortal:!0,children:r}),e[33]=a,e[34]=r,e[35]=f):f=e[35],f}if(d==="queued"){let c;e[36]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is queued to run"}),e[36]=c):c=e[36];let a;e[37]===u?a=e[38]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[37]=u,e[38]=a);let i;e[39]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-queued","data-testid":"cell-status","data-status":"queued",children:(0,s.jsx)(J,{className:"h-5 w-5",strokeWidth:1.5})}),e[39]=i):i=e[39];let r;return e[40]===a?r=e[41]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[40]=a,e[41]=r),r}if(o||b||h||j){let c;e[42]===m?c=e[43]:(c=W(m),e[42]=m,e[43]=c);let a=c,i;e[44]!==m||e[45]!==a?(i=m?(0,s.jsx)(H,{elapsedTime:a}):null,e[44]=m,e[45]=a,e[46]=i):i=e[46];let r=i,f,v="";if(j)f="This cell has not yet been run";else if(b){f="This cell was interrupted when it was last run";let p;e[47]===r?p=e[48]:(p=(0,s.jsxs)("span",{children:["This cell ran for ",r," before being interrupted"]}),e[47]=r,e[48]=p),v=p}else if(o){f="This cell has been modified since it was last run";let p;e[49]===r?p=e[50]:(p=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[49]=r,e[50]=p),v=p}else{f="This cell has not been run with the latest inputs";let p;e[51]===r?p=e[52]:(p=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[51]=r,e[52]=p),v=p}let N;e[53]===Symbol.for("react.memo_cache_sentinel")?(N=(0,s.jsx)("div",{className:"cell-status-stale","data-testid":"cell-status","data-status":"outdated",children:(0,s.jsx)(R,{className:"h-5 w-5",strokeWidth:1.5})}),e[53]=N):N=e[53];let S;e[54]===f?S=e[55]:(S=(0,s.jsx)(_,{content:f,usePortal:!0,children:N}),e[54]=f,e[55]=S);let y;e[56]!==m||e[57]!==a||e[58]!==u||e[59]!==v?(y=m&&(0,s.jsx)(_,{content:(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[v,u]}),usePortal:!0,children:(0,s.jsx)("div",{className:"elapsed-time hover-action","data-testid":"cell-status","data-status":"outdated",children:(0,s.jsx)("span",{children:a})})}),e[56]=m,e[57]=a,e[58]=u,e[59]=v,e[60]=y):y=e[60];let w;return e[61]!==S||e[62]!==y?(w=(0,s.jsxs)("div",{className:"cell-status-icon flex items-center gap-2",children:[S,y]}),e[61]=S,e[62]=y,e[63]=w):w=e[63],w}if(m!==null){let c;e[64]===m?c=e[65]:(c=W(m),e[64]=m,e[65]=c);let a=c,i;e[66]!==m||e[67]!==a?(i=m?(0,s.jsx)(H,{elapsedTime:a}):null,e[66]=m,e[67]=a,e[68]=i):i=e[68];let r=i,f;e[69]===r?f=e[70]:(f=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[69]=r,e[70]=f);let v;e[71]!==u||e[72]!==f?(v=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[f,u]}),e[71]=u,e[72]=f,e[73]=v):v=e[73];let N;e[74]===a?N=e[75]:(N=(0,s.jsx)("div",{className:"cell-status-icon elapsed-time hover-action","data-testid":"cell-status","data-status":"idle",children:(0,s.jsx)("span",{children:a})}),e[74]=a,e[75]=N);let S;return e[76]!==v||e[77]!==N?(S=(0,s.jsx)(_,{content:v,usePortal:!0,children:N}),e[76]=v,e[77]=N,e[78]=S):S=e[78],S}return null},H=n=>{let e=(0,P.c)(2),t;return e[0]===n.elapsedTime?t=e[1]:(t=(0,s.jsx)("span",{className:"tracking-wide font-semibold",children:n.elapsedTime}),e[0]=n.elapsedTime,e[1]=t),t};var me=n=>{let e=(0,P.c)(4),t=new Date(n.lastRanTime*1e3),d=new Date,l;e[0]===Symbol.for("react.memo_cache_sentinel")?(l={hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,hour12:!0},e[0]=l):l=e[0];let h=E(l),o;e[1]===Symbol.for("react.memo_cache_sentinel")?(o={month:"numeric",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,hour12:!0},e[1]=o):o=e[1];let b=E(o),m=t.toDateString()===d.toDateString()?h:b,x=oe(t),D;return e[2]===x?D=e[3]:(D=(0,s.jsxs)("span",{className:"text-muted-foreground",children:["(",x," ago)"]}),e[2]=x,e[3]=D),(0,s.jsxs)("span",{children:["Ran at"," ",(0,s.jsx)("strong",{className:"tracking-wide font-semibold",children:m.format(t)})," ",D]})};function W(n){if(n===null)return"";let e=n,t=e/1e3;return t>=60?`${Math.floor(t/60)}m${Math.floor(t%60)}s`:t>=1?`${t.toFixed(2).toString()}s`:`${e.toFixed(0).toString()}ms`}var he=n=>{let e=(0,P.c)(6),t;e[0]===n.startTime?t=e[1]:(t=n.startTime.toMilliseconds(),e[0]=n.startTime,e[1]=t);let d=ue(t),l;e[2]===d?l=e[3]:(l=W(d),e[2]=d,e[3]=l);let h;return e[4]===l?h=e[5]:(h=(0,s.jsx)("span",{children:l}),e[4]=l,e[5]=h),h};export{H as n,W as r,de as t};