@marimo-team/islands 0.18.5-dev168 → 0.18.5-dev171

package/dist/{types-CJDsYooe.js → types-DEmfj_i8.js}

@@ -5,15 +5,15 @@ var _a;
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
-import { D as dispatchDiscreteCustomEvent, E as Primitive, M as composeEventHandlers, N as createLucideIcon, O as createSlot, S as useId, T as useCallbackRef, _ as Arrow, b as createPopperScope, c as withSmartCollisionBoundary, g as Anchor, h as Portal, i as useFocusGuards, j as createContextScope, m as Presence, n as hideOthers, o as MAX_HEIGHT_OFFSET, p as useControllableState, r as FocusScope, s as withFullScreenAsRoot, t as Combination_default, u as StyleNamespace, v as Content, w as DismissableLayer, y as Root2$1 } from "./Combination-CoheOLQf.js";
-import { t as Check } from "./check-Crt1N6cj.js";
-import { B as ChevronDown, C as useDirection, L as $b5e257d569688ac6$export$619500959fc48b26, M as $a916eb452884faea$export$b7a616150fdb9f44, N as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, P as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as X, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants, z as ChevronUp } from "./label-C3TPGdQ0.js";
+import { D as dispatchDiscreteCustomEvent, E as Primitive, M as composeEventHandlers, N as createLucideIcon, O as createSlot, S as useId, T as useCallbackRef, _ as Arrow, b as createPopperScope, c as withSmartCollisionBoundary, g as Anchor, h as Portal, i as useFocusGuards, j as createContextScope, m as Presence, n as hideOthers, o as MAX_HEIGHT_OFFSET, p as useControllableState, r as FocusScope, s as withFullScreenAsRoot, t as Combination_default, u as StyleNamespace, v as Content, w as DismissableLayer, y as Root2$1 } from "./Combination-33P1MEPK.js";
+import { t as Check } from "./check-DDykH_Yi.js";
+import { B as ChevronDown, C as useDirection, L as $b5e257d569688ac6$export$619500959fc48b26, M as $a916eb452884faea$export$b7a616150fdb9f44, N as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5, P as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, R as X, _ as menuItemVariants, b as menuSubTriggerVariants, g as menuControlVariants, h as menuControlCheckVariants, j as upperFirst_default, m as menuContentCommon, v as menuLabelVariants, w as createCollection, y as menuSeparatorVariants, z as ChevronUp } from "./label-oKuiQuiM.js";
 import { n as clsx_default } from "./clsx-D2KVTYnW.js";
-import { c as useComposedRefs, l as Events, s as composeRefs, t as Button, u as cn } from "./button-BE_o5IpN.js";
-import { s as Logger } from "./hotkeys-BUVs9ecz.js";
+import { c as useComposedRefs, l as Events, s as composeRefs, t as Button, u as cn } from "./button-BlF-78eJ.js";
+import { s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-DJW8xUDg.js";
-import { h as useEvent_default } from "./useTheme-DLCDAdUO.js";
+import { h as useEvent_default } from "./useTheme-DdLjooMf.js";
 import { t as toString_default } from "./toString-C4TLO6FA.js";
 import { i as debounce_default, n as Constants } from "./constants-DuN_eoAL.js";
 import { t as memoizeLastValue } from "./once-C-NkXwWJ.js";

package/dist/{useAsyncData-CaouoMw5.js → useAsyncData-BGpae_uu.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
-import { h as useEvent_default } from "./useTheme-DLCDAdUO.js";
+import { h as useEvent_default } from "./useTheme-DdLjooMf.js";
 import { t as invariant } from "./invariant-BW72tHBT.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-B01JaKw2.js → useDeepCompareMemoize-D3uOrgqD.js}

@@ -4,13 +4,13 @@ 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-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
-import { N as createLucideIcon } from "./Combination-CoheOLQf.js";
-import { a as cva, u as cn } from "./button-BE_o5IpN.js";
-import { s as Logger } from "./hotkeys-BUVs9ecz.js";
+import { N as createLucideIcon } from "./Combination-33P1MEPK.js";
+import { a as cva, u as cn } from "./button-BlF-78eJ.js";
+import { s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
-import { f as waitFor, p as isIslands, u as store, x as atom } from "./useTheme-DLCDAdUO.js";
+import { f as waitFor, p as isIslands, u as store, x as atom } from "./useTheme-DdLjooMf.js";
 import { r as KnownQueryParams } from "./constants-DuN_eoAL.js";
-import { i as tableFromIPC } from "./loader-Cn9P1Cko.js";
+import { i as tableFromIPC } from "./loader-DH7xXi-E.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{useIframeCapabilities-oYhPeWtR.js → useIframeCapabilities-BsIPDupA.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
-import { s as Logger } from "./hotkeys-BUVs9ecz.js";
+import { s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { n as once } from "./once-C-NkXwWJ.js";
 function testStorage(e) {
   try {

package/dist/{useTheme-DLCDAdUO.js → useTheme-DdLjooMf.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
-import { a as resolvePlatform, n as OverridingHotkeyProvider, s as Logger } from "./hotkeys-BUVs9ecz.js";
+import { a as resolvePlatform, n as OverridingHotkeyProvider, s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { t as merge_default } from "./merge-Dl1bfxsj.js";
 import { t as _baseIsEqual_default } from "./_baseIsEqual-BygTGUZ4.js";
 import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-LbXVxiL9.js";

package/dist/{vega-component-D36WQQq8.js → vega-component-C1FaaACt.js}

@@ -1,19 +1,19 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DdA8EBol.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DHFVbq0b.js";
-import "./Combination-CoheOLQf.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-B01JaKw2.js";
-import { l as Events } from "./button-BE_o5IpN.js";
-import { o as Objects, s as Logger } from "./hotkeys-BUVs9ecz.js";
+import "./Combination-33P1MEPK.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-D3uOrgqD.js";
+import { l as Events } from "./button-BlF-78eJ.js";
+import { o as Objects, s as Logger } from "./hotkeys-C4e3s3sJ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import "./react-dom-DJW8xUDg.js";
-import { l as Tooltip, n as ErrorBanner } from "./error-banner-DyX88bLT.js";
-import { h as useEvent_default, n as useTheme } from "./useTheme-DLCDAdUO.js";
+import { l as Tooltip, n as ErrorBanner } from "./error-banner-UH0Nxilf.js";
+import { h as useEvent_default, n as useTheme } from "./useTheme-DdLjooMf.js";
 import { t as _baseUniq_default } from "./_baseUniq-BUGws47x.js";
 import { i as debounce_default } from "./constants-DuN_eoAL.js";
-import { a as tooltipHandler, n as vegaLoadData } from "./loader-Cn9P1Cko.js";
+import { a as tooltipHandler, n as vegaLoadData } from "./loader-DH7xXi-E.js";
 import { n as formats } from "./vega-loader.browser-nTy1NZD3.js";
-import { t as useAsyncData } from "./useAsyncData-CaouoMw5.js";
+import { t as useAsyncData } from "./useAsyncData-BGpae_uu.js";
 import { t as j } from "./react-vega-z40f-dXy.js";
 import "./defaultLocale-DZtxSCkJ.js";
 import "./defaultLocale-DMZFeDB8.js";

package/package.json

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

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

@@ -269,7 +269,7 @@ export function useNotebookActions() {
       label: "Helper panel",
       redundant: true,
       handle: NOOP_HANDLER,
-      dropdown: PANELS.flatMap(({ id, Icon, hidden }) => {
+      dropdown: PANELS.flatMap(({ type: id, Icon, hidden }) => {
         if (hidden) {
           return [];
         }

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

@@ -0,0 +1,34 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { createContext, useContext } from "react";
+import { invariant } from "@/utils/invariant";
+
+export type PanelSection = "sidebar" | "developer-panel";
+
+const PanelSectionContext = createContext<PanelSection | null>(null);
+
+export const PanelSectionProvider = PanelSectionContext.Provider;
+
+/**
+ * Hook to get the current panel section context.
+ * Returns "sidebar" or "developer-panel" depending on where the panel is rendered.
+ * Throws if used outside of a panel context.
+ */
+export function usePanelSection(): PanelSection {
+  const section = useContext(PanelSectionContext);
+  invariant(
+    section !== null,
+    "usePanelSection must be used within a PanelSectionProvider",
+  );
+  return section;
+}
+
+/**
+ * Hook to get the preferred orientation based on the panel section.
+ * - Sidebar panels should use vertical layouts (stacked)
+ * - Developer panel should use horizontal layouts (side-by-side)
+ */
+export function usePanelOrientation(): "horizontal" | "vertical" {
+  const section = usePanelSection();
+  return section === "sidebar" ? "vertical" : "horizontal";
+}

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

@@ -6,16 +6,41 @@ import { z } from "zod";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { ZodLocalStorage } from "@/utils/storage/typed";
-import type { DeveloperPanelTabType, PanelType } from "./types";
+import type { PanelType } from "./types";
 import { PANELS } from "./types";
 
 export interface ChromeState {
   selectedPanel: PanelType | undefined;
   isSidebarOpen: boolean;
   isDeveloperPanelOpen: boolean;
-  selectedDeveloperPanelTab: DeveloperPanelTabType;
+  selectedDeveloperPanelTab: PanelType;
 }
 
+/**
+ * Layout configuration for panels in sidebar and developer panel.
+ * Each array contains the ordered list of visible panel IDs for that section.
+ */
+export interface PanelLayout {
+  sidebar: PanelType[];
+  developerPanel: PanelType[];
+}
+
+const DEFAULT_PANEL_LAYOUT: PanelLayout = {
+  sidebar: PANELS.filter(
+    (p) => !p.hidden && p.defaultSection === "sidebar",
+  ).map((p) => p.type),
+  developerPanel: PANELS.filter(
+    (p) => !p.hidden && p.defaultSection === "developer-panel",
+  ).map((p) => p.type),
+};
+
+export const panelLayoutAtom = atomWithStorage<PanelLayout>(
+  "marimo:panel-layout",
+  DEFAULT_PANEL_LAYOUT,
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
+
 const KEY = "marimo:sidebar";
 const storage = new ZodLocalStorage<ChromeState>(
   z.object({
@@ -29,7 +54,7 @@ const storage = new ZodLocalStorage<ChromeState>(
       .string()
       .optional()
       .default("terminal")
-      .transform((v) => v as DeveloperPanelTabType),
+      .transform((v) => v as PanelType),
   }),
   initialState,
 );
@@ -81,11 +106,11 @@ const {
       ...state,
       isDeveloperPanelOpen: isOpen,
     }),
-    setSelectedDeveloperPanelTab: (state, tab: DeveloperPanelTabType) => ({
+    setSelectedDeveloperPanelTab: (state, tab: PanelType) => ({
       ...state,
       selectedDeveloperPanelTab: tab,
     }),
-    openDeveloperPanelTab: (state, tab: DeveloperPanelTabType) => ({
+    openDeveloperPanelTab: (state, tab: PanelType) => ({
       ...state,
       isDeveloperPanelOpen: true,
       selectedDeveloperPanelTab: tab,
@@ -119,13 +144,3 @@ export const exportedForTesting = {
   createActions,
   initialState,
 };
-
-// TODO: probably merge this with the chrome state
-export const sidebarOrderAtom = atomWithStorage<PanelType[]>(
-  "marimo:sidebar-order",
-  PANELS.filter(
-    (p) => !p.hidden && !p.defaultHidden && p.position === "sidebar",
-  ).map((p) => p.id),
-  jotaiJsonStorage,
-  { getOnInit: true },
-);

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

@@ -21,7 +21,11 @@ import {
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { isWasm } from "@/core/wasm/utils";
 
+/**
+ * Unified panel ID for all panels in sidebar and developer panel
+ */
 export type PanelType =
+  // Sidebar defaults
   | "files"
   | "variables"
   | "outline"
@@ -30,160 +34,146 @@ export type PanelType =
   | "documentation"
   | "snippets"
   | "ai"
+  // Developer panel defaults
+  | "errors"
+  | "scratchpad"
+  | "tracing"
+  | "secrets"
+  | "logs"
+  | "terminal"
   | "cache";
 
+export type PanelSection = "sidebar" | "developer-panel";
+
 export interface PanelDescriptor {
-  id: PanelType;
+  type: PanelType;
   Icon: LucideIcon;
+  /** Short label for developer panel tabs */
+  label: string;
+  /** Descriptive tooltip for sidebar icons */
+  tooltip: string;
   /** If true, the panel is completely unavailable */
   hidden?: boolean;
-  /** If true, the panel is available but not shown by default */
-  defaultHidden?: boolean;
-  tooltip: string;
-  position: "sidebar" | "footer";
+  /** Which section this panel belongs to by default */
+  defaultSection: PanelSection;
 }
 
-/* Panels are ordered in roughly decreasing order of importance as well as
- * logically grouped.
- *
- * 1. Must-have panels first.
- * 2. Panels that can add cells to the editor.
- * 3. Nice-to-have observability panels.
+/**
+ * All panels in the application.
+ * Panels can be in either sidebar or developer panel, configurable by user.
  */
 export const PANELS: PanelDescriptor[] = [
-  // 1. Must-have panels.
-  //
-  // The files panel is at the top to orient
-  // users within their filesystem and give
-  // them a quick glance at their project structure,
-  // without having to leave their editor.
+  // Sidebar defaults
   {
-    id: "files",
+    type: "files",
     Icon: FolderTreeIcon,
+    label: "Files",
     tooltip: "View files",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-  // Because notebooks uniquely have data in RAM,
-  // it's important to give humans visibility into
-  // what that data is.
   {
-    id: "variables",
+    type: "variables",
     Icon: VariableIcon,
+    label: "Variables",
     tooltip: "Explore variables and data sources",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-  // Every notebook has a package environment that must
-  // be managed.
   {
-    id: "packages",
+    type: "packages",
     Icon: BoxIcon,
+    label: "Packages",
     tooltip: "Manage packages",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-  // 2. "AI" panel.
-  //
-  // The AI panel holds both agents and in-editor chat.
   {
-    id: "ai",
+    type: "ai",
     Icon: BotIcon,
+    label: "AI",
     tooltip: "Chat & Agents",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
   {
-    id: "snippets",
+    type: "snippets",
     Icon: SquareDashedBottomCodeIcon,
+    label: "Snippets",
     tooltip: "Snippets",
-    position: "sidebar",
-    defaultHidden: true,
+    defaultSection: "developer-panel",
   },
-  // 3. Nice-to-have observability panels.
-  //
-  // Utility panels that provide observability
-  // into the state or structure of the notebook. These
-  // observability panels are less crucial than variables
-  // or datasets, so they are positioned at the end of the
-  // sidebar.
   {
-    id: "outline",
+    type: "outline",
     Icon: ScrollTextIcon,
+    label: "Outline",
     tooltip: "View outline",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
   {
-    id: "documentation",
+    type: "documentation",
     Icon: TextSearchIcon,
+    label: "Docs",
     tooltip: "View live docs",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
   {
-    // TODO(akshayka): Consider making dependencies
-    // default off; the minimap is a more effective
-    // overview.
-    id: "dependencies",
+    type: "dependencies",
     Icon: NetworkIcon,
+    label: "Dependencies",
     tooltip: "Explore dependencies",
-    position: "sidebar",
+    defaultSection: "sidebar",
   },
-];
-
-export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
-  PANELS.map((p) => [p.id, p]),
-);
-
-export type DeveloperPanelTabType =
-  | "errors"
-  | "scratchpad"
-  | "tracing"
-  | "secrets"
-  | "logs"
-  | "terminal"
-  | "cache";
-
-export interface DeveloperPanelTabDescriptor {
-  type: DeveloperPanelTabType;
-  Icon: LucideIcon;
-  label: string;
-  hidden?: boolean;
-}
-
-export const DEVELOPER_PANEL_TABS: DeveloperPanelTabDescriptor[] = [
+  // Developer panel defaults
   {
     type: "errors",
     Icon: XCircleIcon,
     label: "Errors",
+    tooltip: "View errors",
+    defaultSection: "developer-panel",
   },
   {
     type: "scratchpad",
     Icon: NotebookPenIcon,
     label: "Scratchpad",
+    tooltip: "Scratchpad",
+    defaultSection: "developer-panel",
   },
   {
     type: "tracing",
     Icon: ActivityIcon,
     label: "Tracing",
+    tooltip: "View tracing",
+    defaultSection: "developer-panel",
   },
   {
     type: "secrets",
     Icon: KeyRoundIcon,
     label: "Secrets",
+    tooltip: "Manage secrets",
+    defaultSection: "developer-panel",
     hidden: isWasm(),
   },
   {
     type: "logs",
     Icon: FileTextIcon,
     label: "Logs",
+    tooltip: "View logs",
+    defaultSection: "developer-panel",
   },
   {
     type: "terminal",
     Icon: TerminalSquareIcon,
     label: "Terminal",
+    tooltip: "Terminal",
+    defaultSection: "developer-panel",
   },
-  // TODO(akshayka): The cache panel should not be default shown,
-  // even when it's out of feature flag. (User config to turn it on.)
   {
     type: "cache",
     Icon: DatabaseZapIcon,
     label: "Cache",
+    tooltip: "View cache",
+    defaultSection: "developer-panel",
     hidden: !getFeatureFlag("cache_panel"),
   },
 ];
+
+export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
+  PANELS.map((p) => [p.type, p]),
+);