@marimo-team/islands 0.23.14-dev16 → 0.23.14-dev19

package/dist/{process-output-2FbS8KgW.js → process-output-Dw6We6B6.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { at as parseHtmlContent, it as ansiToPlainText } from "./html-to-image-DcTkcjmm.js";
+import { at as parseHtmlContent, it as ansiToPlainText } from "./html-to-image-DBHfshED.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
 import { t as Strings } from "./strings-Dq_j3Rxw.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";

package/dist/{reveal-component-CskA0jHe.js → reveal-component-tJhA77Am.js}

@@ -6,10 +6,10 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, g as cn, h as Events, l as useEventListener, t as Button } from "./button-BacYv-bE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { lt as kioskModeAtom } from "./html-to-image-DcTkcjmm.js";
+import { lt as kioskModeAtom } from "./html-to-image-DBHfshED.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
-import { a as DEFAULT_SLIDE_TYPE, an as EyeOff, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, ln as Code, on as Expand, ot as Panel, s as SlideSidebar, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-Dc1Ap0mZ.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelGroup, i as DEFAULT_DECK_TRANSITION, lt as PanelResizeHandle, on as EyeOff, s as SlideSidebar, sn as Expand, st as Panel, t as useNotebookCodeAvailable, un as Code } from "./code-visibility-CxDvzm2S.js";
 import { X as useDebouncedCallback } from "./input-BSdZp5Ng.js";
 import "./toDate-D1Z7ZXWh.js";
 import "./react-dom-BTJzcVJ9.js";
@@ -7245,12 +7245,12 @@ function _temp(e5) {
   };
 }
 var SubslideView = (e5) => {
-  let t = (0, import_compiler_runtime.c)(24), { subslide: n, resolveShowCode: r, isEditable: i, slideConfigs: a } = e5, o, s, c, l, u, f;
+  let t = (0, import_compiler_runtime.c)(24), { subslide: n, resolveShowCode: r, isEditable: i, slideConfigs: a } = e5, o, s, c, l, u, ro;
   if (t[0] !== i || t[1] !== r || t[2] !== a || t[3] !== n) {
     let { slideLevel: e6, cumulativeByBlock: io2 } = buildSubslideNotes(n, a);
     s = e6;
     let p2 = n.blocks.some((e7) => e7.cells.some((e8) => r(e8.id)));
-    o = w, f = "h-full w-full overflow-auto flex", c = p2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
+    o = w, ro = "h-full w-full overflow-auto flex", c = p2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
       let n2 = e7.cells.map((e8) => r(e8.id) ? i ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellReadOnlyView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slide, {
         cellId: e8.id,
         status: e8.status,
@@ -7264,8 +7264,8 @@ var SubslideView = (e5) => {
         }, t2);
       }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: n2 }, t2);
-    }), t[0] = i, t[1] = r, t[2] = a, t[3] = n, t[4] = o, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = f;
-  } else o = t[4], s = t[5], c = t[6], l = t[7], u = t[8], f = t[9];
+    }), t[0] = i, t[1] = r, t[2] = a, t[3] = n, t[4] = o, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = ro;
+  } else o = t[4], s = t[5], c = t[6], l = t[7], u = t[8], ro = t[9];
   let io;
   t[11] !== c || t[12] !== l || t[13] !== u ? (io = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: c,
@@ -7273,10 +7273,10 @@ var SubslideView = (e5) => {
     children: u
   }), t[11] = c, t[12] = l, t[13] = u, t[14] = io) : io = t[14];
   let p;
-  t[15] !== f || t[16] !== io ? (p = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    className: f,
+  t[15] !== ro || t[16] !== io ? (p = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    className: ro,
     children: io
-  }), t[15] = f, t[16] = io, t[17] = p) : p = t[17];
+  }), t[15] = ro, t[16] = io, t[17] = p) : p = t[17];
   let ao;
   t[18] === s ? ao = t[19] : (ao = s && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesAside, { text: s }), t[18] = s, t[19] = ao);
   let oo;
@@ -7302,7 +7302,7 @@ var ParkedPreviewContent = (e5) => {
     status: n.status,
     output: n.output
   }), t[3] = n.id, t[4] = n.output, t[5] = n.status, t[6] = o) : o = t[6], o;
-}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: u, onSlideChange: ro, mode: p, configWidth: fo, isEditable: po = false }) => {
+}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: u, onSlideChange: f, mode: io, configWidth: fo, isEditable: po = false }) => {
   var _a2, _b2;
   let yo = (0, import_react.useRef)(null), bo = (0, import_react.useRef)(null), { width: So, height: Co } = useSlideDimensions(yo), wo = useFullScreenElement() != null, To = useAtomValue(kioskModeAtom), Eo = (0, import_react.useMemo)(() => To ? [] : [ce], [To]), [Do, Oo] = (0, import_react.useState)(() => /* @__PURE__ */ new Set()), ko = useNotebookCodeAvailable(e5), Ao = !isIslands() && ko, jo = u == null ? void 0 : e5[u], Mo = jo ?? e5.at(0), { parkedPreviewCell: No, isHeldEdit: Po, isNoOutputPreview: Fo, heldEditCellId: Io, heldShowsCode: Lo, toggleHeldShowsCode: Ro } = useParkedPreview({
     activeCell: jo,
@@ -7391,14 +7391,14 @@ var ParkedPreviewContent = (e5) => {
     let e6 = bo.current;
     if (!e6) return;
     let t = resolveActiveCellIndex(Go, e6.getIndices());
-    t != null && (ro == null ? void 0 : ro(t));
+    t != null && (f == null ? void 0 : f(t));
   }), $o = useEvent_default((t) => {
     if (!No || u == null || Events.fromInput(t)) return;
     let n = classifyNavKey(t);
     if (n === 0) return;
     t.preventDefault(), t.stopPropagation();
     let i = u + n;
-    i < 0 || i >= e5.length || (ro == null ? void 0 : ro(i));
+    i < 0 || i >= e5.length || (f == null ? void 0 : f(i));
   }), ns = useEvent_default(() => {
     Qo(), triggerResize(bo.current);
   });
@@ -7494,7 +7494,7 @@ var ParkedPreviewContent = (e5) => {
       ]
     })
   });
-  return p === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+  return io === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: "flex-1 min-w-0 flex flex-row gap-3",
     children: os
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {

package/package.json

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

package/src/components/data-table/__tests__/column-explorer.test.tsx

@@ -126,3 +126,28 @@ describe("ColumnExplorerPanel header counts", () => {
     expect(screen.queryByText(/hidden/)).not.toBeInTheDocument();
   });
 });
+
+describe("ColumnExplorerPanel visibility actions", () => {
+  const showAll = () => screen.getByRole("button", { name: /Show all/ });
+  const hideAll = () => screen.getByRole("button", { name: /Hide all/ });
+
+  it("disables 'Show all' when every column is visible", () => {
+    renderPanel();
+    expect(showAll()).toBeDisabled();
+    expect(hideAll()).toBeEnabled();
+  });
+
+  it("disables 'Hide all' when every column is hidden", () => {
+    renderPanel({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+    expect(showAll()).toBeEnabled();
+    expect(hideAll()).toBeDisabled();
+  });
+
+  it("enables both actions when some columns are hidden", () => {
+    renderPanel({ initiallyHidden: ["cust_age"] });
+    expect(showAll()).toBeEnabled();
+    expect(hideAll()).toBeEnabled();
+  });
+});

package/src/components/data-table/__tests__/column-visibility-dropdown.test.tsx

@@ -21,10 +21,17 @@ beforeAll(() => {
 
 type Row = Record<string, unknown>;
 
+// Select, index, and nameless columns are non-hideable in production
+// (see columns.tsx), so the harness mirrors that to keep visibility counts
+// aligned with the real table.
 const TEST_COLUMNS: ColumnDef<Row>[] = [
-  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID },
-  { id: INDEX_COLUMN_NAME, accessorKey: INDEX_COLUMN_NAME },
-  { id: "__m_column__0", accessorKey: "__m_column__0" },
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID, enableHiding: false },
+  {
+    id: INDEX_COLUMN_NAME,
+    accessorKey: INDEX_COLUMN_NAME,
+    enableHiding: false,
+  },
+  { id: "__m_column__0", accessorKey: "__m_column__0", enableHiding: false },
   {
     id: "customer_name",
     accessorKey: "customer_name",
@@ -101,6 +108,7 @@ describe("ColumnVisibilityDropdown", () => {
     renderAndOpen({ initiallyHidden: ["cust_age"] });
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -117,6 +125,7 @@ describe("ColumnVisibilityDropdown", () => {
 
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -132,6 +141,7 @@ describe("ColumnVisibilityDropdown", () => {
     fireEvent.click(getColumnOption("customer_name"));
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -144,6 +154,7 @@ describe("ColumnVisibilityDropdown", () => {
     // Reopen sorts both hidden columns first, preserving table order.
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "customer_name",
       "cust_age",
       "order_total",
@@ -189,6 +200,52 @@ describe("ColumnVisibilityDropdown", () => {
     );
   });
 
+  it("'Hide all' hides every hideable column", () => {
+    renderAndOpen();
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disables 'Hide all' when every column is already hidden", () => {
+    renderAndOpen({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("'Hide all' leaves non-hideable columns visible", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    const nonHideable = getColumnOption("customer_name");
+    expect(nonHideable).toHaveAttribute("aria-disabled", "true");
+    expect(nonHideable.querySelector(".lucide-eye-off")).toBeNull();
+    // Every hideable column is now hidden, so the action gates off.
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
   it("hides and shows matching columns via bulk actions while searching", () => {
     renderAndOpen();
     fireEvent.change(getSearchInput(), { target: { value: "cust" } });

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -50,7 +50,10 @@ import {
 import { smartMatch } from "@/utils/smartMatch";
 import type { Column, Table } from "@tanstack/react-table";
 import { cn } from "@/utils/cn";
-import { getColumnCountForDisplay } from "../hooks/use-column-visibility";
+import {
+  getColumnCountForDisplay,
+  getUserColumnVisibilityCounts,
+} from "../hooks/use-column-visibility";
 
 interface ColumnExplorerPanelProps<TData> {
   previewColumn: PreviewColumn;
@@ -90,6 +93,7 @@ export function ColumnExplorerPanel<TData>({
     totalColumns: effectiveTotalColumns,
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
+  const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,
@@ -108,17 +112,34 @@ export function ColumnExplorerPanel<TData>({
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
           className="h-3 w-3"
         />
-        {hiddenColumnCount > 0 && (
-          <Button
-            type="button"
-            variant="link"
-            size="xs"
-            className="h-auto p-0"
-            onClick={() => table.resetColumnVisibility(true)}
-          >
-            Unhide all
-          </Button>
-        )}
+        <div className="ml-auto flex items-center gap-1">
+          <Tooltip content="Show all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={hiddenColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(true)}
+            >
+              <EyeIcon className="w-3 h-3" />
+              Show all
+            </Button>
+          </Tooltip>
+          <Tooltip content="Hide all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={visibleColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(false)}
+            >
+              <EyeOffIcon className="w-3 h-3" />
+              Hide all
+            </Button>
+          </Tooltip>
+        </div>
       </div>
       <Command className="h-5/6 bg-background" shouldFilter={false}>
         <CommandInput

package/src/components/data-table/column-visibility-dropdown.tsx

@@ -59,6 +59,12 @@ export const ColumnVisibilityDropdown = <TData,>({
   const hiddenIds = userColumns
     .filter((column) => !column.getIsVisible())
     .map((column) => column.id);
+  const hideableIds = userColumns
+    .filter((column) => column.getCanHide())
+    .map((column) => column.id);
+  const visibleHideableCount = hideableIds.filter(
+    (id) => !hiddenIds.includes(id),
+  ).length;
 
   const applyHidden = (next: string[] | string | null) => {
     const hidden = new Set(Array.isArray(next) ? next : []);
@@ -127,6 +133,15 @@ export const ColumnVisibilityDropdown = <TData,>({
                   <EyeIcon className="w-3 h-3 mr-1.5" />
                   Show all
                 </CommandItem>
+                <CommandItem
+                  value="__hide_all__"
+                  disabled={visibleHideableCount === 0}
+                  onSelect={() => applyHidden(hideableIds)}
+                  className="cursor-pointer"
+                >
+                  <EyeOffIcon className="w-3 h-3 mr-1.5" />
+                  Hide all
+                </CommandItem>
                 <CommandSeparator />
               </>
             ) : (

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -31,7 +31,7 @@ import { cn } from "@/utils/cn";
 import { HideInKioskMode } from "../../kiosk-mode";
 import { ContributeSnippetButton } from "../components/contribute-snippet-button";
 import { usePanelOrientation, usePanelSection } from "./panel-context";
-import { getSnippetDisplay } from "./snippet-display";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 
 const extensions = [EditorView.lineWrapping];
 
@@ -188,7 +188,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
             return null;
           }
 
-          const { language, value } = getSnippetDisplay(code);
+          const { language, code: displayCode } = getReadonlyCodeDisplay(code);
 
           return (
             <div
@@ -216,7 +216,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
                   language={language}
                   className="cm border rounded overflow-hidden"
                   extensions={extensions}
-                  value={value}
+                  value={displayCode}
                   readOnly={true}
                 />
               </Suspense>

package/src/components/editor/code/readonly-python-code.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
 import CodeMirror, {
   EditorView,
@@ -11,6 +12,7 @@ import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { customPythonLanguageSupport } from "@/core/codemirror/language/languages/python";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
@@ -22,6 +24,18 @@ const pythonExtensions = [
   EditorView.lineWrapping,
 ];
 const sqlExtensions = [sql(), EditorView.lineWrapping];
+const markdownExtensions = [markdown(), EditorView.lineWrapping];
+
+function readonlyCodeExtensions(language: LanguageAdapterType) {
+  switch (language) {
+    case "sql":
+      return sqlExtensions;
+    case "markdown":
+      return markdownExtensions;
+    default:
+      return pythonExtensions;
+  }
+}
 
 /**
  * A readonly code component that can be used to display code in a readonly state.
@@ -42,7 +56,7 @@ export const ReadonlyCode = memo(
       showHideCode?: boolean;
       showCopyCode?: boolean;
       insertNewCell?: boolean;
-      language?: "python" | "sql";
+      language?: LanguageAdapterType;
     } & ReactCodeMirrorProps,
   ) => {
     const { theme } = useTheme();
@@ -84,7 +98,7 @@ export const ReadonlyCode = memo(
           theme={theme === "dark" ? "dark" : "light"}
           height="100%"
           editable={!hideCode}
-          extensions={language === "python" ? pythonExtensions : sqlExtensions}
+          extensions={readonlyCodeExtensions(language)}
           value={code}
           readOnly={true}
         />

package/src/components/editor/renderers/vertical-layout/__tests__/vertical-layout.test.ts

@@ -2,11 +2,7 @@
 /* oxlint-disable typescript/no-explicit-any */
 import { describe, expect, it } from "vitest";
 import type { OutputMessage } from "@/core/kernel/messages";
-import {
-  groupCellsByColumn,
-  readonlyDisplay,
-  shouldHideCode,
-} from "../vertical-layout";
+import { groupCellsByColumn, shouldHideCode } from "../vertical-layout";
 
 describe("groupCellsByColumn", () => {
   it("should group cells by column and maintain order", () => {
@@ -175,25 +171,3 @@ describe("shouldHideCode", () => {
     });
   });
 });
-
-describe("readonlyDisplay", () => {
-  it("unwraps SQL cells to their inner query and marks them as sql", () => {
-    const result = readonlyDisplay('my_table = mo.sql("""SELECT 1 AS id""")');
-    expect(result.language).toBe("sql");
-    expect(result.code).toBe("SELECT 1 AS id");
-  });
-
-  it("leaves plain Python cells untouched", () => {
-    const code = "x = 1 + 2";
-    const result = readonlyDisplay(code);
-    expect(result.language).toBe("python");
-    expect(result.code).toBe(code);
-  });
-
-  it("leaves non-SQL cells (e.g. markdown) unchanged as python", () => {
-    const code = 'mo.md("""## Heading""")';
-    const result = readonlyDisplay(code);
-    expect(result.language).toBe("python");
-    expect(result.code).toBe(code);
-  });
-});

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -10,7 +10,6 @@ import {
   Loader2Icon,
   MoreHorizontalIcon,
 } from "lucide-react";
-import { SQLParser } from "@marimo-team/smart-cells";
 import type React from "react";
 import { memo, useRef, useState } from "react";
 import { z } from "zod";
@@ -30,6 +29,7 @@ import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
@@ -386,7 +386,7 @@ const VerticalCell = memo(
       // Hide the code if it's pure markdown and there's an output, or if the code is empty
       const hideCode = shouldHideCode(code, output);
       // Only unwrap SQL when the code will actually be rendered.
-      const display = hideCode ? null : readonlyDisplay(code);
+      const display = hideCode ? null : getReadonlyCodeDisplay(code);
 
       return (
         <div
@@ -500,20 +500,3 @@ export function shouldHideCode(code: string, output: OutputMessage | null) {
   const hasOutput = output !== null && !isOutputEmpty(output);
   return (isPureMarkdown && hasOutput) || code.trim() === "";
 }
-
-const sqlParser = new SQLParser();
-
-/**
- * Unwrap SQL cells to their inner query so read-only views highlight them as
- * SQL instead of showing the raw `mo.sql(...)` wrapper.
- */
-export function readonlyDisplay(code: string): {
-  code: string;
-  language: "python" | "sql";
-} {
-  const trimmed = code.trim();
-  if (sqlParser.isSupported(trimmed)) {
-    return { code: sqlParser.transformIn(trimmed).code, language: "sql" };
-  }
-  return { code, language: "python" };
-}

package/src/components/slides/slide-cell-view.tsx

@@ -26,7 +26,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { ReadonlyCode } from "../editor/code/readonly-python-code";
-import { languageAdapterFromCode } from "@/core/codemirror/language/extension";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 
 type RuntimeCell = CellRuntimeState & CellData;
 
@@ -188,10 +188,7 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   const [userConfig] = useUserConfig();
   const cellOutputPosition = userConfig.display.cell_output;
 
-  const language = useMemo(() => {
-    const adapter = languageAdapterFromCode(cell.code.trim());
-    return adapter.type === "sql" ? "sql" : "python";
-  }, [cell.code]);
+  const display = useMemo(() => getReadonlyCodeDisplay(cell.code), [cell.code]);
 
   const output = (
     <CellOutputSlide
@@ -203,7 +200,11 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
 
   const editor = (
     <div className="marimo-cell">
-      <ReadonlyCode code={cell.code} language={language} showHideCode={false} />
+      <ReadonlyCode
+        code={display.code}
+        language={display.language}
+        showHideCode={false}
+      />
     </div>
   );
 

package/src/core/cells/__tests__/readonly-code-display.test.ts

@@ -0,0 +1,46 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { getReadonlyCodeDisplay } from "../readonly-code-display";
+
+describe("getReadonlyCodeDisplay", () => {
+  it("unwraps SQL cells to their inner query and marks them as sql", () => {
+    const result = getReadonlyCodeDisplay(
+      'my_table = mo.sql("""SELECT 1 AS id""")',
+    );
+    expect(result.language).toBe("sql");
+    expect(result.code).toBe("SELECT 1 AS id");
+  });
+
+  it("unwraps f-string SQL cells", () => {
+    const result = getReadonlyCodeDisplay(
+      'my_table = mo.sql(f"""SELECT 1 AS id""")',
+    );
+    expect(result.language).toBe("sql");
+    expect(result.code).toBe("SELECT 1 AS id");
+  });
+
+  it("leaves plain Python cells untouched", () => {
+    const code = "x = 1 + 2\nprint(x)";
+    const result = getReadonlyCodeDisplay(code);
+    expect(result.language).toBe("python");
+    expect(result.code).toBe(code);
+  });
+
+  it("unwraps markdown cells to their inner content", () => {
+    const result = getReadonlyCodeDisplay('mo.md("""## Heading""")');
+    expect(result.language).toBe("markdown");
+    expect(result.code).toBe("## Heading");
+  });
+
+  it("treats empty or whitespace-only code as python", () => {
+    expect(getReadonlyCodeDisplay("")).toEqual({
+      code: "",
+      language: "python",
+    });
+    expect(getReadonlyCodeDisplay("   \n\t  ")).toEqual({
+      code: "   \n\t  ",
+      language: "python",
+    });
+  });
+});

package/src/core/cells/readonly-code-display.ts

@@ -0,0 +1,35 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { MarkdownParser, SQLParser } from "@marimo-team/smart-cells";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
+
+export interface ReadonlyCodeDisplay {
+  code: string;
+  language: LanguageAdapterType;
+}
+
+const markdownParser = new MarkdownParser();
+const sqlParser = new SQLParser();
+
+/**
+ * Unwrap SQL and markdown cells so read-only views show inner content with the
+ * correct syntax highlighting instead of the raw Python wrapper.
+ */
+export function getReadonlyCodeDisplay(code: string): ReadonlyCodeDisplay {
+  const trimmed = code.trim();
+  if (!trimmed) {
+    return { code, language: "python" };
+  }
+
+  if (markdownParser.isSupported(trimmed)) {
+    return {
+      code: markdownParser.transformIn(trimmed).code,
+      language: "markdown",
+    };
+  }
+
+  if (sqlParser.isSupported(trimmed)) {
+    return { code: sqlParser.transformIn(trimmed).code, language: "sql" };
+  }
+  return { code, language: "python" };
+}

package/src/components/editor/chrome/panels/__tests__/snippet-display.test.ts

@@ -1,22 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { describe, expect, it } from "vitest";
-import { getSnippetDisplay } from "../snippet-display";
-
-describe("getSnippetDisplay", () => {
-  it("shows sql cells as the sql query", () => {
-    const { language, value } = getSnippetDisplay(
-      'df = mo.sql("""SELECT * FROM users LIMIT 5""")',
-    );
-    expect(language).toBe("sql");
-    expect(value).toBe("SELECT * FROM users LIMIT 5");
-  });
-
-  it("keeps plain python cells as python", () => {
-    const code = "x = 1 + 2\nprint(x)";
-    expect(getSnippetDisplay(code)).toEqual({
-      language: "python",
-      value: code,
-    });
-  });
-});