@marimo-team/islands 0.23.15-dev50 → 0.23.15-dev55

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/dist/apl-Bdc61P1y.js

@@ -1,4 +0,0 @@
-import { t as apl } from "./apl-BCgCq9iM.js";
-export {
-  apl
-};

package/dist/architecture-7HQA4BMR-Kyc44TmC.js

@@ -1,6 +0,0 @@
-import "./chunk-TCCFYFTB-D58KeXnC.js";
-import "./main-Tj_-QTyF.js";
-import { n as createArchitectureServices, t as ArchitectureModule } from "./chunk-UMXZTB3W-D7uwvNjd.js";
-export {
-  createArchitectureServices
-};

package/dist/asciiarmor-DVRHDGzT.js

@@ -1,4 +0,0 @@
-import { t as asciiArmor } from "./asciiarmor-BtqU-KJQ.js";
-export {
-  asciiArmor
-};

package/dist/asn1-BmuKfkfu.js

@@ -1,4 +0,0 @@
-import { t as asn1 } from "./asn1-Dmb-dTMx.js";
-export {
-  asn1
-};

package/dist/brainfuck-DPrRpyTV.js

@@ -1,4 +0,0 @@
-import { t as brainfuck } from "./brainfuck-C1HoZKlE.js";
-export {
-  brainfuck
-};

package/dist/classDiagram-2ON5EDUG-QjoAcuFE.js

@@ -1,30 +0,0 @@
-import "./purify.es-H92eMd9-.js";
-import "./chunk-S3R3BYOJ-oAe3dEbO.js";
-import { r as __name } from "./src-Bf2iLOlr.js";
-import "./chunk-ABZYJK2D-Dz0-H2B5.js";
-import "./chunk-HN2XXSSU-E3n-Ys7Z.js";
-import "./chunk-CVBHYZKI-B_c5YBcW.js";
-import "./chunk-ATLVNIR6-o0Z5MZLd.js";
-import "./dist-BGdYVvOu.js";
-import "./chunk-JA3XYJ7Z-C32Y7Epf.js";
-import "./chunk-JZLCHNYA-C6ftyVMN.js";
-import "./chunk-QXUST7PY-DMhsRpYK.js";
-import "./chunk-N4CR4FBY-DUhGZhZs.js";
-import "./chunk-FMBD7UC4-Ie8M9q0W.js";
-import "./chunk-55IACEB6-B-1mjMMC.js";
-import "./chunk-QN33PNHL-0K6SDYn3.js";
-import { i as styles_default, n as classDiagram_default, r as classRenderer_v3_unified_default, t as ClassDB } from "./chunk-B4BG7PRW-BL98U9B4.js";
-var diagram = {
-  parser: classDiagram_default,
-  get db() {
-    return new ClassDB();
-  },
-  renderer: classRenderer_v3_unified_default,
-  styles: styles_default,
-  init: /* @__PURE__ */ __name((e) => {
-    e.class || (e.class = {}), e.class.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
-  }, "init")
-};
-export {
-  diagram
-};

package/dist/classDiagram-v2-WZHVMYZB-bUCv4gu2.js

@@ -1,30 +0,0 @@
-import "./purify.es-H92eMd9-.js";
-import "./chunk-S3R3BYOJ-oAe3dEbO.js";
-import { r as __name } from "./src-Bf2iLOlr.js";
-import "./chunk-ABZYJK2D-Dz0-H2B5.js";
-import "./chunk-HN2XXSSU-E3n-Ys7Z.js";
-import "./chunk-CVBHYZKI-B_c5YBcW.js";
-import "./chunk-ATLVNIR6-o0Z5MZLd.js";
-import "./dist-BGdYVvOu.js";
-import "./chunk-JA3XYJ7Z-C32Y7Epf.js";
-import "./chunk-JZLCHNYA-C6ftyVMN.js";
-import "./chunk-QXUST7PY-DMhsRpYK.js";
-import "./chunk-N4CR4FBY-DUhGZhZs.js";
-import "./chunk-FMBD7UC4-Ie8M9q0W.js";
-import "./chunk-55IACEB6-B-1mjMMC.js";
-import "./chunk-QN33PNHL-0K6SDYn3.js";
-import { i as styles_default, n as classDiagram_default, r as classRenderer_v3_unified_default, t as ClassDB } from "./chunk-B4BG7PRW-BL98U9B4.js";
-var diagram = {
-  parser: classDiagram_default,
-  get db() {
-    return new ClassDB();
-  },
-  renderer: classRenderer_v3_unified_default,
-  styles: styles_default,
-  init: /* @__PURE__ */ __name((e) => {
-    e.class || (e.class = {}), e.class.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
-  }, "init")
-};
-export {
-  diagram
-};

package/dist/clojure-DEttQW5T.js

@@ -1,4 +0,0 @@
-import { t as clojure } from "./clojure-CdyrCpUv.js";
-export {
-  clojure
-};

package/dist/cmake-jNlx_DaM.js

@@ -1,4 +0,0 @@
-import { t as cmake } from "./cmake-BFlPxym7.js";
-export {
-  cmake
-};

package/dist/cobol-BvvIm5MJ.js

@@ -1,4 +0,0 @@
-import { t as cobol } from "./cobol-CcJXewp8.js";
-export {
-  cobol
-};

package/dist/coffeescript-DTpBMyFU.js

@@ -1,4 +0,0 @@
-import { t as coffeeScript } from "./coffeescript-DnKuIKRo.js";
-export {
-  coffeeScript
-};

package/dist/commonlisp-BmmUG8jb.js

@@ -1,4 +0,0 @@
-import { t as commonLisp } from "./commonlisp-B-kok83Z.js";
-export {
-  commonLisp
-};

package/dist/crystal-BxyqmEWC.js

@@ -1,4 +0,0 @@
-import { t as crystal } from "./crystal-FYRYjI1I.js";
-export {
-  crystal
-};

package/dist/css-BGoCtuG3.js

@@ -1,4 +0,0 @@
-import { n as mkCSS, t as gss } from "./css-B45lc2V3.js";
-export {
-  gss
-};

package/dist/cypher-BmCbdl3u.js

@@ -1,4 +0,0 @@
-import { t as cypher } from "./cypher-DZMLyVY_.js";
-export {
-  cypher
-};

package/dist/d-CFrlbjZt.js

@@ -1,4 +0,0 @@
-import { t as d } from "./d-x-VVT4o9.js";
-export {
-  d
-};

package/dist/diff-D6XwL6P8.js

@@ -1,4 +0,0 @@
-import { t as diff } from "./diff-Dxe2mpXk.js";
-export {
-  diff
-};

package/dist/dist-BEXXyZig.js

@@ -1,5 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import { n as yamlLanguage, t as yaml } from "./dist-BzEzfugY.js";
-export {
-  yaml
-};

package/dist/dist-BYj57OV4.js

@@ -1,5 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import { n as cppLanguage, t as cpp } from "./dist-CIYBwstr.js";
-export {
-  cpp
-};

package/dist/dist-BlSvQzNr.js

@@ -1,5 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import { n as javaLanguage, t as java } from "./dist-A2846XWO.js";
-export {
-  java
-};

package/dist/dist-CCBlxAgS.js

@@ -1,8 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import "./dist-BSAt6RhH.js";
-import "./dist-D-W5ny5a.js";
-import "./dist-M9Vag9Y0.js";
-import { n as phpLanguage, t as php } from "./dist-BY018Paw.js";
-export {
-  php
-};

package/dist/dist-CIDTVIUf.js

@@ -1,5 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import { n as rustLanguage, t as rust } from "./dist-Dax--nl9.js";
-export {
-  rust
-};

package/dist/dist-CqQyhAM8.js

@@ -1,8 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import "./dist-BSAt6RhH.js";
-import "./dist-D-W5ny5a.js";
-import "./dist-M9Vag9Y0.js";
-import { i as liquidLanguage, n as liquid, r as liquidCompletionSource, t as closePercentBrace } from "./dist-CpxNdDkw.js";
-export {
-  liquid
-};

package/dist/dist-CwRu2Xzh.js

@@ -1,5 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import { n as jsonLanguage, t as json } from "./dist-DZORgqKY.js";
-export {
-  json
-};

package/dist/dist-D8DNB0nO.js

@@ -1,8 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import "./dist-BSAt6RhH.js";
-import "./dist-D-W5ny5a.js";
-import "./dist-M9Vag9Y0.js";
-import { n as vueLanguage, t as vue } from "./dist-LTU8Hdvn.js";
-export {
-  vue
-};

package/dist/dist-DOFbNV_b.js

@@ -1,8 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import "./dist-BSAt6RhH.js";
-import "./dist-D-W5ny5a.js";
-import "./dist-M9Vag9Y0.js";
-import { i as jinjaLanguage, n as jinja, r as jinjaCompletionSource, t as closePercentBrace } from "./dist-BR_gyG9L.js";
-export {
-  jinja
-};

package/dist/dist-cdmMjgsn.js

@@ -1,5 +0,0 @@
-import "./dist-U4F-tbMs.js";
-import { n as wastLanguage, t as wast } from "./dist-DMjWuVs8.js";
-export {
-  wast
-};

package/dist/dtd-Bw0lRN0-.js

@@ -1,4 +0,0 @@
-import { t as dtd } from "./dtd-C9VM_Wfu.js";
-export {
-  dtd
-};

package/dist/dylan-B55eBHTt.js

@@ -1,4 +0,0 @@
-import { t as dylan } from "./dylan-DTSnEIFO.js";
-export {
-  dylan
-};

package/dist/ecl-C8G4p0wn.js

@@ -1,4 +0,0 @@
-import { t as ecl } from "./ecl-N04ptnRK.js";
-export {
-  ecl
-};

package/dist/eiffel-BmH46VJl.js

@@ -1,4 +0,0 @@
-import { t as eiffel } from "./eiffel-Dd8rpqr_.js";
-export {
-  eiffel
-};

package/dist/elm-DhzeFqkl.js

@@ -1,4 +0,0 @@
-import { t as elm } from "./elm-GT2E866W.js";
-export {
-  elm
-};

package/dist/erlang-CY-wdlsU.js

@@ -1,4 +0,0 @@
-import { t as erlang } from "./erlang-Cf0Bp5pY.js";
-export {
-  erlang
-};

package/dist/factor-DWkgl0xw.js

@@ -1,4 +0,0 @@
-import { t as factor } from "./factor-CajWS6mS.js";
-export {
-  factor
-};

package/dist/forth-Cij_ie2t.js

@@ -1,4 +0,0 @@
-import { t as forth } from "./forth-wd_XzGTg.js";
-export {
-  forth
-};

package/dist/fortran-Br3X9cfm.js

@@ -1,4 +0,0 @@
-import { t as fortran } from "./fortran-DcwUTZFe.js";
-export {
-  fortran
-};

package/dist/gas-DYsGcMN2.js

@@ -1,4 +0,0 @@
-import { t as gas } from "./gas-DeALIER3.js";
-export {
-  gas
-};

package/dist/gherkin-eVgXQ0fQ.js

@@ -1,4 +0,0 @@
-import { t as gherkin } from "./gherkin-CKTqaJNX.js";
-export {
-  gherkin
-};

package/dist/groovy-_NFHIXG7.js

@@ -1,4 +0,0 @@
-import { t as groovy } from "./groovy-Bwdp_d8D.js";
-export {
-  groovy
-};

package/dist/haskell-D6xNG_bH.js

@@ -1,4 +0,0 @@
-import { t as haskell } from "./haskell-DCdCcPLK.js";
-export {
-  haskell
-};

package/dist/haxe-sU_rzAwn.js

@@ -1,5 +0,0 @@
-import { n as hxml, t as haxe } from "./haxe-DAyktQWJ.js";
-export {
-  haxe,
-  hxml
-};

package/dist/idl-Ds_VbrUx.js

@@ -1,4 +0,0 @@
-import { t as idl } from "./idl-CBuZiRYu.js";
-export {
-  idl
-};

package/dist/infoDiagram-HS3SLOUP-CEnzWruK.js

@@ -1,30 +0,0 @@
-import "./chunk-TCCFYFTB-D58KeXnC.js";
-import "./main-Tj_-QTyF.js";
-import "./purify.es-H92eMd9-.js";
-import { i as log, r as __name } from "./src-Bf2iLOlr.js";
-import { t as package_default } from "./chunk-DR5Q36YT-BflwErH1.js";
-import { c as configureSvgSize } from "./chunk-ABZYJK2D-Dz0-H2B5.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-9sNjmQrB.js";
-import "./chunk-UMXZTB3W-D7uwvNjd.js";
-import "./chunk-4F5CHEZ2-D9nGEHV8.js";
-import "./chunk-FRFDVMJY-DzQqMWrl.js";
-import "./chunk-SJTYNZTY-BkJrPRFC.js";
-import "./chunk-PL6DKKU2-D7km-08O.js";
-import "./chunk-TQ3KTPDO-D_yA_wAb.js";
-import "./chunk-B2363JML-KEJpLGGP.js";
-import { t as parse } from "./mermaid-parser.core-C3XRsazI.js";
-var parser = { parse: /* @__PURE__ */ __name(async (a) => {
-  let o = await parse("info", a);
-  log.debug(o);
-}, "parse") }, DEFAULT_INFO_DB = { version: package_default.version + "" }, diagram = {
-  parser,
-  db: { getVersion: /* @__PURE__ */ __name(() => DEFAULT_INFO_DB.version, "getVersion") },
-  renderer: { draw: /* @__PURE__ */ __name((a, o, s) => {
-    log.debug("rendering info diagram\n" + a);
-    let c = selectSvgElement(o);
-    configureSvgSize(c, 100, 400, true), c.append("g").append("text").attr("x", 100).attr("y", 40).attr("class", "version").attr("font-size", 32).style("text-anchor", "middle").text(`v${s}`);
-  }, "draw") }
-};
-export {
-  diagram
-};

package/dist/javascript-CztfIl0i.js

@@ -1,4 +0,0 @@
-import { n as jsonld, t as javascript } from "./javascript-DzigE11c.js";
-export {
-  jsonld
-};

package/dist/julia-DDv40QMV.js

@@ -1,4 +0,0 @@
-import { t as julia } from "./julia-PwfB-0Cm.js";
-export {
-  julia
-};

package/dist/livescript-BEOngLLc.js

@@ -1,4 +0,0 @@
-import { t as liveScript } from "./livescript-BJLz1EbT.js";
-export {
-  liveScript
-};

package/dist/lua-9-7BhQ4Y.js

@@ -1,4 +0,0 @@
-import { t as lua } from "./lua-ZC-XC2jf.js";
-export {
-  lua
-};

package/dist/mathematica-DDa0Pfxm.js

@@ -1,4 +0,0 @@
-import { t as mathematica } from "./mathematica-DCYMx6qB.js";
-export {
-  mathematica
-};

package/dist/mbox-iO03mmoE.js

@@ -1,4 +0,0 @@
-import { t as mbox } from "./mbox-OxMK_9XI.js";
-export {
-  mbox
-};

package/dist/mirc-C9z5LT4X.js

@@ -1,4 +0,0 @@
-import { t as mirc } from "./mirc-nJVyhA0H.js";
-export {
-  mirc
-};

package/dist/mllike-jGJbdm_C.js

@@ -1,6 +0,0 @@
-import { n as oCaml, r as sml, t as fSharp } from "./mllike-DRO89bsU.js";
-export {
-  fSharp,
-  oCaml,
-  sml
-};

package/dist/modelica-DzF7oIEL.js

@@ -1,4 +0,0 @@
-import { t as modelica } from "./modelica-Don3E6ZD.js";
-export {
-  modelica
-};

package/dist/mscgen-DB-u125o.js

@@ -1,6 +0,0 @@
-import { n as msgenny, r as xu, t as mscgen } from "./mscgen-DJfqD3bN.js";
-export {
-  mscgen,
-  msgenny,
-  xu
-};

package/dist/mumps-CRTFHhzh.js

@@ -1,4 +0,0 @@
-import { t as mumps } from "./mumps-SjGTvDYL.js";
-export {
-  mumps
-};

package/dist/nsis-C4NPTuox.js

@@ -1,4 +0,0 @@
-import { t as nsis } from "./nsis-ClF3r5Tr.js";
-export {
-  nsis
-};

package/dist/ntriples-BCOoGph1.js

@@ -1,4 +0,0 @@
-import { t as ntriples } from "./ntriples-CNBKRl3I.js";
-export {
-  ntriples
-};

package/dist/octave-DTwNlazz.js

@@ -1,4 +0,0 @@
-import { t as octave } from "./octave-DdeVHNlx.js";
-export {
-  octave
-};

package/dist/oz-DD38AzSz.js

@@ -1,4 +0,0 @@
-import { t as oz } from "./oz-CcKSoNvN.js";
-export {
-  oz
-};

package/dist/pascal-BohSp9jV.js

@@ -1,4 +0,0 @@
-import { t as pascal } from "./pascal-6leftwNj.js";
-export {
-  pascal
-};

package/dist/perl-f5OutoPM.js

@@ -1,4 +0,0 @@
-import { t as perl } from "./perl-BhJIwWzN.js";
-export {
-  perl
-};

package/dist/pig-Dv7wSmHb.js

@@ -1,4 +0,0 @@
-import { t as pig } from "./pig-r-xDHqRf.js";
-export {
-  pig
-};