@inglorious/ui 9.8.0 → 9.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.8.0",
+  "version": "9.8.2",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -316,32 +316,32 @@
   "peerDependencies": {
     "@inglorious/store": "^12.1.1",
     "@inglorious/utils": "^5.1.0",
-    "@inglorious/web": "^6.10.2"
+    "@inglorious/web": "^6.13.1"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "12.2.5",
+    "@inglorious/charts": "12.2.6",
     "@inglorious/eslint-config": "1.2.0",
     "@inglorious/store": "12.1.1",
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
-    "@inglorious/web": "6.10.2",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/web-components-vite": "^10.6.0",
+    "@inglorious/web": "6.13.1",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/web-components-vite": "^10.6.5",
     "happy-dom": "^20.14.0",
     "jsdom": "^30.0.1",
     "prettier": "^3.9.6",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.6.0",
+    "storybook": "^10.6.5",
     "typescript": "~7.0.2",
     "vite": "^8.2.2",
     "vitest": "^5.0.0"
   },
   "engines": {
-    "node": ">= 22"
+    "node": ">= 26"
   },
   "scripts": {
     "dev": "vite --config app/vite.config.js",

package/src/controls/button/style.css

@@ -60,7 +60,6 @@
     }
   }
 
-  /* Neutral, unless a theme gives the default color its own tokens */
   &.iw-button-default {
     --iw-button-color: var(--iw-button-default-color, var(--iw-color-text));
     --iw-button-bg: var(--iw-button-default-bg, var(--iw-color-surface));
@@ -144,7 +143,6 @@
   &.iw-button-pressed {
     background-color: var(--iw-button-bg-active);
     color: var(--iw-button-text);
-    /* box-shadow: var(--iw-button-shadow-active); */
   }
 
   &:disabled,

package/src/controls/button/template.js

@@ -16,7 +16,7 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
  * With `onFileSelect`, the button also opens a file picker on click.
  * @example
  * // Stateless usage
- * button.render({ children: 'Click me', variant: 'primary' })
+ * button.render({ children: 'Click me', color: 'primary' })
  *
  * // File picker
  * button.render({ children: 'Upload', accept: 'image/*', onFileSelect })
@@ -89,7 +89,7 @@ export function render(props) {
       () =>
         html`<input
           type="file"
-          accept=${accept ?? ""}
+          accept=${accept ?? nothing}
           ?multiple=${isMultiple}
           ?disabled=${isDisabled}
           hidden
@@ -102,6 +102,5 @@ export function render(props) {
 function handleFileChange(event, onFileSelect) {
   const { files } = event.target
   if (files?.length) onFileSelect(files)
-  // Clear the input so picking the same file again still fires `change`
   event.target.value = ""
 }

package/src/controls/checkbox/style.css

@@ -14,7 +14,6 @@
     accent-color: var(--iw-checkbox-accent);
   }
 
-  /* With a description, the label and it stack beside the box. */
   .iw-checkbox-text {
     display: flex;
     flex-direction: column;

package/src/controls/checkbox/template.js

@@ -34,8 +34,6 @@ export function render(props) {
     ...rest
   } = props
 
-  // The label wraps the input, which is what ties the two together: it needs no
-  // `for`, and an empty one would point at nothing and break the click-through.
   const inputId = id || name
 
   const classes = {

package/src/controls/combobox/style.css

@@ -5,7 +5,6 @@
   flex-direction: column;
   gap: var(--iw-space-1);
   font-family: var(--iw-font-family-sans);
-  /* Each combobox anchors its own dropdown to its own frame. */
   anchor-scope: --iw-combobox;
 
   &.iw-combobox-full-width {
@@ -42,7 +41,6 @@
     anchor-name: --iw-combobox;
     display: flex;
     align-items: center;
-    /* The gap spaces the text from the arrow, as it does for Input's icons. */
     gap: var(--iw-space-2);
     padding: 0 var(--iw-space-3);
     border: 1px solid var(--iw-input-border);
@@ -82,7 +80,6 @@
       box-shadow: var(--iw-input-shadow-focus);
     }
 
-    /* The control is focusable so it can be opened from the keyboard. */
     &:focus-visible {
       outline: none;
       border-color: var(--iw-input-border-focus);
@@ -110,9 +107,6 @@
       }
     }
 
-    /* The text element, whatever it is showing. Same role as
-       .iw-input-control in Input, so the shared rules live here and the
-       variant classes only add what is specific to them. */
     .iw-combobox-control {
       flex: 1;
       min-width: 0;
@@ -168,11 +162,6 @@
       justify-content: center;
       font-size: var(--iw-font-size-sm);
       line-height: 1;
-      /* A flex child, like Input's icons and the Select arrow. Absolutely
-         positioning it anchored to .iw-combobox rather than the frame, so
-         the glyph drifted whenever a label sat above the control, and it
-         needed a reserved padding strip to stop text running under it. The
-         row's gap does both. */
       flex: none;
       pointer-events: none;
       color: var(--iw-color-text-muted);
@@ -184,9 +173,6 @@
     }
   }
 
-  /* A popover in the top layer, placed under the frame and as wide as it,
-     flipping above when there is no room below. The browser's popover box
-     is centred in the viewport, so its insets, margin and colours are reset. */
   .iw-combobox-dropdown {
     position-anchor: --iw-combobox;
     position-area: block-end span-inline-end;

package/src/controls/combobox/template.js

@@ -51,11 +51,6 @@ export const Combobox = {
       isFullWidth = false,
       isOpen = false,
     } = props
-    // The control is a div, not a labellable element, so a `for` binding is not
-    // available. It is referenced by id from the control's aria-labelledby
-    // instead, which is what a screen reader actually reads here.
-    // Only minted when there is something to point at. A reference to an id
-    // that is not in the DOM is worse than no reference at all.
     const labelId = label && id ? `${id}-label` : ""
     const messageId = (error || hint) && id ? `${id}-message` : ""
 
@@ -535,25 +530,17 @@ function trackOutsideClick(props, el) {
 
   const existing = outsideListeners.get(el)
   if (existing) {
-    // A re-render of the same dropdown: keep the one listener, but point it at
-    // the current props so onClose is not captured from the first render.
     existing.props = props
     return
   }
 
   const entry = { props }
   entry.listener = (event) => {
-    // The dropdown left the DOM: this press is the last one to hear from it.
-    // Retiring here is what keeps a torn-down dropdown from closing whatever
-    // opens next.
     if (!el.isConnected) {
       document.removeEventListener("pointerdown", entry.listener)
       return
     }
 
-    // The root, not the dropdown: the control is a sibling of the dropdown, and a
-    // press on it has to count as inside. Resolved per event rather than at mount
-    // because the dropdown is not connected yet when the ref first runs.
     const root = el.closest(".iw-combobox") ?? el
     if (!event.composedPath().includes(root)) entry.props.onClose?.()
   }

package/src/controls/file-upload/template.js

@@ -79,7 +79,7 @@ export function render(props) {
           aria-describedby=${messageId || nothing}
           aria-invalid=${error ? "true" : "false"}
           type="file"
-          accept=${accept ?? ""}
+          accept=${accept ?? nothing}
           ?multiple=${isMultiple}
           ?disabled=${isDisabled}
           ?required=${isRequired}

package/src/controls/image-cropper/helpers.js

@@ -5,8 +5,6 @@
 
 import { clamp } from "@inglorious/utils/math/number.js"
 
-// Every rect is in fractions of the image (0-1 on both axes), so it survives
-// any display size and maps onto source pixels only when the image is cropped.
 export const DEFAULT_MIN_SIZE = 0.1
 export const DEFAULT_STEP = 0.02
 export const FULL_RECT = { x: 0, y: 0, w: 1, h: 1 }

package/src/controls/image-cropper/image.js

@@ -50,7 +50,6 @@ export async function cropImage(file, rect, options = {}) {
     const context = canvas.getContext("2d")
     if (!context) throw new Error("Canvas is unavailable")
 
-    // Formats without alpha would turn transparent pixels black.
     if (OPAQUE_TYPES.includes(type) && background) {
       context.fillStyle = background
       context.fillRect(0, 0, output.width, output.height)
@@ -86,7 +85,6 @@ export async function decodeImage(file) {
     try {
       return await createImageBitmap(file, { imageOrientation: "from-image" })
     } catch {
-      // Some engines reject the options object; try the plain decoder.
       try {
         return await createImageBitmap(file)
       } catch {

package/src/controls/image-cropper/style.css

@@ -1,11 +1,7 @@
 .iw-image-cropper {
-  /* Set from the image's natural size once it loads. */
   --iw-image-cropper-aspect: 16 / 9;
-  /* Caps the stage height; the width follows the image's proportions. */
   --iw-image-cropper-max-height: 70vh;
 
-  /* Neutral in every theme on purpose, like the before/after divider: the
-     frame must read on any photo without competing with it. */
   --iw-image-cropper-bg: var(--iw-color-gray-900);
   --iw-image-cropper-overlay: rgb(0 0 0 / 55%);
   --iw-image-cropper-frame-width: 2px;
@@ -57,8 +53,6 @@
     -webkit-user-drag: none;
   }
 
-  /* The events land on the stage either way; the frame and handles only take
-     pointer events so the cursor shows what a drag there would do. */
   .iw-image-cropper-frame {
     position: absolute;
     box-sizing: border-box;

package/src/controls/image-cropper/template.js

@@ -4,7 +4,7 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { when } from "@inglorious/web/directives/when"
 
@@ -34,8 +34,6 @@ const ARROW_MOVES = {
   ArrowDown: [0, 1],
 }
 
-// Pointers and the drag in progress belong to one element and never reach the
-// store: they change on every move and are meaningless once the gesture ends.
 /** @type {WeakMap<Element, { pointers: Map<number, { x: number, y: number }>, drag: object | null, pinch: object | null }>} */
 const gestures = new WeakMap()
 
@@ -68,7 +66,7 @@ export const ImageCropper = {
     }
     const style = isLoaded
       ? `--iw-image-cropper-aspect: ${props.naturalWidth / props.naturalHeight};`
-      : ""
+      : nothing
 
     return html`<div
       class=${classMap(classes)}
@@ -131,7 +129,7 @@ export const ImageCropper = {
   renderImage(props) {
     return html`<img
       class="iw-image-cropper-image"
-      src=${props.src ?? ""}
+      src=${props.src ?? nothing}
       alt=${props.alt ?? ""}
       draggable="false"
       @load=${handleLoad(props)}

package/src/controls/input/style.css

@@ -60,7 +60,6 @@
     }
 
     .iw-input-control {
-      /* Fills the frame, which is now the box. */
       flex: 1;
       min-width: 0;
       font-family: inherit;

package/src/controls/radio-group/style.css

@@ -19,7 +19,6 @@
     cursor: pointer;
   }
 
-  /* With a description, the label and it stack beside the circle. */
   .iw-radio-text {
     display: flex;
     flex-direction: column;
@@ -71,7 +70,6 @@
     --iw-radio-accent: var(--iw-color-info);
   }
 
-  /* After the directions, which it overrides with a grid. */
   &.iw-radio-group-card {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));

package/src/controls/rating/style.css

@@ -1,6 +1,3 @@
-/* A fieldset of native radios: the inputs stay in the page for the keyboard
-   and assistive tech but out of sight, and each star is the label that
-   checks its radio. */
 .iw-rating {
   display: inline-flex;
   align-items: center;

package/src/controls/select/style.css

@@ -37,8 +37,6 @@
   .iw-select-frame {
     display: flex;
     align-items: center;
-    /* The gap spaces the text from the arrow, the same way it spaces an
-       Input's text from its icons. */
     gap: var(--iw-space-2);
     padding: 0 var(--iw-space-3);
     border: 1px solid var(--iw-input-border);
@@ -77,7 +75,6 @@
       }
     }
 
-    /* The control is focusable so it can be opened from the keyboard. */
     &:focus-visible {
       outline: none;
       border-color: var(--iw-input-border-focus);
@@ -149,9 +146,6 @@
       justify-content: center;
       font-size: var(--iw-font-size-sm);
       line-height: 1;
-      /* A flex child, like Input's icons. Absolutely positioning it needed a
-         positioning context on the frame and a reserved padding strip so the
-         text would not run underneath it; the row's gap does both. */
       flex: none;
       /* Decorative. A popup only opens from a trusted gesture on the select
          itself, so the arrow cannot open it; leaving clicks to pass through

package/src/controls/slider/style.css

@@ -23,8 +23,6 @@
     accent-color: var(--iw-slider-accent);
   }
 
-  /* A tick per step, under the track: their ends sit under the thumb's ends
-     of travel, half a thumb in from the track's. */
   .iw-slider-marks {
     display: flex;
     justify-content: space-between;
@@ -37,9 +35,6 @@
     }
   }
 
-  /* Two thumbs on one track. The inputs lie on top of each other with their
-     own tracks hidden, and only their thumbs take presses, so either can be
-     dragged; the track below is drawn here, filled between the two. */
   &.iw-slider-range {
     --iw-slider-thumb: 1rem;
 

package/src/controls/slider/template.js

@@ -132,7 +132,6 @@ function renderRange({
   const span = max - min || DEFAULT_STEP
   const fill = `--iw-slider-low: ${((low - min) / span) * PERCENT}%; --iw-slider-high: ${((high - min) / span) * PERCENT}%`
   const endName = (end) => (name ? `${name}-${end}` : nothing)
-  // Each thumb is named for its end of the range, after the slider's label.
   const endLabel = (end) =>
     typeof label === "string" && label ? `${label} ${end}` : end
 

package/src/controls/switch/style.css

@@ -51,7 +51,6 @@
     transform: translateX(calc(1rem * var(--iw-dir-sign, 1)));
   }
 
-  /* With a description, the label and it stack beside the track. */
   .iw-switch-text {
     display: flex;
     flex-direction: column;

package/src/controls/switch/template.js

@@ -32,8 +32,6 @@ export function render(props) {
     ...rest
   } = props
 
-  // The label wraps the input, which is what ties the two together: it needs no
-  // `for`, and an empty one would point at nothing and break the click-through.
   const inputId = id || name
 
   const classes = {

package/src/controls/textarea/style.css

@@ -4,7 +4,6 @@
   gap: var(--iw-space-1);
   font-family: var(--iw-font-family-sans);
 
-  /* The field takes the width it is given, and the box inside fills it. */
   &.iw-textarea-full-width {
     width: 100%;
 
@@ -24,7 +23,6 @@
     margin-inline-start: var(--iw-space-1);
   }
 
-  /* Its height is its rows', or its content's with isAutoSize. */
   .iw-textarea {
     width: min(100%, 100%);
     resize: none;

package/src/data-display/before-after/style.css

@@ -1,8 +1,6 @@
 .iw-before-after {
   --iw-before-after-position: 50%;
 
-  /* Neutral in every theme on purpose: the divider should separate the two
-     pictures without competing with them for attention. */
   --iw-before-after-divider-width: 2px;
   --iw-before-after-divider-color: rgb(255 255 255 / 90%);
   --iw-before-after-handle-size: 40px;
@@ -31,7 +29,6 @@
     width: 100%;
   }
 
-  /* Greyed out and dimmed, so it reads as "you cannot move this". */
   &.iw-before-after-disabled {
     --iw-before-after-divider-color: rgb(156 163 175 / 60%);
     --iw-before-after-handle-bg: rgb(156 163 175 / 60%);
@@ -104,7 +101,6 @@
     box-shadow: var(--iw-shadow-md);
   }
 
-  /* Two chevron arrows drawn with borders, no icon font needed. */
   .iw-before-after-handle::before,
   .iw-before-after-handle::after {
     content: "";

package/src/data-display/before-after/template.js

@@ -4,7 +4,7 @@
  */
 
 import { clamp } from "@inglorious/utils/math/number.js"
-import { html } from "@inglorious/web"
+import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
 import {
@@ -79,7 +79,7 @@ export const BeforeAfter = {
     return html`<div class="iw-before-after-item iw-before-after-before">
       <img
         class="iw-before-after-image"
-        src=${props.before?.src ?? ""}
+        src=${props.before?.src ?? nothing}
         alt=${props.before?.alt ?? ""}
         draggable="false"
       />
@@ -95,7 +95,7 @@ export const BeforeAfter = {
     return html`<div class="iw-before-after-item iw-before-after-after">
       <img
         class="iw-before-after-image"
-        src=${props.after?.src ?? ""}
+        src=${props.after?.src ?? nothing}
         alt=${props.after?.alt ?? ""}
         draggable="false"
       />

package/src/data-display/carousel/carousel.stories.js

@@ -149,8 +149,6 @@ export const ManyPerView = {}
 ManyPerView.args = {
   ...Default.args,
   id: "carousel-many",
-  // The infinite treadmill keeps one slide at its centre, so it is not a good
-  // fit when several slides are intentionally visible at once.
   isInfinite: false,
 }
 ManyPerView.decorators = [

package/src/data-display/carousel/handlers.js

@@ -40,8 +40,6 @@ export function create(entity) {
   entity.hasIndicators ??= true
   entity.isFullWidth ??= false
 
-  // An infinite carousel keeps the current item in the middle slot, so the
-  // starting item is placed there by rotating the strip up front.
   if (entity.isInfinite && entity.items.length > ENOUGH_TO_WRAP) {
     const home = Math.floor(entity.items.length / 2)
     entity.rotation = normalizeRotation(entity.page - home, entity.items.length)

package/src/data-display/carousel/style.css

@@ -17,14 +17,11 @@
     width: 100%;
   }
 
-  /* A column stage otherwise shrink-wraps to its arrows instead of the
-     available inline size. */
   &.iw-carousel-vertical {
     display: block;
     width: 100%;
   }
 
-  /* Snapping, swiping, momentum and RTL all come from the browser. */
   .iw-carousel-viewport {
     position: relative;
     display: flex;
@@ -45,19 +42,11 @@
     outline-offset: 2px;
   }
 
-  /* One item per view by default, so every item can reach the start of the
-     viewport and each one is exactly one page. Override
-     --iw-carousel-item-size to show several at once. */
   .iw-carousel-item {
     flex: 0 0 var(--iw-carousel-item-size, 100%);
     scroll-snap-align: start;
   }
 
-  /* Smooth scrolling would animate every drag step, so it is turned off while
-     dragging. Snapping stays on: the browser then lands on the nearest slide by
-     itself, and re-enabling it instead would snap back to the item it
-     remembered. Doubled up on the class so this outranks the reduced-motion
-     rule at the end of the file. */
   .iw-carousel-viewport.iw-carousel-viewport-dragging {
     scroll-behavior: auto;
     scroll-snap-type: none;
@@ -77,7 +66,6 @@
     overscroll-behavior-y: contain;
   }
 
-  /* Gap tokens mirror Flex. */
   &.iw-carousel-gap-sm .iw-carousel-viewport {
     gap: var(--iw-space-2);
   }
@@ -94,7 +82,6 @@
     gap: var(--iw-space-8);
   }
 
-  /* Off-axis alignment. */
   &.iw-carousel-align-start .iw-carousel-viewport {
     align-items: flex-start;
   }
@@ -107,7 +94,6 @@
     align-items: flex-end;
   }
 
-  /* The stage holds the viewport and its arrows, so centring ignores the dots. */
   .iw-carousel-stage {
     position: relative;
     display: flex;
@@ -125,7 +111,6 @@
     min-width: 0;
   }
 
-  /* Inside: float the arrows over the slides. */
   &.iw-carousel-arrows-inside .iw-carousel-stage {
     gap: 0;
   }
@@ -160,13 +145,11 @@
     bottom: var(--iw-carousel-arrow-inset);
   }
 
-  /* Outside: the arrows sit beside the scrolling area, flex handles centring. */
   &.iw-carousel-arrows-outside .iw-carousel-arrow {
     position: static;
     flex: 0 0 auto;
   }
 
-  /* Chevrons drawn with borders, no icon font needed. */
   .iw-carousel-chevron {
     display: block;
     width: 0;
@@ -225,7 +208,6 @@
   }
 }
 
-/* Respect reduced motion: only animate paging when the user allows it. */
 @media (prefers-reduced-motion: no-preference) {
   .iw-carousel .iw-carousel-viewport {
     scroll-behavior: smooth;

package/src/data-display/carousel/template.js

@@ -69,8 +69,6 @@ export const Carousel = {
       "iw-carousel-full-width": isFullWidth,
     }
 
-    // The arrows live in the stage, next to the viewport, so that centring them
-    // ignores the indicators underneath.
     return html`<div class=${classMap(classes)}>
       <div class="iw-carousel-stage">
         ${when(hasArrows, () => this.renderArrow?.(props, PREVIOUS))}
@@ -152,13 +150,10 @@ export const Carousel = {
     } = props
     const isPrevious = direction === PREVIOUS
 
-    // Infinite carousels wrap, so their arrows never run out.
     const isDisabled =
       !isInfinite &&
       (isPrevious ? page <= FIRST_PAGE : page >= getLastPage(items))
 
-    // The click is caught on the wrapper: Button's onClick carries no event, and
-    // a disabled button emits no click at all, so nothing can leak through.
     return html`<span
       class=${classMap({
         "iw-carousel-arrow": true,
@@ -238,7 +233,6 @@ export const Carousel = {
  */
 function handleScroll(props) {
   return (event) => {
-    // Infinite carousels re-centre on settle instead of tracking every scroll.
     if (props.isInfinite) return
 
     const page = pageFromScroll(event.currentTarget, props.axis)
@@ -257,7 +251,6 @@ function handleScrollEnd(props) {
   return (event) => {
     const viewport = event.currentTarget
 
-    // Mid-drag pauses fire scrollend too; leave the drag alone until it ends.
     if (drags.has(viewport)) return
 
     viewport.classList.remove("iw-carousel-viewport-dragging")
@@ -341,7 +334,6 @@ function handlePointerDown(props) {
       scroll: isVertical ? viewport.scrollTop : viewport.scrollLeft,
       isVertical,
     })
-    // Snapping would fight every move; it is restored on pointerup.
     viewport.classList.add("iw-carousel-viewport-dragging")
     viewport.setPointerCapture?.(event.pointerId)
   }
@@ -379,8 +371,6 @@ function handlePointerUp(props) {
     drags.delete(viewport)
     viewport.releasePointerCapture?.(event.pointerId)
 
-    // Land on the nearest slide; handleScrollEnd restores snapping and, when
-    // infinite, re-centres from there.
     goToPage(viewport, pageFromScroll(viewport, props.axis), props, "smooth")
   }
 }
@@ -415,9 +405,6 @@ function pageBy(props, step, from) {
     return
   }
 
-  // Several items can be visible at once, so their later offsets may extend
-  // past the physical scroll range. At the end, choosing the first such offset
-  // would make a right arrow jump backwards after the browser clamps it.
   const limit = maxScroll(viewport, isVertical)
   if (step > 0 && limit > SCROLL_EPSILON && scroll >= limit - SCROLL_EPSILON) {
     return
@@ -503,8 +490,6 @@ function goToPage(viewport, page, props, behavior = "auto") {
   const item = viewport.children[index]
   if (!item) return
 
-  // Guarded like setPointerCapture: real browsers always have scrollTo, but
-  // non-layout environments such as jsdom do not.
   viewport.scrollTo?.(
     (props.axis ?? DEFAULT_AXIS) === VERTICAL_AXIS
       ? { top: item.offsetTop, behavior }

package/src/data-display/chat/index.js

@@ -10,7 +10,6 @@ export const Chat = {
       ...entity,
       onDraftChange: (draft) => api.notify(`#${id}:draftChange`, draft),
       onSend: (text) => api.notify(`#${id}:messageSend`, text),
-      // A message naming an entity, such as a generated answer, shows it.
       renderEntity: (entityId) => api.render(entityId),
     }