@lostgradient/cinder 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lostgradient/cinder
 
+## 0.13.0
+
+### Minor Changes
+
+- [#740](https://github.com/stevekinney/cinder/pull/740) [`ddefe5c`](https://github.com/stevekinney/cinder/commit/ddefe5c7fb2beff3b2593ea1179cc1bb6ed56bae) Thanks [@stevekinney](https://github.com/stevekinney)! - Add link-backed SegmentedControl navigation options for route filters.
+
+## 0.12.1
+
+### Patch Changes
+
+- [#737](https://github.com/stevekinney/cinder/pull/737) [`3600db8`](https://github.com/stevekinney/cinder/commit/3600db878c53ae5d7048487207b08a60d5421b22) Thanks [@stevekinney](https://github.com/stevekinney)! - Publish the post-0.12 downstream fixes for Chat full-height layout metadata and dense inspector styling hooks.
+
 ## 0.12.0
 
 ### Minor Changes

package/components.json

@@ -3,7 +3,7 @@
   "manifestVersion": 1,
   "package": {
     "name": "@lostgradient/cinder",
-    "version": "0.12.0",
+    "version": "0.13.0",
     "framework": "svelte",
     "frameworkVersionRange": ">=5.56.0 <6",
     "classPrefix": "cinder-",
@@ -924,7 +924,8 @@
       "tags": ["chat", "conversation", "domain-suite"],
       "useWhen": [
         "Shipping a full chat surface with composer, scroll-anchor, unread indicator, and attachments bundled as one heavyweight drop-in.",
-        "Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages."
+        "Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages.",
+        "Embedding Chat in a definite-height flex or grid region where its internal transcript should own scrolling."
       ],
       "avoidWhen": [
         {
@@ -4376,11 +4377,12 @@
       "exportName": "Segment",
       "category": "form",
       "status": "stable",
-      "purpose": "Individual option inside a SegmentedControl that renders the button, wires the value, and forwards leading/trailing decorations.",
+      "purpose": "Individual option inside a SegmentedControl that renders either a selection button or a route-backed link with shared segmented styling.",
       "tags": ["form", "selection"],
       "useWhen": [
         "Authoring SegmentedControl children declaratively so consumers can compose icons, labels, and badges per segment.",
-        "Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata."
+        "Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata.",
+        "Rendering route filters as real links inside `SegmentedControl variant=\"navigation\"`."
       ],
       "avoidWhen": [
         {
@@ -4405,11 +4407,12 @@
       "exportName": "SegmentedControl",
       "category": "form",
       "status": "stable",
-      "purpose": "Compact radio-style selector that surfaces a small fixed set of options as a single connected bar and binds the chosen value.",
+      "purpose": "Compact segmented selector that surfaces a small fixed set of options as a connected bar, including bindable selections and route-backed links.",
       "tags": ["form", "selection"],
       "useWhen": [
         "Choosing one of two to five mutually exclusive options that all fit on screen at once.",
-        "Picking a view filter where seeing every option beats hiding them inside a toggle or tabs control."
+        "Picking a view filter where seeing every option beats hiding them inside a toggle or tabs control.",
+        "Rendering route-backed filters as real links with `variant=\"navigation\"` and `Segment href`."
       ],
       "avoidWhen": [
         {

package/dist/components/accordion/index.js

@@ -83,15 +83,16 @@ function classNames(...parts) {
 }
 
 // src/components/accordion-item/accordion-item.svelte
-var root = $.from_html(`<div class="cinder-accordion-item__panel"><div class="cinder-accordion-item__panel-inner"><!></div></div>`);
-var root_1 = $.from_html(`<div><h3 class="cinder-accordion-item__heading"><button type="button" class="cinder-accordion-item__trigger"><span class="cinder-accordion-item__title"> </span> <svg class="cinder-accordion-item__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button></h3> <!></div>`);
+var root = $.from_html(`<div class="cinder-accordion-item__panel-inner"><!></div>`);
+var root_1 = $.from_html(`<div><h3 class="cinder-accordion-item__heading"><button type="button" class="cinder-accordion-item__trigger"><span class="cinder-accordion-item__title"> </span> <svg class="cinder-accordion-item__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button></h3> <div class="cinder-accordion-item__panel"><!></div></div>`);
 function Accordion_item($$anchor, $$props) {
+  const instanceId = $.props_id();
   $.push($$props, true);
   let disabled = $.prop($$props, "disabled", 3, false);
   const context = getAccordionContext();
   const isExpanded = $.derived(() => context.expandedIds.includes($$props.id));
-  const headerId = $.derived(() => `${$$props.id}-header`);
-  const panelId = $.derived(() => `${$$props.id}-panel`);
+  const headerId = $.derived(() => `${instanceId}-header`);
+  const panelId = $.derived(() => `${instanceId}-panel`);
   function handleClick() {
     if (disabled())
       return;
@@ -106,26 +107,26 @@ function Accordion_item($$anchor, $$props) {
   $.next(2);
   $.reset(button);
   $.reset(h3);
-  var node = $.sibling(h3, 2);
+  var div_1 = $.sibling(h3, 2);
+  var node = $.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root();
-      var div_2 = $.child(div_1);
+      var div_2 = root();
       var node_1 = $.child(div_2);
       $.snippet(node_1, () => $$props.children);
       $.reset(div_2);
-      $.reset(div_1);
-      $.template_effect(() => $.set_attribute(div_1, "id", $.get(panelId)));
-      $.append($$anchor2, div_1);
+      $.append($$anchor2, div_2);
     };
     $.if(node, ($$render) => {
       if ($.get(isExpanded))
         $$render(consequent);
     });
   }
+  $.reset(div_1);
   $.reset(div);
   $.template_effect(($0) => {
     $.set_class(div, 1, $0);
+    $.set_style(div, $$props.style);
     $.set_attribute(div, "data-cinder-expanded", $.get(isExpanded) ? "" : undefined);
     $.set_attribute(div, "data-cinder-disabled", disabled() ? "" : undefined);
     $.set_attribute(button, "id", $.get(headerId));
@@ -133,6 +134,8 @@ function Accordion_item($$anchor, $$props) {
     $.set_attribute(button, "aria-controls", $.get(panelId));
     button.disabled = disabled();
     $.set_text(text, $$props.title);
+    $.set_attribute(div_1, "id", $.get(panelId));
+    $.set_attribute(div_1, "hidden", !$.get(isExpanded));
   }, [
     () => $.clsx(classNames("cinder-accordion-item", $$props.class))
   ]);
@@ -223,4 +226,4 @@ export {
   Accordion2 as Accordion
 };
 
-//# debugId=1DCB10602C8FB38664756E2164756E21
+//# debugId=86A20AE2C42C2B0D64756E2164756E21

package/dist/components/accordion-item/accordion-item.css

@@ -5,6 +5,16 @@
  * ======================================== */
 
   .cinder-accordion-item {
+    --cinder-accordion-item-trigger-gap: var(--cinder-space-4);
+    --cinder-accordion-item-trigger-padding-block: var(--cinder-space-4);
+    --cinder-accordion-item-trigger-padding-inline: var(--cinder-space-5);
+    --cinder-accordion-item-trigger-font-size: var(--cinder-text-base);
+    --cinder-accordion-item-trigger-font-weight: var(--cinder-font-medium);
+    --cinder-accordion-item-panel-inner-padding-block-start: var(--cinder-space-4);
+    --cinder-accordion-item-panel-inner-padding-block-end: var(--cinder-space-5);
+    --cinder-accordion-item-panel-inner-padding-inline: var(--cinder-space-5);
+    --cinder-accordion-item-panel-font-size: var(--cinder-text-base);
+    --cinder-accordion-item-panel-line-height: var(--cinder-leading-normal);
     border-block-end: 1px solid var(--cinder-border);
   }
 
@@ -31,12 +41,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--cinder-space-4);
+    gap: var(--cinder-accordion-item-trigger-gap, var(--cinder-space-4));
     width: 100%;
-    padding: var(--cinder-space-4) var(--cinder-space-5);
+    padding: var(--cinder-accordion-item-trigger-padding-block, var(--cinder-space-4))
+      var(--cinder-accordion-item-trigger-padding-inline, var(--cinder-space-5));
 
-    font-size: var(--cinder-text-base);
-    font-weight: var(--cinder-font-medium);
+    font-size: var(--cinder-accordion-item-trigger-font-size, var(--cinder-text-base));
+    font-weight: var(--cinder-accordion-item-trigger-font-weight, var(--cinder-font-medium));
     line-height: var(--cinder-leading-snug);
     color: var(--cinder-text);
     text-align: start;
@@ -146,9 +157,11 @@
   }
 
   .cinder-accordion-item__panel-inner {
-    padding: var(--cinder-space-4) var(--cinder-space-5) var(--cinder-space-5);
-    font-size: var(--cinder-text-base);
-    line-height: var(--cinder-leading-normal);
+    padding: var(--cinder-accordion-item-panel-inner-padding-block-start, var(--cinder-space-4))
+      var(--cinder-accordion-item-panel-inner-padding-inline, var(--cinder-space-5))
+      var(--cinder-accordion-item-panel-inner-padding-block-end, var(--cinder-space-5));
+    font-size: var(--cinder-accordion-item-panel-font-size, var(--cinder-text-base));
+    line-height: var(--cinder-accordion-item-panel-line-height, var(--cinder-leading-normal));
     color: var(--cinder-text-muted);
   }
 

package/dist/components/accordion-item/accordion-item.schema.js

@@ -72,6 +72,10 @@ var schema = {
     class: {
       type: "string",
       description: "Additional CSS class merged with `.cinder-accordion-item`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-accordion-item` root."
     }
   },
   additionalProperties: false,
@@ -92,4 +96,4 @@ export {
   accordion_item_schema_default as default
 };
 
-//# debugId=CED71061F07864C964756E2164756E21
+//# debugId=D45061C2BEE6BE8464756E2164756E21

package/dist/components/accordion-item/accordion-item.types.d.ts

@@ -12,6 +12,8 @@ export type AccordionItemProps = {
     disabled?: boolean;
     /** Additional CSS class merged with `.cinder-accordion-item`. */
     class?: string;
+    /** Inline style string applied to the `.cinder-accordion-item` root. */
+    style?: string;
     /** Panel content rendered when the item is expanded. */
     children: Snippet;
 };
@@ -28,4 +30,6 @@ export interface AccordionItemSchemaProps {
     disabled?: boolean;
     /** Additional CSS class merged with `.cinder-accordion-item`. */
     class?: string;
+    /** Inline style string applied to the `.cinder-accordion-item` root. */
+    style?: string;
 }

package/dist/components/accordion-item/accordion-item.variables.js

@@ -52,10 +52,21 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/accordion-item/accordion-item.variables.ts
-var variables = [];
+var variables = [
+  "--cinder-accordion-item-panel-font-size",
+  "--cinder-accordion-item-panel-inner-padding-block-end",
+  "--cinder-accordion-item-panel-inner-padding-block-start",
+  "--cinder-accordion-item-panel-inner-padding-inline",
+  "--cinder-accordion-item-panel-line-height",
+  "--cinder-accordion-item-trigger-font-size",
+  "--cinder-accordion-item-trigger-font-weight",
+  "--cinder-accordion-item-trigger-gap",
+  "--cinder-accordion-item-trigger-padding-block",
+  "--cinder-accordion-item-trigger-padding-inline"
+];
 var accordion_item_variables_default = variables;
 export {
   accordion_item_variables_default as default
 };
 
-//# debugId=24BF9D6EF0FBB68164756E2164756E21
+//# debugId=FE56BCDDC2ED5DB364756E2164756E21

package/dist/components/accordion-item/index.js

@@ -83,15 +83,16 @@ function classNames(...parts) {
 }
 
 // src/components/accordion-item/accordion-item.svelte
-var root = $.from_html(`<div class="cinder-accordion-item__panel"><div class="cinder-accordion-item__panel-inner"><!></div></div>`);
-var root_1 = $.from_html(`<div><h3 class="cinder-accordion-item__heading"><button type="button" class="cinder-accordion-item__trigger"><span class="cinder-accordion-item__title"> </span> <svg class="cinder-accordion-item__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button></h3> <!></div>`);
+var root = $.from_html(`<div class="cinder-accordion-item__panel-inner"><!></div>`);
+var root_1 = $.from_html(`<div><h3 class="cinder-accordion-item__heading"><button type="button" class="cinder-accordion-item__trigger"><span class="cinder-accordion-item__title"> </span> <svg class="cinder-accordion-item__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg></button></h3> <div class="cinder-accordion-item__panel"><!></div></div>`);
 function Accordion_item($$anchor, $$props) {
+  const instanceId = $.props_id();
   $.push($$props, true);
   let disabled = $.prop($$props, "disabled", 3, false);
   const context = getAccordionContext();
   const isExpanded = $.derived(() => context.expandedIds.includes($$props.id));
-  const headerId = $.derived(() => `${$$props.id}-header`);
-  const panelId = $.derived(() => `${$$props.id}-panel`);
+  const headerId = $.derived(() => `${instanceId}-header`);
+  const panelId = $.derived(() => `${instanceId}-panel`);
   function handleClick() {
     if (disabled())
       return;
@@ -106,26 +107,26 @@ function Accordion_item($$anchor, $$props) {
   $.next(2);
   $.reset(button);
   $.reset(h3);
-  var node = $.sibling(h3, 2);
+  var div_1 = $.sibling(h3, 2);
+  var node = $.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root();
-      var div_2 = $.child(div_1);
+      var div_2 = root();
       var node_1 = $.child(div_2);
       $.snippet(node_1, () => $$props.children);
       $.reset(div_2);
-      $.reset(div_1);
-      $.template_effect(() => $.set_attribute(div_1, "id", $.get(panelId)));
-      $.append($$anchor2, div_1);
+      $.append($$anchor2, div_2);
     };
     $.if(node, ($$render) => {
       if ($.get(isExpanded))
         $$render(consequent);
     });
   }
+  $.reset(div_1);
   $.reset(div);
   $.template_effect(($0) => {
     $.set_class(div, 1, $0);
+    $.set_style(div, $$props.style);
     $.set_attribute(div, "data-cinder-expanded", $.get(isExpanded) ? "" : undefined);
     $.set_attribute(div, "data-cinder-disabled", disabled() ? "" : undefined);
     $.set_attribute(button, "id", $.get(headerId));
@@ -133,6 +134,8 @@ function Accordion_item($$anchor, $$props) {
     $.set_attribute(button, "aria-controls", $.get(panelId));
     button.disabled = disabled();
     $.set_text(text, $$props.title);
+    $.set_attribute(div_1, "id", $.get(panelId));
+    $.set_attribute(div_1, "hidden", !$.get(isExpanded));
   }, [
     () => $.clsx(classNames("cinder-accordion-item", $$props.class))
   ]);
@@ -149,4 +152,4 @@ export {
   Accordion_item as AccordionItem
 };
 
-//# debugId=327E97542BFF12B664756E2164756E21
+//# debugId=7FB287FC6F3C44AF64756E2164756E21

package/dist/components/action-row/action-row.css

@@ -1,9 +1,19 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-action-row {
+    --cinder-action-row-padding-block: var(--cinder-space-3);
+    --cinder-action-row-padding-inline: var(--cinder-space-4);
+    --cinder-action-row-layout-column-gap: var(--cinder-space-3);
+    --cinder-action-row-layout-row-gap: var(--cinder-space-2);
+    --cinder-action-row-body-gap: var(--cinder-space-1);
+    --cinder-action-row-title-font-size: var(--cinder-text-sm);
+    --cinder-action-row-description-font-size: var(--cinder-text-sm);
+    --cinder-action-row-meta-font-size: var(--cinder-text-xs);
+    --cinder-action-row-trailing-gap: var(--cinder-space-2);
     display: block;
     inline-size: 100%;
-    padding: var(--cinder-space-3) var(--cinder-space-4);
+    padding: var(--cinder-action-row-padding-block, var(--cinder-space-3))
+      var(--cinder-action-row-padding-inline, var(--cinder-space-4));
     border: 0;
     border-radius: var(--cinder-radius-md);
     background: transparent;
@@ -14,7 +24,8 @@
   }
 
   .cinder-action-row[data-cinder-density='condensed'] {
-    padding: var(--cinder-space-2) var(--cinder-space-3);
+    --cinder-action-row-padding-block: var(--cinder-space-2);
+    --cinder-action-row-padding-inline: var(--cinder-space-3);
   }
 
   @media (hover: hover) {
@@ -67,8 +78,8 @@
   .cinder-action-row__layout {
     display: grid;
     align-items: center;
-    column-gap: var(--cinder-space-3);
-    row-gap: var(--cinder-space-2);
+    column-gap: var(--cinder-action-row-layout-column-gap, var(--cinder-space-3));
+    row-gap: var(--cinder-action-row-layout-row-gap, var(--cinder-space-2));
     grid-template-columns: 1fr;
     grid-template-areas: 'body';
   }
@@ -99,34 +110,34 @@
     display: flex;
     min-inline-size: 0;
     flex-direction: column;
-    gap: var(--cinder-space-1);
+    gap: var(--cinder-action-row-body-gap, var(--cinder-space-1));
   }
 
   .cinder-action-row__trailing {
     grid-area: trailing;
     display: inline-flex;
     align-items: center;
-    gap: var(--cinder-space-2);
+    gap: var(--cinder-action-row-trailing-gap, var(--cinder-space-2));
     color: var(--cinder-text-muted);
   }
 
   .cinder-action-row__title {
     color: inherit;
-    font-size: var(--cinder-text-sm);
+    font-size: var(--cinder-action-row-title-font-size, var(--cinder-text-sm));
     line-height: var(--cinder-leading-snug);
     overflow-wrap: anywhere;
   }
 
   .cinder-action-row__description {
     color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-sm);
+    font-size: var(--cinder-action-row-description-font-size, var(--cinder-text-sm));
     line-height: var(--cinder-leading-snug);
     overflow-wrap: anywhere;
   }
 
   .cinder-action-row__meta {
     color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
+    font-size: var(--cinder-action-row-meta-font-size, var(--cinder-text-xs));
     line-height: var(--cinder-leading-snug);
     overflow-wrap: anywhere;
   }

package/dist/components/action-row/action-row.schema.js

@@ -84,6 +84,10 @@ var schema = {
     class: {
       type: "string",
       description: "Additional classes merged with `.cinder-action-row`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-action-row` root."
     }
   },
   additionalProperties: false,
@@ -123,4 +127,4 @@ export {
   action_row_schema_default as default
 };
 
-//# debugId=CAD2E7A8D028F6E564756E2164756E21
+//# debugId=FB7AA1AE4716503064756E2164756E21

package/dist/components/action-row/action-row.types.d.ts

@@ -43,3 +43,46 @@ export type ActionRowProps = Omit<HTMLButtonAttributes, 'aria-current' | 'aria-p
     /** Additional classes merged with `.cinder-action-row`. */
     class?: string;
 };
+/** Schema generator surface for ActionRow — excludes native button attributes except supported styling hooks. */
+export interface ActionRowSchemaProps {
+    /**
+     * Density token surfaced as `data-cinder-density`.
+     * @default "comfortable"
+     */
+    density?: ActionRowDensity;
+    /**
+     * Whether the row is currently selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Accessible state mapping for selected rows.
+     * Use `pressed` for in-page selectable rows and `current` for navigation/current-item rows.
+     * @default "pressed"
+     */
+    selectedState?: ActionRowSelectedState;
+    /**
+     * `aria-current` value used when `selectedState="current"` and `selected` is true.
+     * @default "true"
+     */
+    currentValue?: ActionRowCurrentValue;
+    /**
+     * Native button type.
+     * @default "button"
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /** Leading visual such as an icon, avatar, marker, or status dot. */
+    leading?: Snippet;
+    /** Primary row label. Required so the row has visible text and an accessible name. */
+    title: Snippet;
+    /** Secondary description below the title. */
+    description?: Snippet;
+    /** Tertiary metadata such as timestamp, status text, or a compact badge. */
+    meta?: Snippet;
+    /** Trailing region such as a timestamp, count, badge, chevron, or shortcut hint. */
+    trailing?: Snippet;
+    /** Additional classes merged with `.cinder-action-row`. */
+    class?: string;
+    /** Inline style string applied to the `.cinder-action-row` root. */
+    style?: string;
+}

package/dist/components/action-row/action-row.variables.js

@@ -52,10 +52,20 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/action-row/action-row.variables.ts
-var variables = [];
+var variables = [
+  "--cinder-action-row-body-gap",
+  "--cinder-action-row-description-font-size",
+  "--cinder-action-row-layout-column-gap",
+  "--cinder-action-row-layout-row-gap",
+  "--cinder-action-row-meta-font-size",
+  "--cinder-action-row-padding-block",
+  "--cinder-action-row-padding-inline",
+  "--cinder-action-row-title-font-size",
+  "--cinder-action-row-trailing-gap"
+];
 var action_row_variables_default = variables;
 export {
   action_row_variables_default as default
 };
 
-//# debugId=760088280D320BC064756E2164756E21
+//# debugId=4A0646B62FFB1E4364756E2164756E21

package/dist/components/chat/chat.svelte.d.ts

@@ -8,6 +8,7 @@
  * @tag domain-suite
  * @useWhen Shipping a full chat surface with composer, scroll-anchor, unread indicator, and attachments bundled as one heavyweight drop-in.
  * @useWhen Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages.
+ * @useWhen Embedding Chat in a definite-height flex or grid region where its internal transcript should own scrolling.
  * @avoidWhen Rendering a one-off message list — compose lighter primitives directly instead of pulling the full suite.
  * @avoidWhen The transcript is read-only and needs no composer — a simple list of message bubbles is a better fit.
  * @related markdown-editor