@marimo-team/islands 0.24.3-dev32 → 0.24.3-dev36

package/src/components/editor/output/json-output/pagination.ts

@@ -0,0 +1,155 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { isPlainObject } from "lodash-es";
+
+export const PAGE_SIZE = 30;
+
+interface Page {
+  path: string;
+  remaining: number;
+}
+
+interface Options {
+  limits: Record<string, number>;
+  pageSize: number;
+}
+
+export function paginateJson(data: object, { limits, pageSize }: Options) {
+  const originals = new WeakMap<object, object>();
+  const pages = new Map<symbol, Page>();
+
+  function visit(node: object, path: string[]): object {
+    if (!Array.isArray(node) && !isPlainObject(node)) {
+      return node;
+    }
+    const pathKey = JSON.stringify(path);
+    const limit = limits[pathKey] ?? pageSize;
+    const keys = Array.isArray(node)
+      ? Array.from({ length: Math.min(node.length, limit) }, (_, i) =>
+          String(i),
+        )
+      : Object.keys(node).slice(0, limit);
+    const count = Array.isArray(node) ? node.length : Object.keys(node).length;
+    const result: object = Array.isArray(node) ? [] : Object.create(null);
+    originals.set(result, node);
+
+    for (const key of keys) {
+      // Materialize only the branches the viewer reads, including after expansion.
+      Object.defineProperty(result, key, {
+        enumerable: true,
+        configurable: true,
+        get() {
+          const original: unknown = Reflect.get(node, key);
+          const value =
+            original !== null && typeof original === "object"
+              ? visit(original, [...path, key])
+              : original;
+          Object.defineProperty(result, key, {
+            value,
+            enumerable: true,
+            configurable: true,
+          });
+          return value;
+        },
+      });
+    }
+    if (count > limit) {
+      const marker = Symbol("show more");
+      pages.set(marker, { remaining: count - limit, path: pathKey });
+      let key = Array.isArray(node) ? String(limit) : "";
+      while (Object.hasOwn(result, key)) {
+        key += "\0";
+      }
+      Object.defineProperty(result, key, { value: marker, enumerable: true });
+    }
+    return result;
+  }
+
+  return {
+    data: visit(data, []),
+    getOriginal(value: unknown): unknown {
+      return value !== null && typeof value === "object"
+        ? (originals.get(value) ?? value)
+        : value;
+    },
+    getPage(value: unknown): Page | undefined {
+      return typeof value === "symbol" ? pages.get(value) : undefined;
+    },
+  };
+}
+
+export function estimateExpandedLines(
+  node: unknown,
+  cap: number,
+  depth = 0,
+): number {
+  if (
+    depth > 4 ||
+    node === null ||
+    node === undefined ||
+    typeof node !== "object"
+  ) {
+    return 1;
+  }
+  const children: unknown[] = Array.isArray(node) ? node : Object.values(node);
+  let lines = 0;
+  for (let i = 0; i < children.length && lines < cap; i++) {
+    const child = children[i];
+    if (child === null || child === undefined || typeof child !== "object") {
+      lines++;
+    } else {
+      const childLen = Array.isArray(child)
+        ? child.length
+        : Object.keys(child).length;
+      lines +=
+        childLen <= 8
+          ? estimateExpandedLines(child, cap - lines, depth + 1)
+          : 1;
+    }
+  }
+  return lines;
+}
+
+export function shouldExpandNode(
+  _isExpanded: boolean,
+  { value, level }: { value?: object; level: number },
+): boolean {
+  if (level <= 1) {
+    return true;
+  }
+  if (level > 5) {
+    return false;
+  }
+  if (value === null || value === undefined || typeof value !== "object") {
+    return true;
+  }
+  const len = Array.isArray(value) ? value.length : Object.keys(value).length;
+  if (len === 0) {
+    return true;
+  }
+  if (len > 200) {
+    return false;
+  }
+  return estimateExpandedLines(value, 150) <= 120;
+}
+
+export function determineMaxDisplayLength(data: unknown): number | undefined {
+  if (!Array.isArray(data)) {
+    return undefined;
+  }
+  const sample = data.slice(0, 15);
+  let maxLength = 0;
+  for (const el of sample) {
+    if (Array.isArray(el)) {
+      for (const next of el.slice(0, 5)) {
+        if (Array.isArray(next)) {
+          return 5;
+        }
+      }
+      maxLength = Math.max(maxLength, el.length);
+    }
+  }
+  if (maxLength <= 20) {
+    return undefined;
+  }
+  return maxLength >= 50 ? 5 : 10;
+}

package/src/components/editor/output/json-output/renderers.tsx

@@ -0,0 +1,196 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useState } from "react";
+import type { OutputMessage } from "@/core/kernel/messages";
+import { isUrl } from "@/utils/urls";
+import { OutputRenderer } from "../../Output";
+import { HtmlOutput } from "../HtmlOutput";
+import { ImageOutput } from "../ImageOutput";
+import { JsonOutput } from "../JsonOutput";
+import { VideoOutput } from "../VideoOutput";
+import {
+  decodePythonKey,
+  formatTuplePayload,
+  formatSetPayload,
+  formatFrozensetPayload,
+  splitLeaf,
+} from "./formatting";
+
+export const COLLAPSED_TEXT_LENGTH = 100;
+
+// Keep long text and quotes wrapping together.
+/* oxlint-disable jsx-a11y/prefer-tag-over-role */
+const CollapsibleTextOutput: React.FC<{ text: string }> = ({ text }) => {
+  const [collapsed, setCollapsed] = useState(true);
+  if (text.length <= COLLAPSED_TEXT_LENGTH) {
+    return <span className="break-all">{text}</span>;
+  }
+  return (
+    <span
+      className="cursor-pointer hover:opacity-90 break-all"
+      role="button"
+      tabIndex={0}
+      aria-expanded={!collapsed}
+      onClick={() => setCollapsed(!collapsed)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          setCollapsed(!collapsed);
+        }
+      }}
+    >
+      {collapsed ? `${text.slice(0, COLLAPSED_TEXT_LENGTH)}...` : text}
+    </span>
+  );
+};
+
+/* oxlint-enable jsx-a11y/prefer-tag-over-role */
+
+type LeafRenderer = (
+  data: string,
+  mimeType: OutputMessage["mimetype"],
+) => React.ReactNode;
+
+const LEAF_RENDERERS: Record<string, LeafRenderer> = {
+  "image/": (v) => <ImageOutput src={v} />,
+  "video/": (v) => <VideoOutput src={v} />,
+  "text/html:": (v) => (
+    <HtmlOutput html={v} inline={true} alwaysSanitizeHtml={false} />
+  ),
+  "text/markdown:": (v) => (
+    <HtmlOutput html={v} inline={true} alwaysSanitizeHtml={true} />
+  ),
+  "text/plain+float:": (v) => <span>{v}</span>,
+  "text/plain+bigint:": (v) => <span>{v}</span>,
+  "text/plain+set:": (v) => <span>{formatSetPayload(v)}</span>,
+  "text/plain+frozenset:": (v) => <span>{formatFrozensetPayload(v)}</span>,
+  "text/plain+tuple:": (v) => <span>{formatTuplePayload(v)}</span>,
+  "text/plain:": (v) => <CollapsibleTextOutput text={v} />,
+  "application/json:": (v) => <JsonOutput data={JSON.parse(v)} />,
+  "application/": (v, mime) => (
+    <OutputRenderer
+      message={{ channel: "output", data: v, mimetype: mime }}
+      renderFallback={() => (
+        <span>
+          {mime}:{v}
+        </span>
+      )}
+    />
+  ),
+};
+
+function tryRenderMimeLeaf(value: string): React.ReactNode | null {
+  for (const prefix of Object.keys(LEAF_RENDERERS)) {
+    if (value.startsWith(prefix)) {
+      const [data, mime] = splitLeaf(value);
+      return mime
+        ? LEAF_RENDERERS[prefix](data, mime as OutputMessage["mimetype"])
+        : null;
+    }
+  }
+  return null;
+}
+
+interface KeyRenderResult {
+  keyName?: string | number;
+}
+
+export function renderKeyName(
+  props: Record<string, unknown>,
+  { keyName }: KeyRenderResult,
+): React.ReactNode {
+  const decoded = decodePythonKey(keyName);
+  if (!decoded) {
+    return undefined;
+  }
+  return <span {...props}>{decoded.text}</span>;
+}
+
+export function renderKeyQuote(
+  _props: Record<string, unknown>,
+  { keyName }: KeyRenderResult,
+): React.ReactNode {
+  // The viewer treats null/undefined as a request for its default quotes.
+  return decodePythonKey(keyName)?.quoted === false ? <span /> : undefined;
+}
+
+export interface RenderResult {
+  type: string;
+  value?: unknown;
+}
+
+export function renderStringValue(
+  _props: React.HTMLAttributes<HTMLSpanElement>,
+  result: RenderResult,
+  mode: "python" | "json",
+): React.ReactNode {
+  if (result.type !== "value" || typeof result.value !== "string") {
+    return undefined;
+  }
+  const { value } = result;
+  if (mode !== "python") {
+    return renderPlainString(value);
+  }
+
+  const mimeResult = tryRenderMimeLeaf(value);
+  if (mimeResult !== null) {
+    return <span className="w-rjv-value">{mimeResult}</span>;
+  }
+  if (isUrl(value)) {
+    return (
+      <span className="w-rjv-value">
+        <a
+          href={value}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-link hover:underline"
+        >
+          {value}
+        </a>
+      </span>
+    );
+  }
+  return renderPlainString(value);
+}
+
+function renderPlainString(value: string) {
+  if (value.length <= COLLAPSED_TEXT_LENGTH) {
+    return undefined;
+  }
+  return (
+    <span
+      className="inline-block"
+      style={{ color: "var(--w-rjv-type-string-color)" }}
+    >
+      &quot;
+      <CollapsibleTextOutput text={value} />
+      &quot;
+    </span>
+  );
+}
+
+export function renderArrow(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  { keyName }: KeyRenderResult,
+): React.ReactNode {
+  // alpha.43's data-expanded is inverted and omits initial collapse rules.
+  // NestedOpen's transform reflects the effective state.
+  const expanded = props.style?.transform === "rotate(0deg)";
+  return (
+    <button
+      {...props}
+      type="button"
+      aria-label={`${expanded ? "Collapse" : "Expand"} ${keyName ?? "root"}`}
+      aria-expanded={expanded}
+    />
+  );
+}
+
+function renderLiteral(text: string) {
+  return (_props: Record<string, unknown>, { type }: RenderResult) =>
+    type === "value" ? <span className="w-rjv-value">{text}</span> : undefined;
+}
+
+export const PYTHON_TRUE_RENDER = renderLiteral("True");
+export const PYTHON_FALSE_RENDER = renderLiteral("False");
+export const PYTHON_NULL_RENDER = renderLiteral("None");
+export const JSON_NULL_RENDER = renderLiteral("null");

package/src/components/editor/output/json-output/themes.ts

@@ -0,0 +1,52 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type React from "react";
+
+type ViewerStyle = React.CSSProperties & Record<`--w-rjv-${string}`, string>;
+
+const BASE_THEME: ViewerStyle = {
+  fontSize: "var(--text-xs, .75rem)",
+  lineHeight: "var(--text-xs--line-height, 1rem)",
+  "--w-rjv-font-family": "monospace",
+  "--w-rjv-background-color": "transparent",
+  "--w-rjv-key-string": "var(--w-rjv-color)",
+  "--w-rjv-arrow-color": "var(--w-rjv-color)",
+  "--w-rjv-curlybraces-color": "var(--w-rjv-color)",
+  "--w-rjv-colon-color": "var(--w-rjv-color)",
+  "--w-rjv-brackets-color": "var(--w-rjv-color)",
+  "--w-rjv-quotes-color": "var(--w-rjv-color)",
+  "--w-rjv-ellipsis-color": "var(--w-rjv-type-string-color)",
+  "--w-rjv-quotes-string-color": "var(--w-rjv-type-string-color)",
+  "--w-rjv-type-bigint-color": "var(--w-rjv-type-int-color)",
+  "--w-rjv-type-url-color": "var(--link)",
+  "--w-rjv-type-nan-color": "var(--w-rjv-type-null-color)",
+};
+
+export const marimoLightTheme: ViewerStyle = {
+  ...BASE_THEME,
+  "--w-rjv-color": "#002b36",
+  "--w-rjv-key-number": "#6c71c4",
+  "--w-rjv-line-color": "rgb(235, 235, 235)",
+  "--w-rjv-info-color": "rgba(0, 0, 0, 0.3)",
+  "--w-rjv-type-string-color": "#cb4b16",
+  "--w-rjv-type-int-color": "#268bd2",
+  "--w-rjv-type-float-color": "#859900",
+  "--w-rjv-type-boolean-color": "#2aa198",
+  "--w-rjv-type-date-color": "#586e75",
+  "--w-rjv-type-null-color": "#d33682",
+  "--w-rjv-type-undefined-color": "#586e75",
+};
+
+export const marimoDarkTheme: ViewerStyle = {
+  ...BASE_THEME,
+  "--w-rjv-color": "#f8f8f8",
+  "--w-rjv-key-number": "#86c1b9",
+  "--w-rjv-line-color": "#383838",
+  "--w-rjv-info-color": "#b8b8b8",
+  "--w-rjv-type-string-color": "#dc9656",
+  "--w-rjv-type-int-color": "#a16946",
+  "--w-rjv-type-float-color": "#a1b56c",
+  "--w-rjv-type-boolean-color": "#ba8baf",
+  "--w-rjv-type-date-color": "#7cafc2",
+  "--w-rjv-type-null-color": "#ab4642",
+  "--w-rjv-type-undefined-color": "#d8d8d8",
+};

package/src/hooks/useDebounce.ts

@@ -48,6 +48,8 @@ export function useDebounceControlledState<T>(opts: {
 
   // Handle external changes:
   useEffect(() => {
+    // TODO: Replace this synchronization with a controlled-state primitive.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the debounced draft when the controlled value changes.
     setInternalValue(initialValue);
   }, [initialValue]);
 

package/src/plugins/core/BadPlugin.tsx

@@ -9,21 +9,15 @@ const AccordionTrigger = AccordionPrimitive.Trigger;
 
 import type { JSX } from "react";
 import { ZodError } from "zod";
-import { EmotionCacheProvider } from "@/components/editor/output/EmotionCacheProvider";
 import { JsonOutput } from "@/components/editor/output/JsonOutput";
 import { Alert, AlertTitle } from "../../components/ui/alert";
 
 interface Props {
   error: ZodError | Error;
-  shadowRoot: ShadowRoot | null;
   badData: Record<string, unknown>;
 }
 
-export const BadPluginData: React.FC<Props> = ({
-  error,
-  badData,
-  shadowRoot,
-}) => {
+export const BadPluginData: React.FC<Props> = ({ error, badData }) => {
   if (error instanceof ZodError) {
     return (
       <Alert variant="destructive">
@@ -49,9 +43,7 @@ export const BadPluginData: React.FC<Props> = ({
               View Data:
             </AccordionTrigger>
             <AccordionContent className="text-[0.84375rem]">
-              <EmotionCacheProvider container={shadowRoot}>
-                <JsonOutput data={badData} />
-              </EmotionCacheProvider>
+              <JsonOutput data={badData} />
             </AccordionContent>
           </AccordionItem>
         </Accordion>
@@ -65,9 +57,6 @@ export const BadPluginData: React.FC<Props> = ({
 export function renderError(
   error: ZodError | Error,
   badData: Record<string, unknown>,
-  shadowRoot: ShadowRoot | null,
 ): JSX.Element {
-  return (
-    <BadPluginData error={error} badData={badData} shadowRoot={shadowRoot} />
-  );
+  return <BadPluginData error={error} badData={badData} />;
 }

package/src/plugins/core/registerReactComponent.tsx

@@ -274,7 +274,6 @@ function PluginSlotInternal<T>(
       Objects.mapValues(hostElement.dataset, (value) =>
         typeof value === "string" ? parseAttrValue(value) : value,
       ),
-      hostElement.shadowRoot,
     );
   }
 

package/src/plugins/impl/FormPlugin.tsx

@@ -219,6 +219,8 @@ const Form = ({
   // The Form may be rendered before the child plugin is, so after mount
   // we lookup the plugin once again.
   useEffect(() => {
+    // TODO: Replace the post-mount registry lookup with reactive initialization.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- The child registry entry may not exist until after the parent mounts.
     setInternalValue(UI_ELEMENT_REGISTRY.lookupValue(elementId));
   }, [elementId]);
 

package/src/plugins/impl/MatrixPlugin.tsx

@@ -126,6 +126,8 @@ const MatrixComponent = ({
   // which avoids stale-state bugs when the matrix shape changes.
   const [draft, setDraft] = useState(value);
   useEffect(() => {
+    // TODO: Model the active draft without synchronizing state in an effect.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable draft when the controlled value changes.
     setDraft(value);
   }, [value]);
   const displayValue = activeCell == null ? value : draft;

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -90,6 +90,8 @@ const RangeSliderComponent = ({
 
   // Update internal value on prop change
   useEffect(() => {
+    // TODO: Replace this synchronization with a controlled-state primitive.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable buffer when the controlled value changes.
     setInternalValue(value);
   }, [value]);
 

package/src/plugins/impl/SliderPlugin.tsx

@@ -158,6 +158,8 @@ const SliderComponent = ({
   const [internalValue, setInternalValue] = useState(value);
   // Update internal value on prop change
   useEffect(() => {
+    // TODO: Replace this synchronization with a controlled-state primitive.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable buffer when the controlled value changes.
     setInternalValue(value);
   }, [value]);
 

package/src/plugins/layout/JsonOutputPlugin.tsx

@@ -2,7 +2,6 @@
 
 import type { JSX } from "react";
 import { z } from "zod";
-import { EmotionCacheProvider } from "../../components/editor/output/EmotionCacheProvider";
 import { JsonOutput } from "../../components/editor/output/JsonOutput";
 import type {
   IStatelessPlugin,
@@ -30,18 +29,16 @@ export class JsonOutputPlugin implements IStatelessPlugin<Data> {
     valueTypes: z.enum(["json", "python"]).default("python"),
   });
 
-  render({ data, host }: IStatelessPluginProps<Data>): JSX.Element {
+  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
     // `false` defaults to no text label
     const name = data.name === undefined ? false : data.name || "";
     return (
-      <EmotionCacheProvider container={host.shadowRoot}>
-        <JsonOutput
-          data={data.jsonData}
-          format="auto"
-          valueTypes={data.valueTypes}
-          name={name}
-        />
-      </EmotionCacheProvider>
+      <JsonOutput
+        data={data.jsonData}
+        format="auto"
+        valueTypes={data.valueTypes}
+        name={name}
+      />
     );
   }
 }

package/dist/emotion-is-prop-valid.esm-M57VsT8j.js

@@ -1,14 +0,0 @@
-//#region ../node_modules/.pnpm/@emotion+memoize@0.9.0/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
-function e(e) {
-	var t = Object.create(null);
-	return function(n) {
-		return t[n] === void 0 && (t[n] = e(n)), t[n];
-	};
-}
-//#endregion
-//#region ../node_modules/.pnpm/@emotion+is-prop-valid@1.4.0/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
-var t = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/, n = /* #__PURE__ */ e(function(e) {
-	return t.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91;
-});
-//#endregion
-export { e as n, n as t };

package/src/components/editor/output/EmotionCacheProvider.tsx

@@ -1,32 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
-import { type PropsWithChildren, useMemo } from "react";
-
-/**
- * Custom Emotion cache provider that works in shadow roots.
- * We don't directly use Emotion, but some of our dependencies do (via MUI).
- */
-export const EmotionCacheProvider: React.FC<
-  PropsWithChildren<{ container: ShadowRoot | null }>
-> = ({ container, children }) => {
-  const cache = useMemo(() => {
-    if (!container) {
-      return createCache({ key: "mo", prepend: true });
-    }
-    let emotionRoot = container.querySelector("style");
-    // Create a new style element if one doesn't exist
-    if (!emotionRoot) {
-      emotionRoot = document.createElement("style");
-      container.append(emotionRoot);
-    }
-    return createCache({
-      key: "mo",
-      prepend: true,
-      container: emotionRoot,
-    });
-  }, [container]);
-
-  return <CacheProvider value={cache}>{children}</CacheProvider>;
-};