@marimo-team/islands 0.25.3-dev273 → 0.25.3-dev275

package/dist/{useAsyncData-BYIAoMqn.js → useAsyncData-Ci4AvJff.js}

@@ -1,8 +1,8 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
 import { t as n } from "./compiler-runtime-CldRdSsv.js";
-import { D as r } from "./utils-EBklsC5R.js";
-import { t as i } from "./invariant-DLmrl-hA.js";
+import { t as r } from "./invariant-DLmrl-hA.js";
+import { t as i } from "./useEvent-BRH-aCqi.js";
 //#region src/hooks/useAsyncData.ts
 var a = n(), o = /* @__PURE__ */ e(t(), 1), s = {
 	error(e, t) {
@@ -45,7 +45,7 @@ var a = n(), o = /* @__PURE__ */ e(t(), 1), s = {
 function c(e, t) {
 	let n = (0, a.c)(16), [c, d] = (0, o.useState)(0), [f, p] = (0, o.useState)(u), m;
 	n[0] === e ? m = n[1] : (m = typeof e == "function" ? { fetch: e } : e, n[0] = e, n[1] = m);
-	let h = r(m.fetch), g;
+	let h = i(m.fetch), g;
 	n[2] === h ? g = n[3] : (g = () => {
 		let e = new AbortController(), t = !1;
 		return p(l), h({ previous: () => {
@@ -67,7 +67,7 @@ function c(e, t) {
 	let v;
 	n[8] === f ? v = n[9] : (v = (e) => {
 		let t;
-		typeof e == "function" ? (i(f.status === "success" || f.status === "loading", "No previous state value."), t = e(f.data)) : t = e, p(s.success(t));
+		typeof e == "function" ? (r(f.status === "success" || f.status === "loading", "No previous state value."), t = e(f.data)) : t = e, p(s.success(t));
 	}, n[8] = f, n[9] = v);
 	let y;
 	n[10] === c ? y = n[11] : (y = () => d(c + 1), n[10] = c, n[11] = y);

package/dist/{useDateFormatter-ButWkdcK.js → useDateFormatter-CPlava52.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
-import { h as n } from "./tooltip-BfcDQd2j.js";
-import { C as r } from "./select-OxgozOC8.js";
+import { h as n } from "./tooltip-DMMiOn2f.js";
+import { C as r } from "./select-DsoP1qe8.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/{useDeepCompareMemoize-Bz0c5GN6.js → useDeepCompareMemoize-NaaWoFlX.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
-import { l as n } from "./utils-EBklsC5R.js";
+import { Mt as n } from "./use-restore-focus-CosX7-gx.js";
 //#region src/hooks/useDeepCompareMemoize.ts
 var r = /* @__PURE__ */ e(t(), 1);
 function i(e) {

package/dist/useEvent-BRH-aCqi.js

@@ -0,0 +1,19 @@
+import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
+import { t } from "./react-sHtZdjeP.js";
+//#region ../node_modules/.pnpm/react-use-event-hook@0.9.6_react@19.3.0/node_modules/react-use-event-hook/dist/esm/useEvent.js
+var n = /* @__PURE__ */ e(t()), r = typeof window < "u" ? n.useInsertionEffect || n.useLayoutEffect : () => {};
+function i(e) {
+	let t = n.useRef(a);
+	r(() => {
+		t.current = e;
+	}, [e]);
+	let i = n.useRef(null);
+	return i.current ||= function() {
+		return t.current.apply(this, arguments);
+	}, i.current;
+}
+function a() {
+	throw Error("INVALID_USEEVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
+}
+//#endregion
+export { i as t };

package/dist/{useIframeCapabilities-BIolGsF1.js → useIframeCapabilities-BXhDDoCG.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./compiler-runtime-CldRdSsv.js";
-import { t } from "./capabilities-B6yy_CBN.js";
+import { t } from "./capabilities-D9FskwsK.js";
 //#region src/hooks/useIframeCapabilities.ts
 var n = e();
 function r() {

package/dist/{useLifecycle-JjxCC7Vu.js → useLifecycle-SniivYmC.js}

@@ -1,8 +1,8 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { h as t, s as n } from "./button-0-RqY1DW.js";
+import { h as t, r as n } from "./button-DZuNnIZO.js";
 import { t as r } from "./react-sHtZdjeP.js";
 import { t as i } from "./compiler-runtime-CldRdSsv.js";
-import { h as a } from "./tooltip-BfcDQd2j.js";
+import { h as a } from "./tooltip-DMMiOn2f.js";
 import { t as o } from "./jsx-runtime-3BD1kT0s.js";
 var s = a("calendar", [
 	["path", {

package/dist/{vega-component-rxIxAAh9.js → vega-component-DIxaDQNs.js}

@@ -1,23 +1,23 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { a as t, g as n, h as r, m as i } from "./button-0-RqY1DW.js";
+import { g as t, h as n, m as r, s as i } from "./button-DZuNnIZO.js";
 import { t as a } from "./react-sHtZdjeP.js";
 import { t as o } from "./compiler-runtime-CldRdSsv.js";
-import { t as s } from "./tooltip-BfcDQd2j.js";
-import { l as c, t as l } from "./config-BsPruWMR.js";
+import { t as s } from "./tooltip-DMMiOn2f.js";
+import { l as c, t as l } from "./config-C8MFHQ2E.js";
 import { t as u } from "./jsx-runtime-3BD1kT0s.js";
-import { n as d } from "./error-banner-DPc9eIw5.js";
-import { t as f } from "./debounce-DrhhziJv.js";
-import { n as p } from "./useTheme-DPLobSFs.js";
-import { D as ee } from "./utils-EBklsC5R.js";
-import { t as te } from "./objects-DCmMvZtn.js";
-import { a as ne, i as re, n as ie, t as m } from "./formats-DbSvAPY-.js";
+import { u as d } from "./use-restore-focus-CosX7-gx.js";
+import { n as f } from "./error-banner-CHCdHVFB.js";
+import { t as p } from "./debounce-DrhhziJv.js";
+import { t as ee } from "./objects-DCmMvZtn.js";
+import { t as te } from "./useEvent-BRH-aCqi.js";
+import { a as ne, i as re, n as ie, t as m } from "./formats-PzBQMUnr.js";
 import { a as h, t as g } from "./arrays-DoQ-AILx.js";
-import { t as ae } from "./useAsyncData-BYIAoMqn.js";
+import { t as ae } from "./useAsyncData-Ci4AvJff.js";
 import { t as _ } from "./semaphore-89jsoHtS.js";
 import { D as oe, n as se } from "./vega-loader.browser-B9Pz0EGP.js";
 import { t as ce } from "./react-vega-C4T9Rb_w.js";
-import { a as le, n as v } from "./loader-BVEtQ4F3.js";
-import { t as ue } from "./useDeepCompareMemoize-Bz0c5GN6.js";
+import { a as le, n as v } from "./loader-DZvtzQoD.js";
+import { t as ue } from "./useDeepCompareMemoize-NaaWoFlX.js";
 import { t as de } from "./use-vega-container-remeasure-Bz4PZMtt.js";
 //#region src/plugins/impl/vega/fix-relative-url.ts
 var fe = /* @__PURE__ */ e(a(), 1), pe = o();
@@ -103,7 +103,7 @@ var y = {
 	}
 };
 function C() {
-	return t() ? "metaKey" : "ctrlKey";
+	return i() ? "metaKey" : "ctrlKey";
 }
 var w = {
 	highlight() {
@@ -515,10 +515,10 @@ se("arrow", m);
 var K = (e) => {
 	let t = (0, pe.c)(12), { value: n, setValue: r, chartSelection: i, fieldSelection: a, spec: o, embedOptions: s } = e, c, l;
 	t[0] === o ? (c = t[1], l = t[2]) : (c = async () => W(o), l = [o], t[0] = o, t[1] = c, t[2] = l);
-	let { data: u, error: f } = ae(c, l);
-	if (f) {
+	let { data: u, error: d } = ae(c, l);
+	if (d) {
 		let e;
-		return t[3] === f ? e = t[4] : (e = /* @__PURE__ */ (0, G.jsx)(d, { error: f }), t[3] = f, t[4] = e), e;
+		return t[3] === d ? e = t[4] : (e = /* @__PURE__ */ (0, G.jsx)(f, { error: d }), t[3] = d, t[4] = e), e;
 	}
 	if (!u) return null;
 	let p;
@@ -531,7 +531,7 @@ var K = (e) => {
 		embedOptions: s
 	}), t[5] = i, t[6] = s, t[7] = a, t[8] = u, t[9] = r, t[10] = n, t[11] = p) : p = t[11], p;
 }, q = (e) => {
-	let a = (0, pe.c)(50), { value: o, setValue: l, chartSelection: u, fieldSelection: d, spec: ne, embedOptions: m } = e, { theme: h } = p(), g = (0, fe.useRef)(null), ae = (0, fe.useRef)(void 0), [_, se] = (0, fe.useState)(), v;
+	let a = (0, pe.c)(50), { value: o, setValue: l, chartSelection: u, fieldSelection: f, spec: ne, embedOptions: m } = e, { theme: h } = d(), g = (0, fe.useRef)(null), ae = (0, fe.useRef)(void 0), [_, se] = (0, fe.useState)(), v;
 	bb0: {
 		if (m && "actions" in m) {
 			v = m.actions;
@@ -544,10 +544,10 @@ var K = (e) => {
 		}, a[0] = e) : e = a[0], v = e;
 	}
 	let y = v, b = ue(ne), x;
-	a[1] !== u || a[2] !== d || a[3] !== b ? (x = he(me(b), {
+	a[1] !== u || a[2] !== f || a[3] !== b ? (x = he(me(b), {
 		chartSelection: u,
-		fieldSelection: d
-	}), a[1] = u, a[2] = d, a[3] = b, a[4] = x) : x = a[4];
+		fieldSelection: f
+	}), a[1] = u, a[2] = f, a[3] = b, a[4] = x) : x = a[4];
 	let C = x, w;
 	a[5] === C ? w = a[6] : (w = E(C), a[5] = C, a[6] = w);
 	let T = w, D;
@@ -557,11 +557,11 @@ var K = (e) => {
 			...e
 		});
 	}, a[7] = l, a[8] = o, a[9] = D) : D = a[9];
-	let O = ee(D), k;
-	a[10] === O ? k = a[11] : (k = f((e, t) => {
-		n.debug("[Vega signal]", e, t);
-		let r = te.mapValues(t, _e);
-		r = te.mapValues(r, ge), O({ [e]: r });
+	let O = te(D), k;
+	a[10] === O ? k = a[11] : (k = p((e, n) => {
+		t.debug("[Vega signal]", e, n);
+		let r = ee.mapValues(n, _e);
+		r = ee.mapValues(r, ge), O({ [e]: r });
 	}, 100), a[10] = O, a[11] = k);
 	let A = k, j = ue(T), M;
 	if (a[12] !== A || a[13] !== j) {
@@ -573,18 +573,18 @@ var K = (e) => {
 	} else M = a[14];
 	let N = M, P;
 	a[17] === C ? P = a[18] : (P = (e) => {
-		n.error(e), n.debug(C), se(e);
+		t.error(e), t.debug(C), se(e);
 	}, a[17] = C, a[18] = P);
-	let F = ee(P), I;
+	let F = te(P), I;
 	a[19] === Symbol.for("react.memo_cache_sentinel") ? (I = (e) => {
-		n.debug("[Vega view] created", e), ae.current = e, se(void 0);
+		t.debug("[Vega view] created", e), ae.current = e, se(void 0);
 	}, a[19] = I) : I = a[19];
-	let L = ee(I), R;
+	let L = te(I), R;
 	a[20] === T ? R = a[21] : (R = () => {
 		let e = [];
 		if (S.hasPoint(T) && e.push(["Point selection", "click to select a point; hold shift for multi-select"]), S.hasInterval(T) && e.push(["Interval selection", "click and drag to select an interval"]), S.hasLegend(T) && e.push(["Legend selection", "click to select a legend item; hold shift for multi-select"]), S.hasPanZoom(T)) {
-			let n = t() ? "⌘" : "ctrl";
-			e.push(["Pan", `hold the ${n} key and drag`], ["Zoom", `hold the ${n} key and scroll`]);
+			let t = i() ? "⌘" : "ctrl";
+			e.push(["Pan", `hold the ${t} key and drag`], ["Zoom", `hold the ${t} key and scroll`]);
 		}
 		return e.length === 0 ? null : /* @__PURE__ */ (0, G.jsx)(s, {
 			delayDuration: 300,
@@ -618,21 +618,21 @@ var K = (e) => {
 	de(g, K === "container");
 	let q, J;
 	a[32] !== U || a[33] !== N ? (q = () => (N.forEach((e) => {
-		let { signalName: t, handler: r } = e;
+		let { signalName: n, handler: r } = e;
 		try {
-			U?.view.addSignalListener(t, r);
+			U?.view.addSignalListener(n, r);
 		} catch (e) {
-			let t = e;
-			n.error(t);
+			let n = e;
+			t.error(n);
 		}
 	}), () => {
 		N.forEach((e) => {
-			let { signalName: t, handler: r } = e;
+			let { signalName: n, handler: r } = e;
 			try {
-				U?.view.removeSignalListener(t, r);
+				U?.view.removeSignalListener(n, r);
 			} catch (e) {
-				let t = e;
-				n.error(t);
+				let n = e;
+				t.error(n);
 			}
 		});
 	}), J = [U, N], a[32] = U, a[33] = N, a[34] = q, a[35] = J) : (q = a[34], J = a[35]), (0, fe.useEffect)(q, J);
@@ -645,7 +645,7 @@ var K = (e) => {
 		})]
 	}), a[36] = _, a[37] = Y);
 	let X, ye;
-	a[38] === Symbol.for("react.memo_cache_sentinel") ? (X = r("relative"), ye = i.stopPropagation(), a[38] = X, a[39] = ye) : (X = a[38], ye = a[39]);
+	a[38] === Symbol.for("react.memo_cache_sentinel") ? (X = n("relative"), ye = r.stopPropagation(), a[38] = X, a[39] = ye) : (X = a[38], ye = a[39]);
 	let Z;
 	a[40] === K ? Z = a[41] : (Z = /* @__PURE__ */ (0, G.jsx)("div", {
 		ref: g,

package/dist/{vennDiagram-4TSXK5OY-Db8GtH1G.js → vennDiagram-4TSXK5OY-C-hQ4iNJ.js}

@@ -3,7 +3,7 @@ import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-rd09e1JL.js";
+import { p as v } from "./mermaid-A36unKXJ.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

package/dist/{wardleyDiagram-VM6X3IG4-DmIiC3FU.js → wardleyDiagram-VM6X3IG4-C2MQ_Umv.js}

@@ -2,7 +2,7 @@ import { i as e } from "./chunk-75Z2AOVW-D7gxIs2Q.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-BwiyaNpg.js";
-import { p as m } from "./mermaid-rd09e1JL.js";
+import { p as m } from "./mermaid-A36unKXJ.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-DS9OPrNq.js → xychartDiagram-S5SC5T6Z-BtTTBn7Q.js}

@@ -9,7 +9,7 @@ import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import "./chunk-PWAF6VOD-CQw5qATZ.js";
 import { t as b } from "./chunk-GMAD6QVW-BhaJx0X3.js";
-import { p as x } from "./mermaid-rd09e1JL.js";
+import { p as x } from "./mermaid-A36unKXJ.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

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

package/src/core/islands/components/__tests__/web-components.test.tsx

@@ -9,6 +9,7 @@ import {
   describe,
   expect,
   it,
+  vi,
 } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { MockNotebook } from "@/__mocks__/notebook";
@@ -22,6 +23,7 @@ import {
 import { islandsPendingInitialRunsAtom } from "@/core/islands/state";
 import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
+import { buildIslandHTML } from "../../__tests__/test-utils";
 import { parseMarimoIslandApps } from "../../parse";
 import { MarimoIslandElement } from "../web-components";
 
@@ -45,9 +47,55 @@ beforeEach(() => {
 afterEach(async () => {
   await actAndFlush(() => document.body.replaceChildren());
   store.set(requestClientAtom, null);
+  document.body.removeAttribute("style");
+  vi.unstubAllEnvs();
 });
 
 describe("MarimoIslandElement lifecycle", () => {
+  it.each([true, false])(
+    "synchronizes the theme of a reactive=%s island across reconnects",
+    async (reactive) => {
+      vi.stubEnv("VITE_MARIMO_ISLANDS", "true");
+      if (reactive) {
+        setNotebook("runtime-cell", "runtime output");
+      }
+      const { container, island } = createThemeIsland(reactive);
+      document.body.style.colorScheme = "dark";
+      await actAndFlush(() => document.body.append(container));
+      expect(island).toHaveClass("marimo", "dark");
+      await actAndFlush(() => {
+        document.body.style.colorScheme = "light";
+      });
+      expect(island).toHaveClass("marimo", "light");
+      expect(island).not.toHaveClass("dark");
+      await actAndFlush(() => island.remove());
+      await actAndFlush(() => {
+        document.body.style.colorScheme = "dark";
+      });
+      expect(island).toHaveClass("light");
+      await actAndFlush(() => container.append(island));
+      expect(island).toHaveClass("dark");
+    },
+  );
+
+  it("can disconnect before its scheduled render and reconnect with the current theme", async () => {
+    vi.stubEnv("VITE_MARIMO_ISLANDS", "true");
+    const { container, island } = createThemeIsland(false);
+    document.body.style.colorScheme = "dark";
+    await actAndFlush(() => {
+      document.body.append(container);
+      island.remove();
+    });
+    expect(island.querySelector("marimo-cell-output")).not.toBeNull();
+    await actAndFlush(() => {
+      document.body.style.colorScheme = "light";
+    });
+    expect(island).toHaveClass("dark");
+    await actAndFlush(() => container.append(island));
+    expect(island).toHaveClass("light");
+    expect(island.textContent).toContain("static output");
+  });
+
   it("keeps static output until the initial run completes", async () => {
     store.set(islandsPendingInitialRunsAtom, new Set([1]));
     setNotebook("runtime-cell", "runtime output");
@@ -182,6 +230,21 @@ describe("MarimoIslandElement lifecycle", () => {
   });
 });
 
+function createThemeIsland(reactive: boolean) {
+  const container = document.createElement("div");
+  container.innerHTML = buildIslandHTML([
+    {
+      appId: "app-1",
+      cellId: "runtime-cell",
+      reactive,
+      code: "x = 1",
+      output: "<pre>static output</pre>",
+    },
+  ]);
+  const island = container.querySelector<HTMLElement>(ISLAND_TAG_NAMES.ISLAND)!;
+  return { container, island };
+}
+
 function setNotebook(id: string, output?: string): void {
   const runtimeCellId = cellId(id);
   store.set(

package/src/core/islands/components/web-components.tsx

@@ -10,6 +10,7 @@ import { OBJECT_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { UI_ELEMENT_REGISTRY } from "@/core/dom/uiregistry";
 import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { renderHTML } from "@/plugins/core/RenderHTML";
+import { resolvedThemeAtom } from "@/theme/useTheme";
 import { invariant } from "@/utils/invariant";
 import type { CellId, UIElementId } from "../../cells/ids";
 import { store } from "../../state/jotai";
@@ -44,6 +45,7 @@ export class MarimoIslandElement extends HTMLElement {
   private runtimeAppId?: string;
   private runtimeCellId?: CellId;
   private unsubscribeCellIds?: () => void;
+  private unsubscribeTheme?: () => void;
 
   public static readonly tagName = ISLAND_TAG_NAMES.ISLAND;
   public static readonly outputTagName = ISLAND_TAG_NAMES.CELL_OUTPUT;
@@ -132,6 +134,13 @@ export class MarimoIslandElement extends HTMLElement {
       ? this.cellId
       : undefined;
     this.syncCellIdsSubscription();
+    const syncTheme = () => {
+      const theme = store.get(resolvedThemeAtom);
+      this.classList.toggle("dark", theme === "dark");
+      this.classList.toggle("light", theme === "light");
+    };
+    this.unsubscribeTheme = store.sub(resolvedThemeAtom, syncTheme);
+    syncTheme();
     queueMicrotask(() => {
       // Guard against disconnect between connectedCallback and microtask
       if (
@@ -297,6 +306,8 @@ export class MarimoIslandElement extends HTMLElement {
    * Cleanup when element is removed from DOM
    */
   public disconnectedCallback(): void {
+    this.unsubscribeTheme?.();
+    this.unsubscribeTheme = undefined;
     this.removeEventListener(
       ISLAND_SOURCE_CHANGED_EVENT,
       this.handleSourceChanged,

package/src/css/globals.css

@@ -128,14 +128,18 @@
     --cm-search-match-selected-background-dark: #6199ff88;
   }
 
+  .marimo.light {
+    color-scheme: light;
+  }
+
   :root:has(body.dark),
   .dark,
-  .marimo:is(.dark *) {
+  .marimo:not(.light):is(.dark *) {
     color-scheme: dark;
   }
 
   .dark,
-  .marimo:is(.dark *) {
+  .marimo:not(.light):is(.dark *) {
     --ring: var(--blue-8, #2870bd);
     --destructive: var(--red-6, #72232d);
     --destructive-hover: var(--red-7, #8c333a);

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -92,13 +92,9 @@ interface Props {
 const LoadingDataEditor = (props: Props) => {
   const [editorState, setEditorState] = useState<EditorState | null>(null);
 
-  // Load the data
   const { data: loadedState, error } = useAsyncData(async () => {
     const withoutExternalTypes = toFieldTypes(props.fieldTypes ?? []);
 
-    // If we already have the data, return it
-    // Otherwise, load the data from the URL. Vega's CSV parser takes a
-    // plain `Record`; column order doesn't matter for parsing.
     const localData = Array.isArray(props.data)
       ? props.data
       : await vegaLoadData<EditorRow>(

package/src/plugins/impl/data-editor/__tests__/column-types.test.ts

@@ -10,6 +10,11 @@ describe("normalizeConfiguredColumns", () => {
     vi.restoreAllMocks();
   });
 
+  it("preserves the data reference when no columns are configured", () => {
+    const data = [{ label: "01", done: "yes" }];
+    expect(normalizeConfiguredColumns(data, new Map())).toBe(data);
+  });
+
   it("normalizes large integer boolean values from the CSV loader", async () => {
     vi.spyOn(vegaLoader, "load").mockResolvedValueOnce(
       "done,label\n9007199254740992,01\n-9007199254740992,02\n0,03\n",

package/src/plugins/impl/data-editor/__tests__/glide-data-editor.test.tsx

@@ -65,7 +65,11 @@ vi.mock("@glideapps/glide-data-grid", async () => {
 });
 
 vi.mock("@glideapps/glide-data-grid-cells", () => ({
-  DropdownCell: { kind: "dropdown-renderer" },
+  DropdownCell: {
+    kind: "dropdown-renderer",
+    isMatch: (cell: { data: { kind: string } }) =>
+      cell.data.kind === "dropdown-cell",
+  },
 }));
 
 vi.mock("@/theme/useTheme", () => ({
@@ -74,11 +78,11 @@ vi.mock("@/theme/useTheme", () => ({
 
 const editorProps = {
   data: [{ name: "alice" }],
-  columnFields: new Map([["name", "string"]]) as Map<string, "string">,
-  editableColumns: "all" as const,
+  columnFields: new Map([["name", "string"]]),
+  editableColumns: "all",
   columnTypes: new Map(),
   onAddEdits: vi.fn(),
-};
+} satisfies React.ComponentProps<typeof GlideDataEditor>;
 
 describe("GlideDataEditor portal", () => {
   let fullscreenElement: Element | null;
@@ -148,7 +152,7 @@ describe("GlideDataEditor portal", () => {
       },
     });
     expect(capturedDataEditor.customRenderers).toEqual([
-      { kind: "dropdown-renderer" },
+      { kind: "dropdown-renderer", isMatch: expect.any(Function) },
     ]);
   });
 

package/src/plugins/impl/data-editor/column-types.ts

@@ -33,6 +33,9 @@ export function normalizeConfiguredColumns(
   data: EditorRow[],
   columnTypes: ColumnTypes,
 ): EditorRow[] {
+  if (columnTypes.size === 0) {
+    return data;
+  }
   return data.map((row) => {
     const normalizedRow = { ...row };
     for (const [columnName, columnType] of columnTypes) {

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -55,11 +55,13 @@ import {
 } from "./types";
 
 function getEditedValue(newValue: EditableGridCell): unknown {
-  if (newValue.kind !== GridCellKind.Custom) {
-    return newValue.data;
+  if (
+    newValue.kind === GridCellKind.Custom &&
+    DropdownCellRenderer.isMatch(newValue)
+  ) {
+    return newValue.data.value;
   }
-  const data = newValue.data as { kind?: unknown; value?: unknown };
-  return data.kind === "dropdown-cell" ? data.value : newValue.data;
+  return newValue.data;
 }
 
 interface GlideDataEditorProps {
@@ -190,7 +192,6 @@ export const GlideDataEditor = ({
       const key = column.title;
 
       // Deletes are not handled by validateCell, so we need to handle them here.
-      // Custom dropdown cells carry their selected value inside their data.
       let newData = getEditedValue(newValue);
       if (Array.isArray(column.configuredType)) {
         if (

package/src/plugins/impl/data-editor/glide-utils.ts

@@ -132,7 +132,6 @@ export function pasteCells(options: {
   const { range } = selection.current;
   const { x: startCol, y: startRow } = range;
 
-  // Read clipboard data
   navigator.clipboard
     .readText()
     .then((clipboardText) => {
@@ -140,43 +139,25 @@ export function pasteCells(options: {
         return;
       }
 
-      // Parse tab-separated values
-      const rows = clipboardText.split("\n").filter((row) => row.trim());
-      const parsedData: string[][] = [];
-
-      for (const row of rows) {
-        const cells = row.split("\t");
-        parsedData.push(cells);
-      }
-
-      if (parsedData.length === 0) {
-        return;
-      }
+      const parsedData = clipboardText
+        .split("\n")
+        .filter((row) => row.trim())
+        .map((row) => row.split("\t"));
 
       const edits: Edits["edits"] = [];
       const editableColumnSet =
         editableColumns === "all" ? null : new Set(editableColumns);
 
       for (const [rowIndex, dataRow] of parsedData.entries()) {
-        if (!dataRow) {
-          continue;
-        }
-
         const targetRowIdx = startRow + rowIndex;
 
-        // Check if we've exceeded the data bounds
         if (targetRowIdx >= data.length) {
           break;
         }
 
         for (const [colIndex, cellValue] of dataRow.entries()) {
-          if (cellValue === undefined) {
-            continue;
-          }
-
           const targetColIdx = startCol + colIndex;
 
-          // Check if we've exceeded the column bounds
           if (targetColIdx >= columns.length) {
             break;
           }
@@ -191,13 +172,13 @@ export function pasteCells(options: {
             continue;
           }
 
-          // Convert the value based on the cell type
           let convertedValue: unknown = cellValue;
 
-          if (Array.isArray(columnType)) {
-            if (!isValidCellValue(dataType, cellValue, columnType)) {
-              continue;
-            }
+          if (
+            Array.isArray(columnType) &&
+            !isValidCellValue(dataType, cellValue, columnType)
+          ) {
+            continue;
           }
 
           switch (dataType) {
@@ -243,12 +224,9 @@ export function pasteCells(options: {
               continue;
           }
 
-          // Get the column ID from the columns array using the title
-          const columnId = columns[targetColIdx].title;
-
           edits.push({
             rowIdx: targetRowIdx,
-            columnId,
+            columnId: column.title,
             value: convertedValue,
           });
         }

package/src/plugins/impl/data-editor/types.ts

@@ -6,8 +6,6 @@ import type { DataType } from "@/core/kernel/messages";
 
 export type EditorRow = Record<string, unknown>;
 
-// Shared transport for specialized column editors: dropdown columns use a
-// string array, while checkbox columns use the boolean discriminator.
 export type ColumnType = "boolean" | string[];
 export type ColumnTypes = Map<string, ColumnType>;