flet-box 1.0.3 → 1.0.4

package/src/widget-factory/warnings.js

@@ -7,6 +7,14 @@ const IS_DEV = typeof FLETBOX_DEV !== 'undefined' ? FLETBOX_DEV : true;
 const suggestionCache = new Map();
 let propNames = [];
 
+// Props already reported. Without this, every prop *application* re-printed the
+// whole block — a captured stack trace plus ~8 styled console calls — so a widget
+// carrying a single unknown prop paid ~137 µs on every `update()`, roughly 400×
+// the cost of a known prop. Because `update()` re-applies every original prop, one
+// unknown prop slowed that widget for its whole lifetime.
+const warnedProps = new Set();
+const warnedDeprecated = new Set();
+
 export function setPropNames(names) {
   propNames = names;
   try { if (typeof window !== 'undefined') window.__FLETBOX_PROP_NAMES = names; } catch(e){}
@@ -216,6 +224,9 @@ function printDocs(prop) {
 
 export function warnUnknownProp(propName, context = {}) {
   if (!IS_DEV) return;
+  // Report each unknown prop once, not once per application.
+  if (warnedProps.has(propName)) return;
+  warnedProps.add(propName);
 
   const suggestions = getSuggestions(propName);
   const location = getCallLocation();
@@ -231,6 +242,10 @@ export function warnUnknownProp(propName, context = {}) {
 
 export function warnDeprecatedProp(propName, replacement = null, context = {}) {
   if (!IS_DEV) return;
+  // Same reasoning as `warnUnknownProp`: one report per prop/replacement pair.
+  const deprecatedKey = `${propName}\u0000${replacement || ""}`;
+  if (warnedDeprecated.has(deprecatedKey)) return;
+  warnedDeprecated.add(deprecatedKey);
 
   const location = getCallLocation();
 

package/src/widget-factory/widgetFactory.js

@@ -8,6 +8,29 @@ import { processProps } from "./processProps.js";
 import { assignProps } from "./assignProps.js";
 import { stackPosition } from "./stackPosition.js";
 import { addChildren, removePropChildren } from "./addChildren.js";
+import { reactiveKeyOf } from "./reactiveValue.js";
+import { registerWidget } from "../tools/useState.js";
+
+/**
+ * Auto-binds reactive props to their state key.
+ *
+ * A prop whose value is a live reactive (what `useState` returns) carries the key
+ * it came from, so the factory can subscribe this widget to that key. A later
+ * change then updates **only this widget** instead of rebuilding the whole app —
+ * which is what makes the plain
+ * `const [color, setColor] = useState("color", "red"); Widget({ bgColor: color })`
+ * syntax surgical.
+ *
+ * @param {HTMLElement} widget - The widget being built or updated.
+ * @param {Object} props - The props to scan.
+ * @returns {void}
+ */
+const bindReactiveProps = (widget, props) => {
+  for (const [prop, value] of Object.entries(props || {})) {
+    const key = reactiveKeyOf(value);
+    if (key) registerWidget(key, widget, prop);
+  }
+};
 
 /**
  * Main widget factory. Creates a fully functional DOM widget with reactivity,
@@ -96,6 +119,7 @@ export function WidgetFactory(tag, customProps = {}) {
   // ============================================================
   const initialProps = processProps(finalProps, finalTag, widgetName);
   assignProps(widget, initialProps);
+  bindReactiveProps(widget, finalProps);
   stackPosition(widget, finalProps);
 
   if (finalProps.child !== undefined) {
@@ -160,6 +184,9 @@ export function WidgetFactory(tag, customProps = {}) {
 
       const processed = processProps(merged, finalTag, widgetName);
       assignProps(widget, processed);
+      // Only the incoming keys can introduce a new binding; the ones present at
+      // construction were registered then.
+      bindReactiveProps(widget, normalized);
       stackPosition(widget, merged);
 
       if (hasChild || hasChildren) {

package/src/widgets/Accordion.js

@@ -156,11 +156,12 @@ export const Accordion = (props) => {
     titleElement.style.fontSize = `${currentTitleSize}px`;
     titleElement.style.fontWeight = currentTitleWeight;
 
-    // Swap icon based on current expanded state
-    iconElement.setAttribute(
-      "name",
-      isExpanded ? currentIconExpanded : currentIconCollapsed,
-    );
+    // Swap icon based on current expanded state. `Icon` renders its glyph as
+    // TEXT (a material-icons ligature), so setting a `name` attribute changed
+    // nothing and the chevron stayed on `chevron_right` forever.
+    iconElement.textContent = isExpanded
+      ? currentIconExpanded
+      : currentIconCollapsed;
     iconElement.style.color = currentIconColor;
     iconElement.style.fontSize = `${currentIconSize}px`;
 

package/src/widgets/Audio.js

@@ -74,6 +74,9 @@ export const Audio = (props) => {
   let duration = 0;
   let durationPoll = null;
   let audioContextFallbackAttempted = false;
+  // Set on unmount so deferred work (the duration fallback, in-flight fetches)
+  // never touches a discarded widget.
+  let disposed = false;
 
   /**
    * Recalculates the current playback position and fires the progress callbacks.
@@ -139,19 +142,25 @@ export const Audio = (props) => {
    * cannot determine duration without fully downloading the file.
    */
   const fallbackGetDuration = async () => {
-    if (audioContextFallbackAttempted) return;
+    if (audioContextFallbackAttempted || disposed) return;
     audioContextFallbackAttempted = true;
 
     try {
       const response = await fetch(src);
       const arrayBuffer = await response.arrayBuffer();
+      if (disposed) return;
       const audioContext = new (
         window.AudioContext || window.webkitAudioContext
       )();
-      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      const durationSeconds = audioBuffer.duration;
-      setDuration(durationSeconds);
-      audioContext.close();
+      // `close()` must run even when decoding fails: AudioContexts are a capped
+      // resource (~6 per page in Chromium) and leaking them makes every later
+      // context fail to start, which breaks the fallback for good.
+      try {
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        setDuration(audioBuffer.duration);
+      } finally {
+        audioContext.close();
+      }
     } catch (err) {
       console.warn("[Audio] Fallback duration fetch failed:", err);
     }
@@ -178,16 +187,29 @@ export const Audio = (props) => {
   audio.addEventListener("error", (e) => console.warn("[Audio] Error:", e));
 
   // Kick off duration detection immediately; if unavailable after 2 s, use fetch fallback
+  let fallbackTimer = null;
   if (!tryGetDurationFromAudio()) {
     pollDuration();
-    setTimeout(() => {
+    fallbackTimer = setTimeout(() => {
+      fallbackTimer = null;
       if (!duration) fallbackGetDuration();
     }, 2000);
   }
 
-  // Cancel the duration polling interval when the widget unmounts
+  // Release everything the widget owns on unmount. The 2 s fallback timer was
+  // never stored, so after teardown it still fetched the whole file and spun up
+  // an AudioContext (and called onLoad) for a widget that no longer exists — and
+  // a tree rebuild does that on every state change.
   audio.onUnmount(() => {
-    if (durationPoll) clearInterval(durationPoll);
+    disposed = true;
+    if (durationPoll) {
+      clearInterval(durationPoll);
+      durationPoll = null;
+    }
+    if (fallbackTimer) {
+      clearTimeout(fallbackTimer);
+      fallbackTimer = null;
+    }
   });
 
   // ========== PUBLIC PLAYBACK API ==========

package/src/widgets/BottomSheet.js

@@ -58,6 +58,8 @@ export const BottomSheet = (props) => {
 
   let isOpen = false;
   let overlay = null;
+  // Pending "hide after the close animation" timer, so it can be cancelled.
+  let closeTimer = null;
   let sheetContainer = null;
   let startY = 0;
   let currentY = 0;
@@ -190,6 +192,18 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
   overlay.appendChild(sheetContainer);
   document.body.appendChild(overlay);
 
+  // The overlay lives in `document.body` and can be removed without `close()`
+  // ever running (state rebuild, route change, plain removeChild of the host).
+  // `_cleanup` is not called on that path, so release the document listener and
+  // any pending animation timer through the lifecycle hook too.
+  overlay.onUnmount(() => {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+
   // Drag handlers
   const onTouchStart = (e) => {
     // ✅ Prevent the drag event from propagating to the overlay
@@ -229,6 +243,11 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
   const open = () => {
     if (isOpen) return;
     isOpen = true;
+    // Cancel any pending hide from a close that is still animating out.
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
     overlay.style.visibility = "visible";
     overlay.style.opacity = "1";
     sheetContainer.style.transform = "translateY(0)";
@@ -250,7 +269,11 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
     isOpen = false;
     sheetContainer.style.transform = "translateY(100%)";
     overlay.style.opacity = "0";
-    setTimeout(() => {
+    // Keep the id: `open()` clears it, otherwise reopening within the animation
+    // window lets a stale timer hide an OPEN sheet (invisible but isOpen true).
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
       overlay.style.visibility = "hidden";
     }, animationDuration);
     if (onClose) onClose();

package/src/widgets/Chart.js

@@ -134,7 +134,10 @@ export const Chart = (props) => {
     const paddingRange = range * 0.1;
     return {
       maxValue: maxVal + paddingRange,
-      minValue: Math.max(0, minVal - paddingRange),
+      // Do NOT clamp to 0. With all-negative data that inverts the range
+      // (min > max) and every point is drawn far outside the canvas, so the
+      // chart looks empty and the axis labels run from 0 to a negative max.
+      minValue: minVal - paddingRange,
     };
   };
 

package/src/widgets/Checkbox.js

@@ -67,13 +67,19 @@ export const Checkbox = (props) => {
 
   // Handle click
   if (!disabled) {
-    checkbox.onclick = (e) => {
+    const handleClick = (e) => {
       e.stopPropagation();
       const newChecked = !internalChecked;
       internalChecked = newChecked;
       updateUI(newChecked);
       if (onPress) onPress(newChecked);
     };
+    // Route the handler through the factory's props instead of assigning
+    // `onclick` directly. `assignProps` clears `onclick` on every update and only
+    // re-applies handlers it can see in the merged props, so a direct assignment
+    // died on the first `update()` — and every reactive setter (opacity, bgColor,
+    // padding…) calls update — leaving the control unable to toggle ever again.
+    checkbox.update({ onPress: handleClick });
 
     // Hover effect
     checkbox.addEventListener("mouseenter", () => {

package/src/widgets/CircularChart.js

@@ -335,7 +335,10 @@ export const CircularChart = (props) => {
     if (!ctx || !canvas) return;
     if (!startTime) {
       startTime = timestamp;
-      requestAnimationFrame(updateAnimation);
+      // Keep the id. The previous frame's id is already spent, so cleanup would
+      // cancel nothing and the pending frame kept re-arming forever on a detached
+      // canvas — and a re-`startAnimation()` could run two loops at once.
+      animationId = requestAnimationFrame(updateAnimation);
       return;
     }
     const elapsed = timestamp - startTime;

package/src/widgets/CodeViewer.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
 import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
 
 export const CodeViewer = (props) => {
@@ -81,8 +82,14 @@ code = "",
     ...rest,
   });
 
-  // Header
-  if (currentTitle && showHeader) {
+  // Header. Built through a helper so a later `title` update can create one on a
+  // widget that was constructed without it.
+  const ensureHeader = (text) => {
+    if (!showHeader || !text) return null;
+    if (headerRef) {
+      headerRef.textContent = text;
+      return headerRef;
+    }
     headerRef = WidgetFactory({
       tag: "div",
       padding: "8px 12px",
@@ -91,10 +98,12 @@ code = "",
       color: "#fff",
       fontSize: "14px",
       fontWeight: "bold",
-      textContent: currentTitle,
+      textContent: text,
     });
-    container.appendChild(headerRef);
-  }
+    container.insertBefore(headerRef, container.firstChild);
+    return headerRef;
+  };
+  ensureHeader(currentTitle);
 
   // Scroll wrapper
   scrollWrapperRef = WidgetFactory({
@@ -209,11 +218,20 @@ code = "",
 
   container.updateTitle = (newTitle) => {
     currentTitle = newTitle;
-    if (headerRef) {
-      headerRef.textContent = currentTitle;
-    }
+    ensureHeader(currentTitle);
   };
 
+  // `title` is a reactive prop mapped to `textContent` in the prop database, so
+  // letting the factory see it would replace the header and the whole code
+  // wrapper with a bare text node. Own it and update the header instead.
+  composeUpdate(container, ["title"], (props) => {
+    if (props.title === undefined) return;
+    container.updateTitle(props.title);
+    // `makeReactive` rewrites the value into `_originalProps` on every setter
+    // call; leaving it there means the next factory update wipes the widget.
+    delete container._originalProps.title;
+  });
+
   container.scrollTo = (x, y) => {
     if (scrollWrapperRef) {
       scrollWrapperRef.scrollLeft = x;

package/src/widgets/DataTable.js

@@ -83,7 +83,9 @@ export const DataTable = (props) => {
   table.appendChild(thead);
 
   // ========== BODY ==========
-  const tbody = document.createElement("tbody");
+  // `let`, not `const`: `updateData` replaces the body and must re-point here,
+  // otherwise the second call tries to replace an already-detached node.
+  let tbody = document.createElement("tbody");
 
   rows.forEach((row, index) => {
     const tr = document.createElement("tr");
@@ -152,8 +154,12 @@ export const DataTable = (props) => {
 
   // Update table data
   container.updateData = (newRows) => {
+    // Snapshot BEFORE clearing. `updateColumns` calls this with `rows` itself as
+    // the argument, so clearing first and then spreading produced an empty body
+    // and every row silently disappeared.
+    const nextRows = [...newRows];
     rows.length = 0;
-    rows.push(...newRows);
+    rows.push(...nextRows);
 
     // Rebuild body
     const newTbody = document.createElement("tbody");
@@ -213,6 +219,9 @@ export const DataTable = (props) => {
     });
 
     table.replaceChild(newTbody, tbody);
+    // Re-point at the live node, otherwise the next call replaces an already
+    // detached node and throws NotFoundError.
+    tbody = newTbody;
   };
 
   // Update table columns

package/src/widgets/Dropdown.js

@@ -243,7 +243,11 @@ export const Dropdown = (props) => {
     if (outsideClickListener)
       document.removeEventListener("click", outsideClickListener);
     if (resizeListener) window.removeEventListener("resize", resizeListener);
-    if (scrollListener) window.removeEventListener("scroll", scrollListener);
+    // The capture flag MUST match the one used when adding (see the `scroll`
+    // registration below), otherwise the listener is never removed: every
+    // open/close cycle leaked one window listener holding the whole closure.
+    if (scrollListener)
+      window.removeEventListener("scroll", scrollListener, true);
     outsideClickListener = resizeListener = scrollListener = null;
   };
 

package/src/widgets/Image.js

@@ -5,10 +5,17 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 
 export const Image = (props) => {
+  // `fit` and `circular` are documented Image props with no entry in the prop
+  // database, so forwarding them raw only produced an "unknown prop" warning
+  // while images stayed stretched (`object-fit: fill`) and square. Map them onto
+  // real CSS. `...rest` comes last so an explicit `borderRadius` still wins.
+  const { fit, circular, ...rest } = props || {};
   return WidgetFactory({
     tag: "img",
     widgetName: "Image",
-    ...props,
+    ...(fit !== undefined ? { objectFit: fit } : null),
+    ...(circular ? { borderRadius: "50%" } : null),
+    ...rest,
   });
 };
 

package/src/widgets/Input.js

@@ -6,6 +6,7 @@ import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 import { Icon } from "./Icon.js";
 import { TextInputValidator } from "../utils/TextInputValidator.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
 
 /**
  * @typedef {Object} InputProps
@@ -314,11 +315,16 @@ export const Input = (props) => {
   });
 
   // --- Optional label rendered above the input ---
-  if (label) {
-    const requiredMark = required ? " *" : "";
-    const labelEl = WidgetFactory({
+  let labelEl = null;
+  const renderLabel = (text) => {
+    if (labelEl) {
+      labelEl.textContent = text;
+      return;
+    }
+    if (!text) return;
+    labelEl = WidgetFactory({
       tag: "label",
-      text: label + requiredMark,
+      text,
       fontSize: 12,
       fontWeight: 500,
       color: error ? colors.danger : colors.textSecondary,
@@ -329,8 +335,23 @@ export const Input = (props) => {
     labelEl.addEventListener("click", () => {
       inputElement?.focus();
     });
-    container.appendChild(labelEl);
-  }
+    container.insertBefore(labelEl, container.firstChild);
+  };
+
+  if (label) renderLabel(label + (required ? " *" : ""));
+
+  // `label` is registered as a REACTIVE_PROP that maps to `textContent`, so if the
+  // factory ever sees it, `container.textContent = "…"` replaces this whole
+  // composite widget (label + wrapper + native <input> + icons) with a bare text
+  // node. Own the key and update the label element instead.
+  composeUpdate(container, ["label"], (props) => {
+    if (props.label === undefined) return;
+    renderLabel(props.label ? String(props.label) + (required ? " *" : "") : "");
+    // `makeReactive` writes the value back into `_originalProps` on every setter
+    // call; leaving it there means the next factory update merges it, maps it to
+    // `textContent` and wipes the widget anyway.
+    delete container._originalProps.label;
+  });
 
   // --- Wrapper — contains icons + native input, owns the border/fill style ---
   let wrapperStyles = {

package/src/widgets/Inspector.js

@@ -162,6 +162,16 @@ export const Inspector = (widget, indent = 0) => {
   // Separate structural props from the rest so we can render them last
   const { child, children, ...otherProps } = props;
 
+  // `child` may legitimately be an ARRAY (`child: [Text(...)]`), which the
+  // factory accepts. Normalise it into the children list: otherwise the subtree
+  // is dropped and — because `child` is truthy — the DOM-children fallback below
+  // is skipped too, so the whole branch disappears from the output.
+  const childNode = Array.isArray(child) ? null : child;
+  const kids = [
+    ...(Array.isArray(child) ? child : []),
+    ...(Array.isArray(children) ? children : []),
+  ];
+
   const propsList = Object.entries(otherProps)
     .map(([key, value]) => {
       const formattedValue = stringifyValue(value, indent + 1);
@@ -171,14 +181,14 @@ export const Inspector = (widget, indent = 0) => {
 
   // Reconstruct a single `child` prop
   let childStr = "";
-  if (child && child.nodeType === 1) {
-    childStr = `\n${nextSpaces}child: ${Inspector(child, indent + 1)}`;
+  if (childNode && childNode.nodeType === 1) {
+    childStr = `\n${nextSpaces}child: ${Inspector(childNode, indent + 1)}`;
   }
 
-  // Reconstruct a `children` array prop
+  // Reconstruct a `children` array prop (including an array-valued `child`)
   let childrenStr = "";
-  if (children && Array.isArray(children) && children.length > 0) {
-    const childrenItems = children
+  if (kids.length > 0) {
+    const childrenItems = kids
       .filter((c) => c && c.nodeType === 1)
       .map((c) => Inspector(c, indent + 1))
       .join(",\n" + nextSpaces + "  ");
@@ -191,11 +201,7 @@ export const Inspector = (widget, indent = 0) => {
   // Fall back to actual DOM children when no explicit child/children props exist
   const domChildren = collectChildren(widget);
   let domChildrenStr = "";
-  if (
-    domChildren.length > 0 &&
-    !child &&
-    (!children || children.length === 0)
-  ) {
+  if (domChildren.length > 0 && !childNode && kids.length === 0) {
     const domChildrenItems = domChildren
       .map((c) => Inspector(c, indent + 1))
       .join(",\n" + nextSpaces + "  ");

package/src/widgets/ListView.js

@@ -407,8 +407,14 @@ export const ListView = (props) => {
   const updateData = (newData) => {
     _data = [...newData];
     itemCache.clear();
+    // The dataset changed but the viewport did not, so the previous window
+    // bounds would make `renderVisibleItems()` bail out and leave the OLD rows
+    // on screen for same-length data.
+    visibleStart = -1;
+    visibleEnd = -1;
     refreshUI();
-    element.data = _data;
+    // Do NOT write `element.data` here: `data` is an accessor whose setter calls
+    // this very function, so assigning to it recursed until the stack overflowed.
   };
 
   /**

package/src/widgets/Markdown.js

@@ -5,6 +5,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
 import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
 
 /**
@@ -36,19 +37,49 @@ let markdownScopeUid = 0;
  * @param {string} html - Raw HTML produced by `parseMarkdown`.
  * @returns {string} The sanitized HTML.
  */
+/** True for URL values that must never reach an attribute (see sanitizeMarkdown). */
+const isDangerousUrl = (value) => {
+  const v = String(value).replace(/[\u0000-\u0020]/g, "").toLowerCase();
+  if (v.startsWith("javascript:") || v.startsWith("vbscript:")) return true;
+  // Inline images are legitimate; every other `data:` URL is not.
+  return v.startsWith("data:") && !v.startsWith("data:image/");
+};
+
 const sanitizeMarkdown = (html) => {
   const withoutScripts = html.replace(
     /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
     "",
   );
-  return withoutScripts.replace(/<[^<>]+>/g, (tag) =>
-    tag
-      .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
-      .replace(
-        /\s(href|src|xlink:href|formaction|action)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*'|javascript:[^\s>]+)/gi,
-        ' $1="#"',
-      ),
-  );
+  // Parse for real and walk the tree. A regex over raw tags cannot see a `>`
+  // that sits *inside* a quoted attribute value, so `<img src="x>y" onerror=…>`
+  // used to pass through untouched while the browser kept the handler. Letting
+  // the browser tokenize removes that entire class of bypass.
+  try {
+    const doc = new DOMParser().parseFromString(withoutScripts, "text/html");
+    doc.querySelectorAll("script").forEach((node) => node.remove());
+    doc.querySelectorAll("*").forEach((node) => {
+      for (const attr of [...node.attributes]) {
+        if (attr.name.toLowerCase().startsWith("on")) {
+          node.removeAttribute(attr.name);
+        } else if (isDangerousUrl(attr.value)) {
+          // Neutralise rather than delete: the documented contract keeps the
+          // attribute and points it at "#", so links stay focusable and styled.
+          node.setAttribute(attr.name, "#");
+        }
+      }
+    });
+    return doc.body.innerHTML;
+  } catch {
+    // No DOMParser (non-browser host): keep the previous best-effort regex pass.
+    return withoutScripts.replace(/<[^<>]+>/g, (tag) =>
+      tag
+        .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+        .replace(
+          /\s(href|src|xlink:href|formaction|action)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*'|javascript:[^\s>]+)/gi,
+          ' $1="#"',
+        ),
+    );
+  }
 };
 
 // ─── Syntax highlighting ────────────────────────────────────────────────────
@@ -1230,6 +1261,20 @@ export const Markdown = (props) => {
    */
   container.getSource = () => markdownText;
 
+  // `text`/`source`/`content` are reactive props mapped to `textContent` in the
+  // prop database, so letting the factory see them replaced the rendered
+  // Markdown with a bare text node. Own them and re-render instead.
+  composeUpdate(container, ["text", "source", "content"], (props) => {
+    const next = props.text ?? props.source ?? props.content;
+    if (next !== undefined) container.updateContent(String(next));
+    // `makeReactive` rewrites the value into `_originalProps` on every setter
+    // call; leaving it there means the next factory update maps it to
+    // `textContent` and wipes the widget anyway.
+    for (const key of ["text", "source", "content"]) {
+      delete container._originalProps[key];
+    }
+  });
+
   return container;
 };