@marimo-team/islands 0.18.5-dev186 → 0.18.5-dev189

package/dist/{glide-data-editor-DWlk0mEY.js → glide-data-editor-BO13luOe.js}

@@ -10946,7 +10946,6 @@ let __tla = (async () => {
             allowedFillDirections: "vertical",
             onKeyDown: Vr,
             height: e.length > 10 ? 450 : void 0,
-            width: "100%",
             rowMarkers: {
               kind: "both"
             },

package/dist/main.js

@@ -30560,12 +30560,17 @@ ${c.sqlString}
   function isPanelHidden(e) {
     return !!(e.hidden || e.requiredCapability && !hasCapability(e.requiredCapability));
   }
-  require_compiler_runtime(), atomWithStorage("marimo:panel-layout", {
+  require_compiler_runtime();
+  const panelLayoutAtom = atomWithStorage("marimo:panel-layout", {
     sidebar: PANELS.filter((e) => !isPanelHidden(e) && e.defaultSection === "sidebar").map((e) => e.type),
     developerPanel: PANELS.filter((e) => !isPanelHidden(e) && e.defaultSection === "developer-panel").map((e) => e.type)
   }, jotaiJsonStorage, {
     getOnInit: true
   });
+  function resolvePanelLocation(e) {
+    let r = store.get(panelLayoutAtom);
+    return r.sidebar.includes(e) ? "sidebar" : r.developerPanel.includes(e) ? "developer-panel" : null;
+  }
   var KEY$4 = "marimo:sidebar", storage$1 = new ZodLocalStorage(object$1({
     selectedPanel: string$2().optional().transform((e) => e),
     isSidebarOpen: boolean$2(),
@@ -30581,16 +30586,30 @@ ${c.sqlString}
     };
   }
   var { reducer: reducer$4, createActions: createActions$3, valueAtom: chromeAtom, useActions: useActions$2 } = createReducerAndAtoms(() => storage$1.get(KEY$4), {
-    openApplication: (e, r) => ({
-      ...e,
-      selectedPanel: r,
-      isSidebarOpen: true
-    }),
-    toggleApplication: (e, r) => ({
-      ...e,
-      selectedPanel: r,
-      isSidebarOpen: e.isSidebarOpen ? e.selectedPanel !== r : true
-    }),
+    openApplication: (e, r) => {
+      let c = resolvePanelLocation(r);
+      return c === "sidebar" ? {
+        ...e,
+        selectedPanel: r,
+        isSidebarOpen: true
+      } : c === "developer-panel" ? {
+        ...e,
+        selectedDeveloperPanelTab: r,
+        isDeveloperPanelOpen: true
+      } : e;
+    },
+    toggleApplication: (e, r) => {
+      let c = resolvePanelLocation(r);
+      return c === "sidebar" ? {
+        ...e,
+        selectedPanel: r,
+        isSidebarOpen: e.isSidebarOpen ? e.selectedPanel !== r : true
+      } : c === "developer-panel" ? {
+        ...e,
+        selectedDeveloperPanelTab: r,
+        isDeveloperPanelOpen: e.isDeveloperPanelOpen ? e.selectedDeveloperPanelTab !== r : true
+      } : e;
+    },
     toggleSidebarPanel: (e) => ({
       ...e,
       isSidebarOpen: !e.isSidebarOpen
@@ -30606,15 +30625,6 @@ ${c.sqlString}
     setIsDeveloperPanelOpen: (e, r) => ({
       ...e,
       isDeveloperPanelOpen: r
-    }),
-    setSelectedDeveloperPanelTab: (e, r) => ({
-      ...e,
-      selectedDeveloperPanelTab: r
-    }),
-    openDeveloperPanelTab: (e, r) => ({
-      ...e,
-      isDeveloperPanelOpen: true,
-      selectedDeveloperPanelTab: r
     })
   }, [
     (e, r) => storage$1.set(KEY$4, r)
@@ -51361,7 +51371,7 @@ Database schema: ${c}`), (_a3 = r2.aiFix) == null ? void 0 : _a3.setAiCompletion
     if (r[2] !== v || r[3] !== d || r[4] !== h || r[5] !== f || r[6] !== c || r[7] !== y || r[8] !== _) {
       let e2 = c.filter(_temp7$2), z2 = c.filter(_temp8$1), G2 = c.filter(_temp9$1), q = c.filter(_temp0$1), LY = c.filter(_temp1$1), RY = c.filter(_temp10), zY = c.filter(_temp11), BY = c.filter(_temp12), VY = c.filter(_temp13), HY = c.filter(_temp14), UY = c.filter(_temp15), WY = c.filter(_temp16), GY = c.filter(_temp17), KY;
       r[15] === h ? KY = r[16] : (KY = () => {
-        h.openDeveloperPanelTab("scratchpad");
+        h.openApplication("scratchpad");
       }, r[15] = h, r[16] = KY);
       let qY = KY, JY = () => {
         let r2 = [];
@@ -51389,7 +51399,7 @@ Database schema: ${c}`), (_a3 = r2.aiFix) == null ? void 0 : _a3.setAiCompletion
                 size: "xs",
                 variant: "outline",
                 className: "mt-2 font-normal",
-                onClick: () => h.openDeveloperPanelTab("terminal"),
+                onClick: () => h.openApplication("terminal"),
                 children: [
                   (0, import_jsx_runtime.jsx)(Terminal, {
                     className: "h-3.5 w-3.5 mr-1.5"
@@ -72002,7 +72012,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
   function getVegaFieldTypes(e) {
     return !e || Object.keys(e).length === 0 ? "auto" : Objects.mapValues(e, (e2) => e2 === "date" || e2 === "time" ? "string" : e2 === "datetime" ? "date" : e2);
   }
-  var import_compiler_runtime$84 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-DWlk0mEY.js").then(async (m2) => {
+  var import_compiler_runtime$84 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-BO13luOe.js").then(async (m2) => {
     await m2.__tla;
     return m2;
   }));
@@ -101061,7 +101071,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.18.5-dev186"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.18.5-dev189"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

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

package/src/components/editor/chrome/state.ts

@@ -3,10 +3,11 @@
 import { useAtomValue } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { z } from "zod";
+import { store } from "@/core/state/jotai";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { ZodLocalStorage } from "@/utils/storage/typed";
-import type { PanelType } from "./types";
+import type { PanelSection, PanelType } from "./types";
 import { isPanelHidden, PANELS } from "./types";
 
 export interface ChromeState {
@@ -41,6 +42,20 @@ export const panelLayoutAtom = atomWithStorage<PanelLayout>(
   { getOnInit: true },
 );
 
+/**
+ * Resolve which section a panel belongs to based on current layout.
+ */
+function resolvePanelLocation(panelType: PanelType): PanelSection | null {
+  const layout = store.get(panelLayoutAtom);
+  if (layout.sidebar.includes(panelType)) {
+    return "sidebar";
+  }
+  if (layout.developerPanel.includes(panelType)) {
+    return "developer-panel";
+  }
+  return null;
+}
+
 const KEY = "marimo:sidebar";
 const storage = new ZodLocalStorage<ChromeState>(
   z.object({
@@ -76,20 +91,52 @@ const {
 } = createReducerAndAtoms(
   () => storage.get(KEY),
   {
-    openApplication: (state, selectedPanel: PanelType) => ({
-      ...state,
-      selectedPanel,
-      isSidebarOpen: true,
-    }),
-    toggleApplication: (state, selectedPanel: PanelType) => ({
-      ...state,
-      selectedPanel,
-      // If it was closed, open it
-      // If it was open, keep it open unless it was the same application
-      isSidebarOpen: state.isSidebarOpen
-        ? state.selectedPanel !== selectedPanel
-        : true,
-    }),
+    openApplication: (state, selectedPanel: PanelType) => {
+      const location = resolvePanelLocation(selectedPanel);
+      if (location === "sidebar") {
+        return {
+          ...state,
+          selectedPanel,
+          isSidebarOpen: true,
+        };
+      }
+      if (location === "developer-panel") {
+        return {
+          ...state,
+          selectedDeveloperPanelTab: selectedPanel,
+          isDeveloperPanelOpen: true,
+        };
+      }
+      // Panel not found in layout, no-op
+      return state;
+    },
+    toggleApplication: (state, selectedPanel: PanelType) => {
+      const location = resolvePanelLocation(selectedPanel);
+      if (location === "sidebar") {
+        return {
+          ...state,
+          selectedPanel,
+          // If it was closed, open it
+          // If it was open, keep it open unless it was the same application
+          isSidebarOpen: state.isSidebarOpen
+            ? state.selectedPanel !== selectedPanel
+            : true,
+        };
+      }
+      if (location === "developer-panel") {
+        return {
+          ...state,
+          selectedDeveloperPanelTab: selectedPanel,
+          // If it was closed, open it
+          // If it was open, keep it open unless it was the same tab
+          isDeveloperPanelOpen: state.isDeveloperPanelOpen
+            ? state.selectedDeveloperPanelTab !== selectedPanel
+            : true,
+        };
+      }
+      // Panel not found in layout, no-op
+      return state;
+    },
     toggleSidebarPanel: (state) => ({
       ...state,
       isSidebarOpen: !state.isSidebarOpen,
@@ -106,15 +153,6 @@ const {
       ...state,
       isDeveloperPanelOpen: isOpen,
     }),
-    setSelectedDeveloperPanelTab: (state, tab: PanelType) => ({
-      ...state,
-      selectedDeveloperPanelTab: tab,
-    }),
-    openDeveloperPanelTab: (state, tab: PanelType) => ({
-      ...state,
-      isDeveloperPanelOpen: true,
-      selectedDeveloperPanelTab: tab,
-    }),
   },
   [(_prevState, newState) => storage.set(KEY, newState)],
 );

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -75,12 +75,8 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     selectedPanel,
     selectedDeveloperPanelTab,
   } = useChromeState();
-  const {
-    setIsSidebarOpen,
-    setIsDeveloperPanelOpen,
-    setSelectedDeveloperPanelTab,
-    openApplication,
-  } = useChromeActions();
+  const { setIsSidebarOpen, setIsDeveloperPanelOpen, openApplication } =
+    useChromeActions();
   const sidebarRef = React.useRef<ImperativePanelHandle>(null);
   const developerPanelRef = React.useRef<ImperativePanelHandle>(null);
   const { aiPanelTab, setAiPanelTab } = useAiPanelTab();
@@ -123,7 +119,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Select the dropped item in developer panel
-    setSelectedDeveloperPanelTab(item.type);
+    openApplication(item.type);
   };
 
   // Get panels available for developer panel context menu
@@ -412,7 +408,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             ariaLabel="Developer panel tabs"
             className="flex flex-row gap-1"
             minItems={0}
-            onAction={(panel) => setSelectedDeveloperPanelTab(panel.type)}
+            onAction={(panel) => openApplication(panel.type)}
             renderItem={(panel) => (
               <div
                 className={cn(

package/src/components/editor/chrome/wrapper/footer-items/backend-status.tsx

@@ -125,7 +125,7 @@ export const BackendConnectionStatus: React.FC = () => {
     if (isAppNotStarted(connection)) {
       void connectToRuntime();
     } else {
-      void refetch();
+      refetch();
     }
   };
 

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -23,10 +23,8 @@ import { RuntimeSettings } from "./footer-items/runtime-settings";
 import { useSetDependencyPanelTab } from "./useDependencyPanelTab";
 
 export const Footer: React.FC = () => {
-  const { isDeveloperPanelOpen, isSidebarOpen, selectedPanel } =
-    useChromeState();
-  const { toggleDeveloperPanel, openApplication, setIsSidebarOpen } =
-    useChromeActions();
+  const { isDeveloperPanelOpen } = useChromeState();
+  const { toggleDeveloperPanel, toggleApplication } = useChromeActions();
   const setDependencyPanelTab = useSetDependencyPanelTab();
 
   const errorCount = useAtomValue(cellErrorCount);
@@ -42,7 +40,7 @@ export const Footer: React.FC = () => {
   const warningCount = 0;
 
   useHotkey("global.toggleTerminal", () => {
-    toggleDeveloperPanel();
+    toggleApplication("terminal");
   });
 
   useHotkey("global.togglePanel", () => {
@@ -50,14 +48,8 @@ export const Footer: React.FC = () => {
   });
 
   useHotkey("global.toggleMinimap", () => {
-    // If already on dependencies panel with minimap tab, close the sidebar
-    if (isSidebarOpen && selectedPanel === "dependencies") {
-      setIsSidebarOpen(false);
-    } else {
-      // Open sidebar with dependencies panel and switch to minimap tab
-      openApplication("dependencies");
-      setDependencyPanelTab("minimap");
-    }
+    toggleApplication("dependencies");
+    setDependencyPanelTab("minimap");
   });
 
   return (

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -20,8 +20,7 @@ import {
 
 export const Sidebar: React.FC = () => {
   const { selectedPanel, selectedDeveloperPanelTab } = useChromeState();
-  const { toggleApplication, setSelectedDeveloperPanelTab } =
-    useChromeActions();
+  const { toggleApplication, openApplication } = useChromeActions();
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
 
   const renderIcon = ({ Icon }: PanelDescriptor, className?: string) => {
@@ -73,7 +72,7 @@ export const Sidebar: React.FC = () => {
           (id) => id !== item.type,
         );
         if (remainingDevPanels.length > 0) {
-          setSelectedDeveloperPanelTab(remainingDevPanels[0]);
+          openApplication(remainingDevPanels[0]);
         }
       }
     }

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -142,7 +142,7 @@ export const MarimoErrorOutput = ({
   );
 
   const openScratchpad = () => {
-    chromeActions.openDeveloperPanelTab("scratchpad");
+    chromeActions.openApplication("scratchpad");
   };
 
   const renderMessages = () => {
@@ -186,7 +186,7 @@ export const MarimoErrorOutput = ({
               size="xs"
               variant="outline"
               className="mt-2 font-normal"
-              onClick={() => chromeActions.openDeveloperPanelTab("terminal")}
+              onClick={() => chromeActions.openApplication("terminal")}
             >
               <TerminalIcon className="h-3.5 w-3.5 mr-1.5" />
               <span>Open terminal</span>

package/src/components/terminal/hooks.ts

@@ -25,11 +25,11 @@ import { useTerminalActions } from "./state";
  */
 export function useTerminalCommands() {
   const { addCommand } = useTerminalActions();
-  const { openDeveloperPanelTab } = useChromeActions();
+  const { openApplication } = useChromeActions();
 
   const sendCommand = (text: string) => {
     // First, ensure the terminal is open
-    openDeveloperPanelTab("terminal");
+    openApplication("terminal");
 
     // Add the command to the queue
     addCommand(text);

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -616,7 +616,6 @@ export const GlideDataEditor = <T,>({
           allowedFillDirections="vertical" // We can support all directions, but we need to handle datatype logic
           onKeyDown={onKeyDown}
           height={data.length > 10 ? 450 : undefined}
-          width={"100%"}
           rowMarkers={{
             kind: "both",
           }}