@marimo-team/frontend 0.23.15-dev6 → 0.23.15-dev63

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -12,7 +12,7 @@ import { isTrustedVirtualFileUrl } from "@/plugins/core/trusted-url";
 import { Logger } from "@/utils/Logger";
 import type { Host } from "./host";
 import type { Model } from "./model";
-import { modelProxy, type ProxyRegistration } from "./model-proxy";
+import { modelProxy } from "./model-proxy";
 import type { ModelState } from "./types";
 
 export const experimental: Experimental = {
@@ -80,6 +80,10 @@ class WidgetDefRegistry {
     return promise;
   }
 
+  invalidate(jsHash: string): void {
+    this.#cache.delete(jsHash);
+  }
+
   async #doImport(
     jsUrl: string,
     opts: { kernelAuthored?: boolean } = {},
@@ -266,9 +270,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * when the caller's `signal` fires or the binding is destroyed, and
    * listeners registered inside `render` auto-clear on abort.
    *
-   * Hydration guarantee: listeners attached during `render` observe
-   * current model state exactly once, after `render` settles. Scoped
-   * to this view's listeners; re-firing at other views double-paints.
+   * `render` reads current state via `model.get`; change listeners
+   * observe only subsequent changes, matching Jupyter semantics.
    */
   async createView(
     target: { el: HTMLElement },
@@ -305,11 +308,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     // Each view gets a host scoped to its own signal so child views tear
     // down with this view.
     const host = this.#createHost(renderSignal);
-    const registrations: ProxyRegistration[] = [];
     const renderCleanup = await widget.render({
-      model: modelProxy(this.#model, renderSignal, (registration) =>
-        registrations.push(registration),
-      ),
+      model: modelProxy(this.#model, renderSignal),
       el: target.el,
       experimental,
       signal: renderSignal,
@@ -333,7 +333,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
         once: true,
       });
     }
-    this.#replayState(registrations, renderSignal);
   }
 
   #trackCleanup(cleanup: Cleanup, reason: string): Promise<void> {
@@ -343,31 +342,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     return task;
   }
 
-  /**
-   * The hydration guarantee documented on `createView`.
-   */
-  #replayState(
-    registrations: readonly ProxyRegistration[],
-    renderSignal: AbortSignal,
-  ): void {
-    const changePrefix = "change:";
-    for (const { event, callback } of registrations) {
-      if (renderSignal.aborted) {
-        return;
-      }
-      try {
-        if (event.startsWith(changePrefix)) {
-          const key = event.slice(changePrefix.length);
-          callback(this.#model.get(key));
-        } else if (event === "change") {
-          callback();
-        }
-      } catch (error) {
-        Logger.error("[WidgetBinding] Error replaying state", error);
-      }
-    }
-  }
-
   /**
    * Destroy this generation, running initialize/render cleanups and
    * clearing listeners registered through its model proxies.

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -12,6 +12,13 @@ export interface ImageComparisonData {
   height?: string;
 }
 
+// Truncate long sources (e.g. base64 data URLs) so error messages stay
+// readable.
+function truncateSrc(src: string): string {
+  const MAX_LENGTH = 100;
+  return src.length > MAX_LENGTH ? `${src.slice(0, MAX_LENGTH)}…` : src;
+}
+
 const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   beforeSrc,
   afterSrc,
@@ -20,17 +27,61 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   width,
   height,
 }) => {
+  const [failedSrcs, setFailedSrcs] = React.useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  React.useEffect(() => {
+    setFailedSrcs(new Set());
+  }, [beforeSrc, afterSrc]);
+
+  const handleError = React.useCallback((src: string) => {
+    setFailedSrcs((prev) => new Set(prev).add(src));
+  }, []);
+
   const containerStyle: React.CSSProperties = {
     width: width || "100%",
     height: height || (direction === "vertical" ? "400px" : "auto"),
     maxWidth: "100%",
+    // The slider derives its height entirely from its (loaded) images, so a
+    // broken/slow-loading source would otherwise collapse it to nothing and
+    // render an empty output. Keep a minimum height so it stays visible.
+    minHeight: "2rem",
   };
 
+  // If an image fails to load, the slider collapses to nothing; surface a
+  // visible error instead of silently rendering an empty output.
+  if (failedSrcs.size > 0) {
+    return (
+      <div
+        style={containerStyle}
+        className="flex items-center justify-center rounded border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive"
+      >
+        <span>
+          Failed to load {failedSrcs.size > 1 ? "images" : "image"}:{" "}
+          {[...failedSrcs].map((src) => `"${truncateSrc(src)}"`).join(", ")}
+        </span>
+      </div>
+    );
+  }
+
   return (
     <div style={containerStyle}>
       <ImgComparisonSlider value={value} direction={direction}>
-        <img slot="first" src={beforeSrc} alt="Before" width="100%" />
-        <img slot="second" src={afterSrc} alt="After" width="100%" />
+        <img
+          slot="first"
+          src={beforeSrc}
+          alt="Before"
+          width="100%"
+          onError={() => handleError(beforeSrc)}
+        />
+        <img
+          slot="second"
+          src={afterSrc}
+          alt="After"
+          width="100%"
+          onError={() => handleError(afterSrc)}
+        />
       </ImgComparisonSlider>
     </div>
   );

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -0,0 +1,71 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import ImageComparisonComponent from "../ImageComparisonComponent";
+
+const baseProps = {
+  beforeSrc: "before.png",
+  afterSrc: "after.png",
+  value: 50,
+  direction: "horizontal" as const,
+};
+
+describe("ImageComparisonComponent", () => {
+  it("renders the comparison slider with both images", () => {
+    const { getByAltText, container } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+    expect(getByAltText("Before")).toBeTruthy();
+    expect(getByAltText("After")).toBeTruthy();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("shows a visible error instead of collapsing when an image fails to load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    // No error before the image fails.
+    expect(queryByText(/Failed to load/)).toBeNull();
+
+    fireEvent.error(getByAltText("Before"));
+
+    // The slider is replaced with a visible error mentioning the source, so
+    // the output is never a silent blank.
+    expect(container.querySelector("img-comparison-slider")).toBeNull();
+    const error = queryByText(/Failed to load image/);
+    expect(error).toBeTruthy();
+    expect(error?.textContent).toContain(brokenSrc);
+  });
+
+  it("clears the error when the sources change so new images can load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container, rerender } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    fireEvent.error(getByAltText("Before"));
+    expect(queryByText(/Failed to load/)).toBeTruthy();
+
+    // Re-render with a new source (e.g. the user fixed the notebook): the error
+    // should clear and the slider should mount again rather than stay stuck.
+    rerender(<ImageComparisonComponent {...baseProps} beforeSrc="fixed.png" />);
+    expect(queryByText(/Failed to load/)).toBeNull();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("truncates long sources (e.g. data URLs) in the error message", () => {
+    const longSrc = `data:image/png;base64,${"A".repeat(200)}`;
+    const { getByAltText, queryByText } = render(
+      <ImageComparisonComponent {...baseProps} afterSrc={longSrc} />,
+    );
+
+    fireEvent.error(getByAltText("After"));
+
+    const error = queryByText(/Failed to load image/);
+    expect(error?.textContent).toContain("…");
+    expect(error?.textContent).not.toContain("A".repeat(200));
+  });
+});

package/src/plugins/impl/vega/__tests__/use-vega-container-remeasure.test.ts

@@ -0,0 +1,102 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRef } from "react";
+import { useVegaContainerRemeasure } from "../use-vega-container-remeasure";
+
+describe("useVegaContainerRemeasure", () => {
+  let observers: FakeResizeObserver[];
+  let OriginalResizeObserver: typeof ResizeObserver;
+
+  class FakeResizeObserver {
+    callback: ResizeObserverCallback;
+    el: Element | null = null;
+
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+      observers.push(this);
+    }
+
+    observe(el: Element) {
+      this.el = el;
+    }
+
+    disconnect() {
+      this.el = null;
+    }
+
+    unobserve() {
+      this.el = null;
+    }
+
+    trigger(width: number) {
+      this.callback(
+        [
+          {
+            target: this.el!,
+            contentRect: {
+              width,
+              height: 100,
+              x: 0,
+              y: 0,
+              top: 0,
+              left: 0,
+              bottom: 100,
+              right: width,
+              toJSON: () => ({}),
+            },
+            borderBoxSize: [],
+            contentBoxSize: [],
+            devicePixelContentBoxSize: [],
+          } satisfies ResizeObserverEntry,
+        ],
+        this,
+      );
+    }
+  }
+
+  beforeEach(() => {
+    observers = [];
+    OriginalResizeObserver = globalThis.ResizeObserver;
+    globalThis.ResizeObserver =
+      FakeResizeObserver as unknown as typeof ResizeObserver;
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    globalThis.ResizeObserver = OriginalResizeObserver;
+    vi.unstubAllGlobals();
+  });
+
+  it("dispatches window resize when the container gains width", () => {
+    const el = document.createElement("div");
+    Object.defineProperty(el, "clientWidth", { value: 0, configurable: true });
+    const dispatchSpy = vi.spyOn(window, "dispatchEvent");
+
+    renderHook(() => {
+      const ref = useRef<HTMLDivElement>(el);
+      useVegaContainerRemeasure(ref, true);
+    });
+
+    expect(observers).toHaveLength(1);
+    observers[0].trigger(0);
+    expect(dispatchSpy).not.toHaveBeenCalled();
+
+    observers[0].trigger(640);
+    expect(dispatchSpy).toHaveBeenCalledWith(expect.any(Event));
+    expect(dispatchSpy.mock.calls[0][0].type).toBe("resize");
+  });
+
+  it("is a no-op when disabled", () => {
+    const el = document.createElement("div");
+    renderHook(() => {
+      const ref = useRef<HTMLDivElement>(el);
+      useVegaContainerRemeasure(ref, false);
+    });
+    expect(observers).toHaveLength(0);
+  });
+});

package/src/plugins/impl/vega/use-vega-container-remeasure.ts

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { type RefObject, useEffect } from "react";
+
+/**
+ * Vega-Lite's width:"container" only remeasures on window.resize — not when a
+ * parent goes from display:none / zero-size to a real layout size. Observe the
+ * embed host and dispatch the event Vega already listens for when the container
+ * gains a positive width.
+ */
+export function useVegaContainerRemeasure(
+  ref: RefObject<HTMLElement | null>,
+  enabled: boolean,
+): void {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled || typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    let lastWidth = el.clientWidth;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      if (width <= 0) {
+        lastWidth = 0;
+        return;
+      }
+      if (Math.round(width) === Math.round(lastWidth)) {
+        return;
+      }
+      lastWidth = width;
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new Event("resize"));
+      });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+}

package/src/plugins/impl/vega/vega-component.tsx

@@ -27,6 +27,7 @@ import { makeSelectable } from "./make-selectable";
 import { getSelectionParamNames, ParamNames } from "./params";
 import { resolveVegaSpecData } from "./resolve-data";
 import type { VegaLiteSpec } from "./types";
+import { useVegaContainerRemeasure } from "./use-vega-container-remeasure";
 import { getContainerWidth } from "./utils";
 
 // register arrow reader under type 'arrow'
@@ -276,6 +277,9 @@ const LoadedVegaComponent = ({
     onEmbed: handleNewView,
   });
 
+  const containerWidth = getContainerWidth(selectableSpec);
+  useVegaContainerRemeasure(vegaRef, containerWidth === "container");
+
   useEffect(() => {
     signalListeners.forEach(({ signalName, handler }) => {
       // Existing bug. TODO: Some signal listeners are invalid
@@ -310,10 +314,7 @@ const LoadedVegaComponent = ({
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >
-        <div
-          ref={vegaRef}
-          data-container-width={getContainerWidth(selectableSpec)}
-        />
+        <div ref={vegaRef} data-container-width={containerWidth} />
         {renderHelpContent()}
       </div>
     </>

package/src/theme/__tests__/useTheme.test.ts

@@ -0,0 +1,68 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it } from "vitest";
+import { configOverridesAtom, userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { store } from "@/core/state/jotai";
+import type { Theme } from "../useTheme";
+import { resolvedThemeAtom, visibleForTesting } from "../useTheme";
+
+const { themeFromQueryParam } = visibleForTesting;
+
+function setQuery(search: string): void {
+  window.history.replaceState({}, "", search === "" ? "/" : `/?${search}`);
+}
+
+function setConfigTheme(theme: Theme): void {
+  const config = defaultUserConfig();
+  store.set(userConfigAtom, {
+    ...config,
+    display: { ...config.display, theme },
+  });
+}
+
+afterEach(() => {
+  setQuery("");
+  store.set(userConfigAtom, defaultUserConfig());
+  store.set(configOverridesAtom, {});
+});
+
+describe("themeFromQueryParam", () => {
+  it.each(["light", "dark", "system"] as const)(
+    "returns the valid theme %s",
+    (theme) => {
+      setQuery(`theme=${theme}`);
+      expect(themeFromQueryParam()).toBe(theme);
+    },
+  );
+
+  it("returns undefined when the param is absent", () => {
+    setQuery("");
+    expect(themeFromQueryParam()).toBeUndefined();
+  });
+
+  it("returns undefined for an invalid value", () => {
+    setQuery("theme=blue");
+    expect(themeFromQueryParam()).toBeUndefined();
+  });
+});
+
+describe("resolvedThemeAtom with a theme query param", () => {
+  it("uses the saved config theme when no param is present", () => {
+    setConfigTheme("dark");
+    setQuery("");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+
+  it("lets the query param override the saved config theme", () => {
+    setConfigTheme("light");
+    setQuery("theme=dark");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+
+  it("falls back to the config theme for an invalid param value", () => {
+    setConfigTheme("dark");
+    setQuery("theme=blue");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+});

package/src/theme/useTheme.ts

@@ -2,6 +2,7 @@
 
 import { atom, useAtomValue } from "jotai";
 import { resolvedMarimoConfigAtom } from "@/core/config/config";
+import { KnownQueryParams } from "@/core/constants";
 import { isIslands } from "@/core/islands/utils";
 import { store } from "@/core/state/jotai";
 
@@ -10,6 +11,16 @@ export type ResolvedTheme = "light" | "dark";
 
 export const THEMES: Theme[] = ["light", "dark", "system"];
 
+function themeFromQueryParam(): Theme | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  const value = new URLSearchParams(window.location.search).get(
+    KnownQueryParams.theme,
+  );
+  return THEMES.includes(value as Theme) ? (value as Theme) : undefined;
+}
+
 const themeAtom = atom((get) => {
   // If it is islands, try a few ways to infer if it is dark mode.
   if (isIslands()) {
@@ -51,7 +62,7 @@ const themeAtom = atom((get) => {
     return "light";
   }
 
-  return get(resolvedMarimoConfigAtom).display.theme;
+  return themeFromQueryParam() ?? get(resolvedMarimoConfigAtom).display.theme;
 });
 
 const prefersDarkModeAtom = atom(false);
@@ -122,3 +133,7 @@ export function useTheme(): { theme: ResolvedTheme } {
   const theme = useAtomValue(resolvedThemeAtom, { store });
   return { theme };
 }
+
+export const visibleForTesting = {
+  themeFromQueryParam,
+};

package/dist/assets/CellStatus-CJiCB3Hi.js

@@ -1 +0,0 @@
-import{s as H}from"./chunk-LvLJmgfZ.js";import{t as z}from"./react-Bj1aDYRI.js";import{an as W,on as R}from"./cells-ChH37lAD.js";import{t as B}from"./compiler-runtime-B3qBwwSJ.js";import{_ as L}from"./useEventListener-BakX-tnw.js";import{t as V}from"./jsx-runtime-PbYoItBR.js";import{t as _}from"./tooltip-CgQpRVyN.js";import{t as k}from"./ban-CttLZK8l.js";import{c as G,l as A,n as J,t as M}from"./toDate-DCE7d2fN.js";import{t as K}from"./ellipsis-D0iYysLh.js";import{t as Y}from"./refresh-cw-C9FftltI.js";import{t as Q}from"./workflow-f8flhcJ1.js";import{i as U,n as F,r as E,t as Z}from"./en-US-BXNio91F.js";import{t as O}from"./useDateFormatter-CAlTJ8HV.js";import{t as I}from"./multi-icon-CTvmuLdL.js";function X(r,e){let t=M(r)-+M(e);return t<0?-1:t>0?1:t}function $(r){return J(r,Date.now())}function ee(r,e,t){let[d,l]=F(t==null?void 0:t.in,r,e),h=d.getFullYear()-l.getFullYear(),o=d.getMonth()-l.getMonth();return h*12+o}function te(r){return e=>{let t=(r?Math[r]:Math.trunc)(e);return t===0?0:t}}function se(r,e){return M(r)-+M(e)}function ae(r,e){let t=M(r,e==null?void 0:e.in);return t.setHours(23,59,59,999),t}function le(r,e){let t=M(r,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(r,e){let t=M(r,e==null?void 0:e.in);return+ae(t,e)==+le(t,e)}function re(r,e,t){let[d,l,h]=F(t==null?void 0:t.in,r,r,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(r,e,t){let d=se(r,e)/1e3;return te(t==null?void 0:t.roundingMethod)(d)}function ce(r,e,t){let d=U(),l=(t==null?void 0:t.locale)??d.locale??Z,h=X(r,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]=F(t==null?void 0:t.in,...h>0?[e,r]:[r,e]),x=ie(m,b),D=(E(m)-E(b))/1e3,p=Math.round((x-D)/60),v;if(p<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):p===0?l.formatDistance("lessThanXMinutes",1,o):l.formatDistance("xMinutes",p,o);if(p<45)return l.formatDistance("xMinutes",p,o);if(p<90)return l.formatDistance("aboutXHours",1,o);if(p<1440){let g=Math.round(p/60);return l.formatDistance("aboutXHours",g,o)}else{if(p<2520)return l.formatDistance("xDays",1,o);if(p<43200){let g=Math.round(p/G);return l.formatDistance("xDays",g,o)}else if(p<43200*2)return v=Math.round(p/A),l.formatDistance("aboutXMonths",v,o)}if(v=re(m,b),v<12){let g=Math.round(p/A);return l.formatDistance("xMonths",g,o)}else{let g=v%12,u=Math.trunc(v/12);return g<3?l.formatDistance("aboutXYears",u,o):g<9?l.formatDistance("overXYears",u,o):l.formatDistance("almostXYears",u+1,o)}}function oe(r,e){return ce(r,$(r),e)}var q=H(z(),1);function ue(r){let e=(0,q.useRef)(r),[t,d]=(0,q.useState)(r);return(0,q.useEffect)(()=>{let l=setInterval(()=>{d(W.now().toMilliseconds())},17);return()=>clearInterval(l)},[]),t-e.current}var P=B(),s=H(V(),1);const de=r=>{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:p}=r;if(!t)return null;let v=x??D,g;e[0]===v?g=e[1]:(g=v?(0,s.jsx)(me,{lastRanTime:v}):null,e[0]=v,e[1]=g);let u=g;if(l&&d==="running")return L.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)(Y,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[5]=i):i=e[5];let n;return e[6]===a?n=e[7]:(n=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[6]=a,e[7]=n),n}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 n;return e[12]===a?n=e[13]:(n=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[12]=a,e[13]=n),n}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)(Q,{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 n;return e[18]===a?n=e[19]:(n=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[18]=a,e[19]=n),n}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)(Y,{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 n;return e[24]===a?n=e[25]:(n=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[24]=a,e[25]=n),n}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=W.fromSeconds(x)||W.now(),e[29]=x,e[30]=i);let n;e[31]===i?n=e[32]:(n=(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]=n);let f;return e[33]!==a||e[34]!==n?(f=(0,s.jsx)(_,{content:a,usePortal:!0,children:n}),e[33]=a,e[34]=n,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)(K,{className:"h-5 w-5",strokeWidth:1.5})}),e[39]=i):i=e[39];let n;return e[40]===a?n=e[41]:(n=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[40]=a,e[41]=n),n}if(o||b||h||p){let c;e[42]===m?c=e[43]:(c=R(m),e[42]=m,e[43]=c);let a=c,i;e[44]!==m||e[45]!==a?(i=m?(0,s.jsx)(C,{elapsedTime:a}):null,e[44]=m,e[45]=a,e[46]=i):i=e[46];let n=i,f,T="";if(p)f="This cell has not yet been run";else if(b){f="This cell was interrupted when it was last run";let j;e[47]===n?j=e[48]:(j=(0,s.jsxs)("span",{children:["This cell ran for ",n," before being interrupted"]}),e[47]=n,e[48]=j),T=j}else if(o){f="This cell has been modified since it was last run";let j;e[49]===n?j=e[50]:(j=(0,s.jsxs)("span",{children:["This cell took ",n," to run"]}),e[49]=n,e[50]=j),T=j}else{f="This cell has not been run with the latest inputs";let j;e[51]===n?j=e[52]:(j=(0,s.jsxs)("span",{children:["This cell took ",n," to run"]}),e[51]=n,e[52]=j),T=j}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)(Y,{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]!==T?(y=m&&(0,s.jsx)(_,{content:(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[T,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]=T,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=R(m),e[64]=m,e[65]=c);let a=c,i;e[66]!==m||e[67]!==a?(i=m?(0,s.jsx)(C,{elapsedTime:a}):null,e[66]=m,e[67]=a,e[68]=i):i=e[68];let n=i,f;e[69]===n?f=e[70]:(f=(0,s.jsxs)("span",{children:["This cell took ",n," to run"]}),e[69]=n,e[70]=f);let T;e[71]!==u||e[72]!==f?(T=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[f,u]}),e[71]=u,e[72]=f,e[73]=T):T=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]!==T||e[77]!==N?(S=(0,s.jsx)(_,{content:T,usePortal:!0,children:N}),e[76]=T,e[77]=N,e[78]=S):S=e[78],S}return null},C=r=>{let e=(0,P.c)(2),t;return e[0]===r.elapsedTime?t=e[1]:(t=(0,s.jsx)("span",{className:"tracking-wide font-semibold",children:r.elapsedTime}),e[0]=r.elapsedTime,e[1]=t),t};var me=r=>{let e=(0,P.c)(4),t=new Date(r.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=O(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=O(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]})},he=r=>{let e=(0,P.c)(6),t;e[0]===r.startTime?t=e[1]:(t=r.startTime.toMilliseconds(),e[0]=r.startTime,e[1]=t);let d=ue(t),l;e[2]===d?l=e[3]:(l=R(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{C as n,de as t};