@marimo-team/frontend 0.18.5-dev169 → 0.18.5-dev171

package/dist/index.html

@@ -66,15 +66,15 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-CEHA_rtG.js"></script>
+    <script type="module" crossorigin src="./assets/index-CQBtzy-J.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BW0IMuFq.js">
-    <link rel="modulepreload" crossorigin href="./assets/hotkeys-D3ICc8RW.js">
+    <link rel="modulepreload" crossorigin href="./assets/hotkeys-uKX61F1_.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-BLUna9fQ.js">
     <link rel="modulepreload" crossorigin href="./assets/precisionRound-Cl9k9ZmS.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-DzliDDTm.js">
     <link rel="modulepreload" crossorigin href="./assets/vega-loader.browser-C8wT63Va.js">
     <link rel="modulepreload" crossorigin href="./assets/_Uint8Array-BGESiCQL.js">
-    <link rel="modulepreload" crossorigin href="./assets/tooltip-BNPhCMFo.js">
+    <link rel="modulepreload" crossorigin href="./assets/tooltip-CrRUCOBw.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-D0MtrJOx.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-C1rgT0yh.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
@@ -83,14 +83,14 @@
     <link rel="modulepreload" crossorigin href="./assets/jsx-runtime-DN_bIXfG.js">
     <link rel="modulepreload" crossorigin href="./assets/badge-DAnNhy3O.js">
     <link rel="modulepreload" crossorigin href="./assets/useEventListener-COkmyg1v.js">
-    <link rel="modulepreload" crossorigin href="./assets/button-C9TEIJJh.js">
+    <link rel="modulepreload" crossorigin href="./assets/button-DuYGqRtX.js">
     <link rel="modulepreload" crossorigin href="./assets/react-dom-C9fstfnp.js">
     <link rel="modulepreload" crossorigin href="./assets/Combination-D1TsGrBC.js">
     <link rel="modulepreload" crossorigin href="./assets/menu-items-9PZrU2e0.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-CBrDuocE.js">
     <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-CW2xpJ57.js">
     <link rel="modulepreload" crossorigin href="./assets/check-CrAQug3q.js">
-    <link rel="modulepreload" crossorigin href="./assets/select-BJ18Dxpd.js">
+    <link rel="modulepreload" crossorigin href="./assets/select-D0g5GnIs.js">
     <link rel="modulepreload" crossorigin href="./assets/tooltip-CvjcEpZC.js">
     <link rel="modulepreload" crossorigin href="./assets/use-toast-Bzf3rpev.js">
     <link rel="modulepreload" crossorigin href="./assets/_getTag-BWqNuuwU.js">
@@ -100,22 +100,22 @@
     <link rel="modulepreload" crossorigin href="./assets/_baseFor-Duhs3RiJ.js">
     <link rel="modulepreload" crossorigin href="./assets/merge-BBX6ug-N.js">
     <link rel="modulepreload" crossorigin href="./assets/zod-Cg4WLWh2.js">
-    <link rel="modulepreload" crossorigin href="./assets/utils-B_xHF0y2.js">
+    <link rel="modulepreload" crossorigin href="./assets/utils-CJJIceVn.js">
     <link rel="modulepreload" crossorigin href="./assets/constants-Bkp4R3bQ.js">
     <link rel="modulepreload" crossorigin href="./assets/Deferred-DzyBMRsy.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-DWMmQmTt.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-cCkBQ_ER.js">
     <link rel="modulepreload" crossorigin href="./assets/uuid-ClFZlR7U.js">
     <link rel="modulepreload" crossorigin href="./assets/DeferredRequestRegistry-B3BENoUa.js">
     <link rel="modulepreload" crossorigin href="./assets/requests-C0HaHO6a.js">
     <link rel="modulepreload" crossorigin href="./assets/isSymbol-BGkTcW3U.js">
     <link rel="modulepreload" crossorigin href="./assets/toString-DlRqgfqz.js">
     <link rel="modulepreload" crossorigin href="./assets/_hasUnicode-zBEpxwYe.js">
-    <link rel="modulepreload" crossorigin href="./assets/useLifecycle-BX7GmOQ5.js">
+    <link rel="modulepreload" crossorigin href="./assets/useLifecycle-CmDXEyIC.js">
     <link rel="modulepreload" crossorigin href="./assets/useNonce-EAuSVK-5.js">
-    <link rel="modulepreload" crossorigin href="./assets/useTheme-CrojuouA.js">
+    <link rel="modulepreload" crossorigin href="./assets/useTheme-DfP1CWaW.js">
     <link rel="modulepreload" crossorigin href="./assets/once-CTiSlR1m.js">
-    <link rel="modulepreload" crossorigin href="./assets/capabilities-h9_pyvFv.js">
-    <link rel="modulepreload" crossorigin href="./assets/createReducer-CaezzNVH.js">
+    <link rel="modulepreload" crossorigin href="./assets/capabilities-BmAOeMOK.js">
+    <link rel="modulepreload" crossorigin href="./assets/createReducer-DDa-hVe3.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-CAcX026F.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-DKNOF5xd.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-CI6_zMIl.js">
@@ -129,119 +129,119 @@
     <link rel="modulepreload" crossorigin href="./assets/toDate-5JckKRQn.js">
     <link rel="modulepreload" crossorigin href="./assets/cjs-Bj40p_Np.js">
     <link rel="modulepreload" crossorigin href="./assets/_arrayReduce-bZBYsK-u.js">
-    <link rel="modulepreload" crossorigin href="./assets/type-drzC-SxF.js">
+    <link rel="modulepreload" crossorigin href="./assets/type-BdyvjzTI.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseProperty-DuoFhI7N.js">
     <link rel="modulepreload" crossorigin href="./assets/now-6sUe0ZdD.js">
     <link rel="modulepreload" crossorigin href="./assets/debounce-BbFlGgjv.js">
     <link rel="modulepreload" crossorigin href="./assets/toInteger-CDcO32Gx.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-CaVvnK_o.js">
     <link rel="modulepreload" crossorigin href="./assets/main-CwSdzVhm.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-xPjoZY0S.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-BYCO3_zw.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-rr1jjvJk.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-Drf1manw.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-Czc5z_04.js">
-    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-CBvG269f.js">
-    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-B3T1GCoD.js">
-    <link rel="modulepreload" crossorigin href="./assets/dialog-DIUTtzeB.js">
+    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-RldLPyJs.js">
+    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-k5KxevGr.js">
+    <link rel="modulepreload" crossorigin href="./assets/dialog-DUEuLcT2.js">
     <link rel="modulepreload" crossorigin href="./assets/useDebounce-em3gna-v.js">
-    <link rel="modulepreload" crossorigin href="./assets/numbers-Ckcn6C-H.js">
+    <link rel="modulepreload" crossorigin href="./assets/numbers-C9_R_vlY.js">
     <link rel="modulepreload" crossorigin href="./assets/SSRProvider-DD7JA3RM.js">
     <link rel="modulepreload" crossorigin href="./assets/context-BAYdLMF_.js">
     <link rel="modulepreload" crossorigin href="./assets/useNumberFormatter-D8ks3oPN.js">
     <link rel="modulepreload" crossorigin href="./assets/usePress-C2LPFxyv.js">
-    <link rel="modulepreload" crossorigin href="./assets/input-DP44ewsS.js">
-    <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-7Thr73Oo.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-NwzNlJhp.js">
-    <link rel="modulepreload" crossorigin href="./assets/multi-map-TecGBFLS.js">
+    <link rel="modulepreload" crossorigin href="./assets/input-CaEtLL8p.js">
+    <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-q6QlC2aZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-Hwo1QbqQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/multi-map-fjX9ImVF.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-BEdExd6A.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CqEd11Di.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-BP4_BZLr.js">
     <link rel="modulepreload" crossorigin href="./assets/links-DNmjkr65.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-CyWtxjKq.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-DfW1MJsR.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-Dtk0CQJu.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-Bmkr29w4.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-DHbNHnua.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-BHFBtWym.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-CO8cm8-0.js">
+    <link rel="modulepreload" crossorigin href="./assets/copy-DRhpWiOq.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-gBVL4NN-.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-icon-qVgCqhII.js">
+    <link rel="modulepreload" crossorigin href="./assets/copy-icon-B69c-352.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-C1czjtp7.js">
-    <link rel="modulepreload" crossorigin href="./assets/es-1yDP0Xdp.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-DPgrnlZ1.js">
-    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-DIbHWNF6.js">
+    <link rel="modulepreload" crossorigin href="./assets/es-YVwBDiDw.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-D3ygI6Sy.js">
+    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-jpEDlD0M.js">
     <link rel="modulepreload" crossorigin href="./assets/katex-AwOI3EvM.js">
     <link rel="modulepreload" crossorigin href="./assets/marked.esm-CHnOtnr3.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-OGVTOU66-CjNLT2C3.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-B0tsGAgw.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-vrNOUnFF.js">
-    <link rel="modulepreload" crossorigin href="./assets/command-DIcQwElH.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-DecoaRsV.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-DOFFh6Ii.js">
+    <link rel="modulepreload" crossorigin href="./assets/command-xU8ykulh.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-DtnzNVk-.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-BHhExio0.js">
-    <link rel="modulepreload" crossorigin href="./assets/mode-Ii-fBazZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-BGzo-QMk.js">
+    <link rel="modulepreload" crossorigin href="./assets/mode-BYulXE3t.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es-N-2faAGj.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DfrA7ZTv.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-D6fh5YLC.js">
     <link rel="modulepreload" crossorigin href="./assets/table--_20dwBZ.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-Ctk4D03n.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-BJJJOr9W.js">
-    <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-ZISlVepl.js">
-    <link rel="modulepreload" crossorigin href="./assets/error-banner-D2-5vgE4.js">
-    <link rel="modulepreload" crossorigin href="./assets/formats-nh-sPUUZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-CU-WWxnz.js">
+    <link rel="modulepreload" crossorigin href="./assets/error-banner-DU5Qb8a8.js">
+    <link rel="modulepreload" crossorigin href="./assets/formats-B9CrBoaO.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-DhMN8sxe.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-DhzaK-Y1.js">
-    <link rel="modulepreload" crossorigin href="./assets/dates-B2_O0-if.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-B9UlWvRO.js">
-    <link rel="modulepreload" crossorigin href="./assets/maps-DELIOfTw.js">
+    <link rel="modulepreload" crossorigin href="./assets/dates-CdsE1R40.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-DKRxBkYD.js">
+    <link rel="modulepreload" crossorigin href="./assets/maps-s2pQkyf5.js">
     <link rel="modulepreload" crossorigin href="./assets/extends-B9D0JO9U.js">
     <link rel="modulepreload" crossorigin href="./assets/emotion-is-prop-valid.esm-lG8j6oqk.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-CV0QXb5P.js">
     <link rel="modulepreload" crossorigin href="./assets/range-sshwVRcP.js">
-    <link rel="modulepreload" crossorigin href="./assets/capitalize-D4JsDDXI.js">
+    <link rel="modulepreload" crossorigin href="./assets/capitalize-DQeWKRGx.js">
     <link rel="modulepreload" crossorigin href="./assets/table-BLx7B_us.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-C7Jn2Hoy.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-CkeISXrs.js">
     <link rel="modulepreload" crossorigin href="./assets/file-BnFXtaZZ.js">
     <link rel="modulepreload" crossorigin href="./assets/play-BJDBXApx.js">
-    <link rel="modulepreload" crossorigin href="./assets/chat-components-CQFXyizy.js">
+    <link rel="modulepreload" crossorigin href="./assets/chat-components-DXJsXOD8.js">
     <link rel="modulepreload" crossorigin href="./assets/isEmpty-DIxUV1UR.js">
     <link rel="modulepreload" crossorigin href="./assets/circle-check-big-OIMTUpe6.js">
-    <link rel="modulepreload" crossorigin href="./assets/chat-display-DqUXDG-o.js">
-    <link rel="modulepreload" crossorigin href="./assets/ai-model-dropdown-CAhqhkRJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-DolwKyOI.js">
-    <link rel="modulepreload" crossorigin href="./assets/useDeleteCell-DAgP4oYp.js">
+    <link rel="modulepreload" crossorigin href="./assets/chat-display-C08N0rx5.js">
+    <link rel="modulepreload" crossorigin href="./assets/ai-model-dropdown-D1nEKS8b.js">
+    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-D0Pei-OA.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDeleteCell-DBzN8QcP.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-D4lB4En9.js">
-    <link rel="modulepreload" crossorigin href="./assets/process-output-Dsqg6AQn.js">
+    <link rel="modulepreload" crossorigin href="./assets/process-output-2gz8Uri2.js">
     <link rel="modulepreload" crossorigin href="./assets/blob-Dg_vNTSs.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-CboCOq4o.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-B3JckBtM.js">
-    <link rel="modulepreload" crossorigin href="./assets/add-cell-with-ai-BYCrNUOQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/add-cell-with-ai-B3V6Mgb9.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-D42sFB6d.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DxXFdbn8.js">
-    <link rel="modulepreload" crossorigin href="./assets/spec-D9TFI5I_.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-BuNifqxS.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-DXLifdeN.js">
+    <link rel="modulepreload" crossorigin href="./assets/spec-qp_XZeSS.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-BzvHnhPG.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-iJj-D3dz.js">
     <link rel="modulepreload" crossorigin href="./assets/toggle-G1t0cQyf.js">
-    <link rel="modulepreload" crossorigin href="./assets/globals-CC2GcyGk.js">
-    <link rel="modulepreload" crossorigin href="./assets/share-0dWXMs9M.js">
+    <link rel="modulepreload" crossorigin href="./assets/globals-D46Vbo5D.js">
+    <link rel="modulepreload" crossorigin href="./assets/share-CXQVxivL.js">
     <link rel="modulepreload" crossorigin href="./assets/memoize-DN0TMY36.js">
     <link rel="modulepreload" crossorigin href="./assets/get-CyLJYAfP.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-6FYvpjrm.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-BqxQegSf.js">
-    <link rel="modulepreload" crossorigin href="./assets/utilities.esm-lV-KjYEM.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-C5wKHGsD.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-CuNdAB3f.js">
+    <link rel="modulepreload" crossorigin href="./assets/utilities.esm-CT3NbLA9.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CHprSkP6.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-BpMe5DB-.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-D9zAYqG9.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-CHesBJpY.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-CEN7uCAn.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-ihKi3Mrq.js">
     <link rel="modulepreload" crossorigin href="./assets/file-video-camera-CZUg-nFA.js">
-    <link rel="modulepreload" crossorigin href="./assets/types-B_DyfI3j.js">
-    <link rel="modulepreload" crossorigin href="./assets/label-DJo0Eeb3.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-BibopRh1.js">
+    <link rel="modulepreload" crossorigin href="./assets/types-4-l_7Ws2.js">
+    <link rel="modulepreload" crossorigin href="./assets/label-qwandMoh.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-DmNrZcLR.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-DbW1_PHb.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-C-lF7BNB.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-B2Db87Zc.js">
-    <link rel="modulepreload" crossorigin href="./assets/field-D2_0r7wT.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-DWRpatKF.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-B_zRT4QS.js">
+    <link rel="modulepreload" crossorigin href="./assets/field-DDKGFzpC.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-BDG41CyP.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-gzLRYatP.js">
     <link rel="modulepreload" crossorigin href="./assets/types-B42u_5hF.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-C638SUfx.js">
     <link rel="modulepreload" crossorigin href="./assets/es-FiXEquL2.js">
-    <link rel="modulepreload" crossorigin href="./assets/VisuallyHidden-BLp5kXtE.js">
+    <link rel="modulepreload" crossorigin href="./assets/VisuallyHidden-BodIky8L.js">
     <link rel="modulepreload" crossorigin href="./assets/hasIn-DydgU7lx.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseFlatten-CLPh0yMf.js">
     <link rel="modulepreload" crossorigin href="./assets/flatten-Buk63LQO.js">

package/package.json

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

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/wrapper/app-chrome.tsx

@@ -26,6 +26,7 @@ import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
+import { PanelSectionProvider } from "../panels/panel-context";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
 import { PANEL_MAP, PANELS, type PanelDescriptor } from "../types";
 import { BackendConnectionStatus } from "./footer-items/backend-status";
@@ -222,72 +223,74 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const helpPaneBody = (
     <ErrorBoundary>
-      <div className="flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
-        <div className="p-3 border-b flex justify-between items-center">
-          {selectedPanel === "ai" && agentsEnabled ? (
-            <Tabs
-              value={aiPanelTab}
-              onValueChange={(value) => {
-                if (value === "chat" || value === "agents") {
-                  setAiPanelTab(value);
-                }
-              }}
+      <PanelSectionProvider value="sidebar">
+        <div className="flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
+          <div className="p-3 border-b flex justify-between items-center">
+            {selectedPanel === "ai" && agentsEnabled ? (
+              <Tabs
+                value={aiPanelTab}
+                onValueChange={(value) => {
+                  if (value === "chat" || value === "agents") {
+                    setAiPanelTab(value);
+                  }
+                }}
+              >
+                <TabsList>
+                  <TabsTrigger
+                    value="chat"
+                    className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                  >
+                    Chat
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="agents"
+                    className="py-0.5 text-xs uppercase tracking-wide font-bold"
+                  >
+                    Agents
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            ) : (
+              <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
+                {selectedPanel}
+              </span>
+            )}
+            <Button
+              data-testid="close-helper-pane"
+              className="m-0"
+              size="xs"
+              variant="text"
+              onClick={() => setIsSidebarOpen(false)}
             >
-              <TabsList>
-                <TabsTrigger
-                  value="chat"
-                  className="py-0.5 text-xs uppercase tracking-wide font-bold"
-                >
-                  Chat
-                </TabsTrigger>
-                <TabsTrigger
-                  value="agents"
-                  className="py-0.5 text-xs uppercase tracking-wide font-bold"
-                >
-                  Agents
-                </TabsTrigger>
-              </TabsList>
-            </Tabs>
-          ) : (
-            <span className="text-sm text-(--slate-11) uppercase tracking-wide font-semibold flex-1">
-              {selectedPanel}
-            </span>
-          )}
-          <Button
-            data-testid="close-helper-pane"
-            className="m-0"
-            size="xs"
-            variant="text"
-            onClick={() => setIsSidebarOpen(false)}
-          >
-            <XIcon className="w-4 h-4" />
-          </Button>
+              <XIcon className="w-4 h-4" />
+            </Button>
+          </div>
+          <Suspense>
+            <TooltipProvider>
+              {selectedPanel === "files" && <LazyFileExplorerPanel />}
+              {selectedPanel === "variables" && <LazySessionPanel />}
+              {selectedPanel === "dependencies" && <LazyDependencyGraphPanel />}
+              {selectedPanel === "packages" && <LazyPackagesPanel />}
+              {selectedPanel === "outline" && <LazyOutlinePanel />}
+              {selectedPanel === "documentation" && <LazyDocumentationPanel />}
+              {selectedPanel === "snippets" && <LazySnippetsPanel />}
+              {selectedPanel === "ai" && renderAiPanel()}
+              {selectedPanel === "errors" && <LazyErrorsPanel />}
+              {selectedPanel === "scratchpad" && <LazyScratchpadPanel />}
+              {selectedPanel === "tracing" && <LazyTracingPanel />}
+              {selectedPanel === "secrets" && <LazySecretsPanel />}
+              {selectedPanel === "logs" && <LazyLogsPanel />}
+              {selectedPanel === "terminal" && (
+                <LazyTerminal
+                  visible={isSidebarOpen}
+                  onClose={() => setIsSidebarOpen(false)}
+                />
+              )}
+              {selectedPanel === "cache" && <LazyCachePanel />}
+            </TooltipProvider>
+          </Suspense>
         </div>
-        <Suspense>
-          <TooltipProvider>
-            {selectedPanel === "files" && <LazyFileExplorerPanel />}
-            {selectedPanel === "variables" && <LazySessionPanel />}
-            {selectedPanel === "dependencies" && <LazyDependencyGraphPanel />}
-            {selectedPanel === "packages" && <LazyPackagesPanel />}
-            {selectedPanel === "outline" && <LazyOutlinePanel />}
-            {selectedPanel === "documentation" && <LazyDocumentationPanel />}
-            {selectedPanel === "snippets" && <LazySnippetsPanel />}
-            {selectedPanel === "ai" && renderAiPanel()}
-            {selectedPanel === "errors" && <LazyErrorsPanel />}
-            {selectedPanel === "scratchpad" && <LazyScratchpadPanel />}
-            {selectedPanel === "tracing" && <LazyTracingPanel />}
-            {selectedPanel === "secrets" && <LazySecretsPanel />}
-            {selectedPanel === "logs" && <LazyLogsPanel />}
-            {selectedPanel === "terminal" && (
-              <LazyTerminal
-                visible={isSidebarOpen}
-                onClose={() => setIsSidebarOpen(false)}
-              />
-            )}
-            {selectedPanel === "cache" && <LazyCachePanel />}
-          </TooltipProvider>
-        </Suspense>
-      </div>
+      </PanelSectionProvider>
     </ErrorBoundary>
   );
 
@@ -409,37 +412,47 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         </div>
         {/* Panel content */}
         <Suspense fallback={<div />}>
-          <div className="flex-1 overflow-hidden">
-            {selectedDeveloperPanelTab === "files" && <LazyFileExplorerPanel />}
-            {selectedDeveloperPanelTab === "variables" && <LazySessionPanel />}
-            {selectedDeveloperPanelTab === "dependencies" && (
-              <LazyDependencyGraphPanel />
-            )}
-            {selectedDeveloperPanelTab === "packages" && <LazyPackagesPanel />}
-            {selectedDeveloperPanelTab === "outline" && <LazyOutlinePanel />}
-            {selectedDeveloperPanelTab === "documentation" && (
-              <LazyDocumentationPanel />
-            )}
-            {selectedDeveloperPanelTab === "snippets" && <LazySnippetsPanel />}
-            {selectedDeveloperPanelTab === "ai" && renderAiPanel()}
-            {selectedDeveloperPanelTab === "errors" && <LazyErrorsPanel />}
-            {selectedDeveloperPanelTab === "scratchpad" && (
-              <LazyScratchpadPanel />
-            )}
-            {selectedDeveloperPanelTab === "tracing" && <LazyTracingPanel />}
-            {selectedDeveloperPanelTab === "secrets" && <LazySecretsPanel />}
-            {selectedDeveloperPanelTab === "logs" && <LazyLogsPanel />}
-            {/* LazyMount needed for Terminal to avoid spurious connection */}
-            {selectedDeveloperPanelTab === "terminal" && (
-              <LazyMount isOpen={isDeveloperPanelOpen}>
-                <LazyTerminal
-                  visible={isDeveloperPanelOpen}
-                  onClose={() => setIsDeveloperPanelOpen(false)}
-                />
-              </LazyMount>
-            )}
-            {selectedDeveloperPanelTab === "cache" && <LazyCachePanel />}
-          </div>
+          <PanelSectionProvider value="developer-panel">
+            <div className="flex-1 overflow-hidden">
+              {selectedDeveloperPanelTab === "files" && (
+                <LazyFileExplorerPanel />
+              )}
+              {selectedDeveloperPanelTab === "variables" && (
+                <LazySessionPanel />
+              )}
+              {selectedDeveloperPanelTab === "dependencies" && (
+                <LazyDependencyGraphPanel />
+              )}
+              {selectedDeveloperPanelTab === "packages" && (
+                <LazyPackagesPanel />
+              )}
+              {selectedDeveloperPanelTab === "outline" && <LazyOutlinePanel />}
+              {selectedDeveloperPanelTab === "documentation" && (
+                <LazyDocumentationPanel />
+              )}
+              {selectedDeveloperPanelTab === "snippets" && (
+                <LazySnippetsPanel />
+              )}
+              {selectedDeveloperPanelTab === "ai" && renderAiPanel()}
+              {selectedDeveloperPanelTab === "errors" && <LazyErrorsPanel />}
+              {selectedDeveloperPanelTab === "scratchpad" && (
+                <LazyScratchpadPanel />
+              )}
+              {selectedDeveloperPanelTab === "tracing" && <LazyTracingPanel />}
+              {selectedDeveloperPanelTab === "secrets" && <LazySecretsPanel />}
+              {selectedDeveloperPanelTab === "logs" && <LazyLogsPanel />}
+              {/* LazyMount needed for Terminal to avoid spurious connection */}
+              {selectedDeveloperPanelTab === "terminal" && (
+                <LazyMount isOpen={isDeveloperPanelOpen}>
+                  <LazyTerminal
+                    visible={isDeveloperPanelOpen}
+                    onClose={() => setIsDeveloperPanelOpen(false)}
+                  />
+                </LazyMount>
+              )}
+              {selectedDeveloperPanelTab === "cache" && <LazyCachePanel />}
+            </div>
+          </PanelSectionProvider>
         </Suspense>
       </div>
     </Panel>

package/src/components/scratchpad/scratchpad.tsx

@@ -27,6 +27,10 @@ import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import { CellEditor } from "../editor/cell/code/cell-editor";
+import {
+  usePanelOrientation,
+  usePanelSection,
+} from "../editor/chrome/panels/panel-context";
 import { HideInKioskMode } from "../editor/kiosk-mode";
 import { OutputArea } from "../editor/Output";
 import { ConsoleOutput } from "../editor/output/console/ConsoleOutput";
@@ -53,6 +57,8 @@ export const ScratchPad: React.FC = () => {
   const lastFocusedCellId = useLastFocusedCellId();
   const { createNewCell, updateCellCode } = useCellActions();
   const { sendRunScratchpad } = useRequestClient();
+  const orientation = usePanelOrientation();
+  const section = usePanelSection();
 
   const cellId = SCRATCH_CELL_ID;
   const cellRuntime = notebookState.cellRuntime[cellId];
@@ -223,13 +229,15 @@ export const ScratchPad: React.FC = () => {
     </div>
   );
 
+  const isVertical = orientation === "vertical";
+
   return (
     <div
       className="flex flex-col h-full overflow-hidden"
       id={HTMLCellId.create(cellId)}
     >
-      <PanelGroup direction="horizontal" className="h-full">
-        {/* Left side: toolbar + editor */}
+      <PanelGroup key={section} direction={orientation} className="h-full">
+        {/* Editor panel */}
         <Panel defaultSize={40} minSize={20} maxSize={70}>
           <div className="h-full flex flex-col overflow-hidden relative">
             {renderToolbar()}
@@ -257,8 +265,13 @@ export const ScratchPad: React.FC = () => {
             {renderHistory()}
           </div>
         </Panel>
-        <PanelResizeHandle className="w-1 bg-border hover:bg-primary/50 transition-colors" />
-        {/* Right side: outputs */}
+        <PanelResizeHandle
+          className={cn(
+            "bg-border hover:bg-primary/50 transition-colors",
+            isVertical ? "h-1" : "w-1",
+          )}
+        />
+        {/* Output panel */}
         <Panel defaultSize={60} minSize={20}>
           <div className="h-full flex flex-col divide-y overflow-hidden">
             <div className="flex-1 overflow-auto">