@marimo-team/islands 0.23.14-dev11 → 0.23.14-dev14

package/dist/{process-output-Dt3icftd.js → process-output-2FbS8KgW.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-MqcD07Bw.js";
+import { at as parseHtmlContent, it as ansiToPlainText } from "./html-to-image-DcTkcjmm.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-BbZ44Wvb.js → reveal-component-DXelFX7A.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-MqcD07Bw.js";
+import { lt as kioskModeAtom } from "./html-to-image-DcTkcjmm.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-D9_pdpn0.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-BWxpdorj.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-dev11",
+  "version": "0.23.14-dev14",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -2,7 +2,11 @@
 /* oxlint-disable typescript/no-explicit-any */
 import { describe, expect, it } from "vitest";
 import type { OutputMessage } from "@/core/kernel/messages";
-import { groupCellsByColumn, shouldHideCode } from "../vertical-layout";
+import {
+  groupCellsByColumn,
+  readonlyDisplay,
+  shouldHideCode,
+} from "../vertical-layout";
 
 describe("groupCellsByColumn", () => {
   it("should group cells by column and maintain order", () => {
@@ -171,3 +175,25 @@ 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,6 +10,7 @@ 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";
@@ -384,6 +385,8 @@ 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);
 
       return (
         <div
@@ -393,11 +396,12 @@ const VerticalCell = memo(
           {...cellDomProps(cellId, name)}
         >
           {cellOutputArea === "above" && outputArea}
-          {!hideCode && (
+          {display && (
             <div className="tray">
               <ReadonlyCode
                 initiallyHideCode={config.hide_code || kiosk}
-                code={code}
+                code={display.code}
+                language={display.language}
               />
             </div>
           )}
@@ -496,3 +500,20 @@ 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" };
+}