@marimo-team/islands 0.21.2-dev5 → 0.21.2-dev53

package/dist/main.js

@@ -20,7 +20,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 import { a as __toCommonJS, n as __esmMin, o as __toDynamicImportESM, r as __export$1, s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { n as Copy, r as toast, t as copyToClipboard } from "./copy-DIK6DiIA.js";
+import { n as Copy, r as toast, t as copyToClipboard } from "./copy-BjkXCUxP.js";
 import { _ as require_cjs$1, c as markdownLineEnding, d as SKIP, f as visitParents, g as s$2, h as h$1, l as longestStreak, m as webNamespaces, o as xn$1, p as convert$1, s as factorySpace, u as ok, __tla as __tla_0 } from "./chunk-5FQGJX7Z-BkzUmppO.js";
 import { a as Content$3, c as useSize, i as Arrow, l as createLucideIcon, o as Root2$6, r as Anchor, s as createPopperScope, t as Root$5 } from "./dist-C0Rnbr-_.js";
 import { A as useOnMount, B as Table$1, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, F as $896ba0a80a8f4d36$export$85fd5fdf27bacc79, G as ChartColumn, H as ListFilter, I as $fb18d541ea1ad717$export$ad991b66133851cf, K as Calendar, L as $5a387cc49350e6db$export$722debc0e56fea39, M as Badge, N as createReducerAndAtoms, O as TIME_UNIT_DESCRIPTIONS, P as startCase_default, R as Type, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, U as Hash, V as SquareFunction, W as ChartPie, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as useOnUnmount, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON, z as ToggleLeft } from "./spec-Bfvf9Hre.js";
@@ -34,7 +34,7 @@ import { $ as __awaiter, A as custom, B as record, C as ZodUnion$1, D as any, E
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-CqtLRVZP.js";
 import { a as TooltipRoot, i as TooltipProvider, n as TooltipContent, o as TooltipTrigger, r as TooltipPortal, s as TooltipProvider$1, t as Tooltip } from "./tooltip-CKG75XQa.js";
-import { a as _extends$5, c as setDiagnostics, d as insertTab, f as CopyClipboardIcon, i as minimalSetup, l as history, o as forEachDiagnostic, r as esm_default, s as linter, t as langs, u as historyField } from "./esm-BLobyqMs.js";
+import { a as _extends$5, c as setDiagnostics, d as insertTab, f as CopyClipboardIcon, i as minimalSetup, l as history, o as forEachDiagnostic, r as esm_default, s as linter, t as langs, u as historyField } from "./esm-No_6eSQS.js";
 import { i as toInteger_default, n as _baseSet_default } from "./_basePickBy-pTDW2_2A.js";
 import { i as get_default } from "./hasIn-B9AbGLj3.js";
 import { n as pick_default, t as range_default } from "./range-BKaWvVUE.js";
@@ -27014,6 +27014,7 @@ ${c.sqlString}
   function indentOneTab(e) {
     return e.split("\n").map((e2) => (e2 == null ? void 0 : e2.trim()) ? `    ${e2}` : e2).join("\n");
   }
+  const loroSyncAnnotation = Annotation.define();
   function initialState$4() {
     return {};
   }
@@ -27609,9 +27610,23 @@ ${c.sqlString}
       }
     });
   }
+  var MARKDOWN_AUTORUN_USER_EVENTS = [
+    "input",
+    "delete",
+    "undo",
+    "redo"
+  ];
+  function shouldAutorunMarkdownUpdate({ docChanged: e, transactions: r, predicate: c = () => true, hasFocus: d = false }) {
+    return !e || !c() || r.some((e2) => e2.effects.some((e3) => e3.is(formattingChangeEffect))) ? false : r.some((e2) => e2.annotation(loroSyncAnnotation) === void 0 ? MARKDOWN_AUTORUN_USER_EVENTS.some((r2) => e2.isUserEvent(r2)) || d : false);
+  }
   function markdownAutoRunExtension({ predicate: e }) {
     return EditorView.updateListener.of((r) => {
-      r.docChanged && r.view.hasFocus && e() && (r.transactions.some((e2) => e2.effects.some((e3) => e3.is(formattingChangeEffect))) || r.view.state.facet(cellActionsState).onRun());
+      shouldAutorunMarkdownUpdate({
+        docChanged: r.docChanged,
+        transactions: r.transactions,
+        predicate: e,
+        hasFocus: r.view.hasFocus
+      }) && r.view.state.facet(cellActionsState).onRun();
     });
   }
   const pythonCompletionSource = async (e) => {
@@ -29325,6 +29340,8 @@ ${c.sqlString}
   var NotebookLanguageServerClient = (_a = class {
     constructor(e, r, c = defaultGetNotebookEditors) {
       __publicField(this, "completionItemCache", new LRUCache(10));
+      __publicField(this, "latestDiagnosticsVersion", null);
+      __publicField(this, "forwardedDiagnosticsVersion", 0);
       this.documentUri = getLSPDocument(), this.getNotebookEditors = c, this.initialSettings = r, this.client = e, this.patchProcessNotification(), this.initializePromise.then(() => {
         invariant(isClientWithNotify(this.client), "notify is not a method on the client"), this.client.notify("workspace/didChangeConfiguration", {
           settings: r
@@ -29372,7 +29389,7 @@ ${c.sqlString}
         settings: this.initialSettings
       });
       let { lens: e, version: r } = this.snapshotter.snapshot();
-      await this.client.textDocumentDidOpen({
+      this.latestDiagnosticsVersion = null, this.forwardedDiagnosticsVersion = 0, await this.client.textDocumentDidOpen({
         textDocument: {
           languageId: "python",
           text: e.mergedText,
@@ -29570,39 +29587,49 @@ ${c.sqlString}
       invariant("processNotification" in this.client, "processNotification is not a method on the client");
       let r = this.client.processNotification.bind(this.client), c = (c2) => {
         if (c2.method === "textDocument/publishDiagnostics") {
+          let d = c2.params.version;
+          if (d != null) {
+            let e = this.latestDiagnosticsVersion;
+            if (e !== null && Number.isFinite(d) && d < e) {
+              Logger.debug("[lsp] dropping stale diagnostics notification", c2);
+              return;
+            }
+            this.latestDiagnosticsVersion = d;
+          }
           Logger.debug("[lsp] handling diagnostics", c2);
-          let d = this.snapshotter.getLatestSnapshot(), f = c2.params.diagnostics, { lens: _, version: v } = d, y = /* @__PURE__ */ new Map();
-          for (let e of f) for (let r2 of _.cellIds) if (_.isInRange(e.range, r2)) {
-            y.has(r2) || y.set(r2, []);
+          let f = this.snapshotter.getLatestSnapshot(), _ = c2.params.diagnostics, { lens: v } = f, y = ++this.forwardedDiagnosticsVersion, S = /* @__PURE__ */ new Map();
+          for (let e of _) for (let r2 of v.cellIds) if (v.isInRange(e.range, r2)) {
+            S.has(r2) || S.set(r2, []);
             let c3 = {
               ...e,
-              range: _.reverseRange(e.range, r2)
+              range: v.reverseRange(e.range, r2)
             };
-            y.get(r2).push(c3);
+            S.get(r2).push(c3);
             break;
           }
-          let S = new Set(_.cellIds);
-          _a.pruneSeenCellUris(S);
-          let w = new Set(_a.SEEN_CELL_DOCUMENT_URIS);
-          for (let [e, d2] of y.entries()) {
+          let w = new Set(v.cellIds);
+          _a.pruneSeenCellUris(w);
+          let E = new Set(_a.SEEN_CELL_DOCUMENT_URIS);
+          for (let [e, d2] of S.entries()) {
             Logger.debug("[lsp] diagnostics for cell", e, d2);
             let f2 = CellDocumentUri.of(e);
-            w.delete(f2), r({
+            E.delete(f2), r({
               ...c2,
               params: {
                 ...c2.params,
                 uri: f2,
-                version: v,
+                version: y,
                 diagnostics: d2
               }
             });
           }
-          if (w.size > 0) {
-            Logger.debug("[lsp] clearing diagnostics", w);
-            for (let e of w) r({
+          if (E.size > 0) {
+            Logger.debug("[lsp] clearing diagnostics", E);
+            for (let e of E) r({
               method: "textDocument/publishDiagnostics",
               params: {
                 uri: e,
+                version: y,
                 diagnostics: []
               }
             });
@@ -29767,7 +29794,9 @@ ${c.sqlString}
       "D103"
     ], _ = [
       "W292",
-      "E402"
+      "E402",
+      "E302",
+      "E305"
     ], v = [
       "B018",
       "I001"
@@ -32264,12 +32293,14 @@ ${c.sqlString}
       afterCursorCode: getEditorCodeAsPython(e, v)
     };
   }
-  var TEMPORARY_ATTRIBUTE = "data-temp-href-target";
-  purify.addHook("beforeSanitizeAttributes", (e) => {
-    e.tagName === "A" && (e.hasAttribute("target") || e.setAttribute("target", "_self"), e.hasAttribute("target") && e.setAttribute(TEMPORARY_ATTRIBUTE, e.getAttribute("target") || ""));
-  }), purify.addHook("afterSanitizeAttributes", (e) => {
-    e.tagName === "A" && e.hasAttribute(TEMPORARY_ATTRIBUTE) && (e.setAttribute("target", e.getAttribute(TEMPORARY_ATTRIBUTE) || ""), e.removeAttribute(TEMPORARY_ATTRIBUTE), e.getAttribute("target") === "_blank" && e.setAttribute("rel", "noopener noreferrer"));
-  });
+  if (typeof document < "u") {
+    let e = "data-temp-href-target";
+    purify.addHook("beforeSanitizeAttributes", (r) => {
+      r.tagName === "A" && (r.hasAttribute("target") || r.setAttribute("target", "_self"), r.hasAttribute("target") && r.setAttribute(e, r.getAttribute("target") || ""));
+    }), purify.addHook("afterSanitizeAttributes", (r) => {
+      r.tagName === "A" && r.hasAttribute(e) && (r.setAttribute("target", r.getAttribute(e) || ""), r.removeAttribute(e), r.getAttribute("target") === "_blank" && r.setAttribute("rel", "noopener noreferrer"));
+    });
+  }
   function sanitizeHtml(e) {
     let r = {
       USE_PROFILES: {
@@ -37255,6 +37286,15 @@ ${c.sqlString}
         children: e
       });
     }
+  }, wrapTooltipTargets = (e, r) => {
+    var _a3;
+    if (r instanceof import_lib$1.Element && ((_a3 = r.attribs) == null ? void 0 : _a3["data-tooltip"])) {
+      let c = r.attribs["data-tooltip"];
+      return (0, import_jsx_runtime.jsx)(Tooltip, {
+        content: c,
+        children: e
+      });
+    }
   }, CopyableCode = (e) => {
     let r = (0, import_compiler_runtime$150.c)(3), { children: c } = e, d = (0, import_react.useRef)(null), f;
     r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f = (0, import_jsx_runtime.jsx)("div", {
@@ -37305,6 +37345,7 @@ ${c.sqlString}
       addCopyButtonToCodehilite,
       preserveQueryParamsInAnchorLinks,
       wrapDocHoverTargets,
+      wrapTooltipTargets,
       removeWrappingBodyTags,
       removeWrappingHtmlTags
     ];
@@ -53723,6 +53764,40 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       ]
     }), r[5] = _, r[6] = v, r[7] = y) : y = r[7], y;
   };
+  var import_compiler_runtime$122 = require_compiler_runtime();
+  const MimeCell = (e) => {
+    let r = (0, import_compiler_runtime$122.c)(6), { value: c } = e, d;
+    r[0] !== c.data || r[1] !== c.mimetype ? (d = {
+      channel: "output",
+      data: c.data,
+      mimetype: c.mimetype,
+      timestamp: 0
+    }, r[0] = c.data, r[1] = c.mimetype, r[2] = d) : d = r[2];
+    let f = d, _;
+    r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = cn("flex items-center space-x-2"), r[3] = _) : _ = r[3];
+    let v;
+    return r[4] === f ? v = r[5] : (v = (0, import_jsx_runtime.jsx)("div", {
+      className: _,
+      children: (0, import_jsx_runtime.jsx)(OutputRenderer, {
+        message: f
+      })
+    }), r[4] = f, r[5] = v), v;
+  };
+  function isMimeValue(e) {
+    return typeof e == "object" && !!e && "mimetype" in e && "data" in e;
+  }
+  function getMimeValues(e) {
+    if (isMimeValue(e)) return [
+      e
+    ];
+    if (typeof e == "object" && e && ("_serialized_mime_bundle" in e || "serialized_mime_bundle" in e)) {
+      let r = e, c = r._serialized_mime_bundle || r.serialized_mime_bundle;
+      if (isMimeValue(c)) return [
+        c
+      ];
+    }
+    if (Array.isArray(e) && e.every(isMimeValue)) return e.map((e2) => e2);
+  }
   function toFieldTypes(e) {
     return Objects.collect(e, ([e2]) => e2, ([, [e2]]) => e2);
   }
@@ -53738,6 +53813,15 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       handleBigIntAndNumberLike: true
     }), e);
   }
+  async function loadTableAndRawData(e, r) {
+    return r ? Promise.all([
+      loadTableData(e),
+      loadTableData(r)
+    ]) : [
+      await loadTableData(e),
+      void 0
+    ];
+  }
   function getStableRowId(e) {
     if (e && typeof e == "object" && "_marimo_row_id" in e) return String(e[INDEX_COLUMN_NAME]);
   }
@@ -53749,6 +53833,41 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     let { value: r, nullAsEmptyString: c = false } = e;
     return typeof r == "object" && r ? JSON.stringify(r) : r === null && c ? "" : String(r);
   }
+  function stripHtml(e) {
+    let r = document.createElement("div");
+    return r.innerHTML = e, (r.textContent || r.innerText || "").trim() || e;
+  }
+  var HTML_MIMETYPES = /* @__PURE__ */ new Set([
+    "text/html",
+    "text/markdown"
+  ]);
+  function isRecord(e) {
+    return typeof e == "object" && !!e && !Array.isArray(e);
+  }
+  function getClipboardContent(e, r) {
+    let c = typeof r == "object" && r ? getMimeValues(r) : void 0, d;
+    if (c) {
+      let e2 = c.filter((e3) => HTML_MIMETYPES.has(e3.mimetype)).map((e3) => e3.data);
+      d = e2.length > 0 ? e2.join("") : void 0;
+    }
+    let f;
+    return f = e !== void 0 && e !== r ? stringifyUnknownValue({
+      value: e
+    }) : c ? c.map((e2) => HTML_MIMETYPES.has(e2.mimetype) ? stripHtml(e2.data) : e2.data).join(", ") : stringifyUnknownValue({
+      value: r
+    }), {
+      text: f,
+      html: d
+    };
+  }
+  function getRawValue(e, r, c) {
+    var _a3;
+    let d = (_a3 = e.options.meta) == null ? void 0 : _a3.rawData;
+    if (d) {
+      let e2 = d[r];
+      if (isRecord(e2)) return e2[c];
+    }
+  }
   var TOP_K_ROWS = 30;
   const DataTableColumnHeader = ({ column: e, header: r, justify: c, className: d, calculateTopKRows: f, table: _ }) => {
     let [v, y] = (0, import_react.useState)(false), { locale: S } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
@@ -54231,9 +54350,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     let [r, c] = import_react.useState(e), [d, f] = import_react.useState(null);
     return e !== r && (f(r), c(e)), d;
   }
-  var import_compiler_runtime$122 = require_compiler_runtime();
+  var import_compiler_runtime$121 = require_compiler_runtime();
   const DelayMount = (e) => {
-    let r = (0, import_compiler_runtime$122.c)(13), { milliseconds: c, children: d, fallback: f, visibility: _, threshold: v, rootMargin: y } = e, S = _ === void 0 ? false : _, w = v === void 0 ? 0 : v, E = y === void 0 ? "0px" : y, [O, M] = (0, import_react.useState)(false), [I, z] = (0, import_react.useState)(false), G;
+    let r = (0, import_compiler_runtime$121.c)(13), { milliseconds: c, children: d, fallback: f, visibility: _, threshold: v, rootMargin: y } = e, S = _ === void 0 ? false : _, w = v === void 0 ? 0 : v, E = y === void 0 ? "0px" : y, [O, M] = (0, import_react.useState)(false), [I, z] = (0, import_react.useState)(false), G;
     r[0] !== E || r[1] !== w ? (G = {
       threshold: w,
       root: null,
@@ -54264,9 +54383,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       children: WY
     }), r[10] = UY, r[11] = WY, r[12] = GY) : GY = r[12], GY;
   };
-  var import_compiler_runtime$121 = require_compiler_runtime();
+  var import_compiler_runtime$120 = require_compiler_runtime();
   const DatePopover = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(15), { date: c, type: d, children: f } = e;
+    let r = (0, import_compiler_runtime$120.c)(15), { date: c, type: d, children: f } = e;
     if (!c || Number.isNaN(new Date(c).getTime())) return f;
     let _;
     r[0] === c ? _ = r[1] : (_ = new Date(c), r[0] = c, r[1] = _);
@@ -54306,7 +54425,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }), r[12] = E, r[13] = O, r[14] = M) : M = r[14], M;
   };
   var TimezoneDisplay = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(26), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f;
+    let r = (0, import_compiler_runtime$120.c)(26), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f;
     r[0] === d ? f = r[1] : (f = Intl.DateTimeFormat(d).resolvedOptions(), r[0] = d, r[1] = f);
     let _ = f.timeZone, v = c.getUTCMilliseconds() !== 0, y;
     r[2] === v ? y = r[3] : (y = v ? {
@@ -54382,7 +54501,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       ]
     }), r[23] = IY, r[24] = I, r[25] = LY) : LY = r[25], LY;
   }, DateDisplay = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(6), { date: c } = e, d;
+    let r = (0, import_compiler_runtime$120.c)(6), { date: c } = e, d;
     r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (d = {
       timeZone: "UTC",
       dateStyle: "long"
@@ -54394,7 +54513,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       children: _
     }), r[4] = _, r[5] = v), v;
   }, RelativeTime = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(6), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f, _;
+    let r = (0, import_compiler_runtime$120.c)(6), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f, _;
     if (r[0] !== c || r[1] !== d) {
       _ = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
       bb0: {
@@ -54446,7 +54565,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     return r[4] === f ? v = r[5] : (v = (0, import_jsx_runtime.jsx)("span", {
       children: f
     }), r[4] = f, r[5] = v), v;
-  }, import_compiler_runtime$120 = require_compiler_runtime(), hashString = (e) => {
+  }, import_compiler_runtime$119 = require_compiler_runtime(), hashString = (e) => {
     let r = 0;
     for (let c = 0; c < e.length; c++) {
       let d = e.charCodeAt(c);
@@ -54463,7 +54582,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     return d;
   };
   const ChartSkeleton = (e) => {
-    let r = (0, import_compiler_runtime$120.c)(11), { seed: c, width: d, height: f } = e, _ = d / 9, v = f - 15, y;
+    let r = (0, import_compiler_runtime$119.c)(11), { seed: c, width: d, height: f } = e, _ = d / 9, v = f - 15, y;
     if (r[0] !== _ || r[1] !== f || r[2] !== c || r[3] !== v || r[4] !== d) {
       let e2 = generateHeights({
         numBars: 9,
@@ -55468,11 +55587,11 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }
   }, __publicField(_j, "EMPTY", new _j([], {}, {}, {}, {}, {
     includeCharts: false
-  })), _j), import_compiler_runtime$119 = require_compiler_runtime();
+  })), _j), import_compiler_runtime$118 = require_compiler_runtime();
   const ColumnChartContext = import_react.createContext(ColumnChartSpecModel.EMPTY);
   var batchedLoader = createBatchedLoader();
   const TableColumnSummary = (e) => {
-    let r = (0, import_compiler_runtime$119.c)(21), { columnId: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f = import_react.use(ColumnChartContext), { theme: _ } = useTheme(), v, y, S;
+    let r = (0, import_compiler_runtime$118.c)(21), { columnId: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f = import_react.use(ColumnChartContext), { theme: _ } = useTheme(), v, y, S;
     if (r[0] !== f || r[1] !== c || r[2] !== d || r[3] !== _) {
       let { spec: e2, type: w2, stats: E } = f.getHeaderSummary(c), O = null;
       if (e2) {
@@ -55673,40 +55792,6 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       };
     }
   };
-  var import_compiler_runtime$118 = require_compiler_runtime();
-  const MimeCell = (e) => {
-    let r = (0, import_compiler_runtime$118.c)(6), { value: c } = e, d;
-    r[0] !== c.data || r[1] !== c.mimetype ? (d = {
-      channel: "output",
-      data: c.data,
-      mimetype: c.mimetype,
-      timestamp: 0
-    }, r[0] = c.data, r[1] = c.mimetype, r[2] = d) : d = r[2];
-    let f = d, _;
-    r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = cn("flex items-center space-x-2"), r[3] = _) : _ = r[3];
-    let v;
-    return r[4] === f ? v = r[5] : (v = (0, import_jsx_runtime.jsx)("div", {
-      className: _,
-      children: (0, import_jsx_runtime.jsx)(OutputRenderer, {
-        message: f
-      })
-    }), r[4] = f, r[5] = v), v;
-  };
-  function isMimeValue(e) {
-    return typeof e == "object" && !!e && "mimetype" in e && "data" in e;
-  }
-  function getMimeValues(e) {
-    if (isMimeValue(e)) return [
-      e
-    ];
-    if (typeof e == "object" && e && ("_serialized_mime_bundle" in e || "serialized_mime_bundle" in e)) {
-      let r = e, c = r._serialized_mime_bundle || r.serialized_mime_bundle;
-      if (isMimeValue(c)) return [
-        c
-      ];
-    }
-    if (Array.isArray(e) && e.every(isMimeValue)) return e.map((e2) => e2);
-  }
   function uniformSample(e, r) {
     if (e.length <= r) return e;
     let c = [], d = e.length / r;
@@ -56411,7 +56496,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       hasConsoleOutput: (v == null ? void 0 : v.consoleOutputs) != null
     };
   }
-  const LazyAnyLanguageCodeMirror = (0, import_react.lazy)(() => import("./any-language-editor-DlsjUw_l.js"));
+  const LazyAnyLanguageCodeMirror = (0, import_react.lazy)(() => import("./any-language-editor-BRpxklRq.js"));
   var import_compiler_runtime$117 = require_compiler_runtime(), extensions = [
     EditorView.lineWrapping
   ];
@@ -57305,22 +57390,30 @@ ${r}
     ];
   }
   function getCellValues(e, r) {
-    let c = /* @__PURE__ */ new Map();
-    for (let d of r) {
-      if (d.includes("__select__")) continue;
-      let { rowId: r2, columnId: f } = getRowAndColumnId(d), _ = e.getRow(r2);
-      if (!_) continue;
-      let v = _.getValue(f), y = c.get(r2) ?? [];
-      y.push(stringifyUnknownValue({
-        value: v
-      })), c.set(r2, y);
+    let c = /* @__PURE__ */ new Map(), d = false;
+    for (let f2 of r) {
+      if (f2.includes("__select__")) continue;
+      let { rowId: r2, columnId: _2 } = getRowAndColumnId(f2), v2 = e.getRow(r2);
+      if (!v2) continue;
+      let { text: y, html: S } = getClipboardContent(getRawValue(e, v2.index, _2), v2.getValue(_2));
+      S && (d = true);
+      let w = c.get(r2) ?? [];
+      w.push({
+        text: y,
+        html: S
+      }), c.set(r2, w);
     }
-    return getTabSeparatedValues([
+    let f = [
       ...c.values()
-    ]);
+    ], _ = f.map((e2) => e2.map((e3) => e3.text).join("	")).join("\n"), v;
+    return d && (v = `<table>${f.map((e2) => `<tr>${e2.map((e3) => `<td>${e3.html ?? escapeHtml(e3.text)}</td>`).join("")}</tr>`).join("")}</table>`), {
+      text: _,
+      html: v
+    };
   }
-  function getTabSeparatedValues(e) {
-    return e.map((e2) => e2.join("	")).join("\n");
+  function escapeHtml(e) {
+    let r = document.createElement("div");
+    return r.textContent = e, r.innerHTML;
   }
   function countDataCellsInSelection(e) {
     let r = 0;
@@ -57333,7 +57426,7 @@ ${r}
       if (d.includes("__select__")) continue;
       let { rowId: r2, columnId: f } = getRowAndColumnId(d), _ = e.getRow(r2);
       if (!_) continue;
-      let v = _.getValue(f), y;
+      let v = getRawValue(e, _.index, f) ?? _.getValue(f), y;
       if (typeof v == "number") y = v;
       else if (typeof v == "string") {
         if (v.trim() === "") continue;
@@ -57450,10 +57543,12 @@ ${r}
     },
     handleCopy: (e, { table: r, onCopyComplete: c }) => {
       let d = window.getSelection();
-      return d && d.toString().length > 0 ? e : (copyToClipboard(getCellValues(r, e.selectedCells)), c(), {
+      if (d && d.toString().length > 0) return e;
+      let { text: f, html: _ } = getCellValues(r, e.selectedCells);
+      return copyToClipboard(f, _), c(), {
         ...e,
         copiedCells: e.selectedCells
-      });
+      };
     },
     navigate: (e, { direction: r, isShiftKey: c, table: d }) => {
       let f = e.focusedCell ?? e.selectedStartCell;
@@ -58403,18 +58498,17 @@ ${r}
       Logger.error("No cell found in context menu");
       return;
     }
-    let f = () => {
+    let f = d.getContext().table, _ = d.getValue(), v = getRawValue(f, d.row.index, d.column.id) ?? _, y = () => {
       try {
-        copyToClipboard(stringifyUnknownValue({
-          value: d.getValue()
-        }));
+        let { text: e2, html: r2 } = getClipboardContent(v, _);
+        copyToClipboard(e2, r2);
       } catch (e2) {
         Logger.error("Failed to copy context menu cell", e2);
       }
-    }, _ = d.column, v = _.getCanFilter() && ((_a3 = _.columnDef.meta) == null ? void 0 : _a3.filterType), y = (e2) => {
-      _.setFilterValue(Filter.select({
+    }, w = d.column, O = w.getCanFilter() && ((_a3 = w.columnDef.meta) == null ? void 0 : _a3.filterType), M = (e2) => {
+      w.setFilterValue(Filter.select({
         options: [
-          d.getValue()
+          v
         ],
         operator: e2
       }));
@@ -58422,7 +58516,7 @@ ${r}
     return (0, import_jsx_runtime.jsxs)(ContextMenuContent, {
       children: [
         (0, import_jsx_runtime.jsxs)(ContextMenuItem, {
-          onClick: f,
+          onClick: y,
           children: [
             (0, import_jsx_runtime.jsx)(Copy, {
               className: "mo-dropdown-icon h-3 w-3"
@@ -58439,11 +58533,11 @@ ${r}
             "Copy selected cells"
           ]
         }),
-        v && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        O && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
           children: [
             (0, import_jsx_runtime.jsx)(ContextMenuSeparator, {}),
             (0, import_jsx_runtime.jsxs)(ContextMenuItem, {
-              onClick: () => y("in"),
+              onClick: () => M("in"),
               children: [
                 (0, import_jsx_runtime.jsx)(Funnel, {
                   className: "mo-dropdown-icon h-3 w-3"
@@ -58452,7 +58546,7 @@ ${r}
               ]
             }),
             (0, import_jsx_runtime.jsxs)(ContextMenuItem, {
-              onClick: () => y("not_in"),
+              onClick: () => M("not_in"),
               children: [
                 (0, import_jsx_runtime.jsx)(Funnel, {
                   className: "mo-dropdown-icon h-3 w-3"
@@ -58976,9 +59070,16 @@ ${r}
   }
   var isSlotElement = (e) => e.tagName != null && e.tagName.toUpperCase() === "SLOT", isSVGElement = (e) => e.tagName != null && e.tagName.toUpperCase() === "SVG";
   async function cloneChildren(e, r, c) {
+    var _a3;
     if (isSVGElement(r)) return r;
     let d = [];
-    return d = isSlotElement(e) && e.assignedNodes ? toArray(e.assignedNodes()) : toArray((e.shadowRoot ?? e).childNodes), d.length === 0 || isInstanceOfElement(e, HTMLVideoElement) || await d.reduce((e2, d2) => e2.then(() => cloneNode(d2, c)).then((e3) => {
+    if (isSlotElement(e) && e.assignedNodes) d = toArray(e.assignedNodes());
+    else if (isInstanceOfElement(e, HTMLIFrameElement)) try {
+      ((_a3 = e.contentDocument) == null ? void 0 : _a3.body) && (d = toArray(e.contentDocument.body.childNodes));
+    } catch {
+    }
+    else d = toArray((e.shadowRoot ?? e).childNodes);
+    return d.length === 0 || isInstanceOfElement(e, HTMLVideoElement) || await d.reduce((e2, d2) => e2.then(() => cloneNode(d2, c)).then((e3) => {
       e3 && r.appendChild(e3);
     }), Promise.resolve()), r;
   }
@@ -59190,12 +59291,13 @@ ${r}
     return getWebFontRules(await getCSSRules(toArray(e.ownerDocument.styleSheets), r));
   }
   function normalizeFontFamily(e) {
-    return e.trim().replace(/["']/g, "");
+    return (e || "").trim().replace(/["']/g, "");
   }
   function getUsedFonts(e) {
     let r = /* @__PURE__ */ new Set();
     function c(e2) {
-      (e2.style.fontFamily || getComputedStyle(e2).fontFamily).split(",").forEach((e3) => {
+      let d = e2.style.fontFamily || getComputedStyle(e2).fontFamily;
+      d && d.split(",").forEach((e3) => {
         r.add(normalizeFontFamily(e3));
       }), Array.from(e2.children).forEach((e3) => {
         e3 instanceof HTMLElement && c(e3);
@@ -59211,7 +59313,7 @@ ${r}
     }))).join("\n");
   }
   async function embedWebFonts(e, r) {
-    let c = r.fontEmbedCSS == null ? r.skipFonts ? null : await getWebFontCSS(e, r) : r.fontEmbedCSS, d = r.extraStyleContent == null ? c : r.extraStyleContent.concat(c || "");
+    let c = r.fontEmbedCSS == null ? r.skipFonts ? null : await getWebFontCSS(e, r) : r.fontEmbedCSS, d = r.extraStyleContent == null ? c : (c || "").concat(r.extraStyleContent);
     if (d) {
       let r2 = document.createElement("style"), c2 = document.createTextNode(d);
       r2.appendChild(c2), e.firstChild ? e.insertBefore(r2, e.firstChild) : e.appendChild(r2);
@@ -59240,6 +59342,7 @@ ${r}
         return Logger.error("Error filtering node:", e2), true;
       }
     },
+    imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAA0lEQVQI12P4z8BQDwAEgAF/QualIQAAAABJRU5ErkJggg==",
     onImageErrorHandler: (e) => {
       Logger.error("Error loading image:", e);
     },
@@ -59423,10 +59526,10 @@ Defaulting to \`null\`.`;
     d && (v = d(r));
     try {
       downloadByURL(await toPng(r), Filenames.toPNG(c));
-    } catch {
-      toast({
-        title: "Error",
-        description: "Failed to download as PNG.",
+    } catch (e2) {
+      Logger.error("Error downloading as PNG", e2), toast({
+        title: "Failed to download as PNG",
+        description: prettyError(e2),
         variant: "danger"
       });
     } finally {
@@ -60063,22 +60166,22 @@ Defaulting to \`null\`.`;
         })
       })
     ]
-  }), DataTable = (0, import_react.memo)(({ wrapperClassName: e, className: r, maxHeight: c, columns: d, data: f, selection: _, totalColumns: v, totalRows: y, manualSorting: S = false, sorting: w, setSorting: E, rowSelection: O, cellSelection: M, cellStyling: I, hoverTemplate: z, cellHoverTexts: G, paginationState: q, setPaginationState: IY, downloadAs: LY, downloadFileName: RY, manualPagination: zY = false, pagination: BY = false, onRowSelectionChange: VY, onCellSelectionChange: HY, getRowIds: UY, enableSearch: WY = false, searchQuery: GY, onSearchQueryChange: KY, showFilters: qY = false, filters: JY, onFiltersChange: YY, reloading: XY, freezeColumnsLeft: ZY, freezeColumnsRight: QY, toggleDisplayHeader: $Y, showChartBuilder: eX, showPageSizeSelector: tX, showColumnExplorer: nX, showRowExplorer: rX, togglePanel: iX, isPanelOpen: aX, viewedRowIdx: oX, onViewedRowChange: sX }) => {
-    let [cX, lX] = import_react.useState(false), [uX, dX] = import_react.useState(false), { locale: fX } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), { columnPinning: pX, setColumnPinning: mX } = useColumnPinning(ZY, QY);
+  }), DataTable = (0, import_react.memo)(({ wrapperClassName: e, className: r, maxHeight: c, columns: d, data: f, rawData: _, selection: v, totalColumns: y, totalRows: S, manualSorting: w = false, sorting: E, setSorting: O, rowSelection: M, cellSelection: I, cellStyling: z, hoverTemplate: G, cellHoverTexts: q, paginationState: IY, setPaginationState: LY, downloadAs: RY, downloadFileName: zY, manualPagination: BY = false, pagination: VY = false, onRowSelectionChange: HY, onCellSelectionChange: UY, getRowIds: WY, enableSearch: GY = false, searchQuery: KY, onSearchQueryChange: qY, showFilters: JY = false, filters: YY, onFiltersChange: XY, reloading: ZY, freezeColumnsLeft: QY, freezeColumnsRight: $Y, toggleDisplayHeader: eX, showChartBuilder: tX, showPageSizeSelector: nX, showColumnExplorer: rX, showRowExplorer: iX, togglePanel: aX, isPanelOpen: oX, viewedRowIdx: sX, onViewedRowChange: cX }) => {
+    let [lX, uX] = import_react.useState(false), [dX, fX] = import_react.useState(false), { locale: pX } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), { columnPinning: mX, setColumnPinning: hX } = useColumnPinning(QY, $Y);
     import_react.useEffect(() => {
       let e2;
-      return XY ? e2 = setTimeout(() => {
-        dX(true);
-      }, 300) : dX(false), () => {
+      return ZY ? e2 = setTimeout(() => {
+        fX(true);
+      }, 300) : fX(false), () => {
         e2 && clearTimeout(e2);
       };
     }, [
-      XY
+      ZY
     ]);
-    function hX(e2, r2) {
-      return q ? r2 + (zY ? q.pageIndex * q.pageSize : 0) : r2;
+    function gX(e2, r2) {
+      return IY ? r2 + (BY ? IY.pageIndex * IY.pageSize : 0) : r2;
     }
-    let gX = useReactTable({
+    let _X = useReactTable({
       _features: [
         ColumnPinning,
         ColumnWrappingFeature,
@@ -60092,61 +60195,64 @@ Defaulting to \`null\`.`;
       ],
       data: f,
       columns: d,
+      meta: {
+        rawData: _
+      },
       getCoreRowModel: getCoreRowModel(),
-      rowCount: y === "too_many" ? void 0 : y,
-      ...IY ? {
-        onPaginationChange: IY,
+      rowCount: S === "too_many" ? void 0 : S,
+      ...LY ? {
+        onPaginationChange: LY,
         getRowId: (e2, r2) => {
           let c2 = getStableRowId(e2);
           if (c2) return c2;
-          let d2 = hX(e2, r2);
+          let d2 = gX(e2, r2);
           return String(d2);
         }
       } : {},
-      locale: fX,
-      manualPagination: zY,
+      locale: pX,
+      manualPagination: BY,
       getPaginationRowModel: getPaginationRowModel(),
-      ...E ? {
-        onSortingChange: E
+      ...O ? {
+        onSortingChange: O
       } : {},
-      manualSorting: S,
+      manualSorting: w,
       enableMultiSort: true,
       getSortedRowModel: getSortedRowModel(),
       manualFiltering: true,
-      enableColumnFilters: qY,
+      enableColumnFilters: JY,
       getFilteredRowModel: getFilteredRowModel(),
-      onColumnFiltersChange: YY,
-      onRowSelectionChange: VY,
-      onCellSelectionChange: HY,
-      enableCellSelection: _ === "single-cell" || _ === "multi-cell",
-      enableMultiCellSelection: _ === "multi-cell",
-      onColumnPinningChange: mX,
+      onColumnFiltersChange: XY,
+      onRowSelectionChange: HY,
+      onCellSelectionChange: UY,
+      enableCellSelection: v === "single-cell" || v === "multi-cell",
+      enableMultiCellSelection: v === "multi-cell",
+      onColumnPinningChange: hX,
       enableFocusRow: true,
-      onFocusRowChange: sX,
+      onFocusRowChange: cX,
       state: {
-        ...w ? {
-          sorting: w
+        ...E ? {
+          sorting: E
         } : {},
-        columnFilters: JY,
-        ...q ? {
-          pagination: q
-        } : BY && !q ? {} : {
+        columnFilters: YY,
+        ...IY ? {
+          pagination: IY
+        } : VY && !IY ? {} : {
           pagination: {
             pageIndex: 0,
             pageSize: f.length
           }
         },
-        rowSelection: O ?? {},
-        cellSelection: M ?? [],
-        cellStyling: I,
-        columnPinning: pX,
-        cellHoverTemplate: z,
-        cellHoverTexts: G ?? {}
-      }
-    }), _X = (aX == null ? void 0 : aX("row-viewer")) ?? false, vX = import_react.useRef(null);
+        rowSelection: M ?? {},
+        cellSelection: I ?? [],
+        cellStyling: z,
+        columnPinning: mX,
+        cellHoverTemplate: G,
+        cellHoverTexts: q ?? {}
+      }
+    }), vX = (oX == null ? void 0 : oX("row-viewer")) ?? false, yX = import_react.useRef(null);
     return import_react.useEffect(() => {
-      if (!vX.current) return;
-      let e2 = vX.current.parentElement;
+      if (!yX.current) return;
+      let e2 = yX.current.parentElement;
       e2 && (c ? (e2.style.maxHeight = `${c}px`, e2.style.overflow || (e2.style.overflow = "auto")) : e2.style.removeProperty("max-height"));
     }, [
       c
@@ -60154,67 +60260,67 @@ Defaulting to \`null\`.`;
       className: cn(e, "flex flex-col space-y-1"),
       children: [
         (0, import_jsx_runtime.jsx)(FilterPills, {
-          filters: JY,
-          table: gX
+          filters: YY,
+          table: _X
         }),
         (0, import_jsx_runtime.jsxs)(CellSelectionProvider, {
           children: [
             (0, import_jsx_runtime.jsxs)("div", {
               className: cn(r || "rounded-md border overflow-hidden"),
               children: [
-                KY && WY && (0, import_jsx_runtime.jsx)(SearchBar, {
-                  value: GY || "",
-                  onHide: () => lX(false),
-                  handleSearch: KY,
-                  hidden: !cX,
-                  reloading: XY
+                qY && GY && (0, import_jsx_runtime.jsx)(SearchBar, {
+                  value: KY || "",
+                  onHide: () => uX(false),
+                  handleSearch: qY,
+                  hidden: !lX,
+                  reloading: ZY
                 }),
                 (0, import_jsx_runtime.jsxs)(Table, {
                   className: "relative",
-                  ref: vX,
+                  ref: yX,
                   children: [
-                    uX && (0, import_jsx_runtime.jsx)("thead", {
+                    dX && (0, import_jsx_runtime.jsx)("thead", {
                       className: "absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide"
                     }),
-                    renderTableHeader(gX, !!c),
+                    renderTableHeader(_X, !!c),
                     (0, import_jsx_runtime.jsx)(DataTableBody, {
-                      table: gX,
+                      table: _X,
                       columns: d,
-                      rowViewerPanelOpen: _X,
-                      getRowIndex: hX,
-                      viewedRowIdx: oX
+                      rowViewerPanelOpen: vX,
+                      getRowIndex: gX,
+                      viewedRowIdx: sX
                     })
                   ]
                 })
               ]
             }),
             (0, import_jsx_runtime.jsx)(CellSelectionStats, {
-              table: gX,
+              table: _X,
               className: "px-2 pt-1 ml-auto"
             })
           ]
         }),
         (0, import_jsx_runtime.jsx)(TableActions, {
-          enableSearch: WY,
-          totalColumns: v,
-          onSearchQueryChange: KY,
-          isSearchEnabled: cX,
-          setIsSearchEnabled: lX,
-          pagination: BY,
-          selection: _,
-          onRowSelectionChange: VY,
-          table: gX,
-          downloadAs: LY,
-          downloadFileName: RY,
-          getRowIds: UY,
-          toggleDisplayHeader: $Y,
-          showChartBuilder: eX,
-          showPageSizeSelector: tX,
-          showColumnExplorer: nX,
-          showRowExplorer: rX,
-          togglePanel: iX,
-          isPanelOpen: aX,
-          tableLoading: XY
+          enableSearch: GY,
+          totalColumns: y,
+          onSearchQueryChange: qY,
+          isSearchEnabled: lX,
+          setIsSearchEnabled: uX,
+          pagination: VY,
+          selection: v,
+          onRowSelectionChange: HY,
+          table: _X,
+          downloadAs: RY,
+          downloadFileName: zY,
+          getRowIds: WY,
+          toggleDisplayHeader: eX,
+          showChartBuilder: tX,
+          showPageSizeSelector: nX,
+          showColumnExplorer: rX,
+          showRowExplorer: iX,
+          togglePanel: aX,
+          isPanelOpen: oX,
+          tableLoading: ZY
         })
       ]
     });
@@ -70777,7 +70883,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev5"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev53"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$89 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -72336,7 +72442,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
     "time",
     "unknown"
   ];
-  var import_compiler_runtime$82 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-pZyd9UJ_.js").then(async (m2) => {
+  var import_compiler_runtime$82 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-858wsVkd.js").then(async (m2) => {
     await m2.__tla;
     return m2;
   }));
@@ -80984,6 +81090,10 @@ ${c}
       string(),
       array(object$1({}).passthrough())
     ]),
+    rawData: union([
+      string(),
+      array(looseObject({}))
+    ]).nullish(),
     totalRows: union([
       number(),
       literal(TOO_MANY_ROWS)
@@ -81067,7 +81177,11 @@ ${c}
         literal(TOO_MANY_ROWS)
       ]),
       cell_styles: record(string(), record(string(), object$1({}).passthrough())).nullable(),
-      cell_hover_texts: cellHoverTextSchema.nullable()
+      cell_hover_texts: cellHoverTextSchema.nullable(),
+      raw_data: union([
+        string(),
+        array(looseObject({}))
+      ]).nullish()
     })),
     get_row_ids: rpc.input(object$1({}).passthrough()).output(object$1({
       row_ids: array(number()),
@@ -81161,7 +81275,7 @@ ${c}
     return d;
   };
   const LoadingDataTableComponent = (0, import_react.memo)((e) => {
-    let r = (0, import_compiler_runtime$58.c)(101), c;
+    let r = (0, import_compiler_runtime$58.c)(103), c;
     r[0] === e.host ? c = r[1] : (c = findCellId(e.host), r[0] = e.host, r[1] = c);
     let d = c, f = e.search, _ = e.setValue, v;
     r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = [], r[2] = v) : v = r[2];
@@ -81196,33 +81310,35 @@ ${c}
       e.pageSize
     ], r[18] = e.pageSize, r[19] = VY, r[20] = HY), (0, import_react.useEffect)(VY, HY);
     let UY;
-    r[21] !== G || r[22] !== E.pageIndex || r[23] !== E.pageSize || r[24] !== e.cellHoverTexts || r[25] !== e.cellStyles || r[26] !== e.data || r[27] !== e.lazy || r[28] !== e.pageSize || r[29] !== e.totalRows || r[30] !== f || r[31] !== M || r[32] !== y ? (UY = async () => {
+    r[21] !== G || r[22] !== E.pageIndex || r[23] !== E.pageSize || r[24] !== e.cellHoverTexts || r[25] !== e.cellStyles || r[26] !== e.data || r[27] !== e.lazy || r[28] !== e.pageSize || r[29] !== e.rawData || r[30] !== e.totalRows || r[31] !== f || r[32] !== M || r[33] !== y ? (UY = async () => {
       if (e.totalRows === 0) return {
         rows: Arrays.EMPTY,
         totalRows: 0,
         cellStyles: {}
       };
-      let r2 = e.data, c2 = e.totalRows, d2 = e.cellStyles, _2 = e.cellHoverTexts, v2 = E.pageSize !== e.pageSize, S2 = M === "" && E.pageIndex === 0 && G.length === 0 && y.length === 0 && !e.lazy && !v2, w2 = f({
+      let r2 = e.data, c2 = e.rawData, d2 = e.totalRows, _2 = e.cellStyles, v2 = e.cellHoverTexts, S2 = E.pageSize !== e.pageSize, w2 = M === "" && E.pageIndex === 0 && G.length === 0 && y.length === 0 && !e.lazy && !S2, O2 = f({
         sort: y.length > 0 ? y.map(_temp$19) : void 0,
         query: M,
         page_number: E.pageIndex,
         page_size: E.pageSize,
         filters: G.flatMap(_temp2$15)
       });
-      if (S2) w2.catch(_temp3$10);
+      if (w2) O2.catch(_temp3$10);
       else {
-        let e2 = await w2;
-        r2 = e2.data, c2 = e2.total_rows, d2 = e2.cell_styles || {}, _2 = e2.cell_hover_texts || {};
+        let e2 = await O2;
+        r2 = e2.data, c2 = e2.raw_data, d2 = e2.total_rows, _2 = e2.cell_styles || {}, v2 = e2.cell_hover_texts || {};
       }
-      return r2 = await loadTableData(r2), {
+      let [I2, z2] = await loadTableAndRawData(r2, c2);
+      return r2 = I2, {
         rows: r2,
-        totalRows: c2,
-        cellStyles: d2,
-        cellHoverTexts: _2
+        rawRows: z2,
+        totalRows: d2,
+        cellStyles: _2,
+        cellHoverTexts: v2
       };
-    }, r[21] = G, r[22] = E.pageIndex, r[23] = E.pageSize, r[24] = e.cellHoverTexts, r[25] = e.cellStyles, r[26] = e.data, r[27] = e.lazy, r[28] = e.pageSize, r[29] = e.totalRows, r[30] = f, r[31] = M, r[32] = y, r[33] = UY) : UY = r[33];
+    }, r[21] = G, r[22] = E.pageIndex, r[23] = E.pageSize, r[24] = e.cellHoverTexts, r[25] = e.cellStyles, r[26] = e.data, r[27] = e.lazy, r[28] = e.pageSize, r[29] = e.rawData, r[30] = e.totalRows, r[31] = f, r[32] = M, r[33] = y, r[34] = UY) : UY = r[34];
     let WY = useDeepCompareMemoize(e.fieldTypes), GY;
-    r[34] !== G || r[35] !== E.pageIndex || r[36] !== E.pageSize || r[37] !== e.cellHoverTexts || r[38] !== e.cellStyles || r[39] !== e.data || r[40] !== e.lazy || r[41] !== e.totalRows || r[42] !== f || r[43] !== M || r[44] !== y || r[45] !== WY ? (GY = [
+    r[35] !== G || r[36] !== E.pageIndex || r[37] !== E.pageSize || r[38] !== e.cellHoverTexts || r[39] !== e.cellStyles || r[40] !== e.data || r[41] !== e.lazy || r[42] !== e.totalRows || r[43] !== f || r[44] !== M || r[45] !== y || r[46] !== WY ? (GY = [
       y,
       f,
       G,
@@ -81235,9 +81351,9 @@ ${c}
       e.cellStyles,
       E.pageSize,
       E.pageIndex
-    ], r[34] = G, r[35] = E.pageIndex, r[36] = E.pageSize, r[37] = e.cellHoverTexts, r[38] = e.cellStyles, r[39] = e.data, r[40] = e.lazy, r[41] = e.totalRows, r[42] = f, r[43] = M, r[44] = y, r[45] = WY, r[46] = GY) : GY = r[46];
+    ], r[35] = G, r[36] = E.pageIndex, r[37] = E.pageSize, r[38] = e.cellHoverTexts, r[39] = e.cellStyles, r[40] = e.data, r[41] = e.lazy, r[42] = e.totalRows, r[43] = f, r[44] = M, r[45] = y, r[46] = WY, r[47] = GY) : GY = r[47];
     let { data: KY, error: qY, isPending: JY, isFetching: YY } = useAsyncData(UY, GY), XY;
-    r[47] !== G || r[48] !== f || r[49] !== M || r[50] !== y ? (XY = async (e2) => ({
+    r[48] !== G || r[49] !== f || r[50] !== M || r[51] !== y ? (XY = async (e2) => ({
       rows: await loadTableData((await f({
         page_number: e2,
         page_size: 1,
@@ -81246,51 +81362,51 @@ ${c}
         filters: G.flatMap(_temp5$5),
         max_columns: null
       })).data)
-    }), r[47] = G, r[48] = f, r[49] = M, r[50] = y, r[51] = XY) : XY = r[51];
+    }), r[48] = G, r[49] = f, r[50] = M, r[51] = y, r[52] = XY) : XY = r[52];
     let ZY = XY, QY;
-    r[52] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (QY = () => {
+    r[53] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (QY = () => {
       O(_temp6$4);
-    }, r[52] = QY) : QY = r[52];
+    }, r[53] = QY) : QY = r[53];
     let $Y = KY == null ? void 0 : KY.totalRows, eX;
-    r[53] === $Y ? eX = r[54] : (eX = [
+    r[54] === $Y ? eX = r[55] : (eX = [
       $Y
-    ], r[53] = $Y, r[54] = eX), (0, import_react.useEffect)(QY, eX);
+    ], r[54] = $Y, r[55] = eX), (0, import_react.useEffect)(QY, eX);
     let tX;
-    r[55] === e ? tX = r[56] : (tX = async () => e.totalRows === 0 || !e.showColumnSummaries ? {
+    r[56] === e ? tX = r[57] : (tX = async () => e.totalRows === 0 || !e.showColumnSummaries ? {
       data: null,
       stats: {},
       bin_values: {},
       value_counts: {},
       show_charts: false
-    } : e.get_column_summaries({}), r[55] = e, r[56] = tX);
+    } : e.get_column_summaries({}), r[56] = e, r[57] = tX);
     let nX;
-    r[57] !== G || r[58] !== e.data || r[59] !== e.get_column_summaries || r[60] !== e.showColumnSummaries || r[61] !== e.totalRows || r[62] !== M ? (nX = [
+    r[58] !== G || r[59] !== e.data || r[60] !== e.get_column_summaries || r[61] !== e.showColumnSummaries || r[62] !== e.totalRows || r[63] !== M ? (nX = [
       e.get_column_summaries,
       e.showColumnSummaries,
       G,
       M,
       e.totalRows,
       e.data
-    ], r[57] = G, r[58] = e.data, r[59] = e.get_column_summaries, r[60] = e.showColumnSummaries, r[61] = e.totalRows, r[62] = M, r[63] = nX) : nX = r[63];
+    ], r[58] = G, r[59] = e.data, r[60] = e.get_column_summaries, r[61] = e.showColumnSummaries, r[62] = e.totalRows, r[63] = M, r[64] = nX) : nX = r[64];
     let { data: rX, error: iX } = useAsyncData(tX, nX), aX, oX;
-    if (r[64] === iX ? (aX = r[65], oX = r[66]) : (aX = () => {
+    if (r[65] === iX ? (aX = r[66], oX = r[67]) : (aX = () => {
       iX && Logger.error(iX);
     }, oX = [
       iX
-    ], r[64] = iX, r[65] = aX, r[66] = oX), (0, import_react.useEffect)(aX, oX), JY) {
+    ], r[65] = iX, r[66] = aX, r[67] = oX), (0, import_react.useEffect)(aX, oX), JY) {
       let c2 = e.totalRows !== "too_many" && e.totalRows > 0 ? e.totalRows : e.pageSize, d2;
-      return r[67] === c2 ? d2 = r[68] : (d2 = (0, import_jsx_runtime.jsx)(DelayMount, {
+      return r[68] === c2 ? d2 = r[69] : (d2 = (0, import_jsx_runtime.jsx)(DelayMount, {
         milliseconds: 200,
         children: (0, import_jsx_runtime.jsx)(LoadingTable, {
           pageSize: c2
         })
-      }), r[67] = c2, r[68] = d2), d2;
+      }), r[68] = c2, r[69] = d2), d2;
     }
     let sX = null;
     if (qY) {
       Logger.error(qY);
       let e2;
-      r[69] === qY ? e2 = r[70] : (e2 = !isStaticNotebook() && (0, import_jsx_runtime.jsxs)(Alert, {
+      r[70] === qY ? e2 = r[71] : (e2 = !isStaticNotebook() && (0, import_jsx_runtime.jsxs)(Alert, {
         variant: "destructive",
         className: "mb-2",
         children: [
@@ -81302,16 +81418,17 @@ ${c}
             children: qY.message || "An unknown error occurred"
           })
         ]
-      }), r[69] = qY, r[70] = e2), sX = e2;
+      }), r[70] = qY, r[71] = e2), sX = e2;
     }
     let cX;
-    r[71] === LY ? cX = r[72] : (cX = () => {
+    r[72] === LY ? cX = r[73] : (cX = () => {
       RY(!LY);
-    }, r[71] = LY, r[72] = cX);
-    let lX = cX, uX = (KY == null ? void 0 : KY.rows) ?? Arrays.EMPTY, dX = YY && !JY, fX = (KY == null ? void 0 : KY.totalRows) ?? e.totalRows, pX = (KY == null ? void 0 : KY.cellStyles) ?? e.cellStyles, mX = (KY == null ? void 0 : KY.cellHoverTexts) ?? e.cellHoverTexts, hX;
-    r[73] !== d || r[74] !== rX || r[75] !== G || r[76] !== ZY || r[77] !== E || r[78] !== e || r[79] !== M || r[80] !== y || r[81] !== uX || r[82] !== dX || r[83] !== fX || r[84] !== pX || r[85] !== mX || r[86] !== lX ? (hX = (0, import_jsx_runtime.jsx)(DataTableComponent, {
+    }, r[72] = LY, r[73] = cX);
+    let lX = cX, uX = (KY == null ? void 0 : KY.rows) ?? Arrays.EMPTY, dX = KY == null ? void 0 : KY.rawRows, fX = YY && !JY, pX = (KY == null ? void 0 : KY.totalRows) ?? e.totalRows, mX = (KY == null ? void 0 : KY.cellStyles) ?? e.cellStyles, hX = (KY == null ? void 0 : KY.cellHoverTexts) ?? e.cellHoverTexts, gX;
+    r[74] !== d || r[75] !== rX || r[76] !== G || r[77] !== ZY || r[78] !== E || r[79] !== e || r[80] !== M || r[81] !== y || r[82] !== uX || r[83] !== dX || r[84] !== fX || r[85] !== pX || r[86] !== mX || r[87] !== hX || r[88] !== lX ? (gX = (0, import_jsx_runtime.jsx)(DataTableComponent, {
       ...e,
       data: uX,
+      rawData: dX,
       columnSummaries: rX,
       sorting: y,
       setSorting: S,
@@ -81319,190 +81436,191 @@ ${c}
       setSearchQuery: I,
       filters: G,
       setFilters: q,
-      reloading: dX,
-      totalRows: fX,
+      reloading: fX,
+      totalRows: pX,
       paginationState: E,
       setPaginationState: O,
-      cellStyles: pX,
-      cellHoverTexts: mX,
+      cellStyles: mX,
+      cellHoverTexts: hX,
       toggleDisplayHeader: lX,
       getRow: ZY,
       cellId: d,
       maxHeight: e.maxHeight
-    }), r[73] = d, r[74] = rX, r[75] = G, r[76] = ZY, r[77] = E, r[78] = e, r[79] = M, r[80] = y, r[81] = uX, r[82] = dX, r[83] = fX, r[84] = pX, r[85] = mX, r[86] = lX, r[87] = hX) : hX = r[87];
-    let gX = hX, _X;
-    r[88] !== d || r[89] !== (KY == null ? void 0 : KY.rows) || r[90] !== gX || r[91] !== LY || r[92] !== e.fieldTypes || r[93] !== e.get_data_url || r[94] !== e.showChartBuilder || r[95] !== e.totalColumns || r[96] !== e.totalRows ? (_X = e.showChartBuilder ? (0, import_jsx_runtime.jsx)(TablePanel, {
+    }), r[74] = d, r[75] = rX, r[76] = G, r[77] = ZY, r[78] = E, r[79] = e, r[80] = M, r[81] = y, r[82] = uX, r[83] = dX, r[84] = fX, r[85] = pX, r[86] = mX, r[87] = hX, r[88] = lX, r[89] = gX) : gX = r[89];
+    let _X = gX, vX;
+    r[90] !== d || r[91] !== _X || r[92] !== (KY == null ? void 0 : KY.rows) || r[93] !== LY || r[94] !== e.fieldTypes || r[95] !== e.get_data_url || r[96] !== e.showChartBuilder || r[97] !== e.totalColumns || r[98] !== e.totalRows ? (vX = e.showChartBuilder ? (0, import_jsx_runtime.jsx)(TablePanel, {
       displayHeader: LY,
       data: (KY == null ? void 0 : KY.rows) || [],
       columns: e.totalColumns,
       totalRows: e.totalRows,
-      dataTable: gX,
+      dataTable: _X,
       getDataUrl: e.get_data_url,
       fieldTypes: e.fieldTypes,
       cellId: d
-    }) : gX, r[88] = d, r[89] = KY == null ? void 0 : KY.rows, r[90] = gX, r[91] = LY, r[92] = e.fieldTypes, r[93] = e.get_data_url, r[94] = e.showChartBuilder, r[95] = e.totalColumns, r[96] = e.totalRows, r[97] = _X) : _X = r[97];
-    let vX;
-    return r[98] !== sX || r[99] !== _X ? (vX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    }) : _X, r[90] = d, r[91] = _X, r[92] = KY == null ? void 0 : KY.rows, r[93] = LY, r[94] = e.fieldTypes, r[95] = e.get_data_url, r[96] = e.showChartBuilder, r[97] = e.totalColumns, r[98] = e.totalRows, r[99] = vX) : vX = r[99];
+    let yX;
+    return r[100] !== sX || r[101] !== vX ? (yX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
         sX,
-        _X
+        vX
       ]
-    }), r[98] = sX, r[99] = _X, r[100] = vX) : vX = r[100], vX;
+    }), r[100] = sX, r[101] = vX, r[102] = yX) : yX = r[102], yX;
   });
   LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
-  var DataTableComponent = ({ label: e, data: r, totalRows: c, maxColumns: d, pagination: f, selection: _, value: v, showFilters: y, showDownload: S, showPageSizeSelector: w, showColumnExplorer: E, showRowExplorer: O, showChartBuilder: M, showDataTypes: I, rowHeaders: z, fieldTypes: G, paginationState: q, setPaginationState: IY, download_as: LY, columnSummaries: RY, className: zY, setValue: BY, sorting: VY, setSorting: HY, enableSearch: UY, searchQuery: WY, setSearchQuery: GY, filters: KY, setFilters: qY, reloading: JY, freezeColumnsLeft: YY, freezeColumnsRight: XY, textJustifyColumns: ZY, wrappedColumns: QY, headerTooltip: $Y, totalColumns: eX, get_row_ids: tX, cellStyles: nX, hoverTemplate: rX, cellHoverTexts: iX, downloadFileName: aX, toggleDisplayHeader: oX, calculate_top_k_rows: sX, preview_column: cX, getRow: lX, cellId: uX, maxHeight: dX }) => {
-    let fX = (0, import_react.useId)(), [pX, mX] = (0, import_react.useState)(0), { isPanelOpen: hX, togglePanel: gX } = usePanelOwnership(fX, uX), _X = (0, import_react.useMemo)(() => {
-      if (!RY || !G || !RY.stats) return ColumnChartSpecModel.EMPTY;
-      let e2 = toFieldTypes(G);
-      return new ColumnChartSpecModel(RY.data || [], e2, RY.stats, RY.bin_values, RY.value_counts, {
-        includeCharts: RY.show_charts
+  var DataTableComponent = ({ label: e, data: r, rawData: c, totalRows: d, maxColumns: f, pagination: _, selection: v, value: y, showFilters: S, showDownload: w, showPageSizeSelector: E, showColumnExplorer: O, showRowExplorer: M, showChartBuilder: I, showDataTypes: z, rowHeaders: G, fieldTypes: q, paginationState: IY, setPaginationState: LY, download_as: RY, columnSummaries: zY, className: BY, setValue: VY, sorting: HY, setSorting: UY, enableSearch: WY, searchQuery: GY, setSearchQuery: KY, filters: qY, setFilters: JY, reloading: YY, freezeColumnsLeft: XY, freezeColumnsRight: ZY, textJustifyColumns: QY, wrappedColumns: $Y, headerTooltip: eX, totalColumns: tX, get_row_ids: nX, cellStyles: rX, hoverTemplate: iX, cellHoverTexts: aX, downloadFileName: oX, toggleDisplayHeader: sX, calculate_top_k_rows: cX, preview_column: lX, getRow: uX, cellId: dX, maxHeight: fX }) => {
+    let pX = (0, import_react.useId)(), [mX, hX] = (0, import_react.useState)(0), { isPanelOpen: gX, togglePanel: _X } = usePanelOwnership(pX, dX), vX = (0, import_react.useMemo)(() => {
+      if (!zY || !q || !zY.stats) return ColumnChartSpecModel.EMPTY;
+      let e2 = toFieldTypes(q);
+      return new ColumnChartSpecModel(zY.data || [], e2, zY.stats, zY.bin_values, zY.value_counts, {
+        includeCharts: zY.show_charts
       });
     }, [
-      G,
-      RY
-    ]), vX = useDeepCompareMemoize(G ?? inferFieldTypes(r)), yX = (0, import_react.useMemo)(() => d === "all" ? vX : vX.slice(0, d), [
-      d,
-      vX
-    ]), bX = useDeepCompareMemoize(z), xX = useDeepCompareMemoize(ZY), SX = useDeepCompareMemoize(QY), CX = useDeepCompareMemoize(_X), wX = yX.length;
-    G || (I = false);
-    let TX = (0, import_react.useMemo)(() => generateColumns({
-      rowHeaders: bX,
-      selection: _,
-      chartSpecModel: CX,
-      fieldTypes: yX,
-      textJustifyColumns: xX,
-      wrappedColumns: SX,
-      headerTooltip: $Y,
-      showDataTypes: I,
-      calculateTopKRows: sX
+      q,
+      zY
+    ]), yX = useDeepCompareMemoize(q ?? inferFieldTypes(r)), bX = (0, import_react.useMemo)(() => f === "all" ? yX : yX.slice(0, f), [
+      f,
+      yX
+    ]), xX = useDeepCompareMemoize(G), SX = useDeepCompareMemoize(QY), CX = useDeepCompareMemoize($Y), wX = useDeepCompareMemoize(vX), TX = bX.length;
+    q || (z = false);
+    let EX = (0, import_react.useMemo)(() => generateColumns({
+      rowHeaders: xX,
+      selection: v,
+      chartSpecModel: wX,
+      fieldTypes: bX,
+      textJustifyColumns: SX,
+      wrappedColumns: CX,
+      headerTooltip: eX,
+      showDataTypes: z,
+      calculateTopKRows: cX
     }), [
-      _,
-      I,
-      CX,
-      bX,
-      yX,
+      v,
+      z,
+      wX,
       xX,
+      bX,
       SX,
-      $Y,
-      sX
-    ]), EX = (0, import_react.useMemo)(() => Object.fromEntries((v || []).map((e2) => [
+      CX,
+      eX,
+      cX
+    ]), DX = (0, import_react.useMemo)(() => Object.fromEntries((y || []).map((e2) => [
       e2,
       true
     ])), [
-      v
-    ]), DX = useEvent_default((e2) => {
-      if (_ === "single") {
+      y
+    ]), OX = useEvent_default((e2) => {
+      if (v === "single") {
         let r2 = Functions.asUpdater(e2)({});
-        BY(Object.keys(r2).slice(0, 1));
+        VY(Object.keys(r2).slice(0, 1));
       }
-      if (_ === "multi") {
-        let r2 = Functions.asUpdater(e2)(EX);
-        BY(Object.keys(r2));
+      if (v === "multi") {
+        let r2 = Functions.asUpdater(e2)(DX);
+        VY(Object.keys(r2));
       }
-    }), OX = useEvent_default((e2) => {
-      if (mX(e2), e2 < 0 || typeof c == "number" && e2 >= c || c === "too_many") return;
-      let r2 = getPageIndexForRow(e2, q.pageIndex, q.pageSize);
-      r2 !== null && IY((e3) => ({
+    }), kX = useEvent_default((e2) => {
+      if (hX(e2), e2 < 0 || typeof d == "number" && e2 >= d || d === "too_many") return;
+      let r2 = getPageIndexForRow(e2, IY.pageIndex, IY.pageSize);
+      r2 !== null && LY((e3) => ({
         ...e3,
         pageIndex: r2
       }));
-    }), kX = v.filter((e2) => e2 instanceof Object && e2.columnName !== void 0), AX = useEvent_default((e2) => {
-      _ === "single-cell" && BY(Functions.asUpdater(e2)(kX).slice(0, 1)), _ === "multi-cell" && BY(Functions.asUpdater(e2)(kX));
-    }), jX = _ === "multi" || _ === "single", MX = E && cX && hX("column-explorer"), NX = isInVscodeExtension();
+    }), AX = y.filter((e2) => e2 instanceof Object && e2.columnName !== void 0), jX = useEvent_default((e2) => {
+      v === "single-cell" && VY(Functions.asUpdater(e2)(AX).slice(0, 1)), v === "multi-cell" && VY(Functions.asUpdater(e2)(AX));
+    }), MX = v === "multi" || v === "single", NX = O && lX && gX("column-explorer"), PX = isInVscodeExtension();
     return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
-        c === "too_many" && q.pageSize === r.length && (0, import_jsx_runtime.jsxs)(Banner, {
+        d === "too_many" && IY.pageSize === r.length && (0, import_jsx_runtime.jsxs)(Banner, {
           className: "mb-1 rounded",
           children: [
             "Previewing the first ",
-            q.pageSize,
+            IY.pageSize,
             " rows."
           ]
         }),
-        wX < eX && wX > 0 && (0, import_jsx_runtime.jsxs)(Banner, {
+        TX < tX && TX > 0 && (0, import_jsx_runtime.jsxs)(Banner, {
           className: "mb-1 rounded",
           children: [
             "Result clipped. Showing ",
-            wX,
+            TX,
             " of ",
-            eX,
+            tX,
             " columns."
           ]
         }),
-        (RY == null ? void 0 : RY.is_disabled) && (0, import_jsx_runtime.jsx)(Banner, {
+        (zY == null ? void 0 : zY.is_disabled) && (0, import_jsx_runtime.jsx)(Banner, {
           className: "mb-1 rounded",
           children: "Column summaries are unavailable. Filter your data to fewer than 1,000,000 rows."
         }),
-        hX("row-viewer") && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
+        gX("row-viewer") && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
           children: (0, import_jsx_runtime.jsx)(RowViewerPanel, {
-            getRow: lX,
-            fieldTypes: vX,
-            totalRows: c,
-            rowIdx: pX,
-            setRowIdx: OX,
-            isSelectable: jX,
-            isRowSelected: EX[pX],
-            handleRowSelectionChange: DX
+            getRow: uX,
+            fieldTypes: yX,
+            totalRows: d,
+            rowIdx: mX,
+            setRowIdx: kX,
+            isSelectable: MX,
+            isRowSelected: DX[mX],
+            handleRowSelectionChange: OX
           })
         }),
-        MX && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
+        NX && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
           children: (0, import_jsx_runtime.jsx)(ColumnExplorerPanel, {
-            previewColumn: cX,
-            fieldTypes: vX,
-            totalRows: c,
-            totalColumns: eX,
-            tableId: fX
+            previewColumn: lX,
+            fieldTypes: yX,
+            totalRows: d,
+            totalColumns: tX,
+            tableId: pX
           })
         }),
         (0, import_jsx_runtime.jsx)(ColumnChartContext, {
-          value: _X,
+          value: vX,
           children: (0, import_jsx_runtime.jsx)(Labeled, {
             label: e,
             align: "top",
             fullWidth: true,
             children: (0, import_jsx_runtime.jsx)(DataTable, {
               data: r,
-              columns: TX,
-              className: zY,
-              maxHeight: dX,
-              sorting: VY,
-              totalRows: c,
-              totalColumns: eX,
+              rawData: c,
+              columns: EX,
+              className: BY,
+              maxHeight: fX,
+              sorting: HY,
+              totalRows: d,
+              totalColumns: tX,
               manualSorting: true,
-              setSorting: HY,
-              pagination: f,
+              setSorting: UY,
+              pagination: _,
               manualPagination: true,
-              selection: _,
-              paginationState: q,
-              setPaginationState: IY,
-              rowSelection: EX,
-              cellSelection: kX,
-              cellStyling: nX,
-              hoverTemplate: rX,
-              cellHoverTexts: iX,
-              downloadAs: S ? LY : void 0,
-              downloadFileName: aX,
-              enableSearch: UY,
-              searchQuery: WY,
-              onSearchQueryChange: GY,
-              showFilters: y,
-              filters: KY,
-              onFiltersChange: qY,
-              reloading: JY,
-              onRowSelectionChange: DX,
-              freezeColumnsLeft: YY,
-              freezeColumnsRight: XY,
-              onCellSelectionChange: AX,
-              getRowIds: tX,
-              toggleDisplayHeader: oX,
-              showChartBuilder: M,
-              showPageSizeSelector: w,
-              showColumnExplorer: E && !NX,
-              showRowExplorer: O && !NX,
-              togglePanel: gX,
-              isPanelOpen: hX,
-              viewedRowIdx: pX,
-              onViewedRowChange: (e2) => mX(e2)
+              selection: v,
+              paginationState: IY,
+              setPaginationState: LY,
+              rowSelection: DX,
+              cellSelection: AX,
+              cellStyling: rX,
+              hoverTemplate: iX,
+              cellHoverTexts: aX,
+              downloadAs: w ? RY : void 0,
+              downloadFileName: oX,
+              enableSearch: WY,
+              searchQuery: GY,
+              onSearchQueryChange: KY,
+              showFilters: S,
+              filters: qY,
+              onFiltersChange: JY,
+              reloading: YY,
+              onRowSelectionChange: OX,
+              freezeColumnsLeft: XY,
+              freezeColumnsRight: ZY,
+              onCellSelectionChange: jX,
+              getRowIds: nX,
+              toggleDisplayHeader: sX,
+              showChartBuilder: I,
+              showPageSizeSelector: E,
+              showColumnExplorer: O && !PX,
+              showRowExplorer: M && !PX,
+              togglePanel: _X,
+              isPanelOpen: gX,
+              viewedRowIdx: mX,
+              onViewedRowChange: (e2) => hX(e2)
             })
           })
         })
@@ -92685,21 +92803,75 @@ ${c}
     }), r[13] = c, r[14] = e.label, r[15] = f, r[16] = O, r[17] = M) : M = r[17], M;
   };
   var import_compiler_runtime$28 = require_compiler_runtime(), RangeSlider = import_react.forwardRef((e, r) => {
-    let c = (0, import_compiler_runtime$28.c)(35), { className: d, valueMap: f, ..._ } = e, [v, y] = useBoolean(false), { locale: S } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), w = dist_exports, E;
-    c[0] === d ? E = c[1] : (E = cn("relative flex touch-none select-none hover:cursor-pointer", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:items-center", "data-[orientation=vertical]:h-full data-[orientation=vertical]:justify-center", "data-disabled:cursor-not-allowed", d), c[0] = d, c[1] = E);
-    let O;
-    c[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (O = cn("relative grow overflow-hidden rounded-full bg-slate-200 dark:bg-accent/60", "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2"), c[2] = O) : O = c[2];
-    let M;
-    c[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = (0, import_jsx_runtime.jsx)(Track, {
+    let c = (0, import_compiler_runtime$28.c)(56), d, f, _;
+    c[0] === e ? (d = c[1], f = c[2], _ = c[3]) : ({ className: d, valueMap: _, ...f } = e, c[0] = e, c[1] = d, c[2] = f, c[3] = _);
+    let [v, y] = useBoolean(false), { locale: S } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), w = import_react.useRef(false), E = import_react.useRef(0), O = import_react.useRef(0), M;
+    c[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = [], c[4] = M) : M = c[4];
+    let I = import_react.useRef(M), z;
+    c[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = [], c[5] = z) : z = c[5];
+    let G = import_react.useRef(z), q = import_react.useRef(null), IY = import_react.useRef(null), LY = import_react.useRef(null), RY;
+    c[6] === r ? RY = c[7] : (RY = (e2) => {
+      q.current = e2, typeof r == "function" ? r(e2) : r && (r.current = e2);
+    }, c[6] = r, c[7] = RY);
+    let zY = RY, BY;
+    c[8] !== f.disabled || c[9] !== f.value ? (BY = (e2) => {
+      var _a3;
+      !f.value || f.value.length !== 2 || f.disabled || (e2.preventDefault(), e2.stopPropagation(), w.current = true, E.current = e2.clientX, O.current = e2.clientY, I.current = [
+        ...f.value
+      ], G.current = [
+        ...f.value
+      ], LY.current = ((_a3 = IY.current) == null ? void 0 : _a3.getBoundingClientRect()) ?? null, e2.currentTarget.setPointerCapture(e2.pointerId));
+    }, c[8] = f.disabled, c[9] = f.value, c[10] = BY) : BY = c[10];
+    let VY = BY, HY;
+    c[11] === f ? HY = c[12] : (HY = (e2) => {
+      var _a3;
+      if (!w.current) return;
+      e2.stopPropagation();
+      let r2 = LY.current;
+      if (!r2) return;
+      let c2 = f.orientation === "vertical", d2 = f.min ?? 0, _2 = f.max ?? 100, v2 = _2 - d2, y2;
+      if (c2) {
+        let c3 = r2.height;
+        y2 = -((e2.clientY - O.current) / c3) * v2;
+      } else {
+        let c3 = r2.width;
+        y2 = (e2.clientX - E.current) / c3 * v2;
+      }
+      let [S2, M2] = I.current, z2 = M2 - S2, q2 = f.steps, IY2 = q2 && q2.length > 1 ? Math.min(...q2.slice(1).map((e3, r3) => e3 - q2[r3])) : f.step ?? 1, RY2 = Math.round(y2 / IY2) * IY2, zY2 = S2 + Math.max(d2 - S2, Math.min(_2 - M2, RY2)), BY2 = zY2 + z2;
+      G.current = [
+        zY2,
+        BY2
+      ], (_a3 = f.onValueChange) == null ? void 0 : _a3.call(f, [
+        zY2,
+        BY2
+      ]);
+    }, c[11] = f, c[12] = HY);
+    let UY = HY, WY;
+    c[13] === f ? WY = c[14] : (WY = (e2) => {
+      var _a3;
+      w.current && (e2.currentTarget.releasePointerCapture(e2.pointerId), w.current = false, G.current.length === 2 && ((_a3 = f.onValueCommit) == null ? void 0 : _a3.call(f, G.current)));
+    }, c[13] = f, c[14] = WY);
+    let GY = WY, KY;
+    c[15] === d ? KY = c[16] : (KY = cn("relative flex touch-none select-none hover:cursor-pointer", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:items-center", "data-[orientation=vertical]:h-full data-[orientation=vertical]:justify-center", "data-disabled:cursor-not-allowed", d), c[15] = d, c[16] = KY);
+    let qY;
+    c[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (qY = cn("relative grow overflow-hidden rounded-full bg-slate-200 dark:bg-accent/60", "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2"), c[17] = qY) : qY = c[17];
+    let JY;
+    c[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (JY = cn("absolute bg-blue-500 dark:bg-primary", "data-[orientation=horizontal]:h-full", "data-[orientation=vertical]:w-full", "data-disabled:opacity-50", "hover:cursor-grab active:cursor-grabbing"), c[18] = JY) : JY = c[18];
+    let YY;
+    c[19] !== VY || c[20] !== UY || c[21] !== GY ? (YY = (0, import_jsx_runtime.jsx)(Track, {
+      ref: IY,
       "data-testid": "track",
-      className: O,
+      className: qY,
       children: (0, import_jsx_runtime.jsx)(Range, {
         "data-testid": "range",
-        className: cn("absolute bg-blue-500 dark:bg-primary", "data-[orientation=horizontal]:h-full", "data-[orientation=vertical]:w-full", "data-disabled:opacity-50")
+        className: JY,
+        onPointerDown: VY,
+        onPointerMove: UY,
+        onPointerUp: GY
       })
-    }), c[3] = M) : M = c[3];
-    let I;
-    c[4] !== y.setFalse || c[5] !== y.setTrue ? (I = (0, import_jsx_runtime.jsx)(TooltipTrigger, {
+    }), c[19] = VY, c[20] = UY, c[21] = GY, c[22] = YY) : YY = c[22];
+    let XY;
+    c[23] !== y.setFalse || c[24] !== y.setTrue ? (XY = (0, import_jsx_runtime.jsx)(TooltipTrigger, {
       asChild: true,
       children: (0, import_jsx_runtime.jsx)(Thumb, {
         "data-testid": "thumb",
@@ -92709,28 +92881,30 @@ ${c}
         onMouseEnter: y.setTrue,
         onMouseLeave: y.setFalse
       })
-    }), c[4] = y.setFalse, c[5] = y.setTrue, c[6] = I) : I = c[6];
-    let z = _.value != null && _.value.length === 2 && (0, import_jsx_runtime.jsx)(TooltipContent, {
-      children: prettyScientificNumber(f(_.value[0]), {
+    }), c[23] = y.setFalse, c[24] = y.setTrue, c[25] = XY) : XY = c[25];
+    let ZY;
+    c[26] !== S || c[27] !== f.value || c[28] !== _ ? (ZY = f.value != null && f.value.length === 2 && (0, import_jsx_runtime.jsx)(TooltipContent, {
+      children: prettyScientificNumber(_(f.value[0]), {
         locale: S
       })
-    }, _.value[0]), G;
-    c[7] === z ? G = c[8] : (G = (0, import_jsx_runtime.jsx)(TooltipPortal, {
-      children: z
-    }), c[7] = z, c[8] = G);
-    let q;
-    c[9] !== v || c[10] !== I || c[11] !== G ? (q = (0, import_jsx_runtime.jsx)(TooltipProvider, {
+    }, f.value[0]), c[26] = S, c[27] = f.value, c[28] = _, c[29] = ZY) : ZY = c[29];
+    let QY;
+    c[30] === ZY ? QY = c[31] : (QY = (0, import_jsx_runtime.jsx)(TooltipPortal, {
+      children: ZY
+    }), c[30] = ZY, c[31] = QY);
+    let $Y;
+    c[32] !== v || c[33] !== XY || c[34] !== QY ? ($Y = (0, import_jsx_runtime.jsx)(TooltipProvider, {
       children: (0, import_jsx_runtime.jsxs)(TooltipRoot, {
         delayDuration: 0,
         open: v,
         children: [
-          I,
-          G
+          XY,
+          QY
         ]
       })
-    }), c[9] = v, c[10] = I, c[11] = G, c[12] = q) : q = c[12];
-    let IY = TooltipProvider, LY = TooltipRoot, RY;
-    c[13] !== y.setFalse || c[14] !== y.setTrue ? (RY = (0, import_jsx_runtime.jsx)(TooltipTrigger, {
+    }), c[32] = v, c[33] = XY, c[34] = QY, c[35] = $Y) : $Y = c[35];
+    let eX;
+    c[36] !== y.setFalse || c[37] !== y.setTrue ? (eX = (0, import_jsx_runtime.jsx)(TooltipTrigger, {
       asChild: true,
       children: (0, import_jsx_runtime.jsx)(Thumb, {
         "data-testid": "thumb",
@@ -92740,39 +92914,39 @@ ${c}
         onMouseEnter: y.setTrue,
         onMouseLeave: y.setFalse
       })
-    }), c[13] = y.setFalse, c[14] = y.setTrue, c[15] = RY) : RY = c[15];
-    let zY = TooltipPortal, BY = _.value != null && _.value.length === 2 && (0, import_jsx_runtime.jsx)(TooltipContent, {
-      children: prettyScientificNumber(f(_.value[1]), {
+    }), c[36] = y.setFalse, c[37] = y.setTrue, c[38] = eX) : eX = c[38];
+    let tX;
+    c[39] !== S || c[40] !== f.value || c[41] !== _ ? (tX = f.value != null && f.value.length === 2 && (0, import_jsx_runtime.jsx)(TooltipContent, {
+      children: prettyScientificNumber(_(f.value[1]), {
         locale: S
       })
-    }, _.value[1]), VY;
-    c[16] !== zY || c[17] !== BY ? (VY = (0, import_jsx_runtime.jsx)(zY, {
-      children: BY
-    }), c[16] = zY, c[17] = BY, c[18] = VY) : VY = c[18];
-    let HY;
-    c[19] !== LY || c[20] !== v || c[21] !== RY || c[22] !== VY ? (HY = (0, import_jsx_runtime.jsxs)(LY, {
-      delayDuration: 0,
-      open: v,
-      children: [
-        RY,
-        VY
-      ]
-    }), c[19] = LY, c[20] = v, c[21] = RY, c[22] = VY, c[23] = HY) : HY = c[23];
-    let UY;
-    c[24] !== IY || c[25] !== HY ? (UY = (0, import_jsx_runtime.jsx)(IY, {
-      children: HY
-    }), c[24] = IY, c[25] = HY, c[26] = UY) : UY = c[26];
-    let WY;
-    return c[27] !== _ || c[28] !== r || c[29] !== w.Root || c[30] !== UY || c[31] !== E || c[32] !== M || c[33] !== q ? (WY = (0, import_jsx_runtime.jsxs)(w.Root, {
-      ref: r,
-      className: E,
-      ..._,
+    }, f.value[1]), c[39] = S, c[40] = f.value, c[41] = _, c[42] = tX) : tX = c[42];
+    let nX;
+    c[43] === tX ? nX = c[44] : (nX = (0, import_jsx_runtime.jsx)(TooltipPortal, {
+      children: tX
+    }), c[43] = tX, c[44] = nX);
+    let rX;
+    c[45] !== v || c[46] !== eX || c[47] !== nX ? (rX = (0, import_jsx_runtime.jsx)(TooltipProvider, {
+      children: (0, import_jsx_runtime.jsxs)(TooltipRoot, {
+        delayDuration: 0,
+        open: v,
+        children: [
+          eX,
+          nX
+        ]
+      })
+    }), c[45] = v, c[46] = eX, c[47] = nX, c[48] = rX) : rX = c[48];
+    let iX;
+    return c[49] !== zY || c[50] !== f || c[51] !== YY || c[52] !== $Y || c[53] !== rX || c[54] !== KY ? (iX = (0, import_jsx_runtime.jsxs)(Root$1, {
+      ref: zY,
+      className: KY,
+      ...f,
       children: [
-        M,
-        q,
-        UY
+        YY,
+        $Y,
+        rX
       ]
-    }), c[27] = _, c[28] = r, c[29] = w.Root, c[30] = UY, c[31] = E, c[32] = M, c[33] = q, c[34] = WY) : WY = c[34], WY;
+    }), c[49] = zY, c[50] = f, c[51] = YY, c[52] = $Y, c[53] = rX, c[54] = KY, c[55] = iX) : iX = c[55], iX;
   });
   RangeSlider.displayName = Root$1.displayName;
   var import_compiler_runtime$27 = require_compiler_runtime(), RangeSliderPlugin = class {
@@ -93082,7 +93256,7 @@ ${c}
       });
     }
   }, SliderComponent = (e) => {
-    let r = (0, import_compiler_runtime$26.c)(55), { label: c, setValue: d, value: f, start: _, stop: v, step: y, debounce: S, orientation: w, showValue: E, fullWidth: O, valueMap: M, includeInput: I, disabled: z } = e, G = (0, import_react.useId)(), { locale: q } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), [IY, LY] = (0, import_react.useState)(f), RY, zY;
+    let r = (0, import_compiler_runtime$26.c)(54), { label: c, setValue: d, value: f, start: _, stop: v, step: y, debounce: S, orientation: w, showValue: E, fullWidth: O, valueMap: M, includeInput: I, disabled: z } = e, G = (0, import_react.useId)(), { locale: q } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), [IY, LY] = (0, import_react.useState)(f), RY, zY;
     r[0] === f ? (RY = r[1], zY = r[2]) : (RY = () => {
       LY(f);
     }, zY = [
@@ -93128,10 +93302,10 @@ ${c}
       })
     }), r[27] = IY, r[28] = q, r[29] = E, r[30] = M, r[31] = ZY) : ZY = r[31];
     let QY;
-    r[32] !== S || r[33] !== z || r[34] !== I || r[35] !== IY || r[36] !== c || r[37] !== d || r[38] !== _ || r[39] !== y || r[40] !== v || r[41] !== M ? (QY = I && (0, import_jsx_runtime.jsx)(NumberField, {
+    r[32] !== z || r[33] !== I || r[34] !== IY || r[35] !== c || r[36] !== d || r[37] !== _ || r[38] !== y || r[39] !== v || r[40] !== M ? (QY = I && (0, import_jsx_runtime.jsx)(NumberField, {
       value: M(IY),
       onChange: (e2) => {
-        (e2 == null || Number.isNaN(e2)) && (e2 = Number(_)), LY(e2), S || d(e2);
+        (e2 == null || Number.isNaN(e2)) && (e2 = Number(_)), LY(e2), d(e2);
       },
       minValue: _,
       maxValue: v,
@@ -93139,25 +93313,25 @@ ${c}
       className: "w-24",
       "aria-label": `${c || "Slider"} value input`,
       isDisabled: z
-    }), r[32] = S, r[33] = z, r[34] = I, r[35] = IY, r[36] = c, r[37] = d, r[38] = _, r[39] = y, r[40] = v, r[41] = M, r[42] = QY) : QY = r[42];
+    }), r[32] = z, r[33] = I, r[34] = IY, r[35] = c, r[36] = d, r[37] = _, r[38] = y, r[39] = v, r[40] = M, r[41] = QY) : QY = r[41];
     let $Y;
-    r[43] !== XY || r[44] !== ZY || r[45] !== QY || r[46] !== WY ? ($Y = (0, import_jsx_runtime.jsxs)("div", {
+    r[42] !== XY || r[43] !== ZY || r[44] !== QY || r[45] !== WY ? ($Y = (0, import_jsx_runtime.jsxs)("div", {
       className: WY,
       children: [
         XY,
         ZY,
         QY
       ]
-    }), r[43] = XY, r[44] = ZY, r[45] = QY, r[46] = WY, r[47] = $Y) : $Y = r[47];
+    }), r[42] = XY, r[43] = ZY, r[44] = QY, r[45] = WY, r[46] = $Y) : $Y = r[46];
     let eX;
-    return r[48] !== O || r[49] !== G || r[50] !== c || r[51] !== $Y || r[52] !== BY || r[53] !== HY ? (eX = (0, import_jsx_runtime.jsx)(Labeled, {
+    return r[47] !== O || r[48] !== G || r[49] !== c || r[50] !== $Y || r[51] !== BY || r[52] !== HY ? (eX = (0, import_jsx_runtime.jsx)(Labeled, {
       label: c,
       id: G,
       align: BY,
       fullWidth: O,
       className: HY,
       children: $Y
-    }), r[48] = O, r[49] = G, r[50] = c, r[51] = $Y, r[52] = BY, r[53] = HY, r[54] = eX) : eX = r[54], eX;
+    }), r[47] = O, r[48] = G, r[49] = c, r[50] = $Y, r[51] = BY, r[52] = HY, r[53] = eX) : eX = r[53], eX;
   }, import_compiler_runtime$25 = require_compiler_runtime(), SwitchPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-switch");
@@ -101015,7 +101189,10 @@ ${c}
     let IY = AppConfigSchema.safeParse(M);
     if (IY.success ? v(IY.data) : Logger.error("Failed to parse app config", IY.error), y(I), z) return;
     if (E) {
-      for (let [e2, r2] of Objects.entries(O || {})) UI_ELEMENT_REGISTRY.set(e2, r2);
+      for (let [e2, r2] of Objects.entries(O || {})) {
+        let c2 = e2;
+        UI_ELEMENT_REGISTRY.set(c2, r2);
+      }
       return;
     }
     let { objectIds: LY, values: RY } = collectUIElementValues(), zY = G ? Object.fromEntries(c.map((e2) => [