@marimo-team/islands 0.23.14-dev17 → 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-BFhE2zHY.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, 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-Cb6UrZYv.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";

package/package.json

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

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,
-    });
-  });
-});

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

@@ -1,27 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { SQLParser } from "@marimo-team/smart-cells";
-
-export type SnippetLanguage = "python" | "sql";
-
-export interface SnippetDisplay {
-  language: SnippetLanguage;
-  value: string;
-}
-
-const sqlParser = new SQLParser();
-
-/**
- * Decide how a snippet's code should be shown in the panel.
- *
- * SQL cells are stored as python `mo.sql(...)`. Unwrap the inner query and
- * highlight it as SQL, matching how the cell renders once the snippet is
- * inserted. Everything else stays python.
- */
-export function getSnippetDisplay(code: string): SnippetDisplay {
-  if (sqlParser.isSupported(code)) {
-    const { code: query } = sqlParser.transformIn(code);
-    return { language: "sql", value: query };
-  }
-  return { language: "python", value: code };
-}