@marimo-team/islands 0.19.10-dev4 → 0.19.10-dev41

package/dist/{useDeepCompareMemoize-BhZZsis0.js → useDeepCompareMemoize-ChviuF5n.js}

@@ -10,7 +10,7 @@ import { s as Logger } from "./hotkeys-B5WnGZXF.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-SlKl8MlS.js";
 import { r as KnownQueryParams } from "./constants-DrOu5vvd.js";
-import { i as tableFromIPC } from "./loader-B0KEFFi-.js";
+import { i as tableFromIPC } from "./loader-C0-eIoas.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/vb-CXWH9DD-.js

@@ -0,0 +1,4 @@
+import { t as vb } from "./vb-D1pAvfDe.js";
+export {
+  vb
+};

package/dist/vbscript-qr8qVck5.js

@@ -0,0 +1,4 @@
+import { t as vbScript } from "./vbscript-DZ7RBxn5.js";
+export {
+  vbScript
+};

package/dist/{vega-component-DCxUyPnb.js → vega-component-CnG0vAjf.js}

@@ -2,7 +2,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 "./Combination-BTMrlhzT.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-BhZZsis0.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-ChviuF5n.js";
 import { l as Events } from "./button-Cy0ElmIm.js";
 import { o as Objects, s as Logger } from "./hotkeys-B5WnGZXF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
@@ -11,12 +11,12 @@ import { l as Tooltip, n as ErrorBanner } from "./error-banner-D2zjeN_a.js";
 import { h as useEvent_default, n as useTheme } from "./useTheme-SlKl8MlS.js";
 import { t as _baseUniq_default } from "./_baseUniq-4lqa8rDi.js";
 import { i as debounce_default } from "./constants-DrOu5vvd.js";
-import { a as tooltipHandler, n as vegaLoadData } from "./loader-B0KEFFi-.js";
-import { n as formats } from "./vega-loader.browser-BJ1uJidF.js";
-import { t as useAsyncData } from "./useAsyncData-Dyq3DyOF.js";
-import { t as j } from "./react-vega-DLFvGrpJ.js";
-import "./defaultLocale-qS7DaAmi.js";
-import "./defaultLocale-Bxoo2-30.js";
+import { a as tooltipHandler, n as vegaLoadData } from "./loader-C0-eIoas.js";
+import { n as formats } from "./vega-loader.browser-DqHiiBeQ.js";
+import { t as useAsyncData } from "./useAsyncData-dr8GazGv.js";
+import { t as j } from "./react-vega-CCNu2JE0.js";
+import "./defaultLocale-DjFHq3Xk.js";
+import "./defaultLocale-B_A76Zpk.js";
 function uniq(e) {
   return e && e.length ? _baseUniq_default(e) : [];
 }

package/dist/{vega-loader.browser-BJ1uJidF.js → vega-loader.browser-DqHiiBeQ.js}

@@ -1,6 +1,6 @@
-import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-CGLoV26P.js";
-import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-qS7DaAmi.js";
-import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-Bxoo2-30.js";
+import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-Duzbr5ur.js";
+import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-DjFHq3Xk.js";
+import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-B_A76Zpk.js";
 function accessor(o, P, F) {
   return o.fields = P || [], o.fname = F, o;
 }

package/dist/velocity-C_9pUJRx.js

@@ -0,0 +1,4 @@
+import { t as velocity } from "./velocity-Csau7eZy.js";
+export {
+  velocity
+};

package/dist/verilog-DxBstgBa.js

@@ -0,0 +1,4 @@
+import { t as verilog } from "./verilog-gXlZACs5.js";
+export {
+  verilog
+};

package/dist/vhdl-odUxAbE6.js

@@ -0,0 +1,4 @@
+import { t as vhdl } from "./vhdl-NaUWbI1B.js";
+export {
+  vhdl
+};

package/dist/webidl-Dfn5Rku4.js

@@ -0,0 +1,4 @@
+import { t as webIDL } from "./webidl-BJmPjW01.js";
+export {
+  webIDL
+};

package/dist/xquery-CrJs6SXr.js

@@ -0,0 +1,4 @@
+import { t as xQuery } from "./xquery-CJIPsC0g.js";
+export {
+  xQuery
+};

package/dist/{xychartDiagram-PRI3JC2R-BcVxCRox.js → xychartDiagram-PRI3JC2R-BltwMWKC.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
 import "./purify.es-Brw-U87Q.js";
-import { t as linear } from "./linear-vWf1Qj0e.js";
-import { n as ordinal } from "./ordinal-IlASfRja.js";
-import { t as range } from "./range-BYuZFTbA.js";
-import "./defaultLocale-qS7DaAmi.js";
-import { t as line_default } from "./line-LK_5q2B9.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-CBkH6JZZ.js";
-import { n as initRange } from "./init-BfRhston.js";
-import { i as log, r as __name } from "./src-szye8OCw.js";
-import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-BXTC53mt.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-DyoOs5QX.js";
+import { t as linear } from "./linear-Bnc6E9kA.js";
+import { n as ordinal } from "./ordinal-DLLbwLkP.js";
+import { t as range } from "./range-DwpxnYuB.js";
+import "./defaultLocale-DjFHq3Xk.js";
+import { t as line_default } from "./line-Bc27KE1D.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-CwDGYMVf.js";
+import { n as initRange } from "./init-TaqZJsBY.js";
+import { i as log, r as __name } from "./src-jICM_d2B.js";
+import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-BGWvKte3.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-BlA7aWEw.js";
 import "./dist-BYznkC5E.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-BGnAIbOP.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-Cm-pccR-.js";
 function band() {
   var e = ordinal().unknown(void 0), w = e.domain, T = e.range, D = 0, O = 1, k, A, j = false, M = 0, N = 0, P = 0.5;
   delete e.unknown;

package/dist/yacas-B-uDDLZe.js

@@ -0,0 +1,4 @@
+import { t as yacas } from "./yacas-8f2Vjiiz.js";
+export {
+  yacas
+};

package/dist/z80-51gxgAXE.js

@@ -0,0 +1,4 @@
+import { t as z80 } from "./z80-s5Xk2hCP.js";
+export {
+  z80
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.10-dev4",
+  "version": "0.19.10-dev41",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -24,19 +24,19 @@
     "@ai-sdk/react": "^2.0.125",
     "@anywidget/types": "^0.2.0",
     "@codemirror/autocomplete": "^6.20.0",
-    "@codemirror/commands": "^6.10.1",
+    "@codemirror/commands": "^6.10.2",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/language": "^6.12.1",
     "@codemirror/language-data": "^6.5.2",
     "@codemirror/legacy-modes": "^6.5.2",
-    "@codemirror/lint": "^6.9.2",
+    "@codemirror/lint": "^6.9.3",
     "@codemirror/merge": "^6.11.2",
-    "@codemirror/search": "^6.5.11",
-    "@codemirror/state": "^6.5.3",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.39.8",
+    "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.8",
     "@date-fns/tz": "^1.4.1",
     "@dnd-kit/core": "^6.3.1",
@@ -49,13 +49,13 @@
     "@hookform/resolvers": "^5.2.2",
     "@img-comparison-slider/react": "^8.0.2",
     "@internationalized/date": "^3.10.1",
-    "@lezer/common": "^1.5.0",
+    "@lezer/common": "^1.5.1",
     "@lezer/highlight": "^1.2.3",
-    "@lezer/lr": "^1.4.5",
-    "@lezer/markdown": "^1.6.2",
+    "@lezer/lr": "^1.4.8",
+    "@lezer/markdown": "^1.6.3",
     "@lezer/python": "^1.1.18",
     "@marimo-team/codemirror-ai": "^0.3.5",
-    "@marimo-team/codemirror-languageserver": "^1.16.11",
+    "@marimo-team/codemirror-languageserver": "^1.16.12",
     "@marimo-team/codemirror-mcp": "^0.1.5",
     "@marimo-team/codemirror-sql": "^0.2.4",
     "@marimo-team/llm-info": "workspace:*",
@@ -144,7 +144,7 @@
     "mermaid": "^11.12.2",
     "partysocket": "1.1.10",
     "path-to-regexp": "^8.3.0",
-    "plotly.js": "^2.35.3",
+    "plotly.js": "^3.3.1",
     "pyodide": "0.27.7",
     "react-arborist": "^3.4.3",
     "react-aria": "3.44.0",
@@ -157,7 +157,6 @@
     "react-grid-layout": "^1.5.3",
     "react-hook-form": "7.54.2",
     "react-markdown": "^9.1.0",
-    "react-plotly.js": "^2.6.0",
     "react-resizable-panels": "2.1.9",
     "react-use-event-hook": "^0.9.6",
     "react-vega": "^8.0.0",
@@ -227,9 +226,9 @@
     "@types/katex": "^0.16.8",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.9",
+    "@types/plotly.js": "^2.33.4",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "@types/react-plotly.js": "^2.6.4",
     "@types/timestring": "^6.0.5",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",

package/src/components/data-table/TableActions.tsx

@@ -30,6 +30,7 @@ interface TableActionsProps<TData> {
   onRowSelectionChange?: (value: RowSelectionState) => void;
   table: Table<TData>;
   downloadAs?: DownloadActionProps["downloadAs"];
+  downloadFileName?: string;
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
@@ -52,6 +53,7 @@ export const TableActions = <TData,>({
   onRowSelectionChange,
   table,
   downloadAs,
+  downloadFileName,
   getRowIds,
   toggleDisplayHeader,
   showChartBuilder,
@@ -182,7 +184,12 @@ export const TableActions = <TData,>({
         />
       )}
       <div className="ml-auto">
-        {downloadAs && <DownloadAs downloadAs={downloadAs} />}
+        {downloadAs && (
+          <DownloadAs
+            downloadAs={downloadAs}
+            downloadFileName={downloadFileName}
+          />
+        )}
       </div>
     </div>
   );

package/src/components/data-table/__tests__/columns.test.tsx

@@ -243,6 +243,53 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("center");
   });
 
+  it("should apply text justification to column header parents", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+      textJustifyColumns: { name: "right", age: "center" },
+    });
+
+    const mockColumn = (col: (typeof columns)[number]) => ({
+      id: col.id,
+      getCanSort: () => true,
+      getCanFilter: () => false,
+      getIsSorted: () => false,
+      getSortIndex: () => -1,
+      getFilterValue: () => undefined,
+      columnDef: { meta: col.meta },
+    });
+
+    // Right-justified: parent wrapper should have items-end, sort/filter icons should flip to the left
+    const { container: rightContainer } = render(
+      <TooltipProvider>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {(columns[0].header as any)({ column: mockColumn(columns[0]) })}
+      </TooltipProvider>,
+    );
+    const rightWrapper = rightContainer.firstElementChild;
+    expect(rightWrapper?.className).toContain("items-end");
+    const rightHeader = rightContainer.querySelector(
+      "[data-testid='data-table-sort-button']",
+    );
+    expect(rightHeader?.className).toContain("flex-row-reverse");
+
+    // Center-justified: parent wrapper should have items-center, no flex-row-reverse
+    const { container: centerContainer } = render(
+      <TooltipProvider>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
+      </TooltipProvider>,
+    );
+    const centerWrapper = centerContainer.firstElementChild;
+    expect(centerWrapper?.className).toContain("items-center");
+    const centerHeader = centerContainer.querySelector(
+      "[data-testid='data-table-sort-button']",
+    );
+    expect(centerHeader?.className).not.toContain("flex-row-reverse");
+  });
+
   it("should not include index column if it exists", () => {
     const columns = generateColumns({
       rowHeaders: [],

package/src/components/data-table/column-header.tsx

@@ -67,6 +67,7 @@ interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   header: React.ReactNode;
+  justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
   table?: Table<TData>;
 }
@@ -74,6 +75,7 @@ interface DataTableColumnHeaderProps<TData, TValue>
 export const DataTableColumnHeader = <TData, TValue>({
   column,
   header,
+  justify,
   className,
   calculateTopKRows,
   table,
@@ -101,6 +103,7 @@ export const DataTableColumnHeader = <TData, TValue>({
           <div
             className={cn(
               "group flex items-center my-1 space-between w-full select-none gap-2 border hover:border-border border-transparent hover:bg-(--slate-3) data-[state=open]:bg-(--slate-3) data-[state=open]:border-border rounded px-1 -mx-1",
+              justify === "right" && "flex-row-reverse",
               className,
             )}
             data-testid="data-table-sort-button"

package/src/components/data-table/columns.tsx

@@ -186,8 +186,16 @@ export function generateColumns<T>({
             </div>
           ) : null;
 
+        const justify = textJustifyColumns?.[key];
+
         const headerWithType = (
-          <div className="flex flex-col">
+          <div
+            className={cn(
+              "flex flex-col",
+              justify === "center" && "items-center",
+              justify === "right" && "items-end",
+            )}
+          >
             <span
               className={cn(
                 "font-bold",
@@ -212,6 +220,7 @@ export function generateColumns<T>({
           <DataTableColumnHeader
             header={headerWithTooltip}
             column={column}
+            justify={justify}
             calculateTopKRows={calculateTopKRows}
             table={table}
           />
@@ -223,7 +232,13 @@ export function generateColumns<T>({
         }
 
         return (
-          <div className="flex flex-col h-full pt-0.5 pb-3 justify-between items-start">
+          <div
+            className={cn(
+              "flex flex-col h-full pt-0.5 pb-3 justify-between items-start",
+              justify === "center" && "items-center",
+              justify === "right" && "items-end",
+            )}
+          >
             {dataTableColumnHeader}
             <TableColumnSummary columnId={key} />
           </div>

package/src/components/data-table/data-table.tsx

@@ -116,6 +116,7 @@ const DataTableInternal = <TData,>({
   paginationState,
   setPaginationState,
   downloadAs,
+  downloadFileName,
   manualPagination = false,
   pagination = false,
   onRowSelectionChange,
@@ -334,6 +335,7 @@ const DataTableInternal = <TData,>({
         onRowSelectionChange={onRowSelectionChange}
         table={table}
         downloadAs={downloadAs}
+        downloadFileName={downloadFileName}
         getRowIds={getRowIds}
         toggleDisplayHeader={toggleDisplayHeader}
         showChartBuilder={showChartBuilder}

package/src/components/data-table/download-actions.tsx

@@ -14,6 +14,7 @@ import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
 import { prettyError } from "@/utils/errors";
+import { Filenames } from "@/utils/filenames";
 import {
   jsonParseWithSpecialChar,
   jsonToMarkdown,
@@ -36,6 +37,7 @@ type DownloadFormat = "csv" | "json" | "parquet";
 
 export interface DownloadActionProps {
   downloadAs: (req: { format: DownloadFormat }) => Promise<string>;
+  downloadFileName?: string;
 }
 
 const options = [
@@ -158,7 +160,10 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
             onSelect={async () => {
               const downloadUrl = await getDownloadUrl(option.format);
               const ext = option.format;
-              downloadByURL(downloadUrl, `download.${ext}`);
+              const rawName = (props.downloadFileName ?? "").trim();
+              const baseName =
+                Filenames.withoutExtension(rawName) || "download";
+              downloadByURL(downloadUrl, `${baseName}.${ext}`);
             }}
           >
             <option.icon className="mo-dropdown-icon" />

package/src/components/dependency-graph/dependency-graph-tree.tsx

@@ -58,6 +58,7 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
       cellAtoms,
       variables,
       settings.hidePureMarkdown,
+      settings.hideReusableFunctions,
     );
     elements = layoutElements({
       nodes: elements.nodes,
@@ -94,9 +95,17 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
         cellAtoms,
         variables,
         settings.hidePureMarkdown,
+        settings.hideReusableFunctions,
       ),
     );
-  }, [cellIds, variables, cellAtoms, syncChanges, settings.hidePureMarkdown]);
+  }, [
+    cellIds,
+    variables,
+    cellAtoms,
+    syncChanges,
+    settings.hidePureMarkdown,
+    settings.hideReusableFunctions,
+  ]);
 
   const [selection, setSelection] = useState<GraphSelection>();
   useFitToViewOnDimensionChange();

package/src/components/dependency-graph/dependency-graph.tsx

@@ -24,6 +24,7 @@ interface Props {
 const graphViewAtom = atom<LayoutDirection>("TB");
 const graphViewSettings = atom<GraphSettings>({
   hidePureMarkdown: true,
+  hideReusableFunctions: false,
 });
 
 export const DependencyGraph: React.FC<Props> = (props) => {

package/src/components/dependency-graph/elements.ts

@@ -2,6 +2,7 @@
 
 import type { Atom } from "jotai";
 import { type Edge, MarkerType, type Node, type NodeProps } from "reactflow";
+import { getNotebook } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { CellData } from "@/core/cells/types";
 import { store } from "@/core/state/jotai";
@@ -29,6 +30,7 @@ interface ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
+    hideReusableFunctions: boolean,
   ) => { nodes: Node<NodeData>[]; edges: Edge[] };
 }
 
@@ -76,6 +78,7 @@ export class VerticalElementsBuilder implements ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     _hidePureMarkdown: boolean,
+    _hideReusableFunctions: boolean,
   ) {
     let prevY = 0;
     const nodes: Node<NodeData>[] = [];
@@ -143,6 +146,7 @@ export class TreeElementsBuilder implements ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
+    hideReusableFunctions: boolean,
   ) {
     const nodes: Node<NodeData>[] = [];
     const edges: Edge[] = [];
@@ -171,18 +175,25 @@ export class TreeElementsBuilder implements ElementsBuilder {
       }
     }
 
-    for (const [cellId, cellAtom] of Arrays.zip(cellIds, cellAtoms)) {
-      // Show every cell
-      if (!hidePureMarkdown) {
-        nodes.push(this.createNode(cellId, cellAtom));
-      }
+    const cellRuntime = getNotebook().cellRuntime;
 
+    for (const [cellId, cellAtom] of Arrays.zip(cellIds, cellAtoms)) {
+      const code = store.get(cellAtom).code.trim();
       const hasEdge = nodesWithEdges.has(cellId);
-      const isMarkdown = store.get(cellAtom).code.trim().startsWith("mo.md");
-      // Show only cells with edges or non-markdown cells
-      if (hasEdge || !isMarkdown) {
-        nodes.push(this.createNode(cellId, cellAtom));
+      const isMarkdown = code.startsWith("mo.md");
+      const runtime = cellRuntime[cellId];
+      const isReusable = runtime?.serialization?.toLowerCase() === "valid";
+
+      // Apply filters
+      if (hidePureMarkdown && isMarkdown && !hasEdge) {
+        continue;
+      }
+      if (hideReusableFunctions && isReusable && !hasEdge) {
+        continue;
       }
+
+      // Show every cell that wasn't filtered out
+      nodes.push(this.createNode(cellId, cellAtom));
     }
 
     return { nodes, edges };

package/src/components/dependency-graph/panels.tsx

@@ -43,7 +43,8 @@ export const GraphToolbar: React.FC<Props> = memo(
       onSettingsChange({ ...settings, [key]: value });
     };
 
-    const checkboxId = useId();
+    const markdownCheckboxId = useId();
+    const functionsCheckboxId = useId();
 
     const settingsButton = (
       <Popover>
@@ -54,16 +55,31 @@ export const GraphToolbar: React.FC<Props> = memo(
         </PopoverTrigger>
         <PopoverContent className="w-auto p-2 text-muted-foreground">
           <div className="font-semibold pb-4">Settings</div>
-          <div className="flex items-center gap-2">
-            <Checkbox
-              data-testid="hide-pure-markdown-checkbox"
-              id={checkboxId}
-              checked={settings.hidePureMarkdown}
-              onCheckedChange={(checked) =>
-                handleSettingChange("hidePureMarkdown", Boolean(checked))
-              }
-            />
-            <Label htmlFor={checkboxId}>Hide pure markdown</Label>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                data-testid="hide-pure-markdown-checkbox"
+                id={markdownCheckboxId}
+                checked={settings.hidePureMarkdown}
+                onCheckedChange={(checked) =>
+                  handleSettingChange("hidePureMarkdown", Boolean(checked))
+                }
+              />
+              <Label htmlFor={markdownCheckboxId}>Hide pure markdown</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                data-testid="hide-reusable-functions-checkbox"
+                id={functionsCheckboxId}
+                checked={settings.hideReusableFunctions}
+                onCheckedChange={(checked) =>
+                  handleSettingChange("hideReusableFunctions", Boolean(checked))
+                }
+              />
+              <Label htmlFor={functionsCheckboxId}>
+                Hide reusable functions
+              </Label>
+            </div>
           </div>
         </PopoverContent>
       </Popover>

package/src/components/dependency-graph/types.ts

@@ -17,4 +17,5 @@ export type GraphSelection =
 
 export interface GraphSettings {
   hidePureMarkdown: boolean;
+  hideReusableFunctions: boolean;
 }

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

@@ -226,7 +226,9 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const helperResizeHandle = (
     <PanelResizeHandle
+      disabled={!isSidebarOpen}
       onDragging={handleDragging}
+      hitAreaMargins={{ coarse: 15, fine: 2 }}
       className={cn(
         "border-border print:hidden z-10",
         isSidebarOpen ? "resize-handle" : "resize-handle-collapsed",
@@ -237,6 +239,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const panelResizeHandle = (
     <PanelResizeHandle
+      disabled={!isDeveloperPanelOpen}
       onDragging={handleDragging}
       className={cn(
         "border-border print:hidden z-20",
@@ -281,7 +284,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const helpPaneBody = (
     <ErrorBoundary>
       <PanelSectionProvider value="sidebar">
-        <div className="flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
+        <div className="flex flex-col h-full flex-1 overflow-hidden">
           <div className="p-3 border-b flex justify-between items-center">
             {selectedPanel === "dependencies" ? (
               <div className="flex items-center justify-between flex-1">

package/src/components/editor/package-alert.tsx

@@ -96,10 +96,10 @@ export const PackageAlert: React.FC = () => {
 
   if (isMissingPackageAlert(packageAlert)) {
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px]">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
         <Banner
           kind="danger"
-          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left overflow-auto max-h-[80vh] scrollbar-thin"
+          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left overflow-auto max-h-[80vh] scrollbar-thin pointer-events-auto"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">
@@ -207,10 +207,10 @@ export const PackageAlert: React.FC = () => {
     }
 
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] ">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
         <Banner
           kind={status === "failed" ? "danger" : "info"}
-          className="flex flex-col rounded pt-3 pb-4 px-5 overflow-auto max-h-[80vh] scrollbar-thin"
+          className="flex flex-col rounded pt-3 pb-4 px-5 overflow-auto max-h-[80vh] scrollbar-thin pointer-events-auto"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -172,11 +172,9 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
   // spacing is handled elsewhere
   return (
     <VerticalLayoutWrapper invisible={invisible} appConfig={appConfig}>
-      {showCode && canShowCode ? (
-        <div className="flex flex-col gap-5"> {renderCells()}</div>
-      ) : (
-        renderCells()
-      )}
+      <div className={cn("flex flex-col", showCode && canShowCode && "gap-5")}>
+        {renderCells()}
+      </div>
       {mode === "read" && (
         <ActionButtons
           canShowCode={canShowCode}