Add a text widget (rich text: bold/italic/underline, per-run color/highlight)

A new self-contained widget type showing user-authored rich text -- no
live upstream to poll, like the static image widget, just word-wrapped
styled text instead of an uploaded image.

The dialog's contenteditable HTML is never stored or replayed as HTML:
app/text_content.py parses it server-side (on save) into a plain
paragraphs-of-styled-runs structure -- the actual sanitization
boundary, since raw HTML never round-trips back into any browser DOM
(the dialog rebuilds its editor from that same JSON via
createElement/textContent). app/widgets/text.py renders it with a
custom word-wrap/shrink-to-fit layout, using real vendored font weights
(app/fonts/NotoSans-{Regular,Bold,Italic,BoldItalic}.ttf, OFL-licensed
like the emoji fonts already there) rather than every other widget's
single ImageFont.load_default() -- the one widget type where that
distinction matters.

server/app/static/common.js

@@ -62,7 +62,7 @@
 // UI (Layout canvas, Add-a-widget buttons, button-assignment dropdowns).
 const WIDGET_LABELS = {
   photos: 'Photos', calendar: 'Calendar', whiteboard: 'Whiteboard (alpha)', tasks: 'Tasks',
-  static: 'Static image',
+  static: 'Static image', text: 'Text',
 };
 
 function showStatus(ok, message) {

server/app/static/frame_layout.js

@@ -286,11 +286,11 @@ window.addEventListener('resize', () => {
 // icon was clicked).
 const DIALOG_INIT = {
   photos: initPhotosDialog, calendar: initCalendarDialog, whiteboard: initWhiteboardDialog,
-  tasks: initTasksDialog, static: initStaticDialog,
+  tasks: initTasksDialog, static: initStaticDialog, text: initTextDialog,
 };
 const DIALOG_CLOSE = {
   photos: closePhotosDialog, calendar: closeCalendarDialog, whiteboard: closeWhiteboardDialog,
-  tasks: closeTasksDialog, static: closeStaticDialog,
+  tasks: closeTasksDialog, static: closeStaticDialog, text: closeTextDialog,
 };
 
 let openDialogWidgetType = null;

server/app/static/theme.css

@@ -205,6 +205,12 @@ details.card .sub { margin-top: 8px; }
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
 }
+input[type="color"] {
+  width: 44px;
+  height: 34px;
+  padding: 2px;
+  cursor: pointer;
+}
 input[type="range"] {
   width: 100%;
   margin-top: 8px;
@@ -281,6 +287,49 @@ input:focus, select:focus {
 .checkbox-row input { width: auto; margin-top: 0; }
 .checkbox-row label { margin-top: 0; font-weight: normal; }
 
+.richtext-toolbar { display: flex; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
+.richtext-btn {
+  width: auto;
+  min-width: 32px;
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-alt);
+  color: var(--text);
+  font-size: 14px;
+  cursor: pointer;
+}
+.richtext-btn:hover { background: var(--surface); }
+.richtext-toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
+.richtext-color-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  font-weight: normal;
+  font-size: 14px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.richtext-color-label input[type="color"] {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin-top: 0;
+}
+.richtext-editor {
+  margin-top: 8px;
+  min-height: 90px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface-alt);
+  color: var(--text);
+  font-size: 15px;
+  line-height: 1.5;
+}
+.richtext-editor:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+
 .calendar-user-list { list-style: none; margin: 12px 0 0; padding: 0; }
 .calendar-user-list > li { margin-top: 14px; }
 .calendar-user-list > li:first-child { margin-top: 0; }

server/app/static/widget_dialog_text.js

@@ -0,0 +1,140 @@
+// Text widget dialog: a small rich-text editor (bold/italic/underline,
+// text/highlight color), font size/alignment/background settings, and
+// the rendered preview. Not a page-load script -- frame_layout.js
+// fetches this widget's dialog HTML fragment, injects it into the
+// shared <dialog>, points window.FRAME_API at this specific widget
+// (/api/frames/{id}/widgets/{widget_id}), then calls initTextDialog().
+//
+// The editor is never seeded via innerHTML string interpolation --
+// #text-editor's data-content attribute (server-rendered from
+// app/text_content.py's already-sanitized run structure, not raw HTML)
+// is JSON-parsed and rebuilt with createElement/textContent below. The
+// same <div><span style="..."> shape this produces is exactly what
+// app/text_content.py's parser expects back on save, so round-tripping
+// (load -> edit -> save -> reload) is stable.
+
+function loadTextPreview() {
+  document.getElementById('text-preview').src = `${window.FRAME_API}/preview/text?_=${Date.now()}`;
+}
+
+function buildTextEditorContent(editor, paragraphs) {
+  editor.textContent = '';
+  if (!paragraphs || !paragraphs.length) return;
+  paragraphs.forEach((para) => {
+    const div = document.createElement('div');
+    if (!para.length) {
+      div.appendChild(document.createElement('br'));
+    } else {
+      para.forEach((run) => {
+        const span = document.createElement('span');
+        span.textContent = run.text;
+        if (run.bold) span.style.fontWeight = 'bold';
+        if (run.italic) span.style.fontStyle = 'italic';
+        if (run.underline) span.style.textDecoration = 'underline';
+        if (run.color) span.style.color = run.color;
+        if (run.bg) span.style.backgroundColor = run.bg;
+        div.appendChild(span);
+      });
+    }
+    editor.appendChild(div);
+  });
+}
+
+let _textSavedRange = null;
+let _textSelectionHandler = null;
+
+function initTextDialog() {
+  const editor = document.getElementById('text-editor');
+  let initialContent = null;
+  try {
+    initialContent = JSON.parse(editor.dataset.content || 'null');
+  } catch (e) { /* leave empty */ }
+  buildTextEditorContent(editor, initialContent);
+
+  // Native <input type="color"> steals focus (and with it, the
+  // editor's text selection) the moment it's interacted with -- track
+  // the most recent in-editor selection continuously so a color pick
+  // can be reapplied to the text the user actually had selected,
+  // instead of applying to nothing.
+  _textSelectionHandler = () => {
+    const sel = window.getSelection();
+    if (sel.rangeCount > 0 && editor.contains(sel.anchorNode)) {
+      _textSavedRange = sel.getRangeAt(0).cloneRange();
+    }
+  };
+  document.addEventListener('selectionchange', _textSelectionHandler);
+
+  function restoreSelection() {
+    if (!_textSavedRange) return;
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(_textSavedRange);
+  }
+
+  ['text-bold', 'text-italic', 'text-underline'].forEach((id) => {
+    const btn = document.getElementById(id);
+    // preventDefault on mousedown keeps focus (and the selection) in
+    // the editor, so the click's execCommand has something to act on.
+    btn.addEventListener('mousedown', (e) => e.preventDefault());
+    btn.addEventListener('click', () => {
+      editor.focus();
+      document.execCommand(btn.dataset.cmd, false, null);
+    });
+  });
+
+  document.getElementById('text-color').addEventListener('input', (e) => {
+    editor.focus();
+    restoreSelection();
+    document.execCommand('foreColor', false, e.target.value);
+  });
+
+  document.getElementById('text-highlight').addEventListener('input', (e) => {
+    editor.focus();
+    restoreSelection();
+    document.execCommand('hiliteColor', false, e.target.value);
+  });
+
+  document.getElementById('text-highlight-clear').addEventListener('mousedown', (e) => e.preventDefault());
+  document.getElementById('text-highlight-clear').addEventListener('click', () => {
+    editor.focus();
+    restoreSelection();
+    document.execCommand('hiliteColor', false, 'transparent');
+  });
+
+  document.getElementById('text_font_size').addEventListener('input', (e) => {
+    document.getElementById('text_font_size_value').textContent = `${e.target.value}px`;
+  });
+
+  document.getElementById('text-config-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const body = new URLSearchParams({
+      text_html: editor.innerHTML,
+      text_font_size: document.getElementById('text_font_size').value,
+      text_align: document.getElementById('text_align').value,
+      text_background_color: document.getElementById('text_background_color').value,
+    });
+    try {
+      const resp = await fetch(`${window.FRAME_API}/config`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body,
+      });
+      if (!resp.ok) throw new Error(await apiError(resp));
+      showStatus(true, 'Saved.');
+      loadTextPreview();
+    } catch (e2) {
+      showStatus(false, e2.message);
+    }
+  });
+
+  document.getElementById('text-preview-refresh').addEventListener('click', loadTextPreview);
+  loadTextPreview();
+}
+
+function closeTextDialog() {
+  if (_textSelectionHandler) {
+    document.removeEventListener('selectionchange', _textSelectionHandler);
+    _textSelectionHandler = null;
+  }
+  _textSavedRange = null;
+}