@marimo-team/islands 0.20.5-dev0 → 0.20.5-dev4

package/package.json

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

package/src/components/data-table/range-focus/__tests__/cell-selection-stats.test.tsx

@@ -3,6 +3,7 @@
 import type { Table } from "@tanstack/react-table";
 import { render, screen } from "@testing-library/react";
 import { useEffect } from "react";
+import { I18nProvider } from "react-aria";
 import { describe, expect, it } from "vitest";
 import { SELECT_COLUMN_ID } from "../../types";
 import { useCellSelectionReducerActions } from "../atoms";
@@ -21,7 +22,11 @@ const TestHarness = ({
   useEffect(() => {
     actions.setSelectedCells(selectedCellIds);
   }, [actions, selectedCellIds]);
-  return <CellSelectionStats table={table} />;
+  return (
+    <I18nProvider locale="en-US">
+      <CellSelectionStats table={table} />
+    </I18nProvider>
+  );
 };
 
 describe("CellSelectionStats", () => {
@@ -107,7 +112,7 @@ describe("CellSelectionStats", () => {
     expect(screen.queryByText(/Average:/)).not.toBeInTheDocument();
   });
 
-  it("should round sum and average to 8 decimal places", () => {
+  it("should round sum and average to 3 decimal places", () => {
     const row = createMockRow("0", [
       createMockCell("0_0", 0.112_233_441_1),
       createMockCell("0_1", 0.112_233_441_1),
@@ -120,14 +125,14 @@ describe("CellSelectionStats", () => {
       </CellSelectionProvider>,
     );
 
-    expect(screen.getByText("Sum: 0.22446688")).toBeInTheDocument(); // Round 0.2244668866 to 8 decimal places
-    expect(screen.getByText("Average: 0.11223344")).toBeInTheDocument(); // Round 0.1122334411 to 8 decimal places
+    expect(screen.getByText("Sum: 0.224")).toBeInTheDocument();
+    expect(screen.getByText("Average: 0.112")).toBeInTheDocument();
   });
 
-  it("should correctly round sum and average to 8 decimal places", () => {
+  it("should correctly round sum and average to 3 decimal places", () => {
     const row = createMockRow("0", [
-      createMockCell("0_0", 0.112_233_443_3),
-      createMockCell("0_1", 0.112_233_443_3),
+      createMockCell("0_0", 0.112_833_443_3),
+      createMockCell("0_1", 0.112_833_443_3),
     ]);
     const table = createMockTable([row], []);
 
@@ -137,8 +142,8 @@ describe("CellSelectionStats", () => {
       </CellSelectionProvider>,
     );
 
-    expect(screen.getByText("Sum: 0.22446689")).toBeInTheDocument(); // Round 0.2244668866 to 8 decimal places
-    expect(screen.getByText("Average: 0.11223344")).toBeInTheDocument(); // Round 0.1122334433 to 8 decimal places
+    expect(screen.getByText("Sum: 0.226")).toBeInTheDocument();
+    expect(screen.getByText("Average: 0.113")).toBeInTheDocument();
   });
 
   it("should not add extra decimal places to sum and average", () => {

package/src/components/data-table/range-focus/cell-selection-stats.tsx

@@ -2,6 +2,7 @@
 
 import type { Table } from "@tanstack/react-table";
 import { useAtomValue } from "jotai";
+import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
 import { selectedCellsAtom } from "./atoms";
 import {
@@ -9,6 +10,9 @@ import {
   getNumericValuesFromSelectedCells,
 } from "./utils";
 
+// Offers a good default for most use cases.
+const MAX_FRACTION_DIGITS = 3;
+
 /**
  * Displays summary stats (Count, Sum, Average) for the current cell selection.
  * Renders only when 2+ data cells are selected (checkbox column excluded).
@@ -22,6 +26,7 @@ export const CellSelectionStats = <TData,>({
   table: Table<TData>;
   className?: string;
 }) => {
+  const { locale } = useLocale();
   const selectedCells = useAtomValue(selectedCellsAtom);
   const dataCellCount = countDataCellsInSelection(selectedCells);
 
@@ -38,42 +43,68 @@ export const CellSelectionStats = <TData,>({
         className,
       )}
     >
-      <CountStat count={dataCellCount} />
-      <SumStat numericValues={numericValues} />
-      <AverageStat numericValues={numericValues} />
+      <CountStat count={dataCellCount} locale={locale} />
+      <SumStat numericValues={numericValues} locale={locale} />
+      <AverageStat numericValues={numericValues} locale={locale} />
     </div>
   );
 };
 
-const StatSpan = (statName: string, statValue: number) => {
+const formatNumber = (value: number, locale: string): string => {
+  return value.toLocaleString(locale, {
+    maximumFractionDigits: MAX_FRACTION_DIGITS,
+  });
+};
+
+const StatSpan = ({
+  name,
+  value,
+  locale,
+}: {
+  name: string;
+  value: number;
+  locale: string;
+}) => {
   return (
     <span>
-      {statName}: {statValue}
+      {name}: {formatNumber(value, locale)}
     </span>
   );
 };
 
-const CountStat = ({ count }: { count: number }) => {
-  return StatSpan("Count", count);
+const CountStat = ({ count, locale }: { count: number; locale: string }) => {
+  return <StatSpan name="Count" value={count} locale={locale} />;
 };
 
-const SumStat = ({ numericValues }: { numericValues: number[] }) => {
+const SumStat = ({
+  numericValues,
+  locale,
+}: {
+  numericValues: number[];
+  locale: string;
+}) => {
   if (numericValues.length === 0) {
     return null;
   }
 
   const sum = numericValues.reduce((acc, n) => acc + n, 0);
-  const sumRounded = Number(sum.toFixed(8));
-  return StatSpan("Sum", sumRounded);
+  const sumRounded = Number(sum.toFixed(MAX_FRACTION_DIGITS));
+  return <StatSpan name="Sum" value={sumRounded} locale={locale} />;
 };
 
-const AverageStat = ({ numericValues }: { numericValues: number[] }) => {
+const AverageStat = ({
+  numericValues,
+  locale,
+}: {
+  numericValues: number[];
+  locale: string;
+}) => {
   if (numericValues.length === 0) {
     return null;
   }
 
   const average =
     numericValues.reduce((acc, n) => acc + n, 0) / numericValues.length;
-  const averageRounded = Number(average.toFixed(8));
-  return StatSpan("Average", averageRounded);
+  const averageRounded = Number(average.toFixed(MAX_FRACTION_DIGITS));
+  return <StatSpan name="Average" value={averageRounded} locale={locale} />;
 };

package/src/components/editor/connections/storage/__tests__/__snapshots__/as-code.test.ts.snap

@@ -29,6 +29,43 @@ store = AzureStore("my-container",
 )"
 `;
 
+exports[`generateStorageCode > CoreWeave > basic connection with all fields 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("operator-bucket",
+    region="US-EAST-04A",
+    access_key_id="AKIAIOSFODNN7EXAMPLE",
+    secret_access_key="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+    endpoint="https://operator-bucket.cwobject.com",
+    virtual_hosted_style_request=True,
+)"
+`;
+
+exports[`generateStorageCode > CoreWeave > minimal connection (bucket and region only) 1`] = `
+"from obstore.store import S3Store
+
+store = S3Store("operator-bucket",
+    region="US-EAST-04A",
+    endpoint="https://operator-bucket.cwobject.com",
+    virtual_hosted_style_request=True,
+)"
+`;
+
+exports[`generateStorageCode > CoreWeave > with secrets 1`] = `
+"from obstore.store import S3Store
+import os
+
+_access_key_id = os.environ.get("COREWEAVE_OBJECT_STORAGE_KEY")
+_secret_access_key = os.environ.get("COREWEAVE_OBJECT_STORAGE_SECRET")
+store = S3Store("operator-bucket",
+    region="US-EAST-04A",
+    access_key_id=_access_key_id,
+    secret_access_key=_secret_access_key,
+    endpoint="https://operator-bucket.cwobject.com",
+    virtual_hosted_style_request=True,
+)"
+`;
+
 exports[`generateStorageCode > GCS > with service account key 1`] = `
 "from obstore.store import GCSStore
 import json

package/src/components/editor/connections/storage/__tests__/as-code.test.ts

@@ -27,6 +27,14 @@ describe("generateStorageCode", () => {
     account_key: "base64accountkey==",
   };
 
+  const baseCoreWeave: StorageConnection = {
+    type: "coreweave",
+    bucket: "operator-bucket",
+    region: "US-EAST-04A",
+    access_key_id: "AKIAIOSFODNN7EXAMPLE",
+    secret_access_key: "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY",
+  };
+
   const baseGDrive: StorageConnection = {
     type: "gdrive",
     credentials_json:
@@ -105,6 +113,32 @@ describe("generateStorageCode", () => {
     });
   });
 
+  describe("CoreWeave", () => {
+    it("basic connection with all fields", () => {
+      expect(generateStorageCode(baseCoreWeave, "obstore")).toMatchSnapshot();
+    });
+
+    it("minimal connection (bucket and region only)", () => {
+      const conn: StorageConnection = {
+        type: "coreweave",
+        bucket: "operator-bucket",
+        region: "US-EAST-04A",
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+
+    it("with secrets", () => {
+      const conn: StorageConnection = {
+        type: "coreweave",
+        bucket: "operator-bucket",
+        region: "US-EAST-04A",
+        access_key_id: prefixSecret("COREWEAVE_OBJECT_STORAGE_KEY"),
+        secret_access_key: prefixSecret("COREWEAVE_OBJECT_STORAGE_SECRET"),
+      };
+      expect(generateStorageCode(conn, "obstore")).toMatchSnapshot();
+    });
+  });
+
   describe("Google Drive", () => {
     it("with service account credentials", () => {
       expect(generateStorageCode(baseGDrive, "fsspec")).toMatchSnapshot();
@@ -162,5 +196,31 @@ describe("generateStorageCode", () => {
         ),
       ).toThrow();
     });
+
+    it("throws for empty CoreWeave bucket", () => {
+      expect(() =>
+        generateStorageCode(
+          {
+            type: "coreweave",
+            bucket: "",
+            region: "US-EAST-04A",
+          } as StorageConnection,
+          "obstore",
+        ),
+      ).toThrow();
+    });
+
+    it("throws for empty CoreWeave region", () => {
+      expect(() =>
+        generateStorageCode(
+          {
+            type: "coreweave",
+            bucket: "operator-bucket",
+            region: "",
+          } as StorageConnection,
+          "obstore",
+        ),
+      ).toThrow();
+    });
   });
 });

package/src/components/editor/connections/storage/add-storage-form.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import type { FieldValues } from "react-hook-form";
 import type { z } from "zod";
 import { ProtocolIcon } from "@/components/storage/components";
+import type { KnownStorageProtocol } from "@/core/storage/types";
 import { ConnectionForm, SelectorButton, SelectorGrid } from "../components";
 import {
   generateStorageCode,
@@ -12,6 +13,7 @@ import {
 } from "./as-code";
 import {
   AzureStorageSchema,
+  CoreWeaveStorageSchema,
   GCSStorageSchema,
   GoogleDriveStorageSchema,
   S3StorageSchema,
@@ -21,7 +23,6 @@ import {
 interface StorageProviderSchema {
   name: string;
   schema: z.ZodType<StorageConnection, FieldValues>;
-  color: string;
   protocol: string;
   storageLibraries: {
     libraries: StorageLibrary[];
@@ -29,11 +30,12 @@ interface StorageProviderSchema {
   };
 }
 
+const BACKGROUND_COLOR = "#232F3E";
+
 const STORAGE_PROVIDERS = [
   {
     name: "Amazon S3",
     schema: S3StorageSchema,
-    color: "#232F3E",
     protocol: "s3",
     storageLibraries: {
       libraries: ["obstore"],
@@ -43,7 +45,6 @@ const STORAGE_PROVIDERS = [
   {
     name: "Google Cloud Storage",
     schema: GCSStorageSchema,
-    color: "#4285F4",
     protocol: "gcs",
     storageLibraries: {
       libraries: ["obstore"],
@@ -53,17 +54,24 @@ const STORAGE_PROVIDERS = [
   {
     name: "Azure Blob Storage",
     schema: AzureStorageSchema,
-    color: "#0062AD",
     protocol: "azure",
     storageLibraries: {
       libraries: ["obstore"],
       preferred: "obstore",
     },
   },
+  {
+    name: "CoreWeave",
+    schema: CoreWeaveStorageSchema,
+    protocol: "coreweave",
+    storageLibraries: {
+      libraries: ["obstore"],
+      preferred: "obstore",
+    },
+  },
   {
     name: "Google Drive",
     schema: GoogleDriveStorageSchema,
-    color: "#177834",
     protocol: "gdrive",
     storageLibraries: {
       libraries: ["fsspec"],
@@ -77,18 +85,17 @@ const StorageProviderSelector: React.FC<{
 }> = ({ onSelect }) => {
   return (
     <SelectorGrid>
-      {STORAGE_PROVIDERS.map(({ name, schema, color, protocol }) => (
+      {STORAGE_PROVIDERS.map(({ name, schema, protocol }) => (
         <SelectorButton
           key={name}
           name={name}
-          color={color}
+          color={BACKGROUND_COLOR}
           icon={
-            <span className="w-8 h-8 flex items-center justify-center">
-              <ProtocolIcon
-                protocol={protocol}
-                className="w-7 h-7 brightness-0 invert"
-              />
-            </span>
+            <ProtocolIcon
+              protocol={protocol as KnownStorageProtocol}
+              forceDark={true}
+              className="w-7.5 h-7.5"
+            />
           }
           onSelect={() => onSelect(schema)}
         />

package/src/components/editor/connections/storage/as-code.ts

@@ -125,6 +125,40 @@ function generateAzureCode(
   return { imports, code };
 }
 
+function generateCoreWeaveCode(
+  connection: Extract<StorageConnection, { type: "coreweave" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const bucket = secrets.print("bucket", connection.bucket);
+  const imports = new Set(["from obstore.store import S3Store"]);
+  const params: string[] = [
+    `    region=${secrets.print("region", connection.region)},`,
+  ];
+
+  if (connection.access_key_id) {
+    params.push(
+      `    access_key_id=${secrets.print("access_key_id", connection.access_key_id)},`,
+    );
+  }
+  if (connection.secret_access_key) {
+    params.push(
+      `    secret_access_key=${secrets.print("secret_access_key", connection.secret_access_key)},`,
+    );
+  }
+
+  params.push(
+    `    endpoint="https://${connection.bucket}.cwobject.com",`,
+    "    virtual_hosted_style_request=True,",
+  );
+
+  const paramsStr = `\n${params.join("\n")}\n`;
+
+  const code = dedent(`
+    store = S3Store(${bucket},${paramsStr})
+  `);
+  return { imports, code };
+}
+
 function generateGDriveCode(
   connection: Extract<StorageConnection, { type: "gdrive" }>,
   secrets: SecretContainer,
@@ -169,6 +203,9 @@ export function generateStorageCode(
     case "azure":
       result = generateAzureCode(connection, secrets);
       break;
+    case "coreweave":
+      result = generateCoreWeaveCode(connection, secrets);
+      break;
     case "gdrive":
       result = generateGDriveCode(connection, secrets);
       break;

package/src/components/editor/connections/storage/schemas.ts

@@ -21,7 +21,6 @@ export const S3StorageSchema = z
         FieldOptions.of({
           label: "Region",
           placeholder: "us-east-1",
-          optionRegex: ".*region.*",
         }),
       ),
     access_key_id: z
@@ -115,6 +114,50 @@ export const AzureStorageSchema = z
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 
+export const CoreWeaveStorageSchema = z
+  .object({
+    type: z.literal("coreweave"),
+    bucket: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Bucket",
+          placeholder: "bucket-name",
+        }),
+      ),
+    region: z
+      .string()
+      .nonempty()
+      .describe(
+        FieldOptions.of({
+          label: "Region",
+          placeholder: "US-EAST-04A",
+        }),
+      ),
+    access_key_id: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Access Key ID",
+          inputType: "password",
+          optionRegex: ".*object_storage_key.*",
+        }),
+      ),
+    secret_access_key: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Secret Access Key",
+          inputType: "password",
+          optionRegex: ".*object_storage_secret.*",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
 export const GoogleDriveStorageSchema = z
   .object({
     type: z.literal("gdrive"),
@@ -135,6 +178,7 @@ export const StorageConnectionSchema = z.discriminatedUnion("type", [
   S3StorageSchema,
   GCSStorageSchema,
   AzureStorageSchema,
+  CoreWeaveStorageSchema,
   GoogleDriveStorageSchema,
 ]);
 

package/src/components/storage/components.tsx

@@ -75,15 +75,19 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
 
 export const ProtocolIcon: React.FC<{
   protocol: KnownStorageProtocol | (string & {});
+  forceDark?: boolean;
   className?: string;
-}> = ({ protocol, className }) => {
+}> = ({ protocol, forceDark, className }) => {
   const { theme } = useTheme();
   const entry =
     PROTOCOL_ICONS[protocol.toLowerCase() as KnownStorageProtocol] ??
     HardDriveIcon;
 
   if ("src" in entry) {
-    const src = theme === "dark" && entry.dark ? entry.dark : entry.src;
+    let src = entry.src;
+    if (entry.dark && (forceDark || theme === "dark")) {
+      src = entry.dark;
+    }
     return (
       <img src={src} alt={protocol} className={cn("h-3.5 w-3.5", className)} />
     );