@marimo-team/islands 0.21.2-dev95 → 0.21.2-dev98

package/dist/main.js

@@ -58285,7 +58285,7 @@ ${c}
       fullWidth: h,
       children: S
     }), r[53] = e.fullWidth, r[54] = e.label, r[55] = S, r[56] = w) : w = r[56], w;
-  }, import_compiler_runtime$22 = require_compiler_runtime(), TextInputPlugin = class {
+  }, import_compiler_runtime$22 = require_compiler_runtime(), MASK_PLACEHOLDER = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", TextInputPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-text");
       __publicField(this, "validator", object({
@@ -58305,19 +58305,30 @@ ${c}
         debounce: optional(union([
           boolean(),
           number()
-        ]))
+        ])),
+        passwordHasValue: boolean().optional()
       }));
     }
     render(e) {
+      var _a3;
+      let r = e.data.kind === "password" ? (_a3 = e.host.closest(`[${RANDOM_ID_ATTR}]`)) == null ? void 0 : _a3.getAttribute(RANDOM_ID_ATTR) : void 0;
       return (0, import_jsx_runtime.jsx)(TextComponent, {
         ...e.data,
         value: e.value,
         setValue: e.setValue
-      });
+      }, r ?? void 0);
     }
   }, TextComponent = (e) => {
-    let r = (0, import_compiler_runtime$22.c)(66), [c, d] = (0, import_react.useState)(e.value), f = c ?? e.value, h = validate(e.kind, f), _;
-    r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = {
+    let r = (0, import_compiler_runtime$22.c)(60), [c, d] = (0, import_react.useState)(e.kind === "password" && e.passwordHasValue === true), f = (0, import_react.useRef)(false), h = c ? "" : e.value, _ = c ? MASK_PLACEHOLDER : e.placeholder, v;
+    r[0] !== c || r[1] !== e ? (v = c ? (r2) => {
+      f.current && (d(false), e.setValue(r2));
+    } : e.setValue, r[0] = c, r[1] = e, r[2] = v) : v = r[2];
+    let y = v, S;
+    r[3] === c ? S = r[4] : (S = c ? () => {
+      f.current = true;
+    } : void 0, r[3] = c, r[4] = S);
+    let w = S, [E, O] = (0, import_react.useState)(e.value), M = E ?? h, I = validate(e.kind, M), z;
+    r[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = {
       text: null,
       password: (0, import_jsx_runtime.jsx)(Lock, {
         size: 16
@@ -58328,108 +58339,89 @@ ${c}
       url: (0, import_jsx_runtime.jsx)(Globe, {
         size: 16
       })
-    }, r[0] = _) : _ = r[0];
-    let v = _, y;
-    r[1] !== e.maxLength || r[2] !== e.value ? (y = e.maxLength ? (0, import_jsx_runtime.jsxs)("span", {
+    }, r[5] = z) : z = r[5];
+    let G = z, q;
+    r[6] !== e.maxLength || r[7] !== h ? (q = e.maxLength ? (0, import_jsx_runtime.jsxs)("span", {
       className: "text-muted-foreground text-xs font-medium",
       children: [
-        e.value.length,
+        h.length,
         "/",
         e.maxLength
       ]
-    }) : null, r[1] = e.maxLength, r[2] = e.value, r[3] = y) : y = r[3];
-    let S = y;
+    }) : null, r[6] = e.maxLength, r[7] = h, r[8] = q) : q = r[8];
+    let Q7 = q, $7 = !I, e9;
+    r[9] !== e.fullWidth || r[10] !== $7 ? (e9 = cn({
+      "border-destructive": $7,
+      "w-full": e.fullWidth
+    }), r[9] = e.fullWidth, r[10] = $7, r[11] = e9) : e9 = r[11];
+    let t9 = e9, n9;
     if (e.debounce === true) {
-      let c2 = e.label, d2 = e.fullWidth, f2 = e.kind, _2 = v[e.kind], y2 = e.placeholder, w2 = e.maxLength, E2 = e.minLength, O2 = e.minLength != null && e.minLength > 0, M2 = e.disabled, I2 = !h, z2;
-      r[4] !== e.fullWidth || r[5] !== I2 ? (z2 = cn({
-        "border-destructive": I2,
-        "w-full": e.fullWidth
-      }), r[4] = e.fullWidth, r[5] = I2, r[6] = z2) : z2 = r[6];
-      let G2;
-      r[7] !== S || r[8] !== e.disabled || r[9] !== e.kind || r[10] !== e.maxLength || r[11] !== e.minLength || r[12] !== e.placeholder || r[13] !== e.setValue || r[14] !== e.value || r[15] !== z2 || r[16] !== _2 || r[17] !== O2 ? (G2 = (0, import_jsx_runtime.jsx)(OnBlurredInput, {
+      let c2 = G[e.kind], d2 = e.minLength != null && e.minLength > 0, f2;
+      r[12] !== Q7 || r[13] !== t9 || r[14] !== w || r[15] !== _ || r[16] !== e.disabled || r[17] !== e.kind || r[18] !== e.maxLength || r[19] !== e.minLength || r[20] !== y || r[21] !== c2 || r[22] !== d2 || r[23] !== h ? (f2 = (0, import_jsx_runtime.jsx)(OnBlurredInput, {
         "data-testid": "marimo-plugin-text-input",
-        type: f2,
-        icon: _2,
-        placeholder: y2,
-        maxLength: w2,
-        minLength: E2,
-        required: O2,
-        disabled: M2,
-        className: z2,
-        endAdornment: S,
-        value: e.value,
-        onValueChange: e.setValue
-      }), r[7] = S, r[8] = e.disabled, r[9] = e.kind, r[10] = e.maxLength, r[11] = e.minLength, r[12] = e.placeholder, r[13] = e.setValue, r[14] = e.value, r[15] = z2, r[16] = _2, r[17] = O2, r[18] = G2) : G2 = r[18];
-      let q2;
-      return r[19] !== e.fullWidth || r[20] !== e.label || r[21] !== G2 ? (q2 = (0, import_jsx_runtime.jsx)(Labeled, {
-        label: c2,
-        fullWidth: d2,
-        children: G2
-      }), r[19] = e.fullWidth, r[20] = e.label, r[21] = G2, r[22] = q2) : q2 = r[22], q2;
-    }
-    if (typeof e.debounce == "number") {
-      let c2 = e.label, f2 = e.fullWidth, _2 = e.kind, y2 = v[e.kind], w2 = e.placeholder, E2 = e.maxLength, O2 = e.minLength, M2 = e.minLength != null && e.minLength > 0, I2 = e.disabled, z2 = !h, G2;
-      r[23] !== e.fullWidth || r[24] !== z2 ? (G2 = cn({
-        "border-destructive": z2,
-        "w-full": e.fullWidth
-      }), r[23] = e.fullWidth, r[24] = z2, r[25] = G2) : G2 = r[25];
-      let q2;
-      r[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (q2 = (e2) => d(e2.currentTarget.value), r[26] = q2) : q2 = r[26];
-      let Q72;
-      r[27] !== S || r[28] !== e.debounce || r[29] !== e.disabled || r[30] !== e.kind || r[31] !== e.maxLength || r[32] !== e.minLength || r[33] !== e.placeholder || r[34] !== e.setValue || r[35] !== e.value || r[36] !== G2 || r[37] !== y2 || r[38] !== M2 ? (Q72 = (0, import_jsx_runtime.jsx)(DebouncedInput, {
+        type: e.kind,
+        icon: c2,
+        placeholder: _,
+        maxLength: e.maxLength,
+        minLength: e.minLength,
+        required: d2,
+        disabled: e.disabled,
+        className: t9,
+        endAdornment: Q7,
+        value: h,
+        onValueChange: y,
+        onInputCapture: w
+      }), r[12] = Q7, r[13] = t9, r[14] = w, r[15] = _, r[16] = e.disabled, r[17] = e.kind, r[18] = e.maxLength, r[19] = e.minLength, r[20] = y, r[21] = c2, r[22] = d2, r[23] = h, r[24] = f2) : f2 = r[24], n9 = f2;
+    } else if (typeof e.debounce == "number") {
+      let c2 = G[e.kind], d2 = e.minLength != null && e.minLength > 0, f2;
+      r[25] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (f2 = (e2) => O(e2.currentTarget.value), r[25] = f2) : f2 = r[25];
+      let v2;
+      r[26] !== Q7 || r[27] !== t9 || r[28] !== w || r[29] !== _ || r[30] !== e.debounce || r[31] !== e.disabled || r[32] !== e.kind || r[33] !== e.maxLength || r[34] !== e.minLength || r[35] !== y || r[36] !== c2 || r[37] !== d2 || r[38] !== h ? (v2 = (0, import_jsx_runtime.jsx)(DebouncedInput, {
         "data-testid": "marimo-plugin-text-input",
-        type: _2,
-        icon: y2,
-        placeholder: w2,
-        maxLength: E2,
-        minLength: O2,
-        required: M2,
-        disabled: I2,
-        className: G2,
-        endAdornment: S,
-        value: e.value,
-        onValueChange: e.setValue,
-        onBlur: q2,
-        delay: e.debounce
-      }), r[27] = S, r[28] = e.debounce, r[29] = e.disabled, r[30] = e.kind, r[31] = e.maxLength, r[32] = e.minLength, r[33] = e.placeholder, r[34] = e.setValue, r[35] = e.value, r[36] = G2, r[37] = y2, r[38] = M2, r[39] = Q72) : Q72 = r[39];
-      let $72;
-      return r[40] !== e.fullWidth || r[41] !== e.label || r[42] !== Q72 ? ($72 = (0, import_jsx_runtime.jsx)(Labeled, {
-        label: c2,
-        fullWidth: f2,
-        children: Q72
-      }), r[40] = e.fullWidth, r[41] = e.label, r[42] = Q72, r[43] = $72) : $72 = r[43], $72;
+        type: e.kind,
+        icon: c2,
+        placeholder: _,
+        maxLength: e.maxLength,
+        minLength: e.minLength,
+        required: d2,
+        disabled: e.disabled,
+        className: t9,
+        endAdornment: Q7,
+        value: h,
+        onValueChange: y,
+        onBlur: f2,
+        delay: e.debounce,
+        onInputCapture: w
+      }), r[26] = Q7, r[27] = t9, r[28] = w, r[29] = _, r[30] = e.debounce, r[31] = e.disabled, r[32] = e.kind, r[33] = e.maxLength, r[34] = e.minLength, r[35] = y, r[36] = c2, r[37] = d2, r[38] = h, r[39] = v2) : v2 = r[39], n9 = v2;
+    } else {
+      let c2 = G[e.kind], d2 = e.minLength != null && e.minLength > 0, f2;
+      r[40] === y ? f2 = r[41] : (f2 = (e2) => y(e2.currentTarget.value), r[40] = y, r[41] = f2);
+      let v2;
+      r[42] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v2 = (e2) => O(e2.currentTarget.value), r[42] = v2) : v2 = r[42];
+      let S2;
+      r[43] !== Q7 || r[44] !== t9 || r[45] !== w || r[46] !== _ || r[47] !== e.disabled || r[48] !== e.kind || r[49] !== e.maxLength || r[50] !== e.minLength || r[51] !== c2 || r[52] !== d2 || r[53] !== f2 || r[54] !== h ? (S2 = (0, import_jsx_runtime.jsx)(Input, {
+        "data-testid": "marimo-plugin-text-input",
+        type: e.kind,
+        icon: c2,
+        placeholder: _,
+        maxLength: e.maxLength,
+        minLength: e.minLength,
+        required: d2,
+        disabled: e.disabled,
+        className: t9,
+        endAdornment: Q7,
+        value: h,
+        onInput: f2,
+        onBlur: v2,
+        onInputCapture: w
+      }), r[43] = Q7, r[44] = t9, r[45] = w, r[46] = _, r[47] = e.disabled, r[48] = e.kind, r[49] = e.maxLength, r[50] = e.minLength, r[51] = c2, r[52] = d2, r[53] = f2, r[54] = h, r[55] = S2) : S2 = r[55], n9 = S2;
     }
-    let w = e.label, E = e.fullWidth, O = e.kind, M = v[e.kind], I = e.placeholder, z = e.maxLength, G = e.minLength, q = e.minLength != null && e.minLength > 0, Q7 = e.disabled, $7 = !h, e9;
-    r[44] !== e.fullWidth || r[45] !== $7 ? (e9 = cn({
-      "border-destructive": $7,
-      "w-full": e.fullWidth
-    }), r[44] = e.fullWidth, r[45] = $7, r[46] = e9) : e9 = r[46];
-    let t9;
-    r[47] === e ? t9 = r[48] : (t9 = (r2) => e.setValue(r2.currentTarget.value), r[47] = e, r[48] = t9);
-    let n9;
-    r[49] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n9 = (e2) => d(e2.currentTarget.value), r[49] = n9) : n9 = r[49];
     let r9;
-    r[50] !== S || r[51] !== e.disabled || r[52] !== e.kind || r[53] !== e.maxLength || r[54] !== e.minLength || r[55] !== e.placeholder || r[56] !== e.value || r[57] !== e9 || r[58] !== t9 || r[59] !== M || r[60] !== q ? (r9 = (0, import_jsx_runtime.jsx)(Input, {
-      "data-testid": "marimo-plugin-text-input",
-      type: O,
-      icon: M,
-      placeholder: I,
-      maxLength: z,
-      minLength: G,
-      required: q,
-      disabled: Q7,
-      className: e9,
-      endAdornment: S,
-      value: e.value,
-      onInput: t9,
-      onBlur: n9
-    }), r[50] = S, r[51] = e.disabled, r[52] = e.kind, r[53] = e.maxLength, r[54] = e.minLength, r[55] = e.placeholder, r[56] = e.value, r[57] = e9, r[58] = t9, r[59] = M, r[60] = q, r[61] = r9) : r9 = r[61];
-    let i9;
-    return r[62] !== e.fullWidth || r[63] !== e.label || r[64] !== r9 ? (i9 = (0, import_jsx_runtime.jsx)(Labeled, {
-      label: w,
-      fullWidth: E,
-      children: r9
-    }), r[62] = e.fullWidth, r[63] = e.label, r[64] = r9, r[65] = i9) : i9 = r[65], i9;
+    return r[56] !== n9 || r[57] !== e.fullWidth || r[58] !== e.label ? (r9 = (0, import_jsx_runtime.jsx)(Labeled, {
+      label: e.label,
+      fullWidth: e.fullWidth,
+      children: n9
+    }), r[56] = n9, r[57] = e.fullWidth, r[58] = e.label, r[59] = r9) : r9 = r[59], r9;
   };
   function validate(e, r) {
     if (!r) return true;
@@ -65466,7 +65458,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev95"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev98"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

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

package/src/plugins/impl/TextInputPlugin.tsx

@@ -1,13 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { AtSignIcon, GlobeIcon, LockIcon } from "lucide-react";
-import { type JSX, useState } from "react";
+import { type JSX, useRef, useState } from "react";
 import { z } from "zod";
 import {
   DebouncedInput,
   Input,
   OnBlurredInput,
 } from "../../components/ui/input";
+import { RANDOM_ID_ATTR } from "../../core/dom/ui-element-constants";
 import { cn } from "../../utils/cn";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
@@ -25,8 +26,12 @@ interface Data {
   disabled?: boolean;
   debounce?: boolean | number;
   fullWidth: boolean;
+  passwordHasValue?: boolean;
 }
 
+// Matches the masked dots.
+const MASK_PLACEHOLDER = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+
 export class TextInputPlugin implements IPlugin<T, Data> {
   tagName = "marimo-text";
 
@@ -40,11 +45,20 @@ export class TextInputPlugin implements IPlugin<T, Data> {
     fullWidth: z.boolean().default(false),
     disabled: z.boolean().optional(),
     debounce: z.optional(z.union([z.boolean(), z.number()])),
+    passwordHasValue: z.boolean().optional(),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
+    // Force remount on cell re-run so masked state resets cleanly
+    const remountKey =
+      props.data.kind === "password"
+        ? props.host
+            .closest(`[${RANDOM_ID_ATTR}]`)
+            ?.getAttribute(RANDOM_ID_ATTR)
+        : undefined;
     return (
       <TextComponent
+        key={remountKey ?? undefined}
         {...props.data}
         value={props.value}
         setValue={props.setValue}
@@ -59,9 +73,33 @@ interface TextComponentProps extends Data {
 }
 
 const TextComponent = (props: TextComponentProps) => {
-  const [valueOnBlur, setValueOnBlur] = useState(props.value);
+  // Before first real keystroke: show masked placeholder, suppress setValue.
+  // After first keystroke: normal password field.
+  const initiallyMasked =
+    props.kind === "password" && props.passwordHasValue === true;
+  const [masked, setMasked] = useState(initiallyMasked);
+  const hasTyped = useRef(false);
+
+  const value = masked ? "" : props.value;
+  const placeholder = masked ? MASK_PLACEHOLDER : props.placeholder;
+  const setValue: Setter<T> = masked
+    ? (v) => {
+        if (!hasTyped.current) {
+          return;
+        }
+        setMasked(false);
+        props.setValue(v);
+      }
+    : props.setValue;
+  // Capture-phase handler sets the ref synchronously before child onChange
+  const onInputCapture = masked
+    ? () => {
+        hasTyped.current = true;
+      }
+    : undefined;
 
-  const valueToValidate = valueOnBlur == null ? props.value : valueOnBlur;
+  const [valueOnBlur, setValueOnBlur] = useState(props.value);
+  const valueToValidate = valueOnBlur == null ? value : valueOnBlur;
   const isValid = validate(props.kind, valueToValidate);
 
   const icon: Record<InputType, JSX.Element | null> = {
@@ -73,80 +111,79 @@ const TextComponent = (props: TextComponentProps) => {
 
   const endAdornment = props.maxLength ? (
     <span className="text-muted-foreground text-xs font-medium">
-      {props.value.length}/{props.maxLength}
+      {value.length}/{props.maxLength}
     </span>
   ) : null;
 
+  const inputClassName = cn({
+    "border-destructive": !isValid,
+    "w-full": props.fullWidth,
+  });
+
+  let input: JSX.Element;
+
   if (props.debounce === true) {
-    return (
-      <Labeled label={props.label} fullWidth={props.fullWidth}>
-        <OnBlurredInput
-          data-testid="marimo-plugin-text-input"
-          type={props.kind}
-          icon={icon[props.kind]}
-          placeholder={props.placeholder}
-          maxLength={props.maxLength}
-          minLength={props.minLength}
-          required={props.minLength != null && props.minLength > 0}
-          disabled={props.disabled}
-          className={cn({
-            "border-destructive": !isValid,
-            "w-full": props.fullWidth,
-          })}
-          endAdornment={endAdornment}
-          value={props.value}
-          onValueChange={props.setValue}
-        />
-      </Labeled>
+    input = (
+      <OnBlurredInput
+        data-testid="marimo-plugin-text-input"
+        type={props.kind}
+        icon={icon[props.kind]}
+        placeholder={placeholder}
+        maxLength={props.maxLength}
+        minLength={props.minLength}
+        required={props.minLength != null && props.minLength > 0}
+        disabled={props.disabled}
+        className={inputClassName}
+        endAdornment={endAdornment}
+        value={value}
+        onValueChange={setValue}
+        onInputCapture={onInputCapture}
+      />
     );
-  }
-
-  if (typeof props.debounce === "number") {
-    return (
-      <Labeled label={props.label} fullWidth={props.fullWidth}>
-        <DebouncedInput
-          data-testid="marimo-plugin-text-input"
-          type={props.kind}
-          icon={icon[props.kind]}
-          placeholder={props.placeholder}
-          maxLength={props.maxLength}
-          minLength={props.minLength}
-          required={props.minLength != null && props.minLength > 0}
-          disabled={props.disabled}
-          className={cn({
-            "border-destructive": !isValid,
-            "w-full": props.fullWidth,
-          })}
-          endAdornment={endAdornment}
-          value={props.value}
-          onValueChange={props.setValue}
-          onBlur={(event) => setValueOnBlur(event.currentTarget.value)}
-          delay={props.debounce}
-        />
-      </Labeled>
+  } else if (typeof props.debounce === "number") {
+    input = (
+      <DebouncedInput
+        data-testid="marimo-plugin-text-input"
+        type={props.kind}
+        icon={icon[props.kind]}
+        placeholder={placeholder}
+        maxLength={props.maxLength}
+        minLength={props.minLength}
+        required={props.minLength != null && props.minLength > 0}
+        disabled={props.disabled}
+        className={inputClassName}
+        endAdornment={endAdornment}
+        value={value}
+        onValueChange={setValue}
+        onBlur={(event) => setValueOnBlur(event.currentTarget.value)}
+        delay={props.debounce}
+        onInputCapture={onInputCapture}
+      />
     );
-  }
-
-  return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+  } else {
+    input = (
       <Input
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
-        placeholder={props.placeholder}
+        placeholder={placeholder}
         maxLength={props.maxLength}
         minLength={props.minLength}
         required={props.minLength != null && props.minLength > 0}
         disabled={props.disabled}
-        className={cn({
-          "border-destructive": !isValid,
-          "w-full": props.fullWidth,
-        })}
+        className={inputClassName}
         endAdornment={endAdornment}
-        value={props.value}
-        onInput={(event) => props.setValue(event.currentTarget.value)}
+        value={value}
+        onInput={(event) => setValue(event.currentTarget.value)}
         onBlur={(event) => setValueOnBlur(event.currentTarget.value)}
+        onInputCapture={onInputCapture}
       />
+    );
+  }
+
+  return (
+    <Labeled label={props.label} fullWidth={props.fullWidth}>
+      {input}
     </Labeled>
   );
 };