@marimo-team/islands 0.15.1-dev35 → 0.15.1-dev37

package/dist/{time-xz50ixjw.js → time-DIgCwTPW.js}

@@ -1,7 +1,7 @@
 import { R as P, r as ln, o as W, q as j, C as A, u as D, v as fn } from "./timer-BYwnU4DF.js";
-import { c as on, a as hn } from "./linear-dQhcTAFi.js";
+import { c as on, a as hn } from "./linear-DgEFYNPG.js";
 import { i as bn } from "./init-DxzjmxYy.js";
-import { a5 as gn, a6 as d, a7 as v, a8 as k, a9 as x, aa as F, ab as yn, ac as L, ad as S, ae as R, af as pn, ag as B, ah as K, ai as X, aj as Z, ak as $, al as E, am as mn, an as wn, ao as Mn, ap as dn, aq as vn, ar as kn, as as xn } from "./main-D01Ip2nU.js";
+import { a5 as gn, a6 as d, a7 as v, a8 as k, a9 as x, aa as F, ab as yn, ac as L, ad as S, ae as R, af as pn, ag as B, ah as K, ai as X, aj as Z, ak as $, al as E, am as mn, an as wn, ao as Mn, ap as dn, aq as vn, ar as kn, as as xn } from "./main-Ba_D9mBk.js";
 function Wn(n, t) {
   let i;
   if (t === void 0)

package/dist/{timeline-definition-3HZDQTIS-DCfRQsBD.js → timeline-definition-3HZDQTIS-pUzFxFZ5.js}

@@ -1,4 +1,4 @@
-import { _ as s, c as xt, l as E, d as j, V as kt, W as vt, X as _t, Y as bt, D as wt, $ as St, z as Et } from "./mermaid-B34jBB1t.js";
+import { _ as s, c as xt, l as E, d as j, V as kt, W as vt, X as _t, Y as bt, D as wt, $ as St, z as Et } from "./mermaid-31wfGVj7.js";
 import { d as nt } from "./arc-BXrety1g.js";
 var Q = function() {
   var n = /* @__PURE__ */ s(function(x, r, a, c) {

package/dist/{treemap-75Q7IDZK-Czj_vjx6.js → treemap-75Q7IDZK-Ign8SYM9.js}

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a2, _b, _c2, _d2, _e, _f2, _g, _h2, _i2, _j, _k, _l2, _m2, _n2, _o2, _p2, _q;
-import { e6 as Kl, bZ as Vl, aw as Ma, b2 as Hl, F as _t, aZ as Wl, az as Q, bv as jl, bw as zl, y as ql, A as Ni, z as Da, ax as Qs, e7 as Fa, aV as Yl, bb as Ga, e8 as Ua, aX as Xl, bd as wi, ay as Jl, e9 as Zl, br as Ql, ea as eu, a_ as Ie, D as vt, aC as _i, be as tu, eb as H, ec as Re } from "./main-D01Ip2nU.js";
-import { g as ei, d as bt, k as nu, v as W, l as Ba, m as ru, n as su, a as Ka, c as x, i as qe, r as ae, f as ke, o as z } from "./_baseUniq-CgfGPvnl.js";
-import { m as k, f as Lt, h as I, e as ti, l as Ot, d as iu } from "./min-ChovFCvo.js";
-import { ad as P } from "./mermaid-B34jBB1t.js";
-import { c as te } from "./clone-Cl9eDrzl.js";
+import { e6 as Kl, bZ as Vl, aw as Ma, b2 as Hl, F as _t, aZ as Wl, az as Q, bv as jl, bw as zl, y as ql, A as Ni, z as Da, ax as Qs, e7 as Fa, aV as Yl, bb as Ga, e8 as Ua, aX as Xl, bd as wi, ay as Jl, e9 as Zl, br as Ql, ea as eu, a_ as Ie, D as vt, aC as _i, be as tu, eb as H, ec as Re } from "./main-Ba_D9mBk.js";
+import { g as ei, d as bt, k as nu, v as W, l as Ba, m as ru, n as su, a as Ka, c as x, i as qe, r as ae, f as ke, o as z } from "./_baseUniq-Bwhom4Yj.js";
+import { m as k, f as Lt, h as I, e as ti, l as Ot, d as iu } from "./min-B0eHy8w_.js";
+import { ad as P } from "./mermaid-31wfGVj7.js";
+import { c as te } from "./clone-B8sd-ea0.js";
 var au = Object.prototype, ou = au.hasOwnProperty, Ee = Kl(function(n, e) {
   if (Vl(e) || Ma(e)) {
     Hl(e, _t(e), n);

package/dist/{vega-component-DBZQFLUs.js → vega-component-DVvmJHrM.js}

@@ -1,5 +1,5 @@
-import { Q as I, S as H, c as K, T as z, U as R, V as G, j as d, E as W, W as $, G as k, X as j, Y as M, Z as U, L as x, _ as O, $ as B, a0 as Q, a1 as Y, a2 as q, a3 as X, a4 as J } from "./main-D01Ip2nU.js";
-import { M as m, V as ee } from "./index-vNYAPeoC.js";
+import { Q as I, S as H, c as K, T as z, U as R, V as G, j as d, E as W, W as $, G as k, X as j, Y as M, Z as U, L as x, _ as O, $ as B, a0 as Q, a1 as Y, a2 as q, a3 as X, a4 as J } from "./main-Ba_D9mBk.js";
+import { M as m, V as ee } from "./index-D3Xg7lxM.js";
 function te(e) {
   return e.data && "url" in e.data && (e.data.url = I(e.data.url).href), e;
 }

package/dist/{xychartDiagram-FDP5SA34-B3r0R2eO.js → xychartDiagram-FDP5SA34-D7qqqxUJ.js}

@@ -1,9 +1,9 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i2, _j;
-import { _ as a, s as ei, g as si, t as Lt, q as ni, a as ai, b as oi, l as Et, K as ri, e as hi, z as li, G as xt, F as It, H as ci, M as ui, i as gi, ac as xi } from "./mermaid-B34jBB1t.js";
+import { _ as a, s as ei, g as si, t as Lt, q as ni, a as ai, b as oi, l as Et, K as ri, e as hi, z as li, G as xt, F as It, H as ci, M as ui, i as gi, ac as xi } from "./mermaid-31wfGVj7.js";
 import { i as di } from "./init-DxzjmxYy.js";
 import { o as fi } from "./ordinal-CYN5qNoq.js";
 import { r as pi } from "./range-DdOGybNB.js";
-import { l as Tt } from "./linear-dQhcTAFi.js";
+import { l as Tt } from "./linear-DgEFYNPG.js";
 import { l as Dt } from "./timer-BYwnU4DF.js";
 function ht() {
   var t = fi().unknown(void 0), i = t.domain, e = t.range, s = 0, n = 1, d, g, m = false, S = 0, D = 0, v = 0.5;

package/package.json

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

package/src/components/editor/Cell.tsx

@@ -2,8 +2,7 @@
 import { closeCompletion, completionStatus } from "@codemirror/autocomplete";
 import type { EditorView } from "@codemirror/view";
 import clsx from "clsx";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { ScopeProvider } from "jotai-scope";
+import { useAtomValue, useSetAtom } from "jotai";
 import {
   HelpCircleIcon,
   MoreHorizontalIcon,
@@ -78,7 +77,10 @@ import { useRunCell } from "./cell/useRunCells";
 import { HideCodeButton } from "./code/readonly-python-code";
 import { cellDomProps } from "./common";
 import { useCellNavigationProps } from "./navigation/navigation";
-import { temporarilyShownCodeAtom } from "./navigation/state";
+import {
+  useTemporarilyShownCode,
+  useTemporarilyShownCodeActions,
+} from "./navigation/state";
 import { OutputArea } from "./Output";
 import { ConsoleOutput } from "./output/ConsoleOutput";
 import { CellDragHandle, SortableCell } from "./SortableCell";
@@ -157,9 +159,8 @@ function useCellHiddenLogic({
   editorView: React.RefObject<EditorView | null>;
   editorViewParentRef: React.RefObject<HTMLDivElement | null>;
 }) {
-  const [temporarilyVisible, setTemporarilyVisible] = useAtom(
-    temporarilyShownCodeAtom,
-  );
+  const temporarilyVisible = useTemporarilyShownCode(cellId);
+  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const isUntouched = useAtomValue(
     useMemo(() => createUntouchedCellAtom(cellId), [cellId]),
   );
@@ -179,7 +180,7 @@ function useCellHiddenLogic({
 
     // Default to true
     const focus = opts?.focus ?? true;
-    setTemporarilyVisible(true);
+    temporarilyShownCodeActions.add(cellId);
 
     if (focus) {
       editorView.current?.focus();
@@ -297,16 +298,14 @@ const CellComponent = (props: CellProps) => {
 
   if (mode === "edit") {
     return (
-      <ScopeProvider atoms={[temporarilyShownCodeAtom]}>
-        <EditableCellComponent
-          {...props}
-          cellId={cellId}
-          editorView={editorView}
-          setEditorView={(ev) => {
-            editorView.current = ev;
-          }}
-        />
-      </ScopeProvider>
+      <EditableCellComponent
+        {...props}
+        cellId={cellId}
+        editorView={editorView}
+        setEditorView={(ev) => {
+          editorView.current = ev;
+        }}
+      />
     );
   }
 

package/src/components/editor/navigation/navigation.ts

@@ -33,7 +33,7 @@ import {
   useCellSelectionActions,
   useIsCellSelected,
 } from "./selection";
-import { temporarilyShownCodeAtom } from "./state";
+import { useTemporarilyShownCodeActions } from "./state";
 import { handleVimKeybinding } from "./vim-bindings";
 
 interface HotkeyHandler {
@@ -85,7 +85,7 @@ function addSingleHandler(handler: HotkeyHandler["bulkHandle"]): HotkeyHandler {
 function useCellFocusProps(cellId: CellId) {
   const focusActions = useCellFocusActions();
   const actions = useCellActions();
-  const setTemporarilyShownCode = useSetAtom(temporarilyShownCodeAtom);
+  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
 
   // This occurs at the cell level and descedants.
   const { focusWithinProps } = useFocusWithin({
@@ -95,7 +95,7 @@ function useCellFocusProps(cellId: CellId) {
     },
     onBlurWithin: () => {
       // On blur, hide the code if it was temporarily shown.
-      setTemporarilyShownCode(false);
+      temporarilyShownCodeActions.remove(cellId);
       actions.markTouched({ cellId });
       focusActions.blurCell();
     },
@@ -132,7 +132,7 @@ export function useCellNavigationProps(
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const actions = useCellActions();
   const store = useStore();
-  const setTemporarilyShownCode = useSetAtom(temporarilyShownCodeAtom);
+  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const runCells = useRunCells();
   const keymapPreset = useAtomValue(keymapPresetAtom);
   const { copyCells, pasteAtCell } = useCellClipboard();
@@ -275,7 +275,7 @@ export function useCellNavigationProps(
         },
         // Enter will focus the cell editor.
         Enter: () => {
-          setTemporarilyShownCode(true);
+          temporarilyShownCodeActions.add(cellId);
           focusCellEditor(store, cellId);
           selectionActions.clear();
           return true;
@@ -608,7 +608,7 @@ export function useCellEditorNavigationProps(
   cellId: CellId,
   editorView: React.RefObject<EditorView | null>,
 ) {
-  const setTemporarilyShownCode = useSetAtom(temporarilyShownCodeAtom);
+  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const keymapPreset = useAtomValue(keymapPresetAtom);
   const hotkeys = useAtomValue(hotkeysAtom);
 
@@ -618,7 +618,7 @@ export function useCellEditorNavigationProps(
   }, [hotkeys]);
 
   const exitToCommandMode = () => {
-    setTemporarilyShownCode(false);
+    temporarilyShownCodeActions.remove(cellId);
     focusCell(cellId);
   };
 

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

@@ -1,5 +1,37 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { atom } from "jotai";
+import { atom, useAtomValue } from "jotai";
+import { useMemo } from "react";
+import type { CellId } from "@/core/cells/ids";
+import { createReducerAndAtoms } from "@/utils/createReducer";
 
-export const temporarilyShownCodeAtom = atom<boolean>(false);
+type TemporarilyShownCodeState = Set<CellId>;
+
+// This previously used jotai-scope, but unfortunately this bug creates unnecessary work:
+// https://github.com/jotaijs/jotai-scope/issues/25
+
+const {
+  valueAtom: temporarilyShownCodeAtom,
+  useActions: useTemporarilyShownCodeActions,
+} = createReducerAndAtoms(() => new Set<CellId>(), {
+  add: (state: TemporarilyShownCodeState, cellId: CellId) => {
+    const newState = new Set(state);
+    newState.add(cellId);
+    return newState;
+  },
+  remove: (state: TemporarilyShownCodeState, cellId: CellId) => {
+    const newState = new Set(state);
+    newState.delete(cellId);
+    return newState;
+  },
+});
+
+const createTemporarilyShownCodeAtom = (cellId: CellId) =>
+  atom((get) => get(temporarilyShownCodeAtom).has(cellId));
+
+export function useTemporarilyShownCode(cellId: CellId) {
+  const atom = useMemo(() => createTemporarilyShownCodeAtom(cellId), [cellId]);
+  return useAtomValue(atom);
+}
+
+export { temporarilyShownCodeAtom, useTemporarilyShownCodeActions };

package/src/core/islands/islands.css

@@ -1,12 +1,3 @@
-@import url("../../css/common.css");
-@import url("../../css/globals.css");
-@import url("../../css/codehilite.css");
-@import url("../../css/katex.min.css");
-@import url("../../css/md.css");
-@import url("../../css/admonition.css");
-@import url("../../css/md-tooltip.css");
-@import url("../../css/table.css");
-
 @reference "../../css/globals.css";
 
 .marimo {

package/src/core/islands/main.ts

@@ -1,5 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import "./islands.css";
+import "../../css/common.css";
+import "../../css/globals.css";
+import "../../css/codehilite.css";
+import "../../css/katex.min.css";
+import "../../css/md.css";
+import "../../css/admonition.css";
+import "../../css/md-tooltip.css";
+import "../../css/table.css";
+
 import "iconify-icon";
 
 import { toast } from "@/components/ui/use-toast";