@marimo-team/islands 0.20.5-dev87 → 0.20.5-dev88

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

@@ -2,7 +2,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 { d as Objects, g as Logger, h as Events } from "./button-DQpBib29.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";
 import "./react-dom-CqtLRVZP.js";
@@ -598,7 +598,7 @@ var VegaComponent = (e) => {
       children: B.stack
     })]
   }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-    className: "relative",
+    className: cn("relative", "width" in W && W.width === "container" && "vega-container-width"),
     onPointerDown: Events.stopPropagation(),
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: R }), Q()]
   })] });

package/package.json

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

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

@@ -13,6 +13,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useOnMount } from "@/hooks/useLifecycle";
 import { type ResolvedTheme, useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 import { Objects } from "@/utils/objects";
 import { ErrorBanner } from "../common/error-banner";
 import { vegaLoadData } from "../vega/loader";
@@ -139,9 +140,15 @@ 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="flex overflow-y-auto justify-center items-center flex-1 w-[90%]">
+      <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)} />
       </div>
     );

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

@@ -16,6 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
@@ -304,7 +305,12 @@ const LoadedVegaComponent = ({
         </Alert>
       )}
       <div
-        className="relative"
+        className={cn(
+          "relative",
+          "width" in selectableSpec &&
+            selectableSpec.width === "container" &&
+            "vega-container-width",
+        )}
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >

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

@@ -1,18 +1,11 @@
 @reference "../../../css/globals.css";
 
 .vega-embed {
-  width: 100%;
-  flex: 1;
-  display: inline-block;
-
-  @media (min-width: 500px) {
-    min-width: 300px;
-  }
+  max-width: 100%;
+}
 
-  /* For vega embeds in slots, reset the styles to let the user set the width */
-  @container style(--slot: true) {
-    min-width: unset;
-  }
+.vega-container-width .vega-embed {
+  width: 100%;
 }
 
 .vega-embed > .chart-wrapper {