@marimo-team/islands 0.21.1-dev15 → 0.21.1-dev18

package/dist/{tooltip-SPkubVH3.js → tooltip-CKG75XQa.js}

@@ -1,9 +1,9 @@
 import { s as __toESM } 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 { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-WIWVvdBh.js";
-import { m as useComposedRefs, y as cn } from "./button-DQpBib29.js";
-import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-Dk6JxauT.js";
+import { a as Content, i as Arrow, o as Root2, r as Anchor, s as createPopperScope, t as Root } from "./dist-C0Rnbr-_.js";
+import { m as useComposedRefs, y as cn } from "./button-BKkuUpZh.js";
+import { _t as createContextScope, at as useControllableState, ct as useId, ft as Primitive, ht as createSlottable, it as StyleNamespace, nt as withSmartCollisionBoundary, ot as Presence, st as Portal, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-BBPQRrDo.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (t) => {
   let { __scopeTooltip: k, delayDuration: A = DEFAULT_DELAY_DURATION, skipDelayDuration: j = 300, disableHoverableContent: M = false, children: N } = t, P = import_react.useRef(true), F = import_react.useRef(false), I = import_react.useRef(0);

package/dist/{types-0FB-N7AA.js → types-CGc7peZV.js}

@@ -5,17 +5,17 @@ var _a;
 import { 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 { a as Content, i as Arrow, l as createLucideIcon, o as Root2$1, r as Anchor, s as createPopperScope } from "./dist-WIWVvdBh.js";
-import { t as Check } from "./check-DpqPQmzz.js";
-import { A as $a916eb452884faea$export$b7a616150fdb9f44, C as useDirection, F as $b5e257d569688ac6$export$619500959fc48b26, I as X, L as ChevronUp, M as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronDown, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, k as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants } from "./label-BLDcDYdI.js";
+import { a as Content, i as Arrow, l as createLucideIcon, o as Root2$1, r as Anchor, s as createPopperScope } from "./dist-C0Rnbr-_.js";
+import { t as Check } from "./check-Diwc5emq.js";
+import { A as $a916eb452884faea$export$b7a616150fdb9f44, C as useDirection, F as $b5e257d569688ac6$export$619500959fc48b26, I as X, L as ChevronUp, M as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as ChevronDown, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, k as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants } from "./label-BbpGrh4j.js";
 import { n as clsx_default } from "./clsx-D2KVTYnW.js";
-import { g as Logger, h as Events, m as useComposedRefs, p as composeRefs, t as Button, y as cn } from "./button-DQpBib29.js";
-import { _t as createContextScope, at as useControllableState, ct as useId, dt as useCallbackRef, et as MAX_HEIGHT_OFFSET, ft as Primitive, i as useFocusGuards, it as StyleNamespace, mt as createSlot, n as hideOthers, nt as withSmartCollisionBoundary, ot as Presence, pt as dispatchDiscreteCustomEvent, r as FocusScope, st as Portal, t as Combination_default, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-Dk6JxauT.js";
+import { g as Logger, h as Events, m as useComposedRefs, p as composeRefs, t as Button, y as cn } from "./button-BKkuUpZh.js";
+import { _t as createContextScope, at as useControllableState, ct as useId, dt as useCallbackRef, et as MAX_HEIGHT_OFFSET, ft as Primitive, i as useFocusGuards, it as StyleNamespace, mt as createSlot, n as hideOthers, nt as withSmartCollisionBoundary, ot as Presence, pt as dispatchDiscreteCustomEvent, r as FocusScope, st as Portal, t as Combination_default, tt as withFullScreenAsRoot, ut as DismissableLayer, vt as composeEventHandlers } from "./Combination-BBPQRrDo.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-CqtLRVZP.js";
 import { t as toString_default } from "./toString-DbIAWQpF.js";
 import { i as debounce_default, n as Constants } from "./constants-CytQ_3LM.js";
-import { C as useEvent_default } from "./useTheme-D0rdoMBF.js";
+import { C as useEvent_default } from "./useTheme-CPybHVFN.js";
 import { t as memoizeLastValue } from "./once-BqS42WgZ.js";
 var ChevronRight = createLucideIcon("chevron-right", [["path", {
   d: "m9 18 6-6-6-6",

package/dist/{useAsyncData-D7-oahg5.js → useAsyncData-CEjJxwFB.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } 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 { C as useEvent_default } from "./useTheme-D0rdoMBF.js";
+import { C as useEvent_default } from "./useTheme-CPybHVFN.js";
 import { t as invariant } from "./invariant-D9QLJ4SZ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-CJr2MRe6.js → useDeepCompareMemoize-BWUwfh37.js}

@@ -4,12 +4,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { 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 { l as createLucideIcon } from "./dist-WIWVvdBh.js";
-import { a as cva, g as Logger, y as cn } from "./button-DQpBib29.js";
+import { l as createLucideIcon } from "./dist-C0Rnbr-_.js";
+import { a as cva, g as Logger, y as cn } from "./button-BKkuUpZh.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { r as KnownQueryParams } from "./constants-CytQ_3LM.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-D0rdoMBF.js";
-import { i as tableFromIPC } from "./loader-V1UqqlAy.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-CPybHVFN.js";
+import { i as tableFromIPC } from "./loader-CABJs6GU.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{useIframeCapabilities-DFGZKWkO.js → useIframeCapabilities-OQaMKgZl.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } 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 { g as Logger } from "./button-DQpBib29.js";
+import { g as Logger } from "./button-BKkuUpZh.js";
 import { n as once } from "./once-BqS42WgZ.js";
 function testStorage(e) {
   try {

package/dist/{useTheme-D0rdoMBF.js → useTheme-CPybHVFN.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } 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 { g as Logger, s as OverridingHotkeyProvider, u as resolvePlatform } from "./button-DQpBib29.js";
-import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-Dk6JxauT.js";
+import { g as Logger, s as OverridingHotkeyProvider, u as resolvePlatform } from "./button-BKkuUpZh.js";
+import { B as record, H as string, L as number, O as array, P as looseObject, R as object, W as union, k as boolean, w as _enum } from "./Combination-BBPQRrDo.js";
 import { t as _baseIsEqual_default } from "./_baseIsEqual-CvgsjYoW.js";
 import { t as merge_default } from "./merge-NuyC7LN7.js";
 function isEqual(e, A) {

package/dist/{vega-component-Cq-KtS_2.js → vega-component-CuPTCRp5.js}

@@ -1,19 +1,19 @@
 import { s as __toESM } 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 { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CJr2MRe6.js";
-import { d as Objects, g as Logger, h as Events, y as cn } from "./button-DQpBib29.js";
-import "./Combination-Dk6JxauT.js";
+import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BWUwfh37.js";
+import { d as Objects, g as Logger, h as Events, y as cn } from "./button-BKkuUpZh.js";
+import "./Combination-BBPQRrDo.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import "./react-dom-CqtLRVZP.js";
-import { t as Tooltip } from "./tooltip-SPkubVH3.js";
+import { t as Tooltip } from "./tooltip-CKG75XQa.js";
 import { i as debounce_default } from "./constants-CytQ_3LM.js";
-import { C as useEvent_default, n as useTheme } from "./useTheme-D0rdoMBF.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-V1UqqlAy.js";
+import { C as useEvent_default, n as useTheme } from "./useTheme-CPybHVFN.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-CABJs6GU.js";
 import { t as uniq_default } from "./uniq-H2E5nMLq.js";
-import { n as ErrorBanner } from "./error-banner-BctofTCP.js";
+import { n as ErrorBanner } from "./error-banner-Dmi5ujan.js";
 import { n as formats } from "./vega-loader.browser-CQ-lnUkI.js";
-import { t as useAsyncData } from "./useAsyncData-D7-oahg5.js";
+import { t as useAsyncData } from "./useAsyncData-CEjJxwFB.js";
 import { t as j } from "./react-vega-C6kwcd86.js";
 import "./defaultLocale-Bklbu-Tp.js";
 import "./defaultLocale-CfQ4kBaV.js";

package/package.json

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

package/src/components/editor/actions/useCellActionButton.tsx

@@ -41,7 +41,10 @@ import { hasOnlyOneCellAtom, useCellActions } from "@/core/cells/cells";
 import { type CellId, SETUP_CELL_ID } from "@/core/cells/ids";
 import type { CellData } from "@/core/cells/types";
 import { formatEditorViews } from "@/core/codemirror/format";
-import { toggleToLanguage } from "@/core/codemirror/language/commands";
+import {
+  getCurrentLanguageAdapter,
+  toggleToLanguage,
+} from "@/core/codemirror/language/commands";
 import { switchLanguage } from "@/core/codemirror/language/extension";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
@@ -235,35 +238,41 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
         },
         hidden: isSetupCell,
       },
-      {
-        icon: <DatabaseIcon size={13} strokeWidth={1.5} />,
-        label: "Convert to SQL",
-        handle: () => {
-          const editorView = getEditorView();
-          if (!editorView) {
-            return;
+      // We need to check this here because the user may have toggled the language
+      getCurrentLanguageAdapter(getEditorView()) === "sql"
+        ? {
+            icon: <PythonIcon />,
+            label: "View as Python",
+            hotkey: "cell.viewAsSQL",
+            handle: () => {
+              const editorView = getEditorView();
+              if (!editorView) {
+                return;
+              }
+              toggleToLanguage(editorView, "python", { force: true });
+            },
+            hidden: isSetupCell,
           }
-          maybeAddMarimoImport({ autoInstantiate, createNewCell: createCell });
-          switchLanguage(editorView, {
-            language: "sql",
-            keepCodeAsIs: false,
-          });
-        },
-        hidden: isSetupCell,
-      },
-      {
-        icon: <PythonIcon />,
-        label: "Toggle as Python",
-        handle: () => {
-          const editorView = getEditorView();
-          if (!editorView) {
-            return;
-          }
-          maybeAddMarimoImport({ autoInstantiate, createNewCell: createCell });
-          toggleToLanguage(editorView, "python", { force: true });
-        },
-        hidden: isSetupCell,
-      },
+        : {
+            icon: <DatabaseIcon size={13} strokeWidth={1.5} />,
+            label: "Convert to SQL",
+            hotkey: "cell.viewAsSQL",
+            handle: () => {
+              const editorView = getEditorView();
+              if (!editorView) {
+                return;
+              }
+              maybeAddMarimoImport({
+                autoInstantiate,
+                createNewCell: createCell,
+              });
+              switchLanguage(editorView, {
+                language: "sql",
+                keepCodeAsIs: false,
+              });
+            },
+            hidden: isSetupCell,
+          },
     ],
 
     // Movement

package/src/components/editor/cell/code/cell-editor.tsx

@@ -163,6 +163,13 @@ const CellEditorInternal = ({
     }
   });
 
+  const afterToggleSQL = useEvent(() => {
+    maybeAddMarimoImport({
+      autoInstantiate,
+      createNewCell: cellActions.createNewCell,
+    });
+  });
+
   const aiEnabled = isAiEnabled(userConfig);
 
   const extensions = useMemo(() => {
@@ -173,6 +180,7 @@ const CellEditorInternal = ({
       cellActions: {
         ...cellActions,
         afterToggleMarkdown,
+        afterToggleSQL,
         onRun: handleRunCell,
         deleteCell: handleDelete,
         saveNotebook: saveOrNameNotebook,
@@ -267,6 +275,7 @@ const CellEditorInternal = ({
     handleRunCell,
     setAiCompletionCell,
     afterToggleMarkdown,
+    afterToggleSQL,
     setLanguageAdapter,
     showHiddenCode,
     saveOrNameNotebook,

package/src/core/codemirror/__tests__/setup.test.ts

@@ -45,6 +45,7 @@ function getOpts() {
       onRun: namedFunction("onRun"),
       deleteCell: namedFunction("deleteCell"),
       afterToggleMarkdown: namedFunction("afterToggleMarkdown"),
+      afterToggleSQL: namedFunction("afterToggleSQL"),
     } as unknown as CodemirrorCellActions,
     completionConfig: {
       activate_on_typing: false,

package/src/core/codemirror/cells/state.ts

@@ -11,6 +11,7 @@ export interface CodemirrorCellActions extends CellActions {
   onRun: () => void;
   deleteCell: () => void;
   afterToggleMarkdown: () => void;
+  afterToggleSQL: () => void;
   saveNotebook: () => void;
 }
 

package/src/core/codemirror/extensions.ts

@@ -42,6 +42,26 @@ export function formatKeymapExtension(hotkeys: HotkeyProvider) {
           actions.afterToggleMarkdown();
         }
 
+        return response !== false;
+      },
+    },
+    {
+      key: hotkeys.getHotkey("cell.viewAsSQL").key,
+      preventDefault: true,
+      run: (ev) => {
+        const currentLanguage = getCurrentLanguageAdapter(ev);
+        const destinationLanguage =
+          currentLanguage === "sql" ? "python" : "sql";
+
+        const response = toggleToLanguage(ev, destinationLanguage, {
+          force: true,
+        });
+
+        if (response === "sql") {
+          const actions = ev.state.facet(cellActionsState);
+          actions.afterToggleSQL();
+        }
+
         return response !== false;
       },
     },

package/src/core/hotkeys/hotkeys.ts

@@ -142,6 +142,14 @@ const DEFAULT_HOT_KEY = {
     group: "Editing",
     key: "Mod-Shift-m",
   },
+  "cell.viewAsSQL": {
+    name: "Toggle SQL",
+    group: "Editing",
+    key: {
+      windows: "Alt-Shift-l",
+      main: "Mod-Shift-l",
+    },
+  },
   "cell.complete": {
     name: "Code completion",
     group: "Editing",

package/src/css/md.css

@@ -41,6 +41,10 @@
   font-family: var(--heading-font);
 }
 
+.markdown hr {
+  margin-block: 0.5rem;
+}
+
 .markdown a {
   cursor: pointer;
   text-decoration: inherit;