@marimo-team/islands 0.21.1-dev11 → 0.21.1-dev13

package/dist/{useDeepCompareMemoize-DLS-bHHT.js → useDeepCompareMemoize-CJr2MRe6.js}

@@ -9,7 +9,7 @@ import { a as cva, g as Logger, y as cn } from "./button-DQpBib29.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { r as KnownQueryParams } from "./constants-CytQ_3LM.js";
 import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-D0rdoMBF.js";
-import { i as tableFromIPC } from "./loader-DsE3MiYo.js";
+import { i as tableFromIPC } from "./loader-V1UqqlAy.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{vega-component-CnO3mkFC.js → vega-component-Cq-KtS_2.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-DLS-bHHT.js";
+import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CJr2MRe6.js";
 import { d as Objects, g as Logger, h as Events, y as cn } from "./button-DQpBib29.js";
 import "./Combination-Dk6JxauT.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
@@ -9,7 +9,7 @@ import "./react-dom-CqtLRVZP.js";
 import { t as Tooltip } from "./tooltip-SPkubVH3.js";
 import { i as debounce_default } from "./constants-CytQ_3LM.js";
 import { C as useEvent_default, n as useTheme } from "./useTheme-D0rdoMBF.js";
-import { a as tooltipHandler, n as vegaLoadData } from "./loader-DsE3MiYo.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-V1UqqlAy.js";
 import { t as uniq_default } from "./uniq-H2E5nMLq.js";
 import { n as ErrorBanner } from "./error-banner-BctofTCP.js";
 import { n as formats } from "./vega-loader.browser-CQ-lnUkI.js";
@@ -598,9 +598,12 @@ var VegaComponent = (e) => {
       children: B.stack
     })]
   }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-    className: cn("relative", "width" in W && W.width === "container" && "vega-container-width"),
+    className: cn("relative"),
     onPointerDown: Events.stopPropagation(),
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: R }), Q()]
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      ref: R,
+      "data-container-width": getContainerWidth(W)
+    }), Q()]
   })] });
 };
 function convertSetToList(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.1-dev11",
+  "version": "0.21.1-dev13",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/charts/lazy-chart.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import type { TopLevelSpec } from "vega-lite";
 import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { tooltipHandler } from "@/components/charts/tooltip";
+import { getContainerWidth } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import type { ErrorMessage } from "./chart-spec/spec";
 import { augmentSpecWithData } from "./chart-spec/spec";
@@ -30,6 +31,7 @@ export const LazyChart: React.FC<{
       <React.Suspense fallback={<LoadingChart />}>
         <LazyVegaEmbed
           spec={spec}
+          data-container-width={getContainerWidth(spec)}
           options={{
             theme: theme === "dark" ? "dark" : undefined,
             height: height,

package/src/components/data-table/column-summary/column-summary.tsx

@@ -45,6 +45,7 @@ export const TableColumnSummary = <TData, TValue>({
         <Suspense fallback={skeleton}>
           <LazyVegaEmbed
             spec={spec}
+            data-container-width="container"
             options={{
               width: 80,
               height: 30,

package/src/components/datasources/column-preview.tsx

@@ -224,6 +224,7 @@ export function renderChart(chartSpec: string, theme: Theme) {
   return (
     <Suspense fallback={LoadingChart}>
       <LazyVegaEmbed
+        data-container-width="container"
         spec={updateSpec(JSON.parse(chartSpec) as TopLevelFacetedUnitSpec)}
         options={{
           theme: theme === "dark" ? "dark" : "vox",

package/src/components/editor/Output.tsx

@@ -27,6 +27,7 @@ import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import type { TopLevelFacetedUnitSpec } from "@/plugins/impl/data-explorer/queries/types";
+import { getContainerWidth } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import { Events } from "@/utils/events";
 import { invariant } from "@/utils/invariant";
@@ -205,6 +206,7 @@ export const OutputRenderer: React.FC<{
         <Suspense fallback={<ChartLoadingState />}>
           <LazyVegaEmbed
             spec={parsedJsonData as TopLevelFacetedUnitSpec}
+            data-container-width={getContainerWidth(parsedJsonData)}
             options={{
               theme: theme === "dark" ? "dark" : undefined,
               mode: "vega-lite",

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -5,6 +5,7 @@ import { useAtom } from "jotai";
 import { CrosshairIcon, PinIcon, PinOffIcon, XIcon } from "lucide-react";
 import type { PropsWithChildren } from "react";
 import { Panel, PanelResizeHandle } from "react-resizable-panels";
+import { raf2 } from "@/components/editor/navigation/focus-utils";
 import { Button } from "@/components/ui/button";
 import { Toggle } from "@/components/ui/toggle";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -151,6 +152,11 @@ const ResizableComponent = ({ children }: ResizableComponentProps) => {
     startingWidth: 400,
     minWidth: 300,
     maxWidth: 1500,
+    onResize: () => {
+      raf2(() => {
+        window.dispatchEvent(new Event("resize"));
+      });
+    },
   });
 
   return (

package/src/components/editor/chrome/wrapper/__tests__/utils.test.ts

@@ -0,0 +1,35 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it, vi } from "vitest";
+import { handleDragging } from "../utils";
+
+describe("handleDragging", () => {
+  it("should dispatch a resize event after dragging ends", async () => {
+    const listener = vi.fn();
+    window.addEventListener("resize", listener);
+
+    handleDragging(false);
+
+    // raf2: wait two animation frames
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    window.removeEventListener("resize", listener);
+  });
+
+  it("should not dispatch a resize event while dragging", async () => {
+    const listener = vi.fn();
+    window.addEventListener("resize", listener);
+
+    handleDragging(true);
+
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    expect(listener).not.toHaveBeenCalled();
+
+    window.removeEventListener("resize", listener);
+  });
+});

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -17,6 +17,7 @@ import "./app-chrome.css";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { useAtom, useAtomValue } from "jotai";
 import { XIcon } from "lucide-react";
+import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -26,6 +27,7 @@ import { capabilitiesAtom } from "@/core/config/capabilities";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
+import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
 import { PanelSectionProvider } from "../panels/panel-context";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -147,6 +149,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     });
   }, [panelLayout.sidebar, capabilities]);
 
+  const emitResizeEvent = useEvent(() => {
+    // HACK: Unfortunately, we have to do this twice to make sure the
+    // panel is fully expanded before we dispatch the resize event
+    raf2(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+  });
+
   // sync sidebar
   useEffect(() => {
     if (!sidebarRef.current) {
@@ -162,13 +172,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Dispatch a resize event so widgets know to resize
-    requestAnimationFrame(() => {
-      // HACK: Unfortunately, we have to do this twice to make sure it the
-      // panel is fully expanded before we dispatch the resize event
-      requestAnimationFrame(() => {
-        window.dispatchEvent(new Event("resize"));
-      });
-    });
+    emitResizeEvent();
   }, [isSidebarOpen]);
 
   // sync panel
@@ -186,13 +190,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Dispatch a resize event so widgets know to resize
-    requestAnimationFrame(() => {
-      // HACK: Unfortunately, we have to do this twice to make sure it the
-      // panel is fully expanded before we dispatch the resize event
-      requestAnimationFrame(() => {
-        window.dispatchEvent(new Event("resize"));
-      });
-    });
+    emitResizeEvent();
   }, [isDeveloperPanelOpen]);
 
   // Auto-correct developer panel selection when the selected tab is no longer available

package/src/components/editor/chrome/wrapper/utils.ts

@@ -1,8 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { raf2 } from "../../navigation/focus-utils";
+
 export function handleDragging(isDragging: boolean) {
   if (!isDragging) {
     // Once the user is done dragging, dispatch a resize event
-    window.dispatchEvent(new Event("resize"));
+    raf2(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
   }
 }

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -17,6 +17,7 @@ import { cn } from "@/utils/cn";
 import { Objects } from "@/utils/objects";
 import { ErrorBanner } from "../common/error-banner";
 import { vegaLoadData } from "../vega/loader";
+import { getContainerWidth } from "../vega/utils";
 import { ColumnSummary } from "./components/column-summary";
 import { QueryForm } from "./components/query-form";
 import type { SpecificEncoding } from "./encoding";
@@ -140,16 +141,18 @@ export const DataExplorerComponent = ({
     const responsiveSpec = makeResponsive(spec);
     // TODO: We can optimize by updating the data dynamically. https://github.com/vega/react-vega?tab=readme-ov-file#recipes
     const augmentedSpec = augmentSpecWithData(responsiveSpec, chartData);
-    const isContainerWidth = responsiveSpec.width === "container";
 
     return (
       <div
         className={cn(
           "flex overflow-y-auto justify-center items-center flex-1 w-[90%]",
-          isContainerWidth && "vega-container-width",
         )}
       >
-        <VegaEmbed spec={augmentedSpec} options={chartOptions(theme)} />
+        <VegaEmbed
+          data-container-width={getContainerWidth(augmentedSpec)}
+          spec={augmentedSpec}
+          options={chartOptions(theme)}
+        />
       </div>
     );
   };

package/src/plugins/impl/vega/__tests__/utils.test.ts

@@ -0,0 +1,36 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { getContainerWidth } from "../utils";
+
+describe("getContainerWidth", () => {
+  it('should return "container" when spec width is "container"', () => {
+    expect(getContainerWidth({ width: "container" })).toBe("container");
+  });
+
+  it("should return a numeric width", () => {
+    expect(getContainerWidth({ width: 500 })).toBe(500);
+  });
+
+  it("should return undefined when spec has no width", () => {
+    expect(getContainerWidth({ height: 300 })).toBeUndefined();
+  });
+
+  it("should return undefined for null", () => {
+    expect(getContainerWidth(null)).toBeUndefined();
+  });
+
+  it("should return undefined for undefined", () => {
+    expect(getContainerWidth(undefined)).toBeUndefined();
+  });
+
+  it("should return undefined for non-object values", () => {
+    expect(getContainerWidth("string")).toBeUndefined();
+    expect(getContainerWidth(42)).toBeUndefined();
+    expect(getContainerWidth(true)).toBeUndefined();
+  });
+
+  it("should return undefined when width is explicitly undefined", () => {
+    expect(getContainerWidth({ width: undefined })).toBeUndefined();
+  });
+});

package/src/plugins/impl/vega/utils.ts

@@ -3,6 +3,20 @@
 import { Objects } from "@/utils/objects";
 import type { DataType, FieldTypes, VegaDataType } from "./vega-loader";
 
+export type ContainerWidth = number | "container";
+
+/**
+ * Get the container width from a VegaLite spec.
+ * @param spec - The VegaLite spec.
+ * @returns The container width.
+ */
+export function getContainerWidth(spec: unknown): ContainerWidth | undefined {
+  if (typeof spec === "object" && spec !== null && "width" in spec) {
+    return spec.width as ContainerWidth | undefined;
+  }
+  return undefined;
+}
+
 export function mergeAsArrays<T>(
   left: T | T[] | undefined,
   right: T | T[] | undefined,

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 { getContainerWidth } from "./utils";
 
 // register arrow reader under type 'arrow'
 formats("arrow", arrow);
@@ -305,16 +306,14 @@ const LoadedVegaComponent = ({
         </Alert>
       )}
       <div
-        className={cn(
-          "relative",
-          "width" in selectableSpec &&
-            selectableSpec.width === "container" &&
-            "vega-container-width",
-        )}
+        className={cn("relative")}
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >
-        <div ref={vegaRef} />
+        <div
+          ref={vegaRef}
+          data-container-width={getContainerWidth(selectableSpec)}
+        />
         {renderHelpContent()}
       </div>
     </>

package/src/plugins/impl/vega/vega.css

@@ -4,7 +4,7 @@
   max-width: 100%;
 }
 
-.vega-container-width .vega-embed {
+.vega-embed[data-container-width="container"] {
   width: 100%;
 }