@marimo-team/islands 0.25.3-dev103 → 0.25.3-dev104

package/dist/{ErrorBoundary-DvJIREfH.js → ErrorBoundary-BSX5FnuK.js}

@@ -135,7 +135,7 @@ function F(e) {
 }
 //#endregion
 //#region src/components/editor/boundary/ErrorBoundary.tsx
-var I = (0, T.lazy)(() => import("./feedback-button-9Gkf9CUC.js").then((e) => ({ default: e.FeedbackModal }))), L = (e) => {
+var I = (0, T.lazy)(() => import("./feedback-button-CfEYDdvF.js").then((e) => ({ default: e.FeedbackModal }))), L = (e) => {
 	let t = (0, w.c)(2), n;
 	return t[0] === e.children ? n = t[1] : (n = /* @__PURE__ */ (0, j.jsx)(O, {
 		FallbackComponent: R,

package/dist/{code-visibility-CfeBTR2t.js → code-visibility-azRFwO8n.js}

@@ -18,7 +18,7 @@ function x() {
 		return e.warn("Failed to get version from mount config"), null;
 	}
 }
-var S = x() || "0.25.3-dev103", C = u(S), w = u(!0);
+var S = x() || "0.25.3-dev104", C = u(S), w = u(!0);
 u(null);
 //#endregion
 //#region src/core/wasm/state.ts

package/dist/{common-BRSsfrNv.js → common-D7dvNADC.js}

@@ -12,7 +12,7 @@ import { t as lt } from "./check-P35dc2dH.js";
 import { A as ut, C as dt, M as ft, O as pt, S as mt, _ as ht, b as gt, c as _t, d as vt, g as yt, h as bt, i as xt, l as St, m as Ct, n as wt, p as Tt, s as Et, t as Dt, u as Ot, v as kt, y as At } from "./select-B0LRDH0g.js";
 import { $ as jt, $t as Mt, A as Nt, At as Pt, B as Ft, Bt as It, Ct as Lt, D as Rt, Dt as zt, E as Bt, Et as Vt, F as Ht, Ft as Ut, G as Wt, Gt, H as Kt, Ht as qt, I as Jt, It as Yt, J as Xt, Jt as Zt, Kt as Qt, L as $t, Lt as en, M as tn, Mt as nn, N as rn, Nt as an, O as on, Ot as sn, P as cn, Pt as ln, Q as un, Qt as dn, R as fn, Rt as pn, S as mn, St as hn, T as gn, Tt as _n, U as vn, Ut as yn, V as bn, Vt as xn, W as Sn, Wt as Cn, X as wn, Xt as Tn, Y as En, Yt as Dn, Z as On, Zt as kn, _ as An, _n as jn, _t as Mn, a as Nn, an as Pn, at as Fn, b as In, bt as Ln, cn as Rn, ct as zn, d as Bn, dn as Vn, en as Hn, et as Un, f as Wn, fn as Gn, ft as Kn, gn as qn, gt as Jn, h as Yn, hn as Xn, ht as Zn, i as Qn, in as $n, it as er, j as tr, jt as nr, k as rr, kt as ir, l as ar, ln as or, lt as sr, mn as cr, mt as lr, n as ur, nn as dr, nt as fr, o as pr, ot as mr, pn as hr, pt as gr, qt as _r, rn as vr, rt as yr, s as br, sn as xr, st as Sr, t as Cr, tt as wr, u as Tr, ut as Er, vn as Dr, vt as Or, w as kr, wt as Ar, x as jr, xt as Mr, y as Nr, yn as Pr, yt as Fr, z as Ir, zt as Lr } from "./dropdown-menu-B_7xD2X4.js";
 import { a as Rr, c as zr, d as Br, i as Vr, l as Hr, n as Ur, o as Wr, r as Gr, t as Kr, v as qr, x as Jr, y as Yr } from "./toDate-DKH0_kMo.js";
-import { n as Xr, t as Zr } from "./ErrorBoundary-DvJIREfH.js";
+import { n as Xr, t as Zr } from "./ErrorBoundary-BSX5FnuK.js";
 import { t as Qr } from "./clsx-CoeGtWvn.js";
 import { t as $r } from "./react-dom-DUmH0GXv.js";
 import { t as ei } from "./jsx-runtime-3BD1kT0s.js";

package/dist/{data-grid-overlay-editor-DEC7lFIy.js → data-grid-overlay-editor-BvWRCxAv.js}

@@ -2,7 +2,7 @@ import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
 import { t as n } from "./react-dom-DUmH0GXv.js";
 import { c as r, l as i, u as a } from "./data-grid-types-0PJ-9N5n.js";
-import { a as o, i as s, n as c, r as l } from "./glide-data-editor-D2F4hynZ.js";
+import { a as o, i as s, n as c, r as l } from "./glide-data-editor-CuC6Qmmd.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.js
 var u = /* @__PURE__ */ e(t(), 1), d = /* @__PURE__ */ e(n(), 1), f = /*#__PURE__*/ o("div")({
 	name: "DataGridOverlayEditorStyle",

package/dist/{feedback-button-9Gkf9CUC.js → feedback-button-CfEYDdvF.js}

@@ -5,12 +5,12 @@ import { t as i } from "./compiler-runtime-CldRdSsv.js";
 import { t as a } from "./copy-icon-CPoxUG7G.js";
 import { Dt as o, G as s, It as c, K as l, Rt as u, V as d, dn as f, h as p, i as m, n as h } from "./error-entries-m7wjcSR-.js";
 import { b as g } from "./select-B0LRDH0g.js";
-import { n as ee, t as te } from "./globals-BBV0iOn6.js";
+import { n as ee, t as te } from "./globals-D7jFtSFG.js";
 import { t as _ } from "./jsx-runtime-3BD1kT0s.js";
 import { C as v, _ as ne, i as y } from "./useTheme-CfeaVw5D.js";
 import { a as re, i as ie, n as ae, r as oe } from "./dialog-C1PcpCqX.js";
 import { t as se } from "./useAsyncData-D0mLJstx.js";
-import { t as ce } from "./code-visibility-CfeBTR2t.js";
+import { t as ce } from "./code-visibility-azRFwO8n.js";
 //#region src/components/ui/skeleton.tsx
 var b = /* @__PURE__ */ e(r(), 1), x = i(), S = _(), le = (e) => {
 	let n = (0, x.c)(8), r, i;

package/dist/{glide-data-editor-D2F4hynZ.js → glide-data-editor-CuC6Qmmd.js}

@@ -6,7 +6,7 @@ import { i as s, n as c, r as l } from "./copy-icon-CPoxUG7G.js";
 import { C as u, c as d, i as f, n as p, s as m, t as h, x as g } from "./select-B0LRDH0g.js";
 import { d as _, h as v, i as y, l as b, n as x, o as S, s as C, t as w, u as T } from "./dropdown-menu-B_7xD2X4.js";
 import { c as E, d as D, l as O, n as k, o as A, s as ee, t as j, u as te } from "./glide-utils-Bt8_pBa2.js";
-import { n as ne, t as re } from "./ErrorBoundary-DvJIREfH.js";
+import { n as ne, t as re } from "./ErrorBoundary-BSX5FnuK.js";
 import { t as ie } from "./react-dom-DUmH0GXv.js";
 import { t as M } from "./jsx-runtime-3BD1kT0s.js";
 import { t as N } from "./label-BRnUC0NX.js";
@@ -7062,7 +7062,7 @@ function rs(e, t, n, r, i) {
 }
 //#endregion
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/data-editor/data-editor.js
-var is = /* @__PURE__ */ e(_r(), 1), as = /* @__PURE__ */ e(xr(), 1), os = K.lazy(async () => await import("./data-grid-overlay-editor-DEC7lFIy.js")), ss = 0;
+var is = /* @__PURE__ */ e(_r(), 1), as = /* @__PURE__ */ e(xr(), 1), os = K.lazy(async () => await import("./data-grid-overlay-editor-BvWRCxAv.js")), ss = 0;
 function cs(e) {
 	return (0, is.default)((0, as.default)((0, as.default)(e).filter((e) => e.span !== void 0).map((e) => (0, Za.default)((e.span?.[0] ?? 0) + 1, (e.span?.[1] ?? 0) + 1))));
 }
@@ -9293,7 +9293,7 @@ function Vs(e, t, n, r, i) {
 }
 //#endregion
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/cells/number-cell.js
-var Hs = K.lazy(async () => await import("./number-overlay-editor-B3XQt_PV.js")), Us = {
+var Hs = K.lazy(async () => await import("./number-overlay-editor-CCzf5gxX.js")), Us = {
 	getAccessibilityString: (e) => e.data?.toString() ?? "",
 	kind: W.Number,
 	needsHover: (e) => e.hoverEffect === !0,

package/dist/{globals-BBV0iOn6.js → globals-D7jFtSFG.js}

@@ -1,6 +1,6 @@
 import { h as e } from "./tooltip-CKO1pHJo.js";
 import { _ as t } from "./useTheme-CfeaVw5D.js";
-import { r as n } from "./code-visibility-CfeBTR2t.js";
+import { r as n } from "./code-visibility-azRFwO8n.js";
 var r = e("triangle-alert", [
 	["path", {
 		d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",

package/dist/main.js

@@ -7,7 +7,7 @@ import { C as w, F as T, G as E, I as D, J as O, K as k, L as A, P as j, R as M,
 import { a as oe, d as se, f as ce, h as V, i as le, n as ue, o as de, r as fe, t as pe } from "./tooltip-CKO1pHJo.js";
 import { $t as me, At as he, B as ge, Bt as _e, D as ve, Dt as ye, E as be, Et as xe, Ft as Se, Gt as Ce, J as we, Jt as Te, Kt as Ee, M as De, Mt as Oe, N as ke, O as Ae, Ot as je, Q as Me, R as Ne, S as Pe, Ut as Fe, V as Ie, Vt as Le, W as Re, Y as ze, Yt as Be, Z as Ve, _ as He, b as Ue, bt as We, cn as Ge, dt as Ke, en as qe, f as Je, fn as Ye, ft as Xe, g as Ze, gn as Qe, gt as $e, h as et, hn as tt, ht as nt, in as rt, j as it, jt as at, k as ot, kt as st, ln as ct, m as lt, nn as ut, nt as dt, o as ft, p as pt, pn as mt, q as ht, qt as gt, rt as _t, s as vt, sn as yt, st as bt, tn as xt, u as St, un as Ct, ut as wt, v as Tt, wt as Et, y as Dt, z as Ot, zt as kt } from "./error-entries-m7wjcSR-.js";
 import { D as At, E as jt, O as Mt, S as Nt, T as Pt, _ as Ft, a as It, c as Lt, d as Rt, f as zt, g as Bt, h as Vt, i as Ht, l as Ut, m as Wt, n as Gt, o as Kt, p as qt, r as Jt, s as Yt, t as Xt, u as Zt, v as Qt, w as $t, x as en, y as tn } from "./spec-CcT0slVc.js";
-import { $ as nn, $t as rn, A as an, At as on, B as sn, Bt as cn, C as ln, Ct as un, D as dn, Dt as fn, E as pn, Et as mn, F as hn, Ft as gn, G as _n, Gt as vn, H as yn, Ht as bn, I as xn, It as Sn, J as Cn, Jt as wn, K as Tn, Kt as En, L as Dn, Lt as On, M as kn, Mt as An, N as jn, Nt as Mn, O as Nn, Ot as Pn, P as Fn, Pt as In, Qt as Ln, R as Rn, Rt as zn, S as Bn, St as Vn, T as Hn, Tt as Un, U as Wn, Ut as Gn, V as Kn, Vt as qn, W as Jn, Wt as Yn, Xt as Xn, Y as Zn, Yt as Qn, Zt as $n, _ as er, _t as tr, at as nr, b as rr, c as ir, cn as ar, ct as or, d as sr, dn as cr, dt as lr, en as ur, et as dr, f as fr, fn as pr, ft as mr, g as hr, gt as gr, h as _r, ht as vr, in as yr, it as br, j as xr, jt as Sr, k as Cr, kt as wr, ln as Tr, lt as Er, m as Dr, mn as Or, mt as kr, nn as Ar, nt as jr, on as Mr, ot as Nr, p as Pr, pn as Fr, pt as Ir, q as Lr, qt as Rr, r as zr, rn as Br, rt as Vr, sn as Hr, st as Ur, t as Wr, tn as Gr, tt as Kr, u as qr, un as Jr, ut as Yr, v as Xr, vt as Zr, w as Qr, wt as $r, x as ei, xt as ti, y as ni, z as ri, zt as ii } from "./common-BRSsfrNv.js";
+import { $ as nn, $t as rn, A as an, At as on, B as sn, Bt as cn, C as ln, Ct as un, D as dn, Dt as fn, E as pn, Et as mn, F as hn, Ft as gn, G as _n, Gt as vn, H as yn, Ht as bn, I as xn, It as Sn, J as Cn, Jt as wn, K as Tn, Kt as En, L as Dn, Lt as On, M as kn, Mt as An, N as jn, Nt as Mn, O as Nn, Ot as Pn, P as Fn, Pt as In, Qt as Ln, R as Rn, Rt as zn, S as Bn, St as Vn, T as Hn, Tt as Un, U as Wn, Ut as Gn, V as Kn, Vt as qn, W as Jn, Wt as Yn, Xt as Xn, Y as Zn, Yt as Qn, Zt as $n, _ as er, _t as tr, at as nr, b as rr, c as ir, cn as ar, ct as or, d as sr, dn as cr, dt as lr, en as ur, et as dr, f as fr, fn as pr, ft as mr, g as hr, gt as gr, h as _r, ht as vr, in as yr, it as br, j as xr, jt as Sr, k as Cr, kt as wr, ln as Tr, lt as Er, m as Dr, mn as Or, mt as kr, nn as Ar, nt as jr, on as Mr, ot as Nr, p as Pr, pn as Fr, pt as Ir, q as Lr, qt as Rr, r as zr, rn as Br, rt as Vr, sn as Hr, st as Ur, t as Wr, tn as Gr, tt as Kr, u as qr, un as Jr, ut as Yr, v as Xr, vt as Zr, w as Qr, wt as $r, x as ei, xt as ti, y as ni, z as ri, zt as ii } from "./common-D7dvNADC.js";
 import { c as ai, i as oi, n as si, o as ci, t as li } from "./useLifecycle-Dum8WSXq.js";
 import { t as ui } from "./check-P35dc2dH.js";
 import { A as di, C as fi, D as pi, E as mi, M as hi, O as gi, S as _i, T as vi, a as yi, b as bi, c as xi, i as Si, k as Ci, l as wi, n as Ti, o as Ei, r as Di, s as Oi, t as ki, w as Ai, x as ji } from "./select-B0LRDH0g.js";
@@ -15,8 +15,8 @@ import { At as Mi, C as Ni, Dt as Pi, J as Fi, K as Ii, R as Li, S as Ri, U as z
 import { C as ua, _ as da, a as fa, b as pa, c as ma, f as ha, h as ga, m as _a, p as va, s as ya, u as ba, x as xa, y as Sa } from "./toDate-DKH0_kMo.js";
 import { a as Ca, c as wa, d as Ta, f as Ea, i as Da, l as Oa, n as ka, o as Aa, r as ja, s as Ma, t as Na } from "./process-output-DIMk7xHI.js";
 import { a as Pa, c as Fa, d as Ia, i as La, l as Ra, r as za, u as Ba } from "./glide-utils-Bt8_pBa2.js";
-import { n as Va, t as Ha } from "./ErrorBoundary-DvJIREfH.js";
-import { n as Ua, t as Wa } from "./globals-BBV0iOn6.js";
+import { n as Va, t as Ha } from "./ErrorBoundary-BSX5FnuK.js";
+import { n as Ua, t as Wa } from "./globals-D7jFtSFG.js";
 import { t as Ga } from "./react-dom-DUmH0GXv.js";
 import { t as Ka } from "./jsx-runtime-3BD1kT0s.js";
 import { B as qa, C as H, Ct as Ja, D as Ya, E as Xa, F as U, G as Za, H as Qa, I as $a, L as eo, M as W, N as to, O as no, P as ro, Q as io, R as ao, S as G, St as oo, Tt as so, U as co, W as lo, Y as uo, Z as fo, _ as po, _t as mo, a as ho, b as go, bt as _o, c as vo, d as yo, f as bo, g as xo, h as So, ht as Co, i as wo, j as K, k as To, l as Eo, m as Do, n as Oo, o as ko, p as Ao, r as jo, s as Mo, u as No, ut as Po, v as Fo, vt as Io, w as Lo, wt as Ro, x as zo, xt as Bo, y as Vo, yt as Ho } from "./use-restore-focus-DBCITLeF.js";
@@ -39,7 +39,7 @@ import { t as Ms } from "./useAsyncData-D0mLJstx.js";
 import { i as Ns, n as Ps, r as Fs } from "./formats-V8ifA0Bk.js";
 import { D as Is, O as Ls } from "./vega-loader.browser-B9Pz0EGP.js";
 import { a as Rs, n as zs } from "./loader-Bm8cy3e8.js";
-import { c as Bs, d as Vs, i as Hs, l as Us, o as Ws, s as Gs, t as Ks, u as qs } from "./code-visibility-CfeBTR2t.js";
+import { c as Bs, d as Vs, i as Hs, l as Us, o as Ws, s as Gs, t as Ks, u as qs } from "./code-visibility-azRFwO8n.js";
 import { t as Js } from "./useDeepCompareMemoize-BpPWi3G3.js";
 import { t as Ys } from "./esm-D2gTsXEV.js";
 //#region ../node_modules/.pnpm/iconify-icon@2.3.0/node_modules/iconify-icon/dist/iconify-icon.mjs
@@ -10578,7 +10578,7 @@ function VC(e, t) {
 }
 //#endregion
 //#region src/plugins/impl/DataEditorPlugin.tsx
-var HC = J.lazy(() => import("./glide-data-editor-D2F4hynZ.js").then((e) => e.t)), UC = wS("marimo-data-editor", { cssStyles: [qS] }).withData(W({
+var HC = J.lazy(() => import("./glide-data-editor-CuC6Qmmd.js").then((e) => e.t)), UC = wS("marimo-data-editor", { cssStyles: [qS] }).withData(W({
 	initialValue: W({ edits: G(W({
 		rowIdx: K(),
 		columnId: U(),
@@ -30305,7 +30305,7 @@ function VR(e) {
 }
 //#endregion
 //#region src/components/editor/renderers/slides-layout/slides-layout.tsx
-var HR = J.lazy(() => import("./reveal-component-DEasliPP.js")), UR = (e) => {
+var HR = J.lazy(() => import("./reveal-component-ZUn41jSB.js")), UR = (e) => {
 	let t = (0, X.c)(33), { layout: n, setLayout: r, cells: i, mode: a } = e, o = ns(da), s = a === "read" || o, c = ns(He) > 1, [l, u] = (0, J.useState)(null), d;
 	t[0] !== i || t[1] !== n ? (d = zP(i, n), t[0] = i, t[1] = n, t[2] = d) : d = t[2];
 	let { slideCells: f, skippedIds: p, noOutputIds: m, slideTypes: h, startCellIndex: g } = d, _;

package/dist/{number-overlay-editor-B3XQt_PV.js → number-overlay-editor-CCzf5gxX.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
-import { a as n } from "./glide-data-editor-D2F4hynZ.js";
+import { a as n } from "./glide-data-editor-CuC6Qmmd.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js
 var r = /* @__PURE__ */ e(t()), i = /*#__PURE__*/ n("div")({
 	name: "NumberOverlayEditorStyle",

package/dist/{reveal-component-DEasliPP.js → reveal-component-ZUn41jSB.js}

@@ -4,14 +4,14 @@ import { t as o } from "./react-sHtZdjeP.js";
 import { t as s } from "./compiler-runtime-CldRdSsv.js";
 import { h as c, t as l } from "./tooltip-CKO1pHJo.js";
 import { O as u } from "./error-entries-m7wjcSR-.js";
-import { Q as d, X as f, Z as p, an as m, cn as h, i as g, in as _, l as v, n as y, r as b, t as x, u as S } from "./common-BRSsfrNv.js";
+import { Q as d, X as f, Z as p, an as m, cn as h, i as g, in as _, l as v, n as y, r as b, t as x, u as S } from "./common-D7dvNADC.js";
 import { M as C } from "./select-B0LRDH0g.js";
 import { q as ee } from "./dropdown-menu-B_7xD2X4.js";
 import { _ as w } from "./toDate-DKH0_kMo.js";
 import { t as T } from "./jsx-runtime-3BD1kT0s.js";
 import { q as E } from "./use-restore-focus-DBCITLeF.js";
 import { A as D, C as O, b as k } from "./useTheme-CfeaVw5D.js";
-import { a as A, n as te, t as ne } from "./code-visibility-CfeBTR2t.js";
+import { a as A, n as te, t as ne } from "./code-visibility-azRFwO8n.js";
 /* empty css                */
 var j = c("sticky-note", [["path", {
 	d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",

package/package.json

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

package/src/core/document/__tests__/hooks.test.tsx

@@ -0,0 +1,386 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, renderHook } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import type { PropsWithChildren } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Deferred } from "@/utils/Deferred";
+import type { Document } from "../../host/resources/document";
+import {
+  createDocumentModel,
+  DocumentProvider,
+  useCellCode,
+  useCellConfig,
+  useCellName,
+  useCellOrder,
+  useDocumentEdit,
+  useDocumentSync,
+  type DocumentHost,
+} from "..";
+import { cell, CONFIG, document, withCells } from "./fixtures";
+
+type HostEdit = DocumentHost["edit"];
+const lifetimes: AbortController[] = [];
+
+afterEach(() => {
+  act(() => lifetimes.splice(0).forEach((controller) => controller.abort()));
+});
+
+function setup(
+  initial: Document | null = document(),
+  edit: HostEdit = () => new Promise(() => {}),
+) {
+  const store = createStore();
+  const source = atom(initial);
+  const detached = vi.fn();
+  source.onMount = () => detached;
+  const controller = new AbortController();
+  lifetimes.push(controller);
+  const model = createDocumentModel({
+    store,
+    notebook: { documentAtom: source, edit },
+    signal: controller.signal,
+  });
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
+  );
+  return { store, source, model, controller, detached, wrapper };
+}
+
+describe("document hooks", () => {
+  it("flushes edits through the model and aborts work when the session ends", async () => {
+    const accepted = withCells(document(), { c1: cell("c1", "local") });
+    const edit = vi
+      .fn<HostEdit>()
+      .mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        data: { document: accepted.revision, cells: {} },
+      })
+      .mockImplementation(
+        () => new Deferred<Awaited<ReturnType<HostEdit>>>().promise,
+      );
+    const { store, source, wrapper, controller } = setup(document(), edit);
+    const { result, unmount } = renderHook(
+      () => ({
+        code: useCellCode("c1"),
+        edit: useDocumentEdit(),
+        sync: useDocumentSync(),
+      }),
+      { wrapper, reactStrictMode: true },
+    );
+    act(() => result.current.edit((tx) => tx.setCode("c1", "local")));
+    expect(result.current.sync.status).toEqual({ status: "pending" });
+    const { flush, retry } = result.current.sync;
+    await act(async () => {
+      const flushed = flush();
+      // Allow the response to arrive before publishing its confirmation.
+      await Promise.resolve();
+      store.set(source, accepted);
+      await expect(flushed).resolves.toEqual(accepted.revision);
+    });
+    expect(result.current.sync).toEqual({
+      status: { status: "idle" },
+      flush,
+      retry,
+    });
+    expect(result.current.code).toBe("local");
+    act(() => result.current.edit((tx) => tx.setCode("c1", "next")));
+    await act(async () => {
+      const rejected = (async () => {
+        await expect(flush()).rejects.toThrow("session ended");
+      })();
+      await Promise.resolve();
+      unmount();
+      controller.abort(new Error("session ended"));
+      await rejected;
+    });
+    expect(edit).toHaveBeenCalledTimes(2);
+    expect(edit.mock.calls[1][2].signal.aborted).toBe(true);
+  });
+
+  it("publishes compound edits atomically without changing host records", () => {
+    const initial = document();
+    const { store, source, wrapper } = setup(initial);
+    const seen = vi.fn();
+    const { result } = renderHook(
+      () => {
+        const value = {
+          code: useCellCode("c1"),
+          name: useCellName("c1"),
+          config: useCellConfig("c1"),
+          order: useCellOrder(),
+        };
+        seen(value);
+        return { ...value, edit: useDocumentEdit() };
+      },
+      { wrapper },
+    );
+    const edit = result.current.edit;
+    seen.mockClear();
+
+    act(() =>
+      edit((tx) => {
+        tx.setCode("c1", "edited");
+        tx.setName("c1", "renamed");
+        tx.updateConfig("c1", { hide_code: true });
+        tx.setOrder(["c2", "c1"]);
+      }),
+    );
+
+    const expected = {
+      code: "edited",
+      name: "renamed",
+      config: { ...CONFIG, hide_code: true },
+      order: ["c2", "c1"],
+    };
+    expect(result.current).toEqual({ ...expected, edit });
+    expect(seen.mock.calls.length).toBeGreaterThan(0);
+    for (const [value] of seen.mock.calls) {
+      expect(value).toEqual(expected);
+    }
+    expect(store.get(source)).toBe(initial);
+
+    expect(() =>
+      act(() =>
+        edit((tx) => {
+          tx.setCode("c1", "rolled back");
+          tx.deleteCell("missing");
+        }),
+      ),
+    ).toThrow("does not exist");
+    expect(result.current).toEqual({ ...expected, edit });
+  });
+
+  it("subscribes to individual fields and keeps the edit function stable", () => {
+    const { store, source, wrapper } = setup();
+    const onCode = vi.fn();
+    const onName = vi.fn();
+    const onConfig = vi.fn();
+    const onOrder = vi.fn();
+    const onEdit = vi.fn();
+    function Code() {
+      onCode(useCellCode("c1"));
+      return null;
+    }
+    function Name() {
+      onName(useCellName("c1"));
+      return null;
+    }
+    function Config() {
+      onConfig(useCellConfig("c1"));
+      return null;
+    }
+    function Order() {
+      onOrder(useCellOrder());
+      return null;
+    }
+    function Edit() {
+      onEdit(useDocumentEdit());
+      return null;
+    }
+    render(
+      <>
+        <Code />
+        <Name />
+        <Config />
+        <Order />
+        <Edit />
+      </>,
+      { wrapper },
+    );
+    const edit: ReturnType<typeof useDocumentEdit> = onEdit.mock.calls[0][0];
+    const clear = () =>
+      [onCode, onName, onConfig, onOrder, onEdit].forEach((fn) =>
+        fn.mockClear(),
+      );
+    clear();
+
+    act(() => edit((tx) => tx.setCode("c1", "local")));
+    expect(onCode).toHaveBeenCalledWith("local");
+    expect(onName).not.toHaveBeenCalled();
+    expect(onConfig).not.toHaveBeenCalled();
+    expect(onOrder).not.toHaveBeenCalled();
+    expect(onEdit).not.toHaveBeenCalled();
+    clear();
+
+    act(() => edit((tx) => tx.setCode("c2", "other")));
+    expect(
+      [onCode, onName, onConfig, onOrder, onEdit].map((fn) => fn.mock.calls),
+    ).toEqual([[], [], [], [], []]);
+
+    act(() =>
+      store.set(
+        source,
+        withCells(document(), {
+          c1: cell("c1", "remote", {
+            name: "host name",
+            config: { ...CONFIG },
+          }),
+        }),
+      ),
+    );
+    expect(onName).toHaveBeenCalledWith("host name");
+    expect(onCode).not.toHaveBeenCalled();
+    expect(onConfig).not.toHaveBeenCalled();
+    expect(onOrder).not.toHaveBeenCalled();
+    expect(onEdit).not.toHaveBeenCalled();
+    clear();
+
+    act(() =>
+      edit((tx) => {
+        tx.updateConfig("c1", { disabled: true });
+        tx.setOrder(["c2", "c1"]);
+      }),
+    );
+    expect(onConfig).toHaveBeenCalledWith({ ...CONFIG, disabled: true });
+    expect(onOrder).toHaveBeenCalledWith(["c2", "c1"]);
+    expect(onCode).not.toHaveBeenCalled();
+    expect(onName).not.toHaveBeenCalled();
+    expect(onEdit).not.toHaveBeenCalled();
+  });
+
+  it("switches field subscriptions when the cell id changes", () => {
+    const { wrapper } = setup();
+    const { result, rerender } = renderHook(
+      (id) => ({
+        code: useCellCode(id),
+        edit: useDocumentEdit(),
+      }),
+      { wrapper, initialProps: "c1" },
+    );
+    const edit = result.current.edit;
+    rerender("c2");
+    expect(result.current).toEqual({ code: "y = 2", edit });
+    act(() => edit((tx) => tx.setCode("c1", "old subscription")));
+    expect(result.current).toEqual({ code: "y = 2", edit });
+    act(() => edit((tx) => tx.setCode("c2", "new subscription")));
+    expect(result.current).toEqual({ code: "new subscription", edit });
+  });
+
+  it("distinguishes unavailable documents, hidden source, empty code, and deleted cells", () => {
+    const { store, source, wrapper } = setup(null);
+    const { result } = renderHook(
+      () => ({
+        order: useCellOrder(),
+        code: useCellCode("c1"),
+        name: useCellName("c1"),
+        config: useCellConfig("c1"),
+        edit: useDocumentEdit(),
+      }),
+      { wrapper },
+    );
+    const edit = result.current.edit;
+    const absent = {
+      code: undefined,
+      name: undefined,
+      config: undefined,
+      edit,
+    };
+    expect(result.current).toEqual({ ...absent, order: null });
+    const hidden = withCells(document(), {
+      c1: cell("c1", "", { code: null }),
+    });
+    act(() => store.set(source, hidden));
+    expect(result.current).toEqual({
+      code: null,
+      name: "_",
+      config: CONFIG,
+      order: ["c1", "c2"],
+      edit,
+    });
+    act(() => edit((tx) => tx.setCode("c1", "")));
+    expect(result.current.code).toBe("");
+    act(() => store.set(source, null));
+    expect(result.current).toEqual({ ...absent, order: null });
+    act(() => store.set(source, hidden));
+    expect(result.current.code).toBe("");
+    act(() =>
+      edit((tx) => {
+        tx.deleteCell("c1");
+        tx.deleteCell("c2");
+      }),
+    );
+    expect(result.current).toEqual({ ...absent, order: [] });
+  });
+
+  it("preserves drafts across Strict Mode remounts until the session ends", () => {
+    const { wrapper, controller, detached } = setup();
+    const useProbe = () => ({
+      code: useCellCode("c1"),
+      edit: useDocumentEdit(),
+    });
+    const first = renderHook(useProbe, { wrapper, reactStrictMode: true });
+    const edit = first.result.current.edit;
+    act(() => edit((tx) => tx.setCode("c1", "strict mode edit")));
+    expect(first.result.current.code).toBe("strict mode edit");
+    first.unmount();
+    expect(detached).not.toHaveBeenCalled();
+
+    const second = renderHook(useProbe, { wrapper, reactStrictMode: true });
+    expect(second.result.current.code).toBe("strict mode edit");
+    act(() => edit((tx) => tx.setCode("c1", "same session")));
+    expect(second.result.current.code).toBe("same session");
+    second.unmount();
+    controller.abort();
+    expect(detached).toHaveBeenCalledOnce();
+    const callback = vi.fn();
+    edit(callback);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("switches reads and edits to the supplied model and store", () => {
+    const first = setup();
+    const second = setup(
+      withCells(document("n2"), {
+        c1: cell("c1", "second source", { notebook_id: "n2" }),
+      }),
+    );
+    const seen = vi.fn();
+    function Probe() {
+      seen({ code: useCellCode("c1"), edit: useDocumentEdit() });
+      return null;
+    }
+    const tree = ({ store, model }: typeof first) => (
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <Probe />
+        </DocumentProvider>
+      </Provider>
+    );
+    const { rerender } = render(tree(first));
+    const oldEdit: ReturnType<typeof useDocumentEdit> =
+      seen.mock.calls.at(-1)![0].edit;
+    act(() => oldEdit((tx) => tx.setCode("c1", "first draft")));
+    rerender(tree(second));
+    act(() => first.controller.abort());
+    expect(first.detached).toHaveBeenCalledOnce();
+    const latest: {
+      code: string | null | undefined;
+      edit: ReturnType<typeof useDocumentEdit>;
+    } = seen.mock.calls.at(-1)![0];
+    expect(latest.code).toBe("second source");
+    expect(latest.edit).not.toBe(oldEdit);
+    act(() => latest.edit((tx) => tx.setCode("c1", "second draft")));
+    expect(seen.mock.calls.at(-1)![0].code).toBe("second draft");
+    const stale = vi.fn();
+    oldEdit(stale);
+    expect(stale).not.toHaveBeenCalled();
+    seen.mockClear();
+    act(() =>
+      first.store.set(
+        first.source,
+        withCells(document(), {
+          c1: cell("c1", "stale host"),
+        }),
+      ),
+    );
+    expect(seen).not.toHaveBeenCalled();
+  });
+
+  it("requires a document provider", () => {
+    expect(() => renderHook(useDocumentEdit)).toThrow("DocumentProvider");
+  });
+});

package/src/core/document/hooks.tsx

@@ -0,0 +1,118 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellId } from "@marimo-team/client/protocol";
+import { useAtomValue, useSetAtom, useStore } from "jotai";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+import { cellCodeBinding } from "./codemirror";
+import type { EditableCell } from "./draft";
+import type { DocumentModel } from "./model";
+import { selectCellField, selectOrder } from "./select";
+
+const DocumentContext = createContext<DocumentModel | null>(null);
+
+/**
+ * Expose a session-owned model to React. Construct the model with the same store
+ * as the enclosing Jotai Provider. The session owner controls its AbortSignal;
+ * mounting or unmounting this provider does not change the model's lifetime.
+ *
+ * ```tsx
+ * <Provider store={store}>
+ *   <DocumentProvider model={model}>
+ *     <Editor />
+ *   </DocumentProvider>
+ * </Provider>
+ * ```
+ */
+export function DocumentProvider({
+  model,
+  children,
+}: {
+  model: DocumentModel;
+  children: ReactNode;
+}) {
+  return (
+    <DocumentContext.Provider value={model}>
+      {children}
+    </DocumentContext.Provider>
+  );
+}
+
+function useDocumentModel() {
+  const model = useContext(DocumentContext);
+  if (model === null) {
+    throw new Error("Document hooks require a DocumentProvider");
+  }
+  return model;
+}
+
+/** Null while the document is unavailable; an empty array for an empty document. */
+export function useCellOrder() {
+  const { documentAtom } = useDocumentModel();
+  return useAtomValue(useMemo(() => selectOrder(documentAtom), [documentAtom]));
+}
+
+function useCellField<K extends keyof EditableCell>(id: CellId, field: K) {
+  const { documentAtom } = useDocumentModel();
+  return useAtomValue(
+    useMemo(
+      () => selectCellField(documentAtom, id, field),
+      [documentAtom, id, field],
+    ),
+  );
+}
+
+/** Undefined for an absent cell; null when the host withholds its source. */
+export function useCellCode(id: CellId) {
+  return useCellField(id, "code");
+}
+
+/** Undefined when the cell or document is unavailable. */
+export function useCellName(id: CellId) {
+  return useCellField(id, "name");
+}
+
+/** Undefined when the cell or document is unavailable. */
+export function useCellConfig(id: CellId) {
+  return useCellField(id, "config");
+}
+
+/**
+ * A CodeMirror extension that binds the editor's text to a cell's code.
+ * Stable until the cell id or document model changes.
+ *
+ * ```tsx
+ * const extension = useCellCodeExtension(cellId);
+ * ```
+ */
+export function useCellCodeExtension(id: CellId) {
+  const model = useDocumentModel();
+  const store = useStore();
+  return useMemo(
+    () => cellCodeBinding({ store, model, cellId: id }),
+    [model, store, id],
+  );
+}
+
+/**
+ * A stable edit function. Synchronous callbacks publish atomically or roll back.
+ *
+ * ```ts
+ * const edit = useDocumentEdit();
+ * edit((tx) => tx.setCode(cellId, code));
+ * ```
+ */
+export function useDocumentEdit() {
+  return useSetAtom(useDocumentModel().editAtom);
+}
+
+/**
+ * Sync status and explicit recovery. flush waits for edits, including newer
+ * typing, to reach the confirmed source and returns the revision for Run/Save.
+ * Rejections retain local edits; retry explicitly resubmits them. Requests
+ * with an unknown outcome reuse their original key within the retry window.
+ */
+export function useDocumentSync() {
+  const model = useDocumentModel();
+  const status = useAtomValue(model.syncStatusAtom);
+  return { status, flush: model.flush, retry: model.retry };
+}

package/src/core/document/index.ts

@@ -1,5 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+export {
+  DocumentProvider,
+  useCellCode,
+  useCellCodeExtension,
+  useCellConfig,
+  useCellName,
+  useCellOrder,
+  useDocumentEdit,
+  useDocumentSync,
+} from "./hooks";
 export { createDocumentModel } from "./model";
 export type {
   DocumentEdit,