@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/chart/lite-chart.js

@@ -75,6 +75,17 @@ function niceDomain(dataLo, dataHi, beginAtZero, count) {
  * `getComputedStyle()`-based re-theming step is needed the way `chart.ts`
  * needs one for its canvas.
  *
+ * By default (`layout="fit"`) the plot always squeezes to the measured host
+ * width. Three independent, opt-in escape hatches for dense/aligned data:
+ * `layout="scroll"` (+ `barWidth`) gives every bar a fixed pixel width and
+ * lets the plot overflow the host horizontally (scrollable) instead of
+ * squeezing; `maxLabels` decimates which x-axis text labels render (bars
+ * always still render) once there are more categories than that; and
+ * `barX` lets a consumer hand in its own per-category x-coordinate function
+ * — e.g. to pixel-align this chart's bars with a sibling `lyra-heatmap`'s
+ * calendar columns — overriding the internal slot math for both bars and
+ * their labels. All three are additive and no-ops when left unset.
+ *
  * @customElement lyra-lite-chart
  * @event lyra-point-click - Fired when a bar/point is activated (click, or
  *   Enter/Space while focused). `detail: { datasetIndex: number, index:
@@ -104,6 +115,15 @@ export class LyraLiteChart extends LyraElement {
         this.beginAtZero = true;
         /** Stacks each category's bars into one segmented bar. Ignored for `type="line"`. */
         this.stacked = false;
+        /** `'fit'` (default) squeezes the plot into the measured host width, unchanged from before this
+         *  property existed. `'scroll'` gives every bar a fixed `barWidth` instead, letting the plot's
+         *  content width exceed the host's — the host becomes horizontally scrollable
+         *  (`overflow-x: auto`) so every bar stays exactly `barWidth` wide regardless of category count.
+         *  Reflects to the `layout` attribute (e.g. for `:host([layout='scroll'])` host styling). */
+        this.layout = 'fit';
+        /** Fixed per-category bar width in px, used only when `layout="scroll"`. Ignored (as before this
+         *  property existed) in `layout="fit"`, the default. */
+        this.barWidth = 32;
         this.plotWidth = 0;
         this.plotHeight = 0;
         this.visible = true;
@@ -132,12 +152,30 @@ export class LyraLiteChart extends LyraElement {
             });
             this.intersectionObserver.observe(this);
         }
+        // A reconnect re-creates the observer above but the `<svg>` render root
+        // content survives across disconnect/reconnect (Lit doesn't tear down the
+        // shadow root) — re-observe it here (firstUpdated() only ever runs once,
+        // on the very first render, so it can't be relied on for a reconnect).
+        if (this.svgEl)
+            this.resizeObserver.observe(this.svgEl);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.resizeObserver?.disconnect();
         this.intersectionObserver?.disconnect();
     }
+    // Kept (not deleted, despite the "delete it" alternative the fix brief
+    // offered): connectedCallback() fires *before* Lit's first render, so on
+    // the very first mount `this.svgEl` (a `@query('svg')`) is still
+    // undefined there and its guarded `observe()` call is a no-op — verified
+    // empirically: deleting firstUpdated() here hung every existing test that
+    // waits for the ResizeObserver's initial measurement. firstUpdated() runs
+    // once, after that first render, and is what actually arms the observer
+    // for the initial mount; connectedCallback()'s own observe() call (added
+    // above) only ever succeeds on a *reconnect*, when the shadow DOM (and
+    // svgEl) already exists from before the disconnect. Together the two
+    // cover first-mount and reconnect without ever double-observing the same
+    // element from the same callback path.
     firstUpdated() {
         if (this.svgEl)
             this.resizeObserver?.observe(this.svgEl);
@@ -200,6 +238,14 @@ export class LyraLiteChart extends LyraElement {
             this.stacked,
             this.plotWidth,
             this.plotHeight,
+            this.layout,
+            this.barWidth,
+            this.maxLabels,
+            // `tickFormat`/`barX` are functions -- JSON.stringify() silently drops
+            // function-valued entries, so (matching tickFormat's existing,
+            // pre-this-change exclusion) they can't be included here anyway; a
+            // consumer swapping one in/out post-mount should also change some
+            // other signature input, same pre-existing caveat as tickFormat.
         ]);
     }
     emitPoint(datasetIndex, index) {
@@ -223,28 +269,39 @@ export class LyraLiteChart extends LyraElement {
       `;
         });
     }
-    renderBars(plotX, plotY, plotW, plotH, lo, hi) {
+    /**
+     * `slot` is the per-category width to lay bars out against — either the
+     * measured-width-derived `plotW / n` (`layout="fit"`) or the fixed
+     * `barWidth` (`layout="scroll"`), computed once by the caller
+     * (`renderChart()`) and handed to both this method and the category-label
+     * x-position calc so the two can never drift apart from each other.
+     */
+    renderBars(plotX, plotY, plotH, slot, lo, hi) {
         const span = hi - lo || 1;
         const n = this.labels.length;
-        const slot = n > 0 ? plotW / n : 0;
         const groupCount = this.stacked ? 1 : Math.max(1, this.datasets.length);
         const groupW = slot * (1 - BAR_GROUP_GAP);
         const barW = (groupW - BAR_GAP * slot * (groupCount - 1)) / groupCount;
         const bars = [];
         for (let i = 0; i < n; i++) {
-            const slotStart = plotX + i * slot + (slot - groupW) / 2;
+            // `this.barX`, when set, overrides just the category's own x-origin
+            // (what an unset `barX` would compute as `plotX + i * slot`) -- the
+            // group-centering/per-dataset-offset math below still layers on top of
+            // it, same as it does on top of the internal formula.
+            const origin = this.barX ? this.barX(i) : plotX + i * slot;
+            const slotStart = origin + (slot - groupW) / 2;
             let stackPos = 0; // running positive-side offset (in value units) for stacked bars
             let stackNeg = 0; // running negative-side offset
             this.datasets.forEach((s, di) => {
                 const v = s.data[i];
-                if (v == null)
+                if (v == null || !Number.isFinite(v))
                     return;
                 const color = this.colorFor(di, s);
-                let barX;
+                let rectX;
                 let barValLo;
                 let barValHi;
                 if (this.stacked) {
-                    barX = slotStart;
+                    rectX = slotStart;
                     if (v >= 0) {
                         barValLo = stackPos;
                         barValHi = stackPos + v;
@@ -257,9 +314,10 @@ export class LyraLiteChart extends LyraElement {
                     }
                 }
                 else {
-                    barX = slotStart + di * (barW + BAR_GAP * slot);
-                    barValLo = Math.min(0, v);
-                    barValHi = Math.max(0, v);
+                    rectX = slotStart + di * (barW + BAR_GAP * slot);
+                    const zeroClamped = Math.min(hi, Math.max(lo, 0));
+                    barValLo = Math.min(zeroClamped, v);
+                    barValHi = Math.max(zeroClamped, v);
                 }
                 const y1 = plotY + plotH - ((barValHi - lo) / span) * plotH;
                 const y2 = plotY + plotH - ((barValLo - lo) / span) * plotH;
@@ -267,7 +325,7 @@ export class LyraLiteChart extends LyraElement {
                 bars.push(svg `
           <rect
             part="bar"
-            x=${barX}
+            x=${rectX}
             y=${y1}
             width=${Math.max(0, barW)}
             height=${Math.max(0, y2 - y1)}
@@ -290,12 +348,19 @@ export class LyraLiteChart extends LyraElement {
         const yFor = (v) => plotY + plotH - ((v - lo) / span) * plotH;
         return this.datasets.map((s, di) => {
             const color = this.colorFor(di, s);
-            const pts = s.data
-                .map((v, i) => (v == null ? null : [xFor(i), yFor(v)]))
-                .filter((p) => p !== null);
-            const d = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x},${y}`).join(' ');
+            let d = '';
+            let penDown = false;
+            s.data.forEach((v, i) => {
+                if (v == null || !Number.isFinite(v)) {
+                    penDown = false;
+                    return;
+                }
+                const cmd = penDown ? 'L' : 'M';
+                d += `${cmd}${xFor(i)},${yFor(v)} `;
+                penDown = true;
+            });
             const dots = s.data.map((v, i) => {
-                if (v == null)
+                if (v == null || !Number.isFinite(v))
                     return nothing;
                 const label = this.labels[i];
                 return svg `
@@ -313,7 +378,7 @@ export class LyraLiteChart extends LyraElement {
           ><title>${s.label} — ${label}: ${v}</title></circle>
         `;
             });
-            return svg `<path part="line" d=${d} stroke=${color}></path>${dots}`;
+            return svg `<path part="line" d=${d.trim()} stroke=${color}></path>${dots}`;
         });
     }
     render() {
@@ -327,29 +392,70 @@ export class LyraLiteChart extends LyraElement {
         this.lastResult = result;
         return result;
     }
+    /**
+     * Step size for `maxLabels` decimation: 1 (show every label, today's
+     * unchanged default) when `maxLabels` is unset or already >= the label
+     * count, otherwise the ceil-divide spacing that lands close to
+     * `maxLabels` shown labels while always keeping index 0 and the last
+     * index (enforced by the caller, not here).
+     */
+    labelStep(n) {
+        const max = this.maxLabels;
+        if (max == null || n <= max)
+            return 1;
+        return Math.max(1, Math.ceil((n - 1) / Math.max(1, max - 1)));
+    }
     renderChart() {
-        const w = this.plotWidth || 400;
+        const n = this.labels.length;
         const h = this.plotHeight || 200;
         const padLeft = PAD_LEFT + (this.yLabel ? AXIS_TITLE_SPACE : 0);
         const padBottom = PAD_BOTTOM + (this.xLabel ? AXIS_TITLE_SPACE : 0);
         const plotX = padLeft;
         const plotY = PAD_TOP;
-        const plotW = Math.max(0, w - padLeft - PAD_RIGHT);
         const plotH = Math.max(0, h - plotY - padBottom);
+        let w;
+        let plotW;
+        let slot;
+        if (this.layout === 'scroll') {
+            // Fixed-width bars: content width is driven by category count ×
+            // barWidth instead of the measured host width, and CAN exceed it --
+            // the svg gets an explicit inline-size below (not 100%) and
+            // `:host([layout='scroll']) [part='base']` (lite-chart.styles.ts)
+            // turns on `overflow-x: auto` so the host scrolls to reveal the rest.
+            slot = this.barWidth;
+            plotW = Math.max(0, n * slot);
+            w = plotX + plotW + PAD_RIGHT;
+        }
+        else {
+            // 'fit' (default): squeeze to the measured host width, byte-for-byte
+            // the same computation as before `layout` existed.
+            w = this.plotWidth || 400;
+            plotW = Math.max(0, w - plotX - PAD_RIGHT);
+            slot = n > 0 ? plotW / n : 0;
+        }
         const { lo, hi, ticks } = this.domain();
         const grid = this.renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi);
         const marks = this.type === 'bar'
-            ? this.renderBars(plotX, plotY, plotW, plotH, lo, hi)
+            ? this.renderBars(plotX, plotY, plotH, slot, lo, hi)
             : this.renderLines(plotX, plotY, plotW, plotH, lo, hi);
+        const step = this.labelStep(n);
         const categoryLabels = this.labels.map((label, i) => {
-            const n = this.labels.length;
-            const x = plotX + (n > 1 ? (i / (n - 1)) * plotW : plotW / 2);
+            if (i !== 0 && i !== n - 1 && i % step !== 0)
+                return nothing; // maxLabels decimation
+            const x = this.type === 'bar' && n > 0
+                ? (this.barX ? this.barX(i) : plotX + i * slot) + slot / 2 // matches renderBars()'s own per-category slot center (or the barX override, when set)
+                : plotX + (n > 1 ? (i / (n - 1)) * plotW : plotW / 2);
             return svg `<text part="axis-label" x=${x} y=${plotY + plotH + 14} text-anchor="middle">${label}</text>`;
         });
         const chartLabel = this.datasets.map((d) => d.label).join(', ') || 'Chart';
         return html `
       <div part="base">
-        <svg viewBox="0 0 ${w} ${h}" role="group" aria-label=${chartLabel}>
+        <svg
+          viewBox="0 0 ${w} ${h}"
+          style=${this.layout === 'scroll' ? `inline-size: ${w}px` : nothing}
+          role="group"
+          aria-label=${chartLabel}
+        >
           ${grid}
           ${categoryLabels}
           ${marks}
@@ -404,6 +510,18 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], LyraLiteChart.prototype, "tickFormat", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraLiteChart.prototype, "layout", void 0);
+__decorate([
+    property({ type: Number, attribute: 'bar-width' })
+], LyraLiteChart.prototype, "barWidth", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-labels' })
+], LyraLiteChart.prototype, "maxLabels", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "barX", void 0);
 __decorate([
     state()
 ], LyraLiteChart.prototype, "plotWidth", void 0);

package/dist/components/chart/lite-chart.styles.js

@@ -23,6 +23,15 @@ export const styles = css `
     flex-direction: column;
     gap: var(--lyra-space-xs);
   }
+  /* layout="scroll": the svg below gets an explicit inline-size (its
+     computed content width, set inline per-render since it depends on
+     category count/barWidth) instead of the 100% below, and can end up
+     wider than this container -- scroll to reveal the rest instead of
+     squeezing. Scoped strictly to the reflected [layout='scroll'] attribute
+     so layout="fit" (the default) never triggers this rule. */
+  :host([layout='scroll']) [part='base'] {
+    overflow-x: auto;
+  }
   svg {
     flex: 1 1 auto;
     inline-size: 100%;

package/dist/components/chat-composer/chat-composer.d.ts

@@ -0,0 +1,92 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ChatComposerStatus = 'idle' | 'sending' | 'streaming';
+declare const LyraChatComposer_base: typeof LyraElement & (new (...args: any[]) => import("../../internal/form-associated.js").FormAssociatedInterface);
+/**
+ * `<lyra-chat-composer>` — the message input for a chat/agent conversation
+ * surface: an auto-resizing textarea plus a send/stop button. Form-
+ * associated via the `FormAssociated` mixin (see `<lyra-date-input>` for the
+ * same shape), so it participates in native `<form>` submission/validation/
+ * reset like any other text control — `name`/`value`/`disabled`/`required`/
+ * `checkValidity()`/`reportValidity()` all come from that mixin.
+ *
+ * Auto-resize reads the textarea's own *computed* line-height/padding/
+ * border at runtime (`resizeTextarea()`) rather than assuming a fixed
+ * px-per-row constant, so it stays correct under a consumer's own font-size/
+ * line-height overrides. It grows between `min-rows` and `max-rows`, then
+ * switches to internal scrolling.
+ *
+ * Enter-to-send (only active while `submit-on-enter` is true, the default):
+ * plain Enter submits and is prevented from inserting a newline; Shift+Enter
+ * always inserts a newline no matter what; an IME composition step (checked
+ * via `isComposing`, with `keyCode === 229` as a defense-in-depth fallback
+ * for browsers that report `isComposing` inconsistently on the
+ * compositionend-adjacent keydown) is never treated as a submit trigger;
+ * and while `status` isn't `"idle"` Enter is left alone to insert a newline
+ * too, rather than trying to submit again -- there is nothing meaningful to
+ * submit while a previous message is still sending/streaming, and the
+ * textarea deliberately stays interactive (see `disabled` below) so a user
+ * can keep composing their next message in the meantime.
+ *
+ * `lyra-submit`'s `detail.value` is always the exact, untrimmed current
+ * value (`detail.value === value` at the moment it fires) -- trimming is
+ * left to the consumer so it never silently diverges from what `value`
+ * itself reports. Submitting does not clear `value`; the consumer clears it
+ * once the submission has actually been accepted (so e.g. a failed send can
+ * leave the text in place for retry).
+ *
+ * @customElement lyra-chat-composer
+ * @slot leading - Content rendered before the textarea (e.g. an attach-file trigger button).
+ * @slot chips - An attachment tray rendered above the input row (e.g. files queued for this message).
+ * @slot trailing - Overrides the built-in send/stop button entirely when it has assigned content.
+ * @event lyra-input - Fired on every user-driven edit of the textarea (not a programmatic `.value` assignment). `detail: { value }`.
+ * @event lyra-submit - Fired by Enter (per `submit-on-enter`) or the built-in button while `status="idle"`. `detail: { value }`.
+ * @event lyra-stop - Fired by the built-in button while `status` is `"sending"` or `"streaming"`. No detail.
+ * @csspart base - The bordered root container.
+ * @csspart chips - The wrapper around the `chips` slot. Hidden entirely when the slot is empty.
+ * @csspart row - The row holding the leading slot, textarea, and trailing slot/button.
+ * @csspart leading - The wrapper around the `leading` slot. Hidden entirely when the slot is empty.
+ * @csspart textarea - The auto-resizing `<textarea>` itself.
+ * @csspart trailing - The wrapper around the `trailing` slot and the built-in `action-button`.
+ * @csspart action-button - The built-in send/stop button. Absent from the accessibility tree's meaningful content whenever `trailing` has assigned content. Style its busy treatment via `:host([status='sending'])`/`:host([status='streaming'])`.
+ */
+export declare class LyraChatComposer extends LyraChatComposer_base {
+    static styles: import("lit").CSSResultGroup[];
+    placeholder: string;
+    minRows: number;
+    maxRows: number;
+    status: ChatComposerStatus;
+    submitOnEnter: boolean;
+    private hasLeadingSlot;
+    private hasChipsSlot;
+    private hasTrailingSlot;
+    private textareaEl?;
+    protected willUpdate(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private hasSlotted;
+    /**
+     * Grows/shrinks the textarea between `min-rows` and `max-rows`, reading
+     * the *computed* line-height/padding/border back out of the element at
+     * call time instead of assuming a fixed px-per-row figure -- correct
+     * whatever font-size/line-height a consumer's own CSS ends up applying.
+     * Past `max-rows` the box stops growing and switches to internal
+     * scrolling (`overflow-y: auto`).
+     */
+    private resizeTextarea;
+    private onTextareaInput;
+    private onTextareaKeyDown;
+    private onActionClick;
+    private submit;
+    private onLeadingSlotChange;
+    private onChipsSlotChange;
+    private onTrailingSlotChange;
+    private renderActionButton;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chat-composer': LyraChatComposer;
+    }
+}
+export {};

package/dist/components/chat-composer/chat-composer.js

@@ -0,0 +1,285 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { FormAssociated } from '../../internal/form-associated.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './chat-composer.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding
+// send/stop glyphs to that module -- it's off limits here -- so these
+// one-off icons still read as part of the same visual language as the rest
+// of the library's inline icons. Same approach lyra-checkbox's and
+// lyra-chat-message's own local glyphs take for the identical reason.
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function sendIcon() {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${ICON_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${ICON_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    ><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+  `;
+}
+/** A filled square -- the conventional "stop generating" glyph. */
+function stopIcon() {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${ICON_VIEW_BOX}
+      fill="currentColor"
+      stroke="none"
+      aria-hidden="true"
+      focusable="false"
+    ><rect x="6" y="6" width="12" height="12" rx="1.5"></rect></svg>
+  `;
+}
+/**
+ * `<lyra-chat-composer>` — the message input for a chat/agent conversation
+ * surface: an auto-resizing textarea plus a send/stop button. Form-
+ * associated via the `FormAssociated` mixin (see `<lyra-date-input>` for the
+ * same shape), so it participates in native `<form>` submission/validation/
+ * reset like any other text control — `name`/`value`/`disabled`/`required`/
+ * `checkValidity()`/`reportValidity()` all come from that mixin.
+ *
+ * Auto-resize reads the textarea's own *computed* line-height/padding/
+ * border at runtime (`resizeTextarea()`) rather than assuming a fixed
+ * px-per-row constant, so it stays correct under a consumer's own font-size/
+ * line-height overrides. It grows between `min-rows` and `max-rows`, then
+ * switches to internal scrolling.
+ *
+ * Enter-to-send (only active while `submit-on-enter` is true, the default):
+ * plain Enter submits and is prevented from inserting a newline; Shift+Enter
+ * always inserts a newline no matter what; an IME composition step (checked
+ * via `isComposing`, with `keyCode === 229` as a defense-in-depth fallback
+ * for browsers that report `isComposing` inconsistently on the
+ * compositionend-adjacent keydown) is never treated as a submit trigger;
+ * and while `status` isn't `"idle"` Enter is left alone to insert a newline
+ * too, rather than trying to submit again -- there is nothing meaningful to
+ * submit while a previous message is still sending/streaming, and the
+ * textarea deliberately stays interactive (see `disabled` below) so a user
+ * can keep composing their next message in the meantime.
+ *
+ * `lyra-submit`'s `detail.value` is always the exact, untrimmed current
+ * value (`detail.value === value` at the moment it fires) -- trimming is
+ * left to the consumer so it never silently diverges from what `value`
+ * itself reports. Submitting does not clear `value`; the consumer clears it
+ * once the submission has actually been accepted (so e.g. a failed send can
+ * leave the text in place for retry).
+ *
+ * @customElement lyra-chat-composer
+ * @slot leading - Content rendered before the textarea (e.g. an attach-file trigger button).
+ * @slot chips - An attachment tray rendered above the input row (e.g. files queued for this message).
+ * @slot trailing - Overrides the built-in send/stop button entirely when it has assigned content.
+ * @event lyra-input - Fired on every user-driven edit of the textarea (not a programmatic `.value` assignment). `detail: { value }`.
+ * @event lyra-submit - Fired by Enter (per `submit-on-enter`) or the built-in button while `status="idle"`. `detail: { value }`.
+ * @event lyra-stop - Fired by the built-in button while `status` is `"sending"` or `"streaming"`. No detail.
+ * @csspart base - The bordered root container.
+ * @csspart chips - The wrapper around the `chips` slot. Hidden entirely when the slot is empty.
+ * @csspart row - The row holding the leading slot, textarea, and trailing slot/button.
+ * @csspart leading - The wrapper around the `leading` slot. Hidden entirely when the slot is empty.
+ * @csspart textarea - The auto-resizing `<textarea>` itself.
+ * @csspart trailing - The wrapper around the `trailing` slot and the built-in `action-button`.
+ * @csspart action-button - The built-in send/stop button. Absent from the accessibility tree's meaningful content whenever `trailing` has assigned content. Style its busy treatment via `:host([status='sending'])`/`:host([status='streaming'])`.
+ */
+export class LyraChatComposer extends FormAssociated(LyraElement) {
+    constructor() {
+        super(...arguments);
+        this.placeholder = '';
+        this.minRows = 1;
+        this.maxRows = 8;
+        this.status = 'idle';
+        this.submitOnEnter = true;
+        this.hasLeadingSlot = false;
+        this.hasChipsSlot = false;
+        this.hasTrailingSlot = false;
+        this.onTextareaInput = (e) => {
+            this.value = e.target.value;
+            this.emit('lyra-input', { value: this.value });
+        };
+        this.onTextareaKeyDown = (e) => {
+            if (e.key !== 'Enter')
+                return;
+            // Shift+Enter always inserts a newline, regardless of submit-on-enter --
+            // leave the browser's own default action alone.
+            if (e.shiftKey)
+                return;
+            // submit-on-enter="false": Enter always inserts a newline too.
+            if (!this.submitOnEnter)
+                return;
+            // An IME composition step (e.g. confirming a Japanese/Chinese/Korean
+            // candidate) must never be treated as "the user pressed Enter to send" --
+            // keyCode 229 is a defense-in-depth fallback for browsers that report
+            // isComposing inconsistently on the compositionend-adjacent keydown.
+            if (e.isComposing || e.keyCode === 229)
+                return;
+            // Nothing meaningful to (re-)submit while already sending/streaming --
+            // fall through to the default newline insertion instead, so the
+            // textarea stays a normal place to keep composing the next message.
+            if (this.status !== 'idle')
+                return;
+            e.preventDefault();
+            this.submit();
+        };
+        this.onActionClick = () => {
+            if (this.effectiveDisabled)
+                return;
+            if (this.status === 'idle') {
+                this.submit();
+            }
+            else {
+                this.emit('lyra-stop');
+            }
+        };
+        this.onLeadingSlotChange = (e) => {
+            this.hasLeadingSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onChipsSlotChange = (e) => {
+            this.hasChipsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onTrailingSlotChange = (e) => {
+            this.hasTrailingSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasLeadingSlot = this.hasSlotted('leading');
+            this.hasChipsSlot = this.hasSlotted('chips');
+            this.hasTrailingSlot = this.hasSlotted('trailing');
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.resizeTextarea();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('value') || changed.has('minRows') || changed.has('maxRows')) {
+            this.resizeTextarea();
+        }
+    }
+    hasSlotted(name) {
+        return Array.from(this.children).some((el) => el.getAttribute('slot') === name);
+    }
+    /**
+     * Grows/shrinks the textarea between `min-rows` and `max-rows`, reading
+     * the *computed* line-height/padding/border back out of the element at
+     * call time instead of assuming a fixed px-per-row figure -- correct
+     * whatever font-size/line-height a consumer's own CSS ends up applying.
+     * Past `max-rows` the box stops growing and switches to internal
+     * scrolling (`overflow-y: auto`).
+     */
+    resizeTextarea() {
+        const ta = this.textareaEl;
+        if (!ta)
+            return;
+        const cs = getComputedStyle(ta);
+        const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2;
+        const paddingBlock = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+        const borderBlock = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+        const minRows = Math.max(1, this.minRows || 1);
+        const maxRows = Math.max(minRows, this.maxRows || minRows);
+        const minHeight = lineHeight * minRows + paddingBlock + borderBlock;
+        const maxHeight = lineHeight * maxRows + paddingBlock + borderBlock;
+        // Collapse first so a shrinking edit (e.g. deleting a wrapped line)
+        // reports its true scrollHeight rather than the previous, taller,
+        // explicitly-set height.
+        ta.style.height = 'auto';
+        // scrollHeight never includes border, so it's added back in to compare
+        // apples-to-apples against min/maxHeight, both of which are border-box
+        // figures (this component inherits box-sizing: border-box from
+        // LyraElement's tokens.styles.ts).
+        const contentHeight = ta.scrollHeight + borderBlock;
+        const next = Math.min(Math.max(contentHeight, minHeight), maxHeight);
+        ta.style.height = `${next}px`;
+        ta.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';
+    }
+    submit() {
+        this.emit('lyra-submit', { value: this.value });
+    }
+    renderActionButton() {
+        const busy = this.status !== 'idle';
+        return html `
+      <button
+        part="action-button"
+        type="button"
+        aria-label=${busy ? 'Stop generating' : 'Send message'}
+        ?disabled=${this.effectiveDisabled}
+        @click=${this.onActionClick}
+      >
+        ${busy ? stopIcon() : sendIcon()}
+      </button>
+    `;
+    }
+    render() {
+        return html `
+      <div part="base">
+        <div part="chips" ?hidden=${!this.hasChipsSlot}>
+          <slot name="chips" @slotchange=${this.onChipsSlotChange}></slot>
+        </div>
+        <div part="row">
+          <span part="leading" ?hidden=${!this.hasLeadingSlot}>
+            <slot name="leading" @slotchange=${this.onLeadingSlotChange}></slot>
+          </span>
+          <textarea
+            part="textarea"
+            aria-label=${this.placeholder || 'Message'}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            rows=${Math.max(1, this.minRows || 1)}
+            ?disabled=${this.effectiveDisabled}
+            @input=${this.onTextareaInput}
+            @keydown=${this.onTextareaKeyDown}
+          ></textarea>
+          <span part="trailing">
+            <slot name="trailing" @slotchange=${this.onTrailingSlotChange}></slot>
+            ${this.hasTrailingSlot ? nothing : this.renderActionButton()}
+          </span>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraChatComposer.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-rows' })
+], LyraChatComposer.prototype, "minRows", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-rows' })
+], LyraChatComposer.prototype, "maxRows", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraChatComposer.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'submit-on-enter' })
+], LyraChatComposer.prototype, "submitOnEnter", void 0);
+__decorate([
+    state()
+], LyraChatComposer.prototype, "hasLeadingSlot", void 0);
+__decorate([
+    state()
+], LyraChatComposer.prototype, "hasChipsSlot", void 0);
+__decorate([
+    state()
+], LyraChatComposer.prototype, "hasTrailingSlot", void 0);
+__decorate([
+    query('textarea')
+], LyraChatComposer.prototype, "textareaEl", void 0);
+defineElement('chat-composer', LyraChatComposer);