@marimo-team/islands 0.15.2 → 0.15.3

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -0,0 +1,215 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { Meta } from "@storybook/react-vite";
+import { createStore, Provider } from "jotai";
+import { createRef } from "react";
+import { type NotebookState, notebookAtom } from "@/core/cells/cells";
+import { createCellRuntimeState } from "@/core/cells/types";
+import { defaultUserConfig, parseAppConfig } from "@/core/config/config-schema";
+import { showCodeInRunModeAtom } from "@/core/meta/state";
+import { connectionAtom } from "@/core/network/connection";
+import { requestClientAtom } from "@/core/network/requests";
+import { resolveRequestClient } from "@/core/network/resolve.ts";
+import { WebSocketState } from "@/core/websocket/types";
+import { MultiColumn } from "@/utils/id-tree";
+import type { Milliseconds, Seconds } from "@/utils/time";
+import { CellArray } from "../../../components/editor/renderers/CellArray";
+import { CellsRenderer } from "../../../components/editor/renderers/cells-renderer";
+import { TooltipProvider } from "../../../components/ui/tooltip";
+import type { CellId } from "../../../core/cells/ids";
+
+const createLongReprNotebook = (
+  cellId: CellId,
+  hideCode = false,
+): NotebookState => ({
+  cellData: {
+    [cellId]: {
+      id: cellId,
+      name: "_",
+      code: `class LongReprA:
+    def __repr__(self):
+        return "<dlt.Relation(dataset='" + ("jaffle_ingest_dataset_" * 80) + \\
+            "', destination='<dlt.destinations.duckdb(destination_type=\\'duckdb\\'," + \\
+            " credentials=\\'local_jaffle.duckdb\\')>')>"
+
+print('hello')
+LongReprA()`,
+      edited: false,
+      serializedEditorState: null,
+      config: {
+        hide_code: hideCode,
+        disabled: false,
+        column: null,
+      },
+      lastCodeRun: `class LongReprA:
+    def __repr__(self):
+        return "<dlt.Relation(dataset='" + ("jaffle_ingest_dataset_" * 80) + \\
+            "', destination='<dlt.destinations.duckdb(destination_type=\\'duckdb\\'," + \\
+            " credentials=\\'local_jaffle.duckdb\\')>')>"
+
+print('hello')
+LongReprA()`,
+      lastExecutionTime: null,
+    },
+  },
+  cellIds: MultiColumn.from([[cellId]]),
+  cellRuntime: {
+    [cellId]: createCellRuntimeState({
+      output: {
+        channel: "output",
+        data: "<dlt.Relation(dataset='jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_jaffle_ingest_dataset_', destination='<dlt.destinations.duckdb(destination_type='duckdb', credentials='local_jaffle.duckdb')>')>",
+        mimetype: "text/plain",
+        timestamp: 1_686_863_710,
+      },
+      runElapsedTimeMs: 8 as Milliseconds,
+      status: "idle",
+      consoleOutputs: [
+        {
+          channel: "stdout",
+          mimetype: "text/plain",
+          data: "hello",
+          timestamp: 1_686_863_705,
+        },
+      ],
+      interrupted: false,
+      errored: false,
+      stopped: false,
+      staleInputs: false,
+      runStartTimestamp: 0 as Seconds,
+      lastRunStartTimestamp: 0 as Seconds,
+      debuggerActive: false,
+      outline: null,
+    }),
+  },
+  cellHandles: {
+    [cellId]: createRef(),
+  },
+  cellLogs: [],
+  history: [],
+  scrollKey: null,
+  untouchedNewCells: new Set(),
+});
+
+export default {
+  title: "Layout/Vertical/One Column",
+  component: CellsRenderer,
+  args: {},
+} satisfies Meta<typeof CellsRenderer>;
+
+type W = Window & { __MARIMO_STATIC__?: { files: Record<string, unknown> } };
+
+const EditModeCodeShown = () => {
+  const cellId = "Hbol" as CellId;
+  const notebook = createLongReprNotebook(cellId);
+
+  const store = createStore();
+  store.set(notebookAtom, notebook);
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(requestClientAtom, resolveRequestClient());
+  store.set(showCodeInRunModeAtom, true);
+
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <CellsRenderer appConfig={parseAppConfig({})} mode="edit">
+          <CellArray
+            mode="edit"
+            userConfig={defaultUserConfig()}
+            appConfig={parseAppConfig({})}
+          />
+        </CellsRenderer>
+      </TooltipProvider>
+    </Provider>
+  );
+};
+
+const EditModeCodeHidden = () => {
+  const cellId = "Hbol" as CellId;
+  const notebook = createLongReprNotebook(cellId, true);
+
+  const store = createStore();
+  store.set(notebookAtom, notebook);
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(requestClientAtom, resolveRequestClient());
+  store.set(showCodeInRunModeAtom, true);
+
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <CellsRenderer appConfig={parseAppConfig({})} mode="edit">
+          <CellArray
+            mode="edit"
+            userConfig={defaultUserConfig()}
+            appConfig={parseAppConfig({})}
+          />
+        </CellsRenderer>
+      </TooltipProvider>
+    </Provider>
+  );
+};
+
+const ReadModeCodeShown = () => {
+  const cellId = "Hbol" as CellId;
+  const notebook = createLongReprNotebook(cellId);
+
+  const store = createStore();
+  store.set(notebookAtom, notebook);
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(requestClientAtom, resolveRequestClient());
+  store.set(showCodeInRunModeAtom, true);
+
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <CellsRenderer appConfig={parseAppConfig({})} mode="read" />
+      </TooltipProvider>
+    </Provider>
+  );
+};
+
+const ReadModeCodeHidden = () => {
+  const cellId = "Hbol" as CellId;
+  const notebook = createLongReprNotebook(cellId);
+
+  const store = createStore();
+  store.set(notebookAtom, notebook);
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(requestClientAtom, resolveRequestClient());
+  store.set(showCodeInRunModeAtom, true);
+
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <CellsRenderer appConfig={parseAppConfig({})} mode="read" />
+      </TooltipProvider>
+    </Provider>
+  );
+};
+
+export const EditModeCodeShownStory = {
+  render: () => <EditModeCodeShown />,
+  name: "Edit Mode - Code Shown",
+};
+export const EditModeCodeHiddenStory = {
+  render: () => <EditModeCodeHidden />,
+  name: "Edit Mode - Code Hidden",
+};
+export const ReadModeCodeShownStory = {
+  render: () => {
+    if (typeof window !== "undefined") {
+      (window as W).__MARIMO_STATIC__ = { files: {} };
+    }
+
+    return <ReadModeCodeShown />;
+  },
+  name: "Read Mode - Code Shown",
+};
+export const ReadModeCodeHiddenStory = {
+  render: () => {
+    if (typeof window !== "undefined") {
+      delete (window as W).__MARIMO_STATIC__;
+    }
+    return <ReadModeCodeHidden />;
+  },
+  name: "Read Mode - Code Hidden",
+};

package/src/theme/useTheme.ts

@@ -74,12 +74,17 @@ setupThemeListener();
 
 function getVsCodeTheme(): "light" | "dark" | undefined {
   const kind = document.body.dataset.vscodeThemeKind;
-  if (kind === "vscode-dark") {
-    return "dark";
-  } else if (kind === "vscode-high-contrast") {
-    return "dark";
-  } else if (kind === "vscode-light") {
-    return "light";
+  switch (kind) {
+    case "vscode-dark":
+      return "dark";
+
+    case "vscode-high-contrast":
+      return "dark";
+
+    case "vscode-light":
+      return "light";
+
+    // No default
   }
   return undefined;
 }

package/src/utils/__tests__/blob.test.ts

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, test } from "vitest";
 import { deserializeBlob, serializeBlob } from "../blob";
+import { blobToString } from "../fileToBase64";
 
 describe("Blob serialization and deserialization", () => {
   const testString = "Hello, world!";
@@ -50,3 +51,39 @@ describe("Blob serialization and deserialization", () => {
     expect(deserialized.type).toBe(imageBlob.type);
   });
 });
+
+describe("blobToString", () => {
+  const testString = "Hello, world!";
+  const mimeType = "text/plain";
+
+  test("should convert a Blob to a base64 string", async () => {
+    const blob = new Blob([testString], { type: mimeType });
+    const base64 = await blobToString(blob, "base64");
+    expect(base64).toBe(btoa(testString));
+  });
+
+  test("should convert a File to a base64 string", async () => {
+    const file = new File([testString], "test.txt", { type: mimeType });
+    const base64 = await blobToString(file, "base64");
+    expect(base64).toBe(btoa(testString));
+  });
+
+  test("should convert a Blob to a data URL", async () => {
+    const blob = new Blob([testString], { type: mimeType });
+    const dataUrl = await blobToString(blob, "dataUrl");
+    expect(dataUrl).toBe(`data:${mimeType};base64,${btoa(testString)}`);
+  });
+
+  test("should handle empty Blob", async () => {
+    const blob = new Blob([], { type: mimeType });
+    const base64 = await blobToString(blob, "base64");
+    expect(base64).toBe("");
+  });
+
+  test("should handle binary data", async () => {
+    const binaryData = new Uint8Array([0, 1, 2, 3, 4, 5]);
+    const blob = new Blob([binaryData], { type: "application/octet-stream" });
+    const base64 = await blobToString(blob, "base64");
+    expect(base64).toBe(btoa(String.fromCharCode(...binaryData)));
+  });
+});

package/src/utils/arrays.ts

@@ -73,3 +73,16 @@ export function arrayToggle<T>(arr: T[], item: T): T[] {
   result.splice(index, 1);
   return result;
 }
+
+export function uniqueBy<T>(arr: T[], key: (item: T) => string): T[] {
+  const result = [];
+  const seen = new Set();
+  for (const item of arr) {
+    const k = key(item);
+    if (!seen.has(k)) {
+      seen.add(k);
+      result.push(item);
+    }
+  }
+  return result;
+}

package/src/utils/fileToBase64.ts

@@ -1,14 +1,29 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-export function blobToBase64(blob: Blob): Promise<string> {
+
+/**
+ * Converts a Blob or File to either a base64-encoded string or a data URL.
+ *
+ * @param input - The Blob or File to convert.
+ * @param format - The output format: "base64" for the base64-encoded string, "dataUrl" for the full data URL.
+ * @returns A promise that resolves to the requested string representation.
+ */
+export function blobToString(
+  input: Blob | File,
+  format: "base64" | "dataUrl",
+): Promise<string> {
   return new Promise((resolve) => {
     const reader = new FileReader();
-    reader.readAsDataURL(blob);
+    reader.readAsDataURL(input);
     reader.onload = (e) => {
       if (e.target?.result) {
         const dataURL = e.target.result as string;
-        // Get contents from a string of the form: data:*/*;base64,contents
-        const b64EncodedContents = dataURL.slice(dataURL.indexOf(",") + 1);
-        resolve(b64EncodedContents);
+        if (format === "base64") {
+          // Extract base64 content from data URL. data:*/*;base64,contents
+          const base64Content = dataURL.slice(dataURL.indexOf(",") + 1);
+          resolve(base64Content);
+        } else {
+          resolve(dataURL);
+        }
       }
     };
   });
@@ -22,7 +37,7 @@ export function blobToBase64(blob: Blob): Promise<string> {
 export function filesToBase64(files: File[]): Promise<Array<[string, string]>> {
   return Promise.all(
     files.map((file) =>
-      blobToBase64(file).then(
+      blobToString(file, "base64").then(
         (contents) => [file.name, contents] as [string, string],
       ),
     ),

package/src/utils/json/base64.ts

@@ -26,8 +26,11 @@ export function deserializeJson<T>(jsonString: JsonString<T>): T {
   return JSON.parse(jsonString) as T;
 }
 
-export function base64ToDataURL<T>(base64: Base64String<T>, mimeType: string) {
-  return `data:${mimeType};base64,${base64}`;
+export function base64ToDataURL<T>(
+  base64: Base64String<T>,
+  mimeType: string,
+): DataURLString {
+  return `data:${mimeType};base64,${base64}` as DataURLString;
 }
 
 export function typedAtob<T>(base64: Base64String<T>): ByteString<T> {

package/src/utils/numbers.ts

@@ -1,8 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-export function prettyNumber(
-  value: number | string | undefined | null | boolean | unknown[],
-): string {
+export function prettyNumber(value: unknown): string {
   if (value === undefined || value === null) {
     return "";
   }
@@ -19,10 +17,14 @@ export function prettyNumber(
     return String(value);
   }
 
-  return value.toLocaleString(undefined, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  });
+  if (typeof value === "number" || typeof value === "bigint") {
+    return value.toLocaleString(undefined, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    });
+  }
+
+  return String(value);
 }
 
 function scientificSpecialCase(value: number): string | null {

package/dist/any-language-editor-DC5170DQ.js

@@ -1,45 +0,0 @@
-import { c as b, L, l as h, j as g, E, a as v, C as y, R as N } from "./main-B5yML0bw.js";
-const $ = (x) => {
-  const e = b.c(26);
-  let t, o, l, s;
-  e[0] !== x ? ({
-    language: t,
-    showCopyButton: l,
-    extensions: s,
-    ...o
-  } = x, e[0] = x, e[1] = t, e[2] = o, e[3] = l, e[4] = s) : (t = e[1], o = e[2], l = e[3], s = e[4]);
-  let u;
-  e[5] !== s ? (u = s === void 0 ? [] : s, e[5] = s, e[6] = u) : u = e[6];
-  const c = u, a = t && !(t in v);
-  a && L.warn(`Language ${t} not found in CodeMirror.`);
-  let m;
-  e: {
-    if (!t) {
-      m = c;
-      break e;
-    }
-    const C = t;
-    let p;
-    e[7] !== C ? (p = h(C), e[7] = C, e[8] = p) : p = e[8];
-    let f;
-    e[9] !== c || e[10] !== p ? (f = [p, ...c].filter(Boolean), e[9] = c, e[10] = p, e[11] = f) : f = e[11], m = f;
-  }
-  const j = m;
-  let r;
-  e[12] !== a || e[13] !== t ? (r = a && /* @__PURE__ */ g.jsx(E, { className: "mb-1 rounded-sm", error: `Language ${t} not supported. 
-
-Supported languages are: ${Object.keys(v).join(", ")}` }), e[12] = a, e[13] = t, e[14] = r) : r = e[14];
-  let n;
-  e[15] !== a || e[16] !== o || e[17] !== l ? (n = l && !a && /* @__PURE__ */ g.jsx(y, { tooltip: false, className: "absolute top-2 right-2 p-1 hover-action z-10 text-muted-foreground", value: o.value || "", toastTitle: "Copied to clipboard" }), e[15] = a, e[16] = o, e[17] = l, e[18] = n) : n = e[18];
-  let i;
-  e[19] !== j || e[20] !== o ? (i = /* @__PURE__ */ g.jsx(N, { ...o, extensions: j }), e[19] = j, e[20] = o, e[21] = i) : i = e[21];
-  let d;
-  return e[22] !== r || e[23] !== n || e[24] !== i ? (d = /* @__PURE__ */ g.jsxs("div", { className: "relative w-full group hover-actions-parent", children: [
-    r,
-    n,
-    i
-  ] }), e[22] = r, e[23] = n, e[24] = i, e[25] = d) : d = e[25], d;
-};
-export {
-  $ as default
-};

package/dist/asn1-jKiBa2Ya.js

@@ -1,95 +0,0 @@
-function u(i) {
-  for (var s = {}, c = i.split(" "), T = 0; T < c.length; ++T) s[c[T]] = true;
-  return s;
-}
-const o = {
-  keywords: u("DEFINITIONS OBJECTS IF DERIVED INFORMATION ACTION REPLY ANY NAMED CHARACTERIZED BEHAVIOUR REGISTERED WITH AS IDENTIFIED CONSTRAINED BY PRESENT BEGIN IMPORTS FROM UNITS SYNTAX MIN-ACCESS MAX-ACCESS MINACCESS MAXACCESS REVISION STATUS DESCRIPTION SEQUENCE SET COMPONENTS OF CHOICE DistinguishedName ENUMERATED SIZE MODULE END INDEX AUGMENTS EXTENSIBILITY IMPLIED EXPORTS"),
-  cmipVerbs: u("ACTIONS ADD GET NOTIFICATIONS REPLACE REMOVE"),
-  compareTypes: u("OPTIONAL DEFAULT MANAGED MODULE-TYPE MODULE_IDENTITY MODULE-COMPLIANCE OBJECT-TYPE OBJECT-IDENTITY OBJECT-COMPLIANCE MODE CONFIRMED CONDITIONAL SUBORDINATE SUPERIOR CLASS TRUE FALSE NULL TEXTUAL-CONVENTION"),
-  status: u("current deprecated mandatory obsolete"),
-  tags: u("APPLICATION AUTOMATIC EXPLICIT IMPLICIT PRIVATE TAGS UNIVERSAL"),
-  storage: u("BOOLEAN INTEGER OBJECT IDENTIFIER BIT OCTET STRING UTCTime InterfaceIndex IANAifType CMIP-Attribute REAL PACKAGE PACKAGES IpAddress PhysAddress NetworkAddress BITS BMPString TimeStamp TimeTicks TruthValue RowStatus DisplayString GeneralString GraphicString IA5String NumericString PrintableString SnmpAdminString TeletexString UTF8String VideotexString VisibleString StringStore ISO646String T61String UniversalString Unsigned32 Integer32 Gauge Gauge32 Counter Counter32 Counter64"),
-  modifier: u("ATTRIBUTE ATTRIBUTES MANDATORY-GROUP MANDATORY-GROUPS GROUP GROUPS ELEMENTS EQUALITY ORDERING SUBSTRINGS DEFINED"),
-  accessTypes: u("not-accessible accessible-for-notify read-only read-create read-write"),
-  multiLineStrings: true
-};
-function g(i) {
-  var s = i.keywords || o.keywords, c = i.cmipVerbs || o.cmipVerbs, T = i.compareTypes || o.compareTypes, N = i.status || o.status, d = i.tags || o.tags, f = i.storage || o.storage, m = i.modifier || o.modifier, C = i.accessTypes || o.accessTypes;
-  i.multiLineStrings || o.multiLineStrings;
-  var R = i.indentStatements !== false, A = /[\|\^]/, E;
-  function y(e, n) {
-    var t = e.next();
-    if (t == '"' || t == "'")
-      return n.tokenize = D(t), n.tokenize(e, n);
-    if (/[\[\]\(\){}:=,;]/.test(t))
-      return E = t, "punctuation";
-    if (t == "-" && e.eat("-"))
-      return e.skipToEnd(), "comment";
-    if (/\d/.test(t))
-      return e.eatWhile(/[\w\.]/), "number";
-    if (A.test(t))
-      return e.eatWhile(A), "operator";
-    e.eatWhile(/[\w\-]/);
-    var r = e.current();
-    return s.propertyIsEnumerable(r) ? "keyword" : c.propertyIsEnumerable(r) ? "variableName" : T.propertyIsEnumerable(r) ? "atom" : N.propertyIsEnumerable(r) ? "comment" : d.propertyIsEnumerable(r) ? "typeName" : f.propertyIsEnumerable(r) || m.propertyIsEnumerable(r) || C.propertyIsEnumerable(r) ? "modifier" : "variableName";
-  }
-  function D(e) {
-    return function(n, t) {
-      for (var r = false, S, O = false; (S = n.next()) != null; ) {
-        if (S == e && !r) {
-          var I = n.peek();
-          I && (I = I.toLowerCase(), (I == "b" || I == "h" || I == "o") && n.next()), O = true;
-          break;
-        }
-        r = !r && S == "\\";
-      }
-      return O && (t.tokenize = null), "string";
-    };
-  }
-  function p(e, n, t, r, S) {
-    this.indented = e, this.column = n, this.type = t, this.align = r, this.prev = S;
-  }
-  function a(e, n, t) {
-    var r = e.indented;
-    return e.context && e.context.type == "statement" && (r = e.context.indented), e.context = new p(r, n, t, null, e.context);
-  }
-  function l(e) {
-    var n = e.context.type;
-    return (n == ")" || n == "]" || n == "}") && (e.indented = e.context.indented), e.context = e.context.prev;
-  }
-  return {
-    name: "asn1",
-    startState: function() {
-      return {
-        tokenize: null,
-        context: new p(-2, 0, "top", false),
-        indented: 0,
-        startOfLine: true
-      };
-    },
-    token: function(e, n) {
-      var t = n.context;
-      if (e.sol() && (t.align == null && (t.align = false), n.indented = e.indentation(), n.startOfLine = true), e.eatSpace()) return null;
-      E = null;
-      var r = (n.tokenize || y)(e, n);
-      if (r == "comment") return r;
-      if (t.align == null && (t.align = true), (E == ";" || E == ":" || E == ",") && t.type == "statement")
-        l(n);
-      else if (E == "{") a(n, e.column(), "}");
-      else if (E == "[") a(n, e.column(), "]");
-      else if (E == "(") a(n, e.column(), ")");
-      else if (E == "}") {
-        for (; t.type == "statement"; ) t = l(n);
-        for (t.type == "}" && (t = l(n)); t.type == "statement"; ) t = l(n);
-      } else E == t.type ? l(n) : R && ((t.type == "}" || t.type == "top") && E != ";" || t.type == "statement" && E == "newstatement") && a(n, e.column(), "statement");
-      return n.startOfLine = false, r;
-    },
-    languageData: {
-      indentOnInput: /^\s*[{}]$/,
-      commentTokens: { line: "--" }
-    }
-  };
-}
-export {
-  g as asn1
-};