@marimo-team/islands 0.22.1-dev7 → 0.22.1-dev9

package/dist/{useDeepCompareMemoize-X7clcrcQ.js → useDeepCompareMemoize-DOzKCTzc.js}

@@ -5,7 +5,7 @@ import { t as toDate } from "./toDate-D6VXexnV.js";
 import { a as cva, v as cn } from "./button-qsiIHncQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import { C as dequal } from "./useTheme-Dm1WaAGy.js";
-import { i as tableFromIPC } from "./loader-3c9hT4kT.js";
+import { i as tableFromIPC } from "./loader-CMMa6QVT.js";
 function isDate(t) {
   return t instanceof Date || typeof t == "object" && Object.prototype.toString.call(t) === "[object Date]";
 }

package/dist/{vega-component-A6unyUJS.js → vega-component-BaDgUvQP.js}

@@ -10,10 +10,10 @@ import { t as Tooltip } from "./tooltip-DGHTbHl5.js";
 import { i as debounce_default } from "./constants-D1Am36hX.js";
 import { n as useTheme, w as useEvent_default } from "./useTheme-Dm1WaAGy.js";
 import { s as uniq } from "./arrays-Du-jRBAy.js";
-import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-X7clcrcQ.js";
+import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-DOzKCTzc.js";
 import { n as ErrorBanner } from "./error-banner-Bx9kIgrs.js";
 import { n as formats } from "./vega-loader.browser-DqEcFOPD.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-3c9hT4kT.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-CMMa6QVT.js";
 import { t as useAsyncData } from "./useAsyncData-Cd4Urlww.js";
 import { t as j } from "./react-vega-CzRAIHrv.js";
 import "./defaultLocale-qS7DaAmi.js";

package/package.json

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

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

@@ -33,4 +33,72 @@ describe("getContainerWidth", () => {
   it("should return undefined when width is explicitly undefined", () => {
     expect(getContainerWidth({ width: undefined })).toBeUndefined();
   });
+
+  it("should find width in nested facet spec", () => {
+    expect(
+      getContainerWidth({
+        $schema: "https://vega.github.io/schema/vega-lite/v6.json",
+        facet: { column: { field: "Origin", type: "nominal" } },
+        spec: {
+          mark: "point",
+          encoding: {},
+          width: "container",
+        },
+      }),
+    ).toBe("container");
+  });
+
+  it("should find width in nested repeat spec", () => {
+    expect(
+      getContainerWidth({
+        $schema: "https://vega.github.io/schema/vega-lite/v6.json",
+        repeat: { row: ["A", "B"] },
+        spec: {
+          mark: "point",
+          encoding: {},
+          width: "container",
+        },
+      }),
+    ).toBe("container");
+  });
+
+  it("should return undefined for nested spec without width", () => {
+    expect(
+      getContainerWidth({
+        facet: { column: { field: "Origin" } },
+        spec: { mark: "point", encoding: {} },
+      }),
+    ).toBeUndefined();
+  });
+
+  it("should return undefined for hconcat (width on sub-specs)", () => {
+    expect(
+      getContainerWidth({
+        hconcat: [{ width: "container" }, { width: "container" }],
+      }),
+    ).toBeUndefined();
+  });
+
+  it("should return undefined for vconcat (width on sub-specs)", () => {
+    expect(
+      getContainerWidth({
+        vconcat: [{ width: "container" }, { width: "container" }],
+      }),
+    ).toBeUndefined();
+  });
+
+  it("should return undefined for compiled Vega spec (width as signal)", () => {
+    expect(
+      getContainerWidth({
+        $schema: "https://vega.github.io/schema/vega/v6.json",
+        autosize: { contains: "padding", type: "fit-x" },
+        signals: [
+          {
+            name: "width",
+            init: "isFinite(containerSize()[0]) ? containerSize()[0] : 300",
+          },
+        ],
+      }),
+    ).toBeUndefined();
+  });
 });

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

@@ -6,13 +6,22 @@ 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.
+ * Get the container width from a Vega-Lite spec.
+ *
+ * For unit specs, `width` is at the top level. For facet/repeat specs,
+ * `width` is nested inside `spec`. This does not handle hconcat/vconcat and Vega spec
+ * where the width may be a signal. These cases are covered by
+ * the CSS fallback `.vega-embed:has(> .chart-wrapper.fit-x)`.
  */
 export function getContainerWidth(spec: unknown): ContainerWidth | undefined {
-  if (typeof spec === "object" && spec !== null && "width" in spec) {
-    return spec.width as ContainerWidth | undefined;
+  if (typeof spec === "object" && spec !== null) {
+    if ("width" in spec) {
+      return spec.width as ContainerWidth | undefined;
+    }
+    // Faceted/repeated spec
+    if ("spec" in spec) {
+      return getContainerWidth(spec.spec);
+    }
   }
   return undefined;
 }

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

@@ -4,7 +4,8 @@
   max-width: 100%;
 }
 
-.vega-embed[data-container-width="container"] {
+.vega-embed[data-container-width="container"],
+.vega-embed:has(> .chart-wrapper.fit-x) {
   width: 100%;
 }