@marimo-team/islands 0.23.2-dev34 → 0.23.2-dev38

package/dist/main.js

@@ -10510,7 +10510,7 @@ Defaulting to \`null\`.`;
   function set$1(e, r, c) {
     return e == null ? e : _baseSet_default(e, r, c);
   }
-  var set_default = set$1, import_compiler_runtime$142 = require_compiler_runtime(), hydratedMap = /* @__PURE__ */ new WeakMap();
+  var set_default = set$1, import_compiler_runtime$143 = require_compiler_runtime(), hydratedMap = /* @__PURE__ */ new WeakMap();
   function useHydrateAtoms(e, r) {
     let c = useStore(r), d = getHydratedSet(c);
     for (let [f, ...h] of e) (!d.has(f) || (r == null ? void 0 : r.dangerouslyForceHydrate)) && (d.add(f), c.set(f, ...h));
@@ -13803,7 +13803,7 @@ Defaulting to \`null\`.`;
   }
   repl(MODEL_MANAGER, "MODEL_MANAGER");
   var NavigationMenu = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$142.c)(16), d, f, h, _;
+    let c = (0, import_compiler_runtime$143.c)(16), d, f, h, _;
     c[0] === e ? (d = c[1], f = c[2], h = c[3], _ = c[4]) : ({ className: f, children: d, orientation: h, ..._ } = e, c[0] = e, c[1] = d, c[2] = f, c[3] = h, c[4] = _);
     let y = h === "horizontal" && "max-w-max flex-1 items-center justify-center", S = h === "vertical" && "", w;
     c[5] !== f || c[6] !== y || c[7] !== S ? (w = cn(y, S, "relative z-10", f), c[5] = f, c[6] = y, c[7] = S, c[8] = w) : w = c[8];
@@ -13833,7 +13833,7 @@ Defaulting to \`null\`.`;
       orientation: "horizontal"
     }
   }), NavigationMenuList = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$142.c)(11), d, f, h;
+    let c = (0, import_compiler_runtime$143.c)(11), d, f, h;
     c[0] === e ? (d = c[1], f = c[2], h = c[3]) : ({ className: d, orientation: f, ...h } = e, c[0] = e, c[1] = d, c[2] = f, c[3] = h);
     let _;
     c[4] !== d || c[5] !== f ? (_ = cn(navigationMenuListStyle({
@@ -13858,7 +13858,7 @@ Defaulting to \`null\`.`;
       orientation: "horizontal"
     }
   }), NavigationMenuTrigger = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$142.c)(12), d, f, h;
+    let c = (0, import_compiler_runtime$143.c)(12), d, f, h;
     c[0] === e ? (d = c[1], f = c[2], h = c[3]) : ({ className: f, children: d, ...h } = e, c[0] = e, c[1] = d, c[2] = f, c[3] = h);
     let _;
     c[4] === f ? _ = c[5] : (_ = cn(navigationMenuTriggerStyle(), "group", f), c[4] = f, c[5] = _);
@@ -13881,7 +13881,7 @@ Defaulting to \`null\`.`;
   });
   NavigationMenuTrigger.displayName = Trigger$1.displayName;
   var NavigationMenuContent = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$142.c)(9), d, f;
+    let c = (0, import_compiler_runtime$143.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ", d), c[3] = d, c[4] = h);
@@ -13894,7 +13894,7 @@ Defaulting to \`null\`.`;
   });
   NavigationMenuContent.displayName = Content$1.displayName;
   var NavigationMenuLink = Link, NavigationMenuViewport = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$142.c)(10), d, f;
+    let c = (0, import_compiler_runtime$143.c)(10), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = cn("absolute left-0 top-full flex justify-center"), c[3] = h) : h = c[3];
@@ -13912,7 +13912,7 @@ Defaulting to \`null\`.`;
   });
   NavigationMenuViewport.displayName = Viewport.displayName;
   var NavigationMenuIndicator = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$142.c)(10), d, f;
+    let c = (0, import_compiler_runtime$143.c)(10), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", d), c[3] = d, c[4] = h);
@@ -13929,7 +13929,7 @@ Defaulting to \`null\`.`;
     }), c[6] = f, c[7] = r, c[8] = h, c[9] = y) : y = c[9], y;
   });
   NavigationMenuIndicator.displayName = Indicator$2.displayName;
-  var import_compiler_runtime$141 = require_compiler_runtime(), NavigationMenuPlugin = class {
+  var import_compiler_runtime$142 = require_compiler_runtime(), NavigationMenuPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-nav-menu");
       __publicField(this, "menuItemValidator", object({
@@ -13958,7 +13958,7 @@ Defaulting to \`null\`.`;
       });
     }
   }, NavMenuComponent = (e) => {
-    let r = (0, import_compiler_runtime$141.c)(13), { items: c, orientation: d } = e, f = _temp$38, h = _temp2$25, _ = _temp3$17, v;
+    let r = (0, import_compiler_runtime$142.c)(13), { items: c, orientation: d } = e, f = _temp$38, h = _temp2$25, _ = _temp3$17, v;
     r[0] === d ? v = r[1] : (v = (e2) => "items" in e2 ? d === "horizontal" ? (0, import_jsx_runtime.jsx)(NavigationMenu, {
       orientation: "horizontal",
       children: (0, import_jsx_runtime.jsx)(NavigationMenuList, {
@@ -14039,7 +14039,7 @@ Defaulting to \`null\`.`;
       children: w
     }), r[10] = d, r[11] = w, r[12] = E) : E = r[12], E;
   }, ListItem = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$141.c)(19), d, f, h, _;
+    let c = (0, import_compiler_runtime$142.c)(19), d, f, h, _;
     c[0] === e ? (d = c[1], f = c[2], h = c[3], _ = c[4]) : ({ className: f, label: h, children: d, ..._ } = e, c[0] = e, c[1] = d, c[2] = f, c[3] = h, c[4] = _);
     let y;
     c[5] === f ? y = c[6] : (y = cn("block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", f), c[5] = f, c[6] = y);
@@ -16939,9 +16939,9 @@ Defaulting to \`null\`.`;
         isSelected: _
       }
     }, M.children));
-  }), import_compiler_runtime$140 = require_compiler_runtime();
+  }), import_compiler_runtime$141 = require_compiler_runtime();
   const LocaleProvider = (e) => {
-    let r = (0, import_compiler_runtime$140.c)(5), { children: c } = e, d = useAtomValue(localeAtom), f;
+    let r = (0, import_compiler_runtime$141.c)(5), { children: c } = e, d = useAtomValue(localeAtom), f;
     r[0] === d ? f = r[1] : (f = safeLocale(d), r[0] = d, r[1] = f);
     let h;
     return r[2] !== c || r[3] !== f ? (h = (0, import_jsx_runtime.jsx)($18f2051aff69b9bf$export$a54013f0d02a8f82, {
@@ -17920,9 +17920,9 @@ Defaulting to \`null\`.`;
       r,
       d.name
     ]), null;
-  }), import_compiler_runtime$139 = require_compiler_runtime();
+  }), import_compiler_runtime$140 = require_compiler_runtime();
   const EmotionCacheProvider = (e) => {
-    let r = (0, import_compiler_runtime$139.c)(6), { container: c, children: d } = e, f;
+    let r = (0, import_compiler_runtime$140.c)(6), { container: c, children: d } = e, f;
     bb0: {
       if (!c) {
         let e3;
@@ -23090,9 +23090,9 @@ To suppress this warning, you need to explicitly provide the \`palette.${r}Chann
         })
       })
     });
-  }, import_compiler_runtime$138 = require_compiler_runtime();
+  }, import_compiler_runtime$139 = require_compiler_runtime();
   const HtmlOutput = (0, import_react.memo)((e) => {
-    let r = (0, import_compiler_runtime$138.c)(10), { html: c, inline: d, className: f, alwaysSanitizeHtml: h } = e, _ = d === void 0 ? false : d;
+    let r = (0, import_compiler_runtime$139.c)(10), { html: c, inline: d, className: f, alwaysSanitizeHtml: h } = e, _ = d === void 0 ? false : d;
     if (!c) return null;
     let y = !_, S;
     r[0] !== f || r[1] !== _ || r[2] !== y ? (S = cn(f, {
@@ -23111,9 +23111,9 @@ To suppress this warning, you need to explicitly provide the \`palette.${r}Chann
     }), r[7] = S, r[8] = w, r[9] = E) : E = r[9], E;
   });
   HtmlOutput.displayName = "HtmlOutput";
-  var import_compiler_runtime$137 = require_compiler_runtime();
+  var import_compiler_runtime$138 = require_compiler_runtime();
   const ImageOutput = (e) => {
-    let r = (0, import_compiler_runtime$137.c)(8), { src: c, alt: d, width: f, height: h, className: _ } = e, v = d === void 0 ? "" : d, y;
+    let r = (0, import_compiler_runtime$138.c)(8), { src: c, alt: d, width: f, height: h, className: _ } = e, v = d === void 0 ? "" : d, y;
     r[0] !== v || r[1] !== h || r[2] !== c || r[3] !== f ? (y = (0, import_jsx_runtime.jsx)("img", {
       src: c,
       alt: v,
@@ -23126,9 +23126,9 @@ To suppress this warning, you need to explicitly provide the \`palette.${r}Chann
       children: y
     }), r[5] = _, r[6] = y, r[7] = S) : S = r[7], S;
   };
-  var import_compiler_runtime$136 = require_compiler_runtime();
+  var import_compiler_runtime$137 = require_compiler_runtime();
   const Kbd = (e) => {
-    let r = (0, import_compiler_runtime$136.c)(5), c;
+    let r = (0, import_compiler_runtime$137.c)(5), c;
     r[0] === e.className ? c = r[1] : (c = clsx_default(e.className, "rounded-md bg-muted/40 px-2 text-[0.75rem] font-prose center border border-foreground/20 text-muted-foreground block whitespace-nowrap"), r[0] = e.className, r[1] = c);
     let d;
     return r[2] !== e.children || r[3] !== c ? (d = (0, import_jsx_runtime.jsx)("kbd", {
@@ -23136,9 +23136,9 @@ To suppress this warning, you need to explicitly provide the \`palette.${r}Chann
       children: e.children
     }), r[2] = e.children, r[3] = c, r[4] = d) : d = r[4], d;
   };
-  var import_compiler_runtime$135 = require_compiler_runtime();
+  var import_compiler_runtime$136 = require_compiler_runtime();
   const ExternalLink$1 = (e) => {
-    let r = (0, import_compiler_runtime$135.c)(3), { href: c, children: d } = e, f;
+    let r = (0, import_compiler_runtime$136.c)(3), { href: c, children: d } = e, f;
     return r[0] !== d || r[1] !== c ? (f = (0, import_jsx_runtime.jsx)("a", {
       href: c,
       target: "_blank",
@@ -23309,17 +23309,17 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     os: "os",
     re: "re",
     sys: "sys"
-  }, import_compiler_runtime$134 = require_compiler_runtime(), fixModeAtom = atomWithStorage("marimo:ai-autofix-mode", "autofix", jotaiJsonStorage);
+  }, import_compiler_runtime$135 = require_compiler_runtime(), fixModeAtom = atomWithStorage("marimo:ai-autofix-mode", "autofix", jotaiJsonStorage);
   function useFixMode() {
-    let e = (0, import_compiler_runtime$134.c)(3), [r, c] = useAtom(fixModeAtom), d;
+    let e = (0, import_compiler_runtime$135.c)(3), [r, c] = useAtom(fixModeAtom), d;
     return e[0] !== r || e[1] !== c ? (d = {
       fixMode: r,
       setFixMode: c
     }, e[0] = r, e[1] = c, e[2] = d) : d = e[2], d;
   }
-  var import_compiler_runtime$133 = require_compiler_runtime();
+  var import_compiler_runtime$134 = require_compiler_runtime();
   const AutoFixButton = (e) => {
-    let r = (0, import_compiler_runtime$133.c)(21), { errors: c, cellId: d, className: f } = e, h = useStore(), { createNewCell: _ } = useCellActions(), y = useAtomValue(aiEnabledAtom), S;
+    let r = (0, import_compiler_runtime$134.c)(21), { errors: c, cellId: d, className: f } = e, h = useStore(), { createNewCell: _ } = useCellActions(), y = useAtomValue(aiEnabledAtom), S;
     if (r[0] !== y || r[1] !== c) {
       let e2;
       r[3] === y ? e2 = r[4] : (e2 = (e3) => getAutoFixes(e3, {
@@ -23380,7 +23380,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   };
   var PromptIcon = Sparkles, AutofixIcon = Wrench, PromptTitle = "Suggest a prompt", AutofixTitle = "Fix with AI";
   const AIFixButton = (e) => {
-    let r = (0, import_compiler_runtime$133.c)(21), { tooltip: c, openPrompt: d, applyAutofix: f } = e, { fixMode: h, setFixMode: _ } = useFixMode(), v = h === "prompt" ? d : f, y;
+    let r = (0, import_compiler_runtime$134.c)(21), { tooltip: c, openPrompt: d, applyAutofix: f } = e, { fixMode: h, setFixMode: _ } = useFixMode(), v = h === "prompt" ? d : f, y;
     r[0] === h ? y = r[1] : (y = h === "prompt" ? (0, import_jsx_runtime.jsx)(PromptIcon, {
       className: "h-3 w-3 mr-2 mb-0.5"
     }) : (0, import_jsx_runtime.jsx)(AutofixIcon, {
@@ -23449,7 +23449,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }), r[18] = G, r[19] = E, r[20] = q) : q = r[20], q;
   };
   var AiModeItem = (e) => {
-    let r = (0, import_compiler_runtime$133.c)(12), { mode: c } = e, d;
+    let r = (0, import_compiler_runtime$134.c)(12), { mode: c } = e, d;
     r[0] === c ? d = r[1] : (d = c === "prompt" ? (0, import_jsx_runtime.jsx)(PromptIcon, {
       className: "h-4 w-4"
     }) : (0, import_jsx_runtime.jsx)(AutofixIcon, {
@@ -23486,9 +23486,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   function useFilename() {
     return useAtomValue(filenameAtom);
   }
-  var import_compiler_runtime$131 = require_compiler_runtime();
+  var import_compiler_runtime$132 = require_compiler_runtime();
   const CellLink = (e) => {
-    let r = (0, import_compiler_runtime$131.c)(12), { className: c, cellId: d, variant: f, onClick: h, formatCellName: _, skipScroll: y } = e, S = useCellNames()[d] ?? "", w = useCellIds().inOrderIds.indexOf(d), { showCellIfHidden: E } = useCellActions(), O = _ ?? _temp$37, M;
+    let r = (0, import_compiler_runtime$132.c)(12), { className: c, cellId: d, variant: f, onClick: h, formatCellName: _, skipScroll: y } = e, S = useCellNames()[d] ?? "", w = useCellIds().inOrderIds.indexOf(d), { showCellIfHidden: E } = useCellActions(), O = _ ?? _temp$37, M;
     r[0] === c ? M = r[1] : (M = cn("inline-block cursor-pointer text-link hover:underline", c), r[0] = c, r[1] = M);
     let I;
     r[2] !== d || r[3] !== h || r[4] !== E || r[5] !== y || r[6] !== f ? (I = (e2) => {
@@ -23508,13 +23508,13 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       children: z
     }), r[8] = M, r[9] = I, r[10] = z, r[11] = Y7) : Y7 = r[11], Y7;
   }, CellLinkError = (e) => {
-    let r = (0, import_compiler_runtime$131.c)(2), c;
+    let r = (0, import_compiler_runtime$132.c)(2), c;
     return r[0] === e ? c = r[1] : (c = (0, import_jsx_runtime.jsx)(CellLink, {
       ...e,
       variant: "destructive"
     }), r[0] = e, r[1] = c), c;
   }, CellLinkTraceback = (e) => {
-    let r = (0, import_compiler_runtime$131.c)(10), { cellId: c, lineNumber: d } = e, f = useFilename(), h;
+    let r = (0, import_compiler_runtime$132.c)(10), { cellId: c, lineNumber: d } = e, f = useFilename(), h;
     r[0] !== c || r[1] !== d ? (h = () => goToCellLine(c, d), r[0] = c, r[1] = d, r[2] = h) : h = r[2];
     let _;
     r[3] !== c || r[4] !== f ? (_ = (e2) => c === "__scratch__" ? "scratch" : `marimo://${f || "untitled"}#cell=${e2}`, r[3] = c, r[4] = f, r[5] = _) : _ = r[5];
@@ -23611,7 +23611,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       value: e2
     });
   }
-  var import_compiler_runtime$130 = require_compiler_runtime(), ansiUp = new AnsiUp();
+  var import_compiler_runtime$131 = require_compiler_runtime(), ansiUp = new AnsiUp();
   const cleanAnsiCodes = (e) => {
     let r = RegExp("\x1B\\[[0-9;]*m", "g");
     return e.replaceAll(r, "");
@@ -23679,7 +23679,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     });
   }
   var InstallPackageLink = (e) => {
-    let r = (0, import_compiler_runtime$130.c)(6), { packages: c, children: d } = e, { handleInstallPackages: f } = useInstallPackages(), h;
+    let r = (0, import_compiler_runtime$131.c)(6), { packages: c, children: d } = e, { handleInstallPackages: f } = useInstallPackages(), h;
     r[0] !== f || r[1] !== c ? (h = (e2) => {
       f(c), e2.preventDefault();
     }, r[0] = f, r[1] = c, r[2] = h) : h = r[2];
@@ -23747,15 +23747,15 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       replace: (e2) => r(e2)
     })
   }), RenderTextWithLinks = (e) => {
-    let r = (0, import_compiler_runtime$130.c)(4), { text: c } = e, d;
+    let r = (0, import_compiler_runtime$131.c)(4), { text: c } = e, d;
     r[0] === c ? d = r[1] : (d = renderTextWithReplacers(c, composeReplacers(pipInstallReplacer, urlReplacer)), r[0] = c, r[1] = d);
     let f = d, h;
     return r[2] === f ? h = r[3] : (h = (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
       children: f
     }), r[2] = f, r[3] = h), h;
   };
-  var import_compiler_runtime$129 = require_compiler_runtime(), Tip = (e) => {
-    let r = (0, import_compiler_runtime$129.c)(10), c = e.title ?? "Tip", d;
+  var import_compiler_runtime$130 = require_compiler_runtime(), Tip = (e) => {
+    let r = (0, import_compiler_runtime$130.c)(10), c = e.title ?? "Tip", d;
     r[0] === c ? d = r[1] : (d = (0, import_jsx_runtime.jsx)(AccordionTrigger, {
       className: "pt-2 pb-2 font-normal",
       children: c
@@ -23783,7 +23783,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }), r[7] = e.className, r[8] = h, r[9] = _) : _ = r[9], _;
   };
   const MarimoErrorOutput = (e) => {
-    let r = (0, import_compiler_runtime$129.c)(31), { errors: c, cellId: d, className: f } = e, h = useChromeActions(), _ = "This cell wasn't run because it has errors", y = "destructive", S = "text-error";
+    let r = (0, import_compiler_runtime$130.c)(31), { errors: c, cellId: d, className: f } = e, h = useChromeActions(), _ = "This cell wasn't run because it has errors", y = "destructive", S = "text-error";
     if (c.some(_temp$36)) _ = "Interrupted";
     else if (c.some(_temp2$24)) _ = "An internal error occurred";
     else if (c.some(_temp3$16)) _ = "Ancestor prevented from running", y = "default", S = "text-secondary-foreground";
@@ -24460,9 +24460,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       })
     }, `sql-error-${r}`);
   }
-  var import_compiler_runtime$128 = require_compiler_runtime();
+  var import_compiler_runtime$129 = require_compiler_runtime();
   const TextOutput = (e) => {
-    let r = (0, import_compiler_runtime$128.c)(13), { text: c, channel: d, wrapText: f } = e, h = d === "stdout" || d === "stderr", _;
+    let r = (0, import_compiler_runtime$129.c)(13), { text: c, channel: d, wrapText: f } = e, h = d === "stdout" || d === "stderr", _;
     r[0] === f ? _ = r[1] : (_ = (e2) => (0, import_jsx_runtime.jsx)("span", {
       className: f ? "whitespace-pre-wrap break-words" : "whitespace-pre",
       children: (0, import_jsx_runtime.jsx)(RenderTextWithLinks, {
@@ -24479,17 +24479,17 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       children: O
     }), r[10] = E, r[11] = O, r[12] = M) : M = r[12], M;
   };
-  var import_compiler_runtime$127 = require_compiler_runtime();
+  var import_compiler_runtime$128 = require_compiler_runtime();
   const VideoOutput = (e) => {
-    let r = (0, import_compiler_runtime$127.c)(3), { src: c, className: d } = e, f;
+    let r = (0, import_compiler_runtime$128.c)(3), { src: c, className: d } = e, f;
     return r[0] !== d || r[1] !== c ? (f = (0, import_jsx_runtime.jsx)("iframe", {
       className: d,
       src: c
     }), r[0] = d, r[1] = c, r[2] = f) : f = r[2], f;
   };
-  var import_compiler_runtime$126 = require_compiler_runtime();
+  var import_compiler_runtime$127 = require_compiler_runtime();
   function useOverflowDetection(e, r) {
-    let c = (0, import_compiler_runtime$126.c)(4), d = r === void 0 ? true : r, [f, h] = (0, import_react.useState)(false), _, v;
+    let c = (0, import_compiler_runtime$127.c)(4), d = r === void 0 ? true : r, [f, h] = (0, import_react.useState)(false), _, v;
     return c[0] !== d || c[1] !== e ? (_ = () => {
       let r2 = e.current;
       if (!r2 || !d) return;
@@ -24586,9 +24586,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   const LazyVegaEmbed = import_react.lazy(() => import("./react-vega-BFLRzgl7.js").then((e) => ({
     default: e.VegaEmbed
   })));
-  var import_compiler_runtime$125 = require_compiler_runtime();
+  var import_compiler_runtime$126 = require_compiler_runtime();
   const ChartLoadingState = () => {
-    let e = (0, import_compiler_runtime$125.c)(1), r;
+    let e = (0, import_compiler_runtime$126.c)(1), r;
     return e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (r = (0, import_jsx_runtime.jsxs)("div", {
       className: "flex items-center gap-2 justify-center",
       children: [
@@ -24602,7 +24602,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       ]
     }), e[0] = r) : r = e[0], r;
   }, ChartErrorState = (e) => {
-    let r = (0, import_compiler_runtime$125.c)(2), { error: c } = e, d;
+    let r = (0, import_compiler_runtime$126.c)(2), { error: c } = e, d;
     return r[0] === c ? d = r[1] : (d = (0, import_jsx_runtime.jsx)("div", {
       className: "flex items-center justify-center",
       children: (0, import_jsx_runtime.jsx)(ErrorBanner, {
@@ -24610,7 +24610,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       })
     }), r[0] = c, r[1] = d), d;
   }, ChartInfoState = (e) => {
-    let r = (0, import_compiler_runtime$125.c)(8), { children: c, className: d } = e, f;
+    let r = (0, import_compiler_runtime$126.c)(8), { children: c, className: d } = e, f;
     r[0] === d ? f = r[1] : (f = cn("flex flex-col items-center justify-center gap-4", d), r[0] = d, r[1] = f);
     let h;
     r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = (0, import_jsx_runtime.jsx)(ChartPie, {
@@ -24630,8 +24630,8 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       ]
     }), r[5] = f, r[6] = _, r[7] = y) : y = r[7], y;
   };
-  var import_compiler_runtime$124 = require_compiler_runtime(), Tabs = Root2, TabsList = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$124.c)(9), d, f;
+  var import_compiler_runtime$125 = require_compiler_runtime(), Tabs = Root2, TabsList = import_react.forwardRef((e, r) => {
+    let c = (0, import_compiler_runtime$125.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("inline-flex max-h-14 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", d), c[3] = d, c[4] = h);
@@ -24644,7 +24644,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   TabsList.displayName = List.displayName;
   var TabsTrigger = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$124.c)(9), d, f;
+    let c = (0, import_compiler_runtime$125.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", d), c[3] = d, c[4] = h);
@@ -24657,7 +24657,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   TabsTrigger.displayName = Trigger.displayName;
   var TabsContent = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$124.c)(9), d, f;
+    let c = (0, import_compiler_runtime$125.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2", d), c[3] = d, c[4] = h);
@@ -24669,9 +24669,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }), c[5] = f, c[6] = r, c[7] = h, c[8] = _) : _ = c[8], _;
   });
   TabsContent.displayName = Content.displayName;
-  var import_compiler_runtime$123 = require_compiler_runtime();
+  var import_compiler_runtime$124 = require_compiler_runtime();
   const WithLocale = (e) => {
-    let r = (0, import_compiler_runtime$123.c)(3), { children: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f;
+    let r = (0, import_compiler_runtime$124.c)(3), { children: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f;
     return r[0] !== c || r[1] !== d ? (f = c(d), r[0] = c, r[1] = d, r[2] = f) : f = r[2], f;
   };
   function tzName(e, r, c = "long") {
@@ -25490,8 +25490,8 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   function smartMatchFilter(e, r, c) {
     return smartMatch(r, e) ? 1 : c && smartMatch(r, c) ? 0.8 : 0;
   }
-  var import_compiler_runtime$122 = require_compiler_runtime(), Command = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$122.c)(9), d, f;
+  var import_compiler_runtime$123 = require_compiler_runtime(), Command = import_react.forwardRef((e, r) => {
+    let c = (0, import_compiler_runtime$123.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", d), c[3] = d, c[4] = h);
@@ -25505,7 +25505,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   Command.displayName = _e$1.displayName;
   var CommandInput = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$122.c)(19), d, f, h, _;
+    let c = (0, import_compiler_runtime$123.c)(19), d, f, h, _;
     c[0] === e ? (d = c[1], f = c[2], h = c[3], _ = c[4]) : ({ className: d, icon: f, rootClassName: _, ...h } = e, c[0] = e, c[1] = d, c[2] = f, c[3] = h, c[4] = _);
     let y;
     c[5] === _ ? y = c[6] : (y = cn("flex items-center border-b px-3", _), c[5] = _, c[6] = y);
@@ -25533,7 +25533,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   CommandInput.displayName = _e$1.Input.displayName;
   var CommandList = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$122.c)(9), d, f;
+    let c = (0, import_compiler_runtime$123.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("max-h-[300px] overflow-y-auto overflow-x-hidden", d), c[3] = d, c[4] = h);
@@ -25546,7 +25546,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   CommandList.displayName = _e$1.List.displayName;
   var CommandEmpty = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$122.c)(3), d;
+    let c = (0, import_compiler_runtime$123.c)(3), d;
     return c[0] !== e || c[1] !== r ? (d = (0, import_jsx_runtime.jsx)(_e$1.Empty, {
       ref: r,
       className: "py-6 text-center text-sm",
@@ -25555,7 +25555,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   CommandEmpty.displayName = _e$1.Empty.displayName;
   var CommandGroup = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$122.c)(9), d, f;
+    let c = (0, import_compiler_runtime$123.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", d), c[3] = d, c[4] = h);
@@ -25568,7 +25568,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   CommandGroup.displayName = _e$1.Group.displayName;
   var CommandSeparator = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$122.c)(9), d, f;
+    let c = (0, import_compiler_runtime$123.c)(9), d, f;
     c[0] === e ? (d = c[1], f = c[2]) : ({ className: d, ...f } = e, c[0] = e, c[1] = d, c[2] = f);
     let h;
     c[3] === d ? h = c[4] : (h = menuSeparatorVariants({
@@ -25583,7 +25583,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   });
   CommandSeparator.displayName = _e$1.Separator.displayName;
   var CommandItem = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$122.c)(17), d, f, h, _, y;
+    let c = (0, import_compiler_runtime$123.c)(17), d, f, h, _, y;
     if (c[0] !== r || c[1] !== e) {
       let { className: S2, variant: w, inset: E, ...O } = e;
       d = _e$1.Item, f = r, c[7] !== S2 || c[8] !== E || c[9] !== w ? (h = cn(menuItemVariants({
@@ -25600,9 +25600,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }), c[11] = d, c[12] = f, c[13] = h, c[14] = _, c[15] = y, c[16] = S) : S = c[16], S;
   });
   CommandItem.displayName = _e$1.Item.displayName;
-  var import_compiler_runtime$121 = require_compiler_runtime();
+  var import_compiler_runtime$122 = require_compiler_runtime();
   const DraggablePopover = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(25), c, d, f;
+    let r = (0, import_compiler_runtime$122.c)(25), c, d, f;
     r[0] === e ? (c = r[1], d = r[2], f = r[3]) : ({ children: c, className: d, ...f } = e, r[0] = e, r[1] = c, r[2] = d, r[3] = f);
     let h;
     r[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = {
@@ -25842,6 +25842,98 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       negate: false
     };
   }
+  var import_compiler_runtime$121 = require_compiler_runtime(), WHITESPACE_CHARS = {
+    " ": {
+      marker: "\u2423",
+      name: "space"
+    },
+    "	": {
+      marker: "\\t",
+      name: "tab"
+    },
+    "\n": {
+      marker: "\\n",
+      name: "newline"
+    },
+    "\r": {
+      marker: "\\r",
+      name: "newline"
+    }
+  };
+  function renderWhitespaceMarkers(e) {
+    return [
+      ...e
+    ].map((e2) => {
+      var _a3;
+      return ((_a3 = WHITESPACE_CHARS[e2]) == null ? void 0 : _a3.marker) ?? e2;
+    }).join("");
+  }
+  function describeWhitespace(e) {
+    var _a3;
+    let r = {};
+    for (let c of e) {
+      let e2 = ((_a3 = WHITESPACE_CHARS[c]) == null ? void 0 : _a3.name) ?? "character";
+      r[e2] = (r[e2] ?? 0) + 1;
+    }
+    return Object.entries(r).map(([e2, r2]) => `${r2} ${e2}${r2 > 1 ? "s" : ""}`).join(", ");
+  }
+  var SENTINEL_CONFIG = {
+    null: {
+      label: () => "None",
+      tooltip: () => "None",
+      ariaLabel: () => "None"
+    },
+    "empty-string": {
+      label: () => "<empty>",
+      tooltip: () => "<empty>",
+      ariaLabel: () => "empty string"
+    },
+    whitespace: {
+      label: (e) => renderWhitespaceMarkers(String(e)),
+      tooltip: (e) => describeWhitespace(String(e)),
+      ariaLabel: (e) => describeWhitespace(String(e))
+    },
+    nan: {
+      label: () => "NaN",
+      tooltip: () => "NaN",
+      ariaLabel: () => "NaN"
+    },
+    "positive-infinity": {
+      label: () => "inf",
+      tooltip: () => "Infinity",
+      ariaLabel: () => "infinity"
+    },
+    "negative-infinity": {
+      label: () => "-inf",
+      tooltip: () => "-Infinity",
+      ariaLabel: () => "negative infinity"
+    },
+    nat: {
+      label: () => "NaT",
+      tooltip: () => "NaT (Not a Time)",
+      ariaLabel: () => "Not a Time"
+    }
+  };
+  function SentinelCell(e) {
+    let r = (0, import_compiler_runtime$121.c)(15), { sentinel: c } = e, d = SENTINEL_CONFIG[c.type], f;
+    r[0] !== d || r[1] !== c.value ? (f = d.label(c.value), r[0] = d, r[1] = c.value, r[2] = f) : f = r[2];
+    let h = f, _;
+    r[3] !== d || r[4] !== c.value ? (_ = d.tooltip(c.value), r[3] = d, r[4] = c.value, r[5] = _) : _ = r[5];
+    let v = _, y;
+    r[6] !== d || r[7] !== c.value ? (y = d.ariaLabel(c.value), r[6] = d, r[7] = c.value, r[8] = y) : y = r[8];
+    let S = y, w;
+    r[9] === h ? w = r[10] : (w = (0, import_jsx_runtime.jsx)("span", {
+      className: "opacity-70",
+      children: h
+    }), r[9] = h, r[10] = w);
+    let E;
+    return r[11] !== S || r[12] !== w || r[13] !== v ? (E = (0, import_jsx_runtime.jsx)("span", {
+      className: "italic text-muted-foreground bg-muted rounded px-1",
+      "aria-label": S,
+      title: v,
+      children: w
+    }), r[11] = S, r[12] = w, r[13] = v, r[14] = E) : E = r[14], E;
+  }
   function functionalUpdate(e, r) {
     return typeof e == "function" ? e(r) : e;
   }
@@ -28179,10 +28271,17 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     return Objects.collect(e, ([e2]) => e2, ([, [e2]]) => e2);
   }
   const INDEX_COLUMN_NAME = "_marimo_row_id", TOO_MANY_ROWS = "too_many";
+  function isNumericType(e) {
+    return e === "number" || e === "integer";
+  }
+  function isTemporalType(e) {
+    return e === "date" || e === "datetime" || e === "time";
+  }
   function extractTimezone(e) {
     var _a3, _b3;
     if (e) return (_b3 = (_a3 = /^datetime(?:64)?\[[^,]+,([^,]+)]$/.exec(e)) == null ? void 0 : _a3[1]) == null ? void 0 : _b3.trim();
   }
+  var WHITESPACE_ONLY_RE = /^[\s]+$/;
   async function loadTableData(e) {
     return Array.isArray(e) ? e : e.startsWith("{") || e.startsWith("[") ? jsonParseWithSpecialChar(e) : (e = await vegaLoadData(e, {
       type: "json"
@@ -28206,6 +28305,50 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     let d = r * c, f = d + c - 1;
     return e < d || e > f ? Math.floor(e / c) : null;
   }
+  var NUMERIC_STRING_SPECIALS = {
+    NaN: "nan",
+    Infinity: "positive-infinity",
+    "-Infinity": "negative-infinity",
+    inf: "positive-infinity",
+    "-inf": "negative-infinity"
+  };
+  function detectSentinel(e, r) {
+    if (e == null) return {
+      type: "null",
+      value: e
+    };
+    if (typeof e == "string") {
+      if (e === "") return {
+        type: "empty-string",
+        value: e
+      };
+      if (WHITESPACE_ONLY_RE.test(e)) return {
+        type: "whitespace",
+        value: e
+      };
+      if (isNumericType(r)) {
+        let r2 = NUMERIC_STRING_SPECIALS[e];
+        if (r2) return {
+          type: r2,
+          value: e
+        };
+      }
+      return isTemporalType(r) && e === "NaT" ? {
+        type: "nat",
+        value: e
+      } : null;
+    }
+    return typeof e == "number" ? Number.isNaN(e) ? {
+      type: "nan",
+      value: e
+    } : e === Infinity ? {
+      type: "positive-infinity",
+      value: e
+    } : e === -Infinity ? {
+      type: "negative-infinity",
+      value: e
+    } : null : null;
+  }
   function stringifyUnknownValue(e) {
     let { value: r, nullAsEmptyString: c = false } = e;
     return typeof r == "object" && r ? JSON.stringify(r) : r === null && c ? "" : String(r);
@@ -28645,30 +28788,33 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
                       })
                     ]
                   }),
-                  E.map(([e3, r2], c2) => {
-                    let f2 = d.has(e3), h = stringifyUnknownValue({
+                  E.map(([e3, r2], f2) => {
+                    var _a3;
+                    let h = d.has(e3), _2 = stringifyUnknownValue({
                       value: e3
-                    });
+                    }), v2 = detectSentinel(e3, (_a3 = c.columnDef.meta) == null ? void 0 : _a3.dataType);
                     return (0, import_jsx_runtime.jsxs)(CommandItem, {
-                      value: h,
+                      value: _2,
                       className: "not-last:border-b rounded-none px-3",
                       onSelect: () => M(e3),
                       children: [
                         (0, import_jsx_runtime.jsx)(Checkbox, {
-                          checked: f2,
+                          checked: h,
                           "aria-label": "Select row",
                           className: "mr-3 h-3.5 w-3.5"
                         }),
                         (0, import_jsx_runtime.jsx)("span", {
                           className: "flex-1 overflow-hidden max-h-20 line-clamp-3",
-                          children: h
+                          children: v2 ? (0, import_jsx_runtime.jsx)(SentinelCell, {
+                            sentinel: v2
+                          }) : _2
                         }),
                         (0, import_jsx_runtime.jsx)("span", {
                           className: "ml-3",
                           children: r2
                         })
                       ]
-                    }, c2);
+                    }, f2);
                   })
                 ]
               }),
@@ -30361,7 +30507,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }, I = (e2) => {
       if (f == null ? void 0 : f[e2]) return f[e2];
       let r2 = M(e2).dataType;
-      if (r2 === "number" || r2 === "integer") return "right";
+      if (isNumericType(r2)) return "right";
     }, z = [
       ...E,
       ...c.map(([e2]) => e2)
@@ -30428,7 +30574,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
             wrapped: S2,
             canSelectCell: O2,
             isSelected: w2,
-            isNumeric: M2 === "number" || M2 === "integer"
+            isNumeric: isNumericType(M2)
           })
         });
         return E.has(e2) ? (0, import_jsx_runtime.jsx)("b", {
@@ -30551,7 +30697,14 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   }
   function renderCellValue({ column: e, renderValue: r, getValue: c, selectCell: d, cellStyles: f }) {
     var _a3, _b3, _c3, _d3, _e9;
-    let _ = c(), y = (_a3 = e.getColumnFormatting) == null ? void 0 : _a3.call(e), S = (_b3 = e.columnDef.meta) == null ? void 0 : _b3.dataType, w = (_c3 = e.columnDef.meta) == null ? void 0 : _c3.dtype, E = ((_d3 = e.getColumnWrapping) == null ? void 0 : _d3.call(e)) === "wrap";
+    let _ = c(), y = (_a3 = e.getColumnFormatting) == null ? void 0 : _a3.call(e), S = (_b3 = e.columnDef.meta) == null ? void 0 : _b3.dataType, w = (_c3 = e.columnDef.meta) == null ? void 0 : _c3.dtype, E = ((_d3 = e.getColumnWrapping) == null ? void 0 : _d3.call(e)) === "wrap", O = detectSentinel(_, S);
+    if (O && O.type !== "empty-string") return (0, import_jsx_runtime.jsx)("div", {
+      onClick: d,
+      className: f,
+      children: (0, import_jsx_runtime.jsx)(SentinelCell, {
+        sentinel: O
+      })
+    });
     if (S === "datetime" && typeof _ == "string") try {
       if (!isValid(_)) return (0, import_jsx_runtime.jsx)("div", {
         onClick: d,
@@ -30630,11 +30783,11 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
         children: e2 == null ? "" : String(e2)
       });
     }
-    let O = getMimeValues(_);
-    return O ? (0, import_jsx_runtime.jsx)("div", {
+    let M = getMimeValues(_);
+    return M ? (0, import_jsx_runtime.jsx)("div", {
       onClick: d,
       className: f,
-      children: O.map((e2, r2) => (0, import_jsx_runtime.jsx)(MimeCell, {
+      children: M.map((e2, r2) => (0, import_jsx_runtime.jsx)(MimeCell, {
         value: e2
       }, r2))
     }) : Array.isArray(_) || typeof _ == "object" ? (0, import_jsx_runtime.jsx)(PopoutColumn, {
@@ -68865,7 +69018,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.2-dev34"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.2-dev38"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

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

package/src/components/data-table/__tests__/sentinel-cell.test.tsx

@@ -0,0 +1,83 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SentinelCell } from "../sentinel-cell";
+import type { CellValueSentinel } from "../types";
+
+function renderSentinel(sentinel: CellValueSentinel) {
+  const { container } = render(<SentinelCell sentinel={sentinel} />);
+  return container.querySelector("span")!;
+}
+
+describe("SentinelCell", () => {
+  it("renders null as None", () => {
+    const span = renderSentinel({ type: "null", value: null });
+    expect(span.textContent).toBe("None");
+    expect(span.getAttribute("aria-label")).toBe("None");
+    expect(span.className).toContain("italic");
+    expect(span.className).toContain("bg-muted");
+  });
+
+  it("renders empty string as <empty>", () => {
+    const span = renderSentinel({ type: "empty-string", value: "" });
+    expect(span.textContent).toBe("<empty>");
+    expect(span.getAttribute("aria-label")).toBe("empty string");
+  });
+
+  it("renders single space", () => {
+    const span = renderSentinel({ type: "whitespace", value: " " });
+    expect(span.textContent).toBe("\u2423");
+    expect(span.getAttribute("aria-label")).toBe("1 space");
+  });
+
+  it("renders multiple spaces", () => {
+    const span = renderSentinel({ type: "whitespace", value: "   " });
+    expect(span.textContent).toBe("\u2423\u2423\u2423");
+    expect(span.getAttribute("aria-label")).toBe("3 spaces");
+  });
+
+  it("renders tab", () => {
+    const span = renderSentinel({ type: "whitespace", value: "\t" });
+    expect(span.textContent).toBe("\\t");
+    expect(span.getAttribute("aria-label")).toBe("1 tab");
+  });
+
+  it("renders newline", () => {
+    const span = renderSentinel({ type: "whitespace", value: "\n" });
+    expect(span.textContent).toBe("\\n");
+    expect(span.getAttribute("aria-label")).toBe("1 newline");
+  });
+
+  it("renders mixed whitespace", () => {
+    const span = renderSentinel({ type: "whitespace", value: "\t \n" });
+    expect(span.textContent).toBe("\\t\u2423\\n");
+    expect(span.getAttribute("aria-label")).toBe("1 tab, 1 space, 1 newline");
+  });
+
+  it("renders NaN", () => {
+    const span = renderSentinel({ type: "nan", value: Number.NaN });
+    expect(span.textContent).toBe("NaN");
+  });
+
+  it("renders inf", () => {
+    const span = renderSentinel({ type: "positive-infinity", value: Infinity });
+    expect(span.textContent).toBe("inf");
+    expect(span.getAttribute("title")).toBe("Infinity");
+  });
+
+  it("renders -inf", () => {
+    const span = renderSentinel({
+      type: "negative-infinity",
+      value: -Infinity,
+    });
+    expect(span.textContent).toBe("-inf");
+    expect(span.getAttribute("title")).toBe("-Infinity");
+  });
+
+  it("renders NaT", () => {
+    const span = renderSentinel({ type: "nat", value: "NaT" });
+    expect(span.textContent).toBe("NaT");
+    expect(span.getAttribute("title")).toBe("NaT (Not a Time)");
+  });
+});

package/src/components/data-table/__tests__/utils.test.ts

@@ -3,6 +3,7 @@
 import type { Table } from "@tanstack/react-table";
 import { describe, expect, it } from "vitest";
 import {
+  detectSentinel,
   getClipboardContent,
   getPageIndexForRow,
   getRawValue,
@@ -186,6 +187,133 @@ describe("getClipboardContent", () => {
   });
 });
 
+describe("detectSentinel", () => {
+  it("should detect null and undefined", () => {
+    expect(detectSentinel(null, undefined)).toEqual({
+      type: "null",
+      value: null,
+    });
+    expect(detectSentinel(undefined, undefined)).toEqual({
+      type: "null",
+      value: undefined,
+    });
+  });
+
+  it("should detect empty string", () => {
+    expect(detectSentinel("", "string")).toEqual({
+      type: "empty-string",
+      value: "",
+    });
+  });
+
+  it("should detect whitespace-only strings", () => {
+    expect(detectSentinel(" ", "string")).toEqual({
+      type: "whitespace",
+      value: " ",
+    });
+    expect(detectSentinel("   ", "string")).toEqual({
+      type: "whitespace",
+      value: "   ",
+    });
+    expect(detectSentinel("\t", "string")).toEqual({
+      type: "whitespace",
+      value: "\t",
+    });
+    expect(detectSentinel("\n", "string")).toEqual({
+      type: "whitespace",
+      value: "\n",
+    });
+    expect(detectSentinel("\t \n", "string")).toEqual({
+      type: "whitespace",
+      value: "\t \n",
+    });
+  });
+
+  it("should detect NaN", () => {
+    expect(detectSentinel(Number.NaN, "number")).toEqual({
+      type: "nan",
+      value: Number.NaN,
+    });
+  });
+
+  it("should detect Infinity", () => {
+    expect(detectSentinel(Number.POSITIVE_INFINITY, "number")).toEqual({
+      type: "positive-infinity",
+      value: Number.POSITIVE_INFINITY,
+    });
+    expect(detectSentinel(Number.NEGATIVE_INFINITY, "number")).toEqual({
+      type: "negative-infinity",
+      value: Number.NEGATIVE_INFINITY,
+    });
+  });
+
+  it("should return null for normal values", () => {
+    expect(detectSentinel("hello", "string")).toBeNull();
+    expect(detectSentinel(42, "number")).toBeNull();
+    expect(detectSentinel(0, "number")).toBeNull();
+    expect(detectSentinel(-1.5, "number")).toBeNull();
+    expect(detectSentinel(true, "boolean")).toBeNull();
+    expect(detectSentinel(false, "boolean")).toBeNull();
+    expect(detectSentinel({}, "unknown")).toBeNull();
+    expect(detectSentinel([], "unknown")).toBeNull();
+  });
+
+  it("should not match literal null-like strings", () => {
+    expect(detectSentinel("null", "string")).toBeNull();
+    expect(detectSentinel("NULL", "string")).toBeNull();
+    expect(detectSentinel("None", "string")).toBeNull();
+  });
+
+  it("should not match string NaN/Infinity in non-numeric columns", () => {
+    expect(detectSentinel("NaN", "string")).toBeNull();
+    expect(detectSentinel("Infinity", "string")).toBeNull();
+    expect(detectSentinel("-Infinity", "string")).toBeNull();
+  });
+
+  it("should match string NaN/Infinity in numeric columns", () => {
+    expect(detectSentinel("NaN", "number")).toEqual({
+      type: "nan",
+      value: "NaN",
+    });
+    expect(detectSentinel("Infinity", "number")).toEqual({
+      type: "positive-infinity",
+      value: "Infinity",
+    });
+    expect(detectSentinel("-Infinity", "number")).toEqual({
+      type: "negative-infinity",
+      value: "-Infinity",
+    });
+    expect(detectSentinel("inf", "number")).toEqual({
+      type: "positive-infinity",
+      value: "inf",
+    });
+    expect(detectSentinel("-inf", "number")).toEqual({
+      type: "negative-infinity",
+      value: "-inf",
+    });
+  });
+
+  it("should still not match normal strings in numeric columns", () => {
+    expect(detectSentinel("hello", "number")).toBeNull();
+    expect(detectSentinel("42", "number")).toBeNull();
+  });
+
+  it("should not match NaT in non-temporal columns", () => {
+    expect(detectSentinel("NaT", "string")).toBeNull();
+  });
+
+  it("should match NaT in temporal columns", () => {
+    expect(detectSentinel("NaT", "datetime")).toEqual({
+      type: "nat",
+      value: "NaT",
+    });
+    expect(detectSentinel("NaT", "date")).toEqual({
+      type: "nat",
+      value: "NaT",
+    });
+  });
+});
+
 function createMockTableWithMeta<TData>(rawData?: TData[]): Table<TData> {
   return {
     options: {

package/src/components/data-table/column-header.tsx

@@ -53,6 +53,7 @@ import {
   SelectValue,
 } from "../ui/select";
 import { type ColumnFilterForType, Filter } from "./filters";
+import { SentinelCell } from "./sentinel-cell";
 import {
   ClearFilterMenuItem,
   FilterButtons,
@@ -65,7 +66,7 @@ import {
   renderSortFilterIcon,
   renderSorts,
 } from "./header-items";
-import { stringifyUnknownValue } from "./utils";
+import { detectSentinel, stringifyUnknownValue } from "./utils";
 
 const TOP_K_ROWS = 30;
 
@@ -647,6 +648,10 @@ const PopoverFilterByValues = <TData, TValue>({
             {filteredData.map(([value, count], rowIndex) => {
               const isSelected = chosenValues.has(value);
               const valueString = stringifyUnknownValue({ value });
+              const sentinel = detectSentinel(
+                value,
+                column.columnDef.meta?.dataType,
+              );
 
               return (
                 <CommandItem
@@ -661,7 +666,11 @@ const PopoverFilterByValues = <TData, TValue>({
                     className="mr-3 h-3.5 w-3.5"
                   />
                   <span className="flex-1 overflow-hidden max-h-20 line-clamp-3">
-                    {valueString}
+                    {sentinel ? (
+                      <SentinelCell sentinel={sentinel} />
+                    ) : (
+                      valueString
+                    )}
                   </span>
                   <span className="ml-3">{count}</span>
                 </CommandItem>

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

@@ -37,7 +37,10 @@ import {
   extractTimezone,
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
+  isNumericType,
 } from "./types";
+import { SentinelCell } from "./sentinel-cell";
+import { detectSentinel } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
 
@@ -163,7 +166,7 @@ export function generateColumns<T>({
     }
     // Auto right-align numeric columns
     const dataType = getMeta(key).dataType;
-    if (dataType === "number" || dataType === "integer") {
+    if (isNumericType(dataType)) {
       return "right";
     }
     return undefined;
@@ -269,7 +272,7 @@ export function generateColumns<T>({
           !isCellSelected;
 
         const dataType = column.columnDef.meta?.dataType;
-        const isNumeric = dataType === "number" || dataType === "integer";
+        const isNumeric = isNumericType(dataType);
         const cellStyles = getCellStyleClass({
           justify,
           wrapped,
@@ -522,6 +525,17 @@ export function renderCellValue<TData, TValue>({
 
   const isWrapped = column.getColumnWrapping?.() === "wrap";
 
+  // Sentinel values (null, whitespace, NaN, Infinity, NaT) rendered specially.
+  // Empty strings are left as-is
+  const sentinel = detectSentinel(value, dataType);
+  if (sentinel && sentinel.type !== "empty-string") {
+    return (
+      <div onClick={selectCell} className={cellStyles}>
+        <SentinelCell sentinel={sentinel} />
+      </div>
+    );
+  }
+
   if (dataType === "datetime" && typeof value === "string") {
     try {
       if (!isValid(value)) {

package/src/components/data-table/sentinel-cell.tsx

@@ -0,0 +1,90 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellValueSentinel, CellValueSentinelType } from "./types";
+
+const WHITESPACE_CHARS: Record<string, { marker: string; name: string }> = {
+  " ": { marker: "\u2423", name: "space" }, // open box (space symbol)
+  "\t": { marker: "\\t", name: "tab" },
+  "\n": { marker: "\\n", name: "newline" },
+  "\r": { marker: "\\r", name: "newline" },
+};
+
+function renderWhitespaceMarkers(str: string): string {
+  return [...str].map((ch) => WHITESPACE_CHARS[ch]?.marker ?? ch).join("");
+}
+
+function describeWhitespace(str: string): string {
+  const counts: Record<string, number> = {};
+  for (const ch of str) {
+    const name = WHITESPACE_CHARS[ch]?.name ?? "character";
+    counts[name] = (counts[name] ?? 0) + 1;
+  }
+  return Object.entries(counts)
+    .map(([name, count]) => `${count} ${name}${count > 1 ? "s" : ""}`)
+    .join(", ");
+}
+
+interface SentinelConfig {
+  label: (value: CellValueSentinel["value"]) => string;
+  tooltip: (value: CellValueSentinel["value"]) => string;
+  ariaLabel: (value: CellValueSentinel["value"]) => string;
+}
+
+const SENTINEL_CONFIG: Record<CellValueSentinelType, SentinelConfig> = {
+  null: {
+    label: () => "None",
+    tooltip: () => "None",
+    ariaLabel: () => "None",
+  },
+  "empty-string": {
+    label: () => "<empty>",
+    tooltip: () => "<empty>",
+    ariaLabel: () => "empty string",
+  },
+  whitespace: {
+    label: (value) => renderWhitespaceMarkers(String(value)),
+    tooltip: (value) => describeWhitespace(String(value)),
+    ariaLabel: (value) => describeWhitespace(String(value)),
+  },
+  nan: {
+    label: () => "NaN",
+    tooltip: () => "NaN",
+    ariaLabel: () => "NaN",
+  },
+  "positive-infinity": {
+    label: () => "inf",
+    tooltip: () => "Infinity",
+    ariaLabel: () => "infinity",
+  },
+  "negative-infinity": {
+    label: () => "-inf",
+    tooltip: () => "-Infinity",
+    ariaLabel: () => "negative infinity",
+  },
+  nat: {
+    label: () => "NaT",
+    tooltip: () => "NaT (Not a Time)",
+    ariaLabel: () => "Not a Time",
+  },
+};
+
+export function SentinelCell({
+  sentinel,
+}: {
+  sentinel: CellValueSentinel;
+}): React.ReactElement {
+  const config = SENTINEL_CONFIG[sentinel.type];
+  const label = config.label(sentinel.value);
+  const tooltip = config.tooltip(sentinel.value);
+  const ariaLabel = config.ariaLabel(sentinel.value);
+
+  return (
+    <span
+      className="italic text-muted-foreground bg-muted rounded px-1"
+      aria-label={ariaLabel}
+      title={tooltip}
+    >
+      <span className="opacity-70">{label}</span>
+    </span>
+  );
+}

package/src/components/data-table/types.ts

@@ -95,6 +95,29 @@ export type DataTableSelection =
   | "multi-cell"
   | null;
 
+export type CellValueSentinel =
+  | { type: "null"; value: null | undefined }
+  | { type: "empty-string"; value: string }
+  | { type: "whitespace"; value: string }
+  | { type: "nan"; value: number | string }
+  | { type: "positive-infinity"; value: number | string }
+  | { type: "negative-infinity"; value: number | string }
+  | { type: "nat"; value: string };
+
+export type CellValueSentinelType = CellValueSentinel["type"];
+
+export function isNumericType(
+  dataType: DataType | undefined,
+): dataType is "number" | "integer" {
+  return dataType === "number" || dataType === "integer";
+}
+
+export function isTemporalType(
+  dataType: DataType | undefined,
+): dataType is "date" | "datetime" | "time" {
+  return dataType === "date" || dataType === "datetime" || dataType === "time";
+}
+
 export function extractTimezone(dtype: string | undefined): string | undefined {
   if (!dtype) {
     return undefined;

package/src/components/data-table/utils.ts

@@ -5,7 +5,15 @@ import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { getMimeValues } from "./mime-cell";
-import { INDEX_COLUMN_NAME } from "./types";
+import type { DataType } from "@/core/kernel/messages";
+import {
+  type CellValueSentinel,
+  INDEX_COLUMN_NAME,
+  isNumericType,
+  isTemporalType,
+} from "./types";
+
+const WHITESPACE_ONLY_RE = /^[\s]+$/;
 
 /**
  * Convenience function to load table data.
@@ -85,6 +93,71 @@ export function getPageIndexForRow(
   return null;
 }
 
+// String representations of numeric special values.
+// Only matched when the caller indicates the column is numeric.
+type StringValueSentinelType = Extract<
+  CellValueSentinel,
+  { value: number | string }
+>["type"];
+
+const NUMERIC_STRING_SPECIALS: Record<string, StringValueSentinelType> = {
+  NaN: "nan",
+  Infinity: "positive-infinity",
+  "-Infinity": "negative-infinity",
+  inf: "positive-infinity",
+  "-inf": "negative-infinity",
+};
+
+/**
+ * Detect if a cell value is a sentinel (null, empty string, whitespace,
+ * NaN, infinity, NaT). Column-type-dependent sentinels (string "NaN",
+ * "NaT", etc.) are matched based on `dataType`.
+ */
+export function detectSentinel(
+  value: unknown,
+  dataType: DataType | undefined,
+): CellValueSentinel | null {
+  if (value == null) {
+    return { type: "null", value };
+  }
+
+  if (typeof value === "string") {
+    if (value === "") {
+      return { type: "empty-string", value };
+    }
+    if (WHITESPACE_ONLY_RE.test(value)) {
+      return { type: "whitespace", value };
+    }
+    // String "NaN"/"Infinity" in a numeric column = actual special float value
+    if (isNumericType(dataType)) {
+      const type = NUMERIC_STRING_SPECIALS[value];
+      if (type) {
+        return { type, value };
+      }
+    }
+    // String "NaT" in a temporal column = pandas Not-a-Time sentinel
+    if (isTemporalType(dataType) && value === "NaT") {
+      return { type: "nat", value };
+    }
+    return null;
+  }
+
+  if (typeof value === "number") {
+    if (Number.isNaN(value)) {
+      return { type: "nan", value };
+    }
+    if (value === Number.POSITIVE_INFINITY) {
+      return { type: "positive-infinity", value };
+    }
+    if (value === Number.NEGATIVE_INFINITY) {
+      return { type: "negative-infinity", value };
+    }
+    return null;
+  }
+
+  return null;
+}
+
 /**
  * Stringify an unknown value. Converts objects to JSON strings.
  * @param opts.value - The value to stringify.