@marimo-team/islands 0.23.1-dev13 → 0.23.1-dev3

package/dist/{toDate-D0QaHNwR.js → toDate-CfGr2xZ1.js}

@@ -3,10 +3,10 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { u as createLucideIcon } from "./dist-D56NKWim.js";
-import { g as Logger } from "./button-DNlNlZY_.js";
+import { u as createLucideIcon } from "./dist-CjLQ79mo.js";
+import { g as Logger } from "./button-Cn59RsBF.js";
 import { r as KnownQueryParams } from "./constants-CvyfaCvs.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-CxjbgkRc.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-ytmywQ5O.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{tooltip-B5EnNyok.js → tooltip-CygUI9oH.js}

@@ -1,10 +1,10 @@
 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 { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-D56NKWim.js";
-import { f as createSlottable, m as useComposedRefs, y as cn } from "./button-DNlNlZY_.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-CjLQ79mo.js";
+import { f as createSlottable, m as useComposedRefs, y as cn } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-D18k8Z52.js";
+import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-D4UoCYGu.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (t) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = t, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {

package/dist/{types-D4-TD_m0.js → types-D4CFUmPq.js}

@@ -1,8 +1,8 @@
 import { s as __toESM, t as __commonJSMin } 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 { u as createLucideIcon } from "./dist-D56NKWim.js";
-import { t as Button } from "./button-DNlNlZY_.js";
+import { u as createLucideIcon } from "./dist-CjLQ79mo.js";
+import { t as Button } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import { n as Constants } from "./constants-CvyfaCvs.js";
 var Pencil = createLucideIcon("pencil", [["path", {

package/dist/{useAsyncData-BG3ULuDU.js → useAsyncData-BzS3Ai32.js}

@@ -1,7 +1,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 { w as useEvent_default } from "./useTheme-CxjbgkRc.js";
+import { w as useEvent_default } from "./useTheme-ytmywQ5O.js";
 import { t as invariant } from "./invariant-e8eBgdux.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-CkSq3l3_.js → useDeepCompareMemoize-AjORjhpL.js}

@@ -1,11 +1,11 @@
 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 { t as toDate } from "./toDate-D0QaHNwR.js";
-import { r as cva, y as cn } from "./button-DNlNlZY_.js";
+import { t as toDate } from "./toDate-CfGr2xZ1.js";
+import { r as cva, y as cn } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { C as dequal } from "./useTheme-CxjbgkRc.js";
-import { i as tableFromIPC } from "./loader-Bd1kgLn7.js";
+import { C as dequal } from "./useTheme-ytmywQ5O.js";
+import { i as tableFromIPC } from "./loader-JmfPBSx5.js";
 function isDate(t) {
   return t instanceof Date || typeof t == "object" && Object.prototype.toString.call(t) === "[object Date]";
 }

package/dist/{useIframeCapabilities-CqhrVue6.js → useIframeCapabilities---aRgGdv.js}

@@ -1,7 +1,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 { t as getIframeCapabilities } from "./capabilities-Coe9eM9T.js";
+import { t as getIframeCapabilities } from "./capabilities-Bml77Di-.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{useLifecycle-2Vh-WDv6.js → useLifecycle-B90lJH4p.js}

@@ -1,10 +1,10 @@
 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 { u as createLucideIcon } from "./dist-D56NKWim.js";
-import { g as Logger, r as cva, y as cn } from "./button-DNlNlZY_.js";
+import { u as createLucideIcon } from "./dist-CjLQ79mo.js";
+import { g as Logger, r as cva, y as cn } from "./button-Cn59RsBF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-CxjbgkRc.js";
+import { _ as useSetAtom, y as atom } from "./useTheme-ytmywQ5O.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-CxjbgkRc.js → useTheme-ytmywQ5O.js}

@@ -1,8 +1,8 @@
 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 { a as OverridingHotkeyProvider, g as Logger, s as resolvePlatform } from "./button-DNlNlZY_.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-D18k8Z52.js";
+import { a as OverridingHotkeyProvider, g as Logger, s as resolvePlatform } from "./button-Cn59RsBF.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-D4UoCYGu.js";
 import { t as merge_default } from "./merge-CVhG7q_o.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };

package/dist/{vega-component-z4WGXPkf.js → vega-component-1icm1Ykb.js}

@@ -1,20 +1,20 @@
 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 { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-D0QaHNwR.js";
-import { c as Objects, g as Logger, h as Events, y as cn } from "./button-DNlNlZY_.js";
+import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-CfGr2xZ1.js";
+import { c as Objects, g as Logger, h as Events, y as cn } from "./button-Cn59RsBF.js";
 import "./react-dom-BSUuJjCR.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import "./zod-D18k8Z52.js";
-import { n as ErrorBanner } from "./error-banner-DexD-5js.js";
-import { t as Tooltip } from "./tooltip-B5EnNyok.js";
+import "./zod-D4UoCYGu.js";
+import { n as ErrorBanner } from "./error-banner-BQcJXy6k.js";
+import { t as Tooltip } from "./tooltip-CygUI9oH.js";
 import { i as debounce_default } from "./constants-CvyfaCvs.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-CxjbgkRc.js";
+import { n as useTheme, w as useEvent_default } from "./useTheme-ytmywQ5O.js";
 import { s as uniq } from "./arrays-beUWo8RF.js";
-import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CkSq3l3_.js";
+import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-AjORjhpL.js";
 import { n as formats } from "./vega-loader.browser-DqEcFOPD.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Bd1kgLn7.js";
-import { t as useAsyncData } from "./useAsyncData-BG3ULuDU.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-JmfPBSx5.js";
+import { t as useAsyncData } from "./useAsyncData-BzS3Ai32.js";
 import { t as j } from "./react-vega-CzRAIHrv.js";
 import "./defaultLocale-qS7DaAmi.js";
 import "./defaultLocale-Bxoo2-30.js";

package/dist/{zod-D18k8Z52.js → zod-D4UoCYGu.js}

@@ -1,7 +1,7 @@
 import { r as __export, 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 { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-DNlNlZY_.js";
+import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-Cn59RsBF.js";
 import { t as require_react_dom } from "./react-dom-BSUuJjCR.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_react_dom$1 = /* @__PURE__ */ __toESM(require_react_dom(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), Primitive = [

package/package.json

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

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

@@ -127,7 +127,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
           >
             <PanelRightIcon className="w-3.5 h-3.5" />
-            Explorer
+            Explore
           </Button>
         )}
         {downloadAs && <ExportMenu downloadAs={downloadAs} />}

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

@@ -139,7 +139,7 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
                 : inactiveClassName,
             )}
           >
-            Explorer
+            Columns
           </Button>
         </div>
       </Fill>

package/src/components/ui/button.tsx

@@ -114,11 +114,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const handleKeyPress = React.useCallback(
       (e: KeyboardEvent) => {
-        if (!keyboardShortcut) {
+        if (!keyboardShortcut || e.defaultPrevented) {
           return;
         }
 
-        // Ignore keyboard events from input elements
         if (Events.shouldIgnoreKeyboardEvent(e)) {
           return;
         }

package/src/css/table.css

@@ -17,6 +17,10 @@
   padding-right: var(--marimo-table-edge-padding, 0.375rem);
 }
 
+[part="label"] {
+  padding-left: var(--marimo-table-edge-padding, 0);
+}
+
 .markdown table,
 table.dataframe {
   display: block;

package/src/plugins/impl/common/labeled.tsx

@@ -44,9 +44,11 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
   }
 
   const labelElement = (
-    <Label htmlFor={id} className={cn("font-prose", labelClassName)}>
-      {renderHTML({ html: label })}
-    </Label>
+    <div part="label" className="m-0 p-0">
+      <Label htmlFor={id} className={cn("font-prose", labelClassName)}>
+        {renderHTML({ html: label })}
+      </Label>
+    </div>
   );
 
   return (

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

@@ -0,0 +1,223 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, test } from "vitest";
+import { Events } from "../events";
+
+/**
+ * Create a minimal fake event with just a target (no composedPath).
+ * Simulates synthetic events from libraries like React Aria.
+ */
+function fakeEvent(target: EventTarget): Pick<Event, "target"> {
+  return { target };
+}
+
+/**
+ * Create a fake native-like KeyboardEvent with composedPath() returning
+ * a different element than target — the key scenario for shadow DOM
+ * retargeting where target is the shadow host but composedPath()[0]
+ * is the real focused element inside the shadow root.
+ */
+function fakeNativeEvent(
+  retargetedHost: EventTarget,
+  realTarget: EventTarget,
+): KeyboardEvent {
+  const event = new KeyboardEvent("keydown");
+  Object.defineProperty(event, "target", { value: retargetedHost });
+  Object.defineProperty(event, "composedPath", {
+    value: () => [realTarget, retargetedHost, document.body, document],
+  });
+  return event;
+}
+
+describe("Events.composedTarget", () => {
+  test("returns composedPath()[0] for native events", () => {
+    const input = document.createElement("input");
+    const host = document.createElement("div");
+    const event = fakeNativeEvent(host, input);
+
+    expect(Events.composedTarget(event)).toBe(input);
+  });
+
+  test("falls back to e.target when composedPath is absent", () => {
+    const div = document.createElement("div");
+    const event = fakeEvent(div);
+
+    expect(Events.composedTarget(event)).toBe(div);
+  });
+
+  test("falls back to e.target when composedPath returns empty array", () => {
+    const div = document.createElement("div");
+    const event = new KeyboardEvent("keydown");
+    Object.defineProperty(event, "target", { value: div });
+    Object.defineProperty(event, "composedPath", { value: () => [] });
+
+    expect(Events.composedTarget(event)).toBe(div);
+  });
+});
+
+describe("Events.shouldIgnoreKeyboardEvent", () => {
+  test("ignores events from <input>", () => {
+    const input = document.createElement("input");
+    const event = fakeNativeEvent(input, input);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <textarea>", () => {
+    const textarea = document.createElement("textarea");
+    const event = fakeNativeEvent(textarea, textarea);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <select>", () => {
+    const select = document.createElement("select");
+    const event = fakeNativeEvent(select, select);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <button>", () => {
+    const button = document.createElement("button");
+    const event = fakeNativeEvent(button, button);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from contentEditable elements", () => {
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    document.body.append(div);
+
+    const event = fakeNativeEvent(div, div);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    div.remove();
+  });
+
+  test("ignores events from elements with role='textbox'", () => {
+    const container = document.createElement("div");
+    container.setAttribute("role", "textbox");
+    const child = document.createElement("span");
+    container.append(child);
+    document.body.append(container);
+
+    const event = fakeNativeEvent(child, child);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    container.remove();
+  });
+
+  test("ignores events from inside .cm-editor", () => {
+    const editor = document.createElement("div");
+    editor.className = "cm-editor";
+    const line = document.createElement("div");
+    editor.append(line);
+    document.body.append(editor);
+
+    const event = fakeNativeEvent(line, line);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    editor.remove();
+  });
+
+  test("does NOT ignore events from a plain <div>", () => {
+    const div = document.createElement("div");
+    const event = fakeNativeEvent(div, div);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+  });
+
+  describe("shadow DOM retargeting (#4230)", () => {
+    test("ignores keydown when real target inside shadow root is <input>", () => {
+      const host = document.createElement("marimo-text");
+      const input = document.createElement("input");
+      // event.target is the shadow host, composedPath()[0] is the real input
+      const event = fakeNativeEvent(host, input);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("ignores keydown when real target inside shadow root is <textarea>", () => {
+      const host = document.createElement("marimo-text-area");
+      const textarea = document.createElement("textarea");
+      const event = fakeNativeEvent(host, textarea);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("ignores keydown when real target inside shadow root is <select>", () => {
+      const host = document.createElement("marimo-dropdown");
+      const select = document.createElement("select");
+      const event = fakeNativeEvent(host, select);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("does NOT ignore when shadow DOM real target is a plain <div>", () => {
+      const host = document.createElement("marimo-output");
+      const div = document.createElement("div");
+      const event = fakeNativeEvent(host, div);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+    });
+  });
+
+  test("does NOT ignore events from non-marimo custom elements", () => {
+    const el = document.createElement("sl-input");
+    const event = fakeNativeEvent(el, el);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+  });
+});
+
+describe("Events.fromInput", () => {
+  test("returns true for <input>", () => {
+    const input = document.createElement("input");
+    expect(Events.fromInput(fakeEvent(input))).toBe(true);
+  });
+
+  test("returns true for <textarea>", () => {
+    const textarea = document.createElement("textarea");
+    expect(Events.fromInput(fakeEvent(textarea))).toBe(true);
+  });
+
+  test("returns true for marimo custom elements", () => {
+    const el = document.createElement("marimo-slider");
+    expect(Events.fromInput(fakeEvent(el))).toBe(true);
+  });
+
+  // jsdom does not implement isContentEditable, so this is tested
+  // via shouldIgnoreKeyboardEvent which has a closest() fallback.
+  test.skip("returns true for contentEditable", () => {
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    document.body.append(div);
+
+    expect(Events.fromInput(fakeEvent(div))).toBe(true);
+
+    div.remove();
+  });
+
+  test("returns false for plain <div>", () => {
+    const div = document.createElement("div");
+    expect(Events.fromInput(fakeEvent(div))).toBe(false);
+  });
+
+  test("uses composedPath when available (shadow DOM)", () => {
+    const host = document.createElement("div");
+    const input = document.createElement("input");
+    const event = fakeNativeEvent(host, input);
+    expect(Events.fromInput(event)).toBe(true);
+  });
+});
+
+describe("Events.fromCodeMirror", () => {
+  test("returns true when target is inside .cm-editor", () => {
+    const editor = document.createElement("div");
+    editor.className = "cm-editor";
+    const line = document.createElement("div");
+    editor.append(line);
+    document.body.append(editor);
+
+    expect(Events.fromCodeMirror(line)).toBe(true);
+    editor.remove();
+  });
+
+  test("returns false when target is not inside .cm-editor", () => {
+    const div = document.createElement("div");
+    document.body.append(div);
+    expect(Events.fromCodeMirror(div)).toBe(false);
+    div.remove();
+  });
+});

package/src/utils/events.ts

@@ -37,21 +37,20 @@ export const Events = {
    * Returns true if the event is coming from a text input
    */
   fromInput: (e: Pick<KeyboardEvent, "target">) => {
-    const target = e.target as HTMLElement;
+    const target = Events.composedTarget(e);
     return (
       target.tagName === "INPUT" ||
       target.tagName === "TEXTAREA" ||
       target.tagName.startsWith("MARIMO") ||
       target.isContentEditable ||
-      Events.fromCodeMirror(e)
+      Events.fromCodeMirror(target)
     );
   },
 
   /**
    * Returns true if the event is coming from a code editor.
    */
-  fromCodeMirror: (e: Pick<KeyboardEvent, "target">) => {
-    const target = e.target as HTMLElement;
+  fromCodeMirror: (target: HTMLElement) => {
     return target.closest(".cm-editor") !== null;
   },
 
@@ -60,20 +59,35 @@ export const Events = {
    * form element or code editor.
    */
   shouldIgnoreKeyboardEvent(e: KeyboardEvent) {
-    // Check for common form elements where keyboard shortcuts should be ignored
+    const target = Events.composedTarget(e);
     return (
-      e.target instanceof HTMLInputElement ||
-      e.target instanceof HTMLTextAreaElement ||
-      e.target instanceof HTMLSelectElement ||
-      (e.target instanceof HTMLElement &&
-        (e.target.isContentEditable ||
-          e.target.tagName === "BUTTON" ||
-          e.target.closest("[role='textbox']") !== null ||
-          e.target.closest("[contenteditable='true']") !== null ||
-          e.target.closest(".cm-editor") !== null)) // Add check for CodeMirror editor
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      target instanceof HTMLSelectElement ||
+      (target instanceof HTMLElement &&
+        (target.isContentEditable ||
+          target.tagName === "BUTTON" ||
+          target.closest("[role='textbox']") !== null ||
+          target.closest("[contenteditable='true']") !== null ||
+          Events.fromCodeMirror(target)))
     );
   },
 
+  /**
+   * Resolve the real event target, piercing shadow DOM retargeting.
+   * Falls back to e.target for synthetic events (e.g. React Aria)
+   * that don't expose composedPath.
+   *
+   * Without this, e.target is the shadow host (e.g. <marimo-text>) rather than the
+   * real <input> inside it, so instanceof checks fail. (#4230)
+   */
+  composedTarget(e: Pick<Event, "target">): HTMLElement {
+    if ("composedPath" in e && typeof e.composedPath === "function") {
+      return (e.composedPath()[0] ?? e.target) as HTMLElement;
+    }
+    return e.target as HTMLElement;
+  },
+
   hasModifier: (
     e: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "altKey" | "shiftKey">,
   ) => {