@marimo-team/islands 0.24.1-dev41 → 0.24.1-dev43

package/dist/{useDateFormatter-6ImHK1ln.js → useDateFormatter-DjRKOAkR.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-DMWcHin-.js";
 import { u as n } from "./dist-DTSuOdDc.js";
-import { E as r } from "./strings-CoQ5sA4r.js";
+import { E as r } from "./select-Bakm9EUs.js";
 var i = n("chart-pie", [["path", {
 	d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
 	key: "pzmjnu"

package/dist/{vega-component-DlnGFDeY.js → vega-component-A2xO4BUa.js}

@@ -4,17 +4,17 @@ import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
 import { _ as o, c as s } from "./toDate-C4ZHOUTi.js";
 import { t as c } from "./jsx-runtime-CpoKNRgu.js";
-import { n as l } from "./error-banner-BbxpEiD5.js";
+import { n as l } from "./error-banner-BT4uIIQ2.js";
 import { t as u } from "./tooltip-rwx3Qbw6.js";
 import { t as d } from "./debounce-C3jyATpc.js";
 import { A as f, n as p } from "./useTheme-CLjV5H1i.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as ee } from "./objects-CzUgoMIF.js";
-import { a as h, i as te, n as ne, t as re } from "./formats-l5hZdDGj.js";
-import { A as ie, n as g } from "./vega-loader.browser-DEggZzni.js";
-import { t as ae } from "./react-vega-DSD5aT7_.js";
-import { a as oe, n as se } from "./loader-CgRtoLc5.js";
-import { t as _ } from "./useAsyncData-BPIoRmNG.js";
+import { t as h } from "./useAsyncData-BPIoRmNG.js";
+import { a as te, i as ne, n as re, t as g } from "./formats-l5hZdDGj.js";
+import { A as ie, n as ae } from "./vega-loader.browser-DEggZzni.js";
+import { t as oe } from "./react-vega-DSD5aT7_.js";
+import { a as se, n as _ } from "./loader-CgRtoLc5.js";
 import { t as ce } from "./useDeepCompareMemoize-rqhnGZ6D.js";
 import { t as le } from "./semaphore-89jsoHtS.js";
 import { t as ue } from "./use-vega-container-remeasure-DUW4tRxq.js";
@@ -490,7 +490,7 @@ async function U(e) {
 		} catch {
 			return e;
 		}
-		let a = e.data.format, o = await n.run(() => se(i.href, a));
+		let a = e.data.format, o = await n.run(() => _(i.href, a));
 		return t[i.pathname] = o, {
 			...e,
 			data: { name: i.pathname }
@@ -504,11 +504,11 @@ async function U(e) {
 //#endregion
 //#region src/plugins/impl/vega/vega-component.tsx
 var W = c();
-g("arrow", re);
+ae("arrow", g);
 var G = (e) => {
 	let t = (0, de.c)(12), { value: n, setValue: r, chartSelection: i, fieldSelection: a, spec: o, embedOptions: s } = e, c, u;
 	t[0] === o ? (c = t[1], u = t[2]) : (c = async () => U(o), u = [o], t[0] = o, t[1] = c, t[2] = u);
-	let { data: d, error: f } = _(c, u);
+	let { data: d, error: f } = h(c, u);
 	if (f) {
 		let e;
 		return t[3] === f ? e = t[4] : (e = /* @__PURE__ */ (0, W.jsx)(l, { error: f }), t[3] = f, t[4] = e), e;
@@ -524,7 +524,7 @@ var G = (e) => {
 		embedOptions: s
 	}), t[5] = i, t[6] = s, t[7] = a, t[8] = d, t[9] = r, t[10] = n, t[11] = p) : p = t[11], p;
 }, K = (e) => {
-	let i = (0, de.c)(50), { value: a, setValue: s, chartSelection: c, fieldSelection: l, spec: m, embedOptions: h } = e, { theme: re } = p(), g = (0, v.useRef)(null), se = (0, v.useRef)(void 0), [_, le] = (0, v.useState)(), y;
+	let i = (0, de.c)(50), { value: a, setValue: s, chartSelection: c, fieldSelection: l, spec: m, embedOptions: h } = e, { theme: te } = p(), g = (0, v.useRef)(null), ae = (0, v.useRef)(void 0), [_, le] = (0, v.useState)(), y;
 	bb0: {
 		if (h && "actions" in h) {
 			y = h.actions;
@@ -570,7 +570,7 @@ var G = (e) => {
 	}, i[17] = w, i[18] = F);
 	let I = f(F), L;
 	i[19] === Symbol.for("react.memo_cache_sentinel") ? (L = (e) => {
-		t.debug("[Vega view] created", e), se.current = e, le(void 0);
+		t.debug("[Vega view] created", e), ae.current = e, le(void 0);
 	}, i[19] = L) : L = i[19];
 	let R = f(L), z;
 	i[20] === D ? z = i[21] : (z = () => {
@@ -585,12 +585,12 @@ var G = (e) => {
 			children: /* @__PURE__ */ (0, W.jsx)(o, { className: "absolute bottom-1 right-0 m-2 h-4 w-4 cursor-help text-muted-foreground hover:text-foreground" })
 		});
 	}, i[20] = D, i[21] = z);
-	let B = z, V = re === "dark" ? "dark" : void 0, H;
+	let B = z, V = te === "dark" ? "dark" : void 0, H;
 	i[22] !== b || i[23] !== V ? (H = {
 		theme: V,
 		actions: b,
 		mode: "vega-lite",
-		tooltip: oe.call,
+		tooltip: se.call,
 		renderer: "canvas"
 	}, i[22] = b, i[23] = V, i[24] = H) : H = i[24];
 	let U;
@@ -601,7 +601,7 @@ var G = (e) => {
 		onError: I,
 		onEmbed: R
 	}, i[25] = I, i[26] = R, i[27] = w, i[28] = H, i[29] = U) : U = i[29];
-	let G = ae(U), K;
+	let G = oe(U), K;
 	i[30] === w ? K = i[31] : (K = ie(w), i[30] = w, i[31] = K);
 	let q = K;
 	ue(g, q === "container");
@@ -626,9 +626,9 @@ var G = (e) => {
 		});
 	}), Y = [G, P], i[32] = G, i[33] = P, i[34] = J, i[35] = Y) : (J = i[34], Y = i[35]), (0, v.useEffect)(J, Y);
 	let X;
-	i[36] === _ ? X = i[37] : (X = _ && /* @__PURE__ */ (0, W.jsxs)(ne, {
+	i[36] === _ ? X = i[37] : (X = _ && /* @__PURE__ */ (0, W.jsxs)(re, {
 		variant: "destructive",
-		children: [/* @__PURE__ */ (0, W.jsx)(te, { children: _.message }), /* @__PURE__ */ (0, W.jsx)("div", {
+		children: [/* @__PURE__ */ (0, W.jsx)(ne, { children: _.message }), /* @__PURE__ */ (0, W.jsx)("div", {
 			className: "text-md",
 			children: _.stack
 		})]
@@ -655,7 +655,7 @@ function me(e) {
 	return e instanceof Set ? [...e] : e;
 }
 function he(e) {
-	return Array.isArray(e) ? e.map((e) => e instanceof Date && h(e) ? new Date(e).getTime() : e) : e;
+	return Array.isArray(e) ? e.map((e) => e instanceof Date && te(e) ? new Date(e).getTime() : e) : e;
 }
 function ge(e, t) {
 	return /* @__PURE__ */ (0, W.jsxs)("div", { children: [

package/package.json

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

package/src/components/chat/acp/agent-panel.tsx

@@ -334,12 +334,10 @@ const PromptArea = memo<PromptAreaProps>(
       // sentence has to begin with '/' to trigger autocomplete
       return {
         triggerCompletionRegex: /^\/(\w+)?/,
-        completions: commands.map(
-          (prompt): Completion => ({
-            label: `/${prompt.name}`,
-            info: prompt.description,
-          }),
-        ),
+        completions: commands.map((prompt): Completion => ({
+          label: `/${prompt.name}`,
+          info: prompt.description,
+        })),
       };
     }, [commands]);
 

package/src/components/data-table/columns.tsx

@@ -196,150 +196,148 @@ export function generateColumns<T>({
     columnKeys.splice(indexColumnIdx, 1);
   }
 
-  const columns = columnKeys.map(
-    (key, idx): ColumnDef<T> => ({
-      id: key || `${NAMELESS_COLUMN_PREFIX}${idx}`,
-      // Use an accessorFn instead of an accessorKey because column names
-      // may have periods in them ...
-      // https://github.com/TanStack/table/issues/1671
-      accessorFn: (row) => {
-        return row[key as keyof T];
-      },
-      enableHiding: !rowHeadersSet.has(key) && key !== "",
-      header: ({ column, table }) => {
-        const stats = chartSpecModel?.getColumnStats(key);
-        const dtype = column.columnDef.meta?.dtype;
-        const headerTitle = headerTooltip?.[key];
-        const headerJustify = textJustifyColumns?.[key];
-
-        const dtypeHeader =
-          showDataTypes && dtype ? (
-            <div
-              className={cn(
-                "flex flex-row gap-1",
-                headerJustify === "center" && "justify-center",
-                headerJustify === "right" && "justify-end",
-              )}
-            >
-              <span className="text-xs text-muted-foreground">{dtype}</span>
-              {stats && typeof stats.nulls === "number" && stats.nulls > 0 && (
-                <span className="text-xs text-muted-foreground">
-                  (nulls: {stats.nulls})
-                </span>
-              )}
-            </div>
-          ) : null;
-
-        const headerName = (
-          <span
+  const columns = columnKeys.map((key, idx): ColumnDef<T> => ({
+    id: key || `${NAMELESS_COLUMN_PREFIX}${idx}`,
+    // Use an accessorFn instead of an accessorKey because column names
+    // may have periods in them ...
+    // https://github.com/TanStack/table/issues/1671
+    accessorFn: (row) => {
+      return row[key as keyof T];
+    },
+    enableHiding: !rowHeadersSet.has(key) && key !== "",
+    header: ({ column, table }) => {
+      const stats = chartSpecModel?.getColumnStats(key);
+      const dtype = column.columnDef.meta?.dtype;
+      const headerTitle = headerTooltip?.[key];
+      const headerJustify = textJustifyColumns?.[key];
+
+      const dtypeHeader =
+        showDataTypes && dtype ? (
+          <div
             className={cn(
-              "font-bold",
-              headerTitle && "underline decoration-dotted",
+              "flex flex-row gap-1",
+              headerJustify === "center" && "justify-center",
+              headerJustify === "right" && "justify-end",
             )}
           >
-            {key === "" ? " " : key}
-          </span>
-        );
+            <span className="text-xs text-muted-foreground">{dtype}</span>
+            {stats && typeof stats.nulls === "number" && stats.nulls > 0 && (
+              <span className="text-xs text-muted-foreground">
+                (nulls: {stats.nulls})
+              </span>
+            )}
+          </div>
+        ) : null;
 
-        const headerWithTooltip = headerTitle ? (
-          <Tooltip content={headerTitle} delayDuration={300}>
-            {headerName}
-          </Tooltip>
-        ) : (
-          headerName
-        );
+      const headerName = (
+        <span
+          className={cn(
+            "font-bold",
+            headerTitle && "underline decoration-dotted",
+          )}
+        >
+          {key === "" ? " " : key}
+        </span>
+      );
 
-        const dataTableColumnHeader = (
-          <DataTableColumnHeader
-            header={headerWithTooltip}
-            subheader={dtypeHeader}
-            column={column}
-            justify={headerJustify}
-            calculateTopKRows={calculateTopKRows}
-            table={table}
-          />
-        );
+      const headerWithTooltip = headerTitle ? (
+        <Tooltip content={headerTitle} delayDuration={300}>
+          {headerName}
+        </Tooltip>
+      ) : (
+        headerName
+      );
 
-        // Row headers have no summaries
-        if (rowHeadersSet.has(key)) {
-          return dataTableColumnHeader;
-        }
+      const dataTableColumnHeader = (
+        <DataTableColumnHeader
+          header={headerWithTooltip}
+          subheader={dtypeHeader}
+          column={column}
+          justify={headerJustify}
+          calculateTopKRows={calculateTopKRows}
+          table={table}
+        />
+      );
 
-        return (
-          <div
-            className={cn(
-              "flex flex-col h-full pt-0.5 pb-3 justify-between items-start",
-              headerJustify === "center" && "items-center",
-              headerJustify === "right" && "items-end",
-            )}
-          >
-            {dataTableColumnHeader}
-            <TableColumnSummary columnId={key} />
-          </div>
-        );
-      },
+      // Row headers have no summaries
+      if (rowHeadersSet.has(key)) {
+        return dataTableColumnHeader;
+      }
 
-      cell: ({ column, renderValue, getValue, cell }) => {
-        function selectCell() {
-          if (selection !== "single-cell" && selection !== "multi-cell") {
-            return;
-          }
+      return (
+        <div
+          className={cn(
+            "flex flex-col h-full pt-0.5 pb-3 justify-between items-start",
+            headerJustify === "center" && "items-center",
+            headerJustify === "right" && "items-end",
+          )}
+        >
+          {dataTableColumnHeader}
+          <TableColumnSummary columnId={key} />
+        </div>
+      );
+    },
 
-          cell.toggleSelected?.();
+    cell: ({ column, renderValue, getValue, cell }) => {
+      function selectCell() {
+        if (selection !== "single-cell" && selection !== "multi-cell") {
+          return;
         }
 
-        const justify = getJustify(key);
-        const wrapped = wrappedColumns?.includes(key);
-        const isCellSelected = cell?.getIsSelected?.() || false;
-        const canSelectCell =
-          (selection === "single-cell" || selection === "multi-cell") &&
-          !isCellSelected;
-
-        const dataType = column.columnDef.meta?.dataType;
-        const isNumeric = isNumericType(dataType);
-        const cellStyles = getCellStyleClass({
-          justify,
-          wrapped,
-          canSelectCell,
-          isSelected: isCellSelected,
-          isNumeric,
-        });
-
-        const renderedCell = renderCellValue({
-          column,
-          renderValue,
-          getValue,
-          selectCell,
-          cellStyles,
-        });
-
-        // Row headers are bold
-        if (rowHeadersSet.has(key)) {
-          return <b>{renderedCell}</b>;
-        }
+        cell.toggleSelected?.();
+      }
 
-        return renderedCell;
-      },
-      // Remove any default filtering
-      filterFn: undefined,
-      // Unnamed index columns and geometry columns are not sortable
-      enableSorting: !!key && getMeta(key).dataType !== "geometry",
-      meta: {
-        ...getMeta(key),
-        width: columnWidths?.[key],
-      },
-      // size seeds the width before measurement; minSize/maxSize pin
-      // getSize() to the fixed width so the per-paint measurement writeback
-      // cannot drift the header width or sticky-pin offsets.
-      ...(columnWidths?.[key] !== undefined
-        ? {
-            size: columnWidths[key],
-            minSize: columnWidths[key],
-            maxSize: columnWidths[key],
-          }
-        : {}),
-    }),
-  );
+      const justify = getJustify(key);
+      const wrapped = wrappedColumns?.includes(key);
+      const isCellSelected = cell?.getIsSelected?.() || false;
+      const canSelectCell =
+        (selection === "single-cell" || selection === "multi-cell") &&
+        !isCellSelected;
+
+      const dataType = column.columnDef.meta?.dataType;
+      const isNumeric = isNumericType(dataType);
+      const cellStyles = getCellStyleClass({
+        justify,
+        wrapped,
+        canSelectCell,
+        isSelected: isCellSelected,
+        isNumeric,
+      });
+
+      const renderedCell = renderCellValue({
+        column,
+        renderValue,
+        getValue,
+        selectCell,
+        cellStyles,
+      });
+
+      // Row headers are bold
+      if (rowHeadersSet.has(key)) {
+        return <b>{renderedCell}</b>;
+      }
+
+      return renderedCell;
+    },
+    // Remove any default filtering
+    filterFn: undefined,
+    // Unnamed index columns and geometry columns are not sortable
+    enableSorting: !!key && getMeta(key).dataType !== "geometry",
+    meta: {
+      ...getMeta(key),
+      width: columnWidths?.[key],
+    },
+    // size seeds the width before measurement; minSize/maxSize pin
+    // getSize() to the fixed width so the per-paint measurement writeback
+    // cannot drift the header width or sticky-pin offsets.
+    ...(columnWidths?.[key] !== undefined
+      ? {
+          size: columnWidths[key],
+          minSize: columnWidths[key],
+          maxSize: columnWidths[key],
+        }
+      : {}),
+  }));
 
   if (selection === "single" || selection === "multi") {
     columns.unshift({

package/src/components/datasources/datasources.tsx

@@ -3,7 +3,7 @@
 import { CommandList } from "cmdk";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
-import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
+import { PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
@@ -64,7 +64,7 @@ import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { PythonIcon } from "../editor/cell/code/icons";
 import { useAddCodeToNewCell } from "../editor/cell/useAddCell";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
-import { AddConnectionDialog } from "../editor/connections/add-connection-dialog";
+import { AddConnectionButton } from "../editor/connections/add-connection-button";
 import { DatasetColumnPreview } from "./column-preview";
 import {
   ColumnName,
@@ -250,12 +250,12 @@ export const DataSources: React.FC = () => {
         title="No tables found"
         description="Any datasets/dataframes in the global scope will be shown here."
         action={
-          <AddConnectionDialog>
-            <Button variant="outline" size="sm">
-              Add database or catalog
-              <PlusIcon className="h-4 w-4 ml-2" />
-            </Button>
-          </AddConnectionDialog>
+          <AddConnectionButton
+            group="database"
+            label="Add database or catalog"
+            variant="outline"
+            size="sm"
+          />
         }
         icon={<DatabaseIcon />}
       />
@@ -301,15 +301,14 @@ export const DataSources: React.FC = () => {
           className="px-2 rounded-none focus-visible:outline-hidden"
         />
 
-        <AddConnectionDialog>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="px-2 rounded-none focus-visible:outline-hidden"
-          >
-            <PlusIcon className="h-4 w-4" />
-          </Button>
-        </AddConnectionDialog>
+        <AddConnectionButton
+          group="database"
+          label="Add database or catalog"
+          compact={true}
+          variant="ghost"
+          size="sm"
+          className="px-2 rounded-none focus-visible:outline-hidden"
+        />
       </div>
 
       <CommandList className="flex flex-col">

package/src/components/editor/actions/useNotebookActions.tsx

@@ -73,6 +73,7 @@ import { useRequestClient } from "@/core/network/requests";
 import { useFilename } from "@/core/saving/filename";
 import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
+import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import { copyToClipboard } from "@/utils/copy";
 import { Objects } from "@/utils/objects";
 import { Strings } from "@/utils/strings";
@@ -81,6 +82,7 @@ import { useRunAllCells } from "../cell/useRunCells";
 import { useChromeActions, useChromeState } from "../chrome/state";
 import { isPanelHidden, PANELS } from "../chrome/types";
 import { AddConnectionDialogContent } from "../connections/add-connection-dialog";
+import { useAddDetectedDataSource } from "../connections/components";
 import { keyboardShortcutsAtom } from "../controls/keyboard-shortcuts";
 import { commandPaletteAtom } from "../controls/state";
 import { displayLayoutName, getLayoutIcon } from "../renderers/layout-select";
@@ -135,6 +137,9 @@ export function useNotebookActions({
   const setKeyboardShortcutsOpen = useSetAtom(keyboardShortcutsAtom);
   const setExportOptions = useSetAtom(exportOptionsAtom);
   const { readCode, saveCellConfig } = useRequestClient();
+  const detectedDatabaseSources = useDetectedDataSources("database");
+  const detectedStorageSources = useDetectedDataSources("storage");
+  const addDetectedDataSource = useAddDetectedDataSource();
 
   const hasDisabledCells = useAtomValue(hasDisabledCellsAtom);
   const canUndoDeletes = useAtomValue(canUndoDeletesAtom);
@@ -455,6 +460,27 @@ export function useNotebookActions({
       handle: () => {
         openModal(<AddConnectionDialogContent onClose={closeModal} />);
       },
+      dropdown:
+        detectedDatabaseSources.length === 0
+          ? undefined
+          : [
+              ...detectedDatabaseSources.map((source) => ({
+                icon: <SparklesIcon size={14} strokeWidth={1.5} />,
+                label: `Add ${source.displayName}`,
+                description: "Detected in your environment",
+                handle: () => addDetectedDataSource(source),
+              })),
+              {
+                divider: true,
+                icon: <DatabaseIcon size={14} strokeWidth={1.5} />,
+                label: "Browse all connections",
+                handle: () => {
+                  openModal(
+                    <AddConnectionDialogContent onClose={closeModal} />,
+                  );
+                },
+              },
+            ],
     },
     {
       icon: <HardDrive size={14} strokeWidth={1.5} />,
@@ -467,6 +493,30 @@ export function useNotebookActions({
           />,
         );
       },
+      dropdown:
+        detectedStorageSources.length === 0
+          ? undefined
+          : [
+              ...detectedStorageSources.map((source) => ({
+                icon: <SparklesIcon size={14} strokeWidth={1.5} />,
+                label: `Add ${source.displayName}`,
+                description: "Detected in your environment",
+                handle: () => addDetectedDataSource(source),
+              })),
+              {
+                divider: true,
+                icon: <HardDrive size={14} strokeWidth={1.5} />,
+                label: "Browse all connections",
+                handle: () => {
+                  openModal(
+                    <AddConnectionDialogContent
+                      defaultTab="storage"
+                      onClose={closeModal}
+                    />,
+                  );
+                },
+              },
+            ],
     },
     {
       icon: <Undo2Icon size={14} strokeWidth={1.5} />,

package/src/components/editor/chrome/panels/components.tsx

@@ -105,7 +105,7 @@ const DiscoveredSourcesBadge = ({
   return (
     <Tooltip content={content}>
       <span>
-        <PanelBadge className="gap-0.5 border-(--blue-6) bg-(--blue-3) text-(--blue-11)">
+        <PanelBadge className="gap-0.5 border-(--blue-6) bg-(--blue-3) text-(--blue-11) hover:bg-(--blue-4) dark:border-(--blue-8) dark:bg-(--blue-3) dark:hover:bg-(--blue-4)">
           <SparklesIcon className="h-2.5 w-2.5" />
           {count}
         </PanelBadge>