@aceshooting/lyra-ui 9.1.1 → 11.0.0

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

@@ -8,11 +8,6 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
     block-size: auto;
     container-type: inline-size;
     contain-intrinsic-inline-size: var(--lr-size-20rem);
-    /* Same token names/fallback chain as chart.ts's --lr-chart-* — a host
-       already theming lr-chart gets lr-lite-chart themed for free, and
-       vice versa. Unlike chart.ts (canvas-rendered, can't consume var()
-       directly), this component is plain SVG/DOM, so these are read natively
-       by the CSS below — no getComputedStyle()/JS-side resolution needed. */
     --_lr-chart-grid-color: var(--lr-color-border);
     --_lr-chart-tick-color: var(--lr-color-text-quiet);
     --_lr-chart-legend-color: var(--lr-color-text);
@@ -31,12 +26,6 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
       'table';
     gap: var(--lr-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;
     overflow-y: hidden;
@@ -70,14 +59,6 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
   [data-mark-hit-target] {
     cursor: pointer;
   }
-  /* A mark's resting colour is its own series colour, which varies per dataset and can be anything
-     a consumer passes -- including pure white or pure black. brightness() multiplies every channel,
-     so on those two it is a literal no-op, and on everything else it moves in whichever direction
-     the colour happens to sit rather than the direction the mark needs. Mixing toward
-     --lr-color-mix-partner (which follows the text colour) always moves, and always away from the
-     plot background. The base is currentColor: each mark carries its series colour in an inline
-     'color' alongside its fill attribute precisely so this mix has something to read -- CSS cannot
-     see the value of a fill presentation attribute. */
   :where([part='bar']):hover,
   :where([part='point']):hover,
   :where(.mark-hit-group):hover [part='bar'],
@@ -109,14 +90,6 @@ import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-co
     fill: none;
     stroke-width: var(--lr-border-width-medium);
   }
-  /* The marks are the data key, so their own pixels survive forced colors: the colors they carry
-     there already come from the forced-colors system-color remap of the --lr-color-chart-* ramp,
-     and the per-series texture/dash layered over that is what keeps repeated system colors apart.
-     Letting the platform force fill/stroke a second time would collapse every series back onto one
-     color and erase the encoding entirely. Axes, gridlines, labels, and the legend text stay
-     system-controlled. forced-color-adjust is inherited, so it must sit on the marks and the
-     pattern tiles themselves rather than on the svg, which would opt the chrome out too -- the same
-     placement rationale as swatch-picker.styles.ts's swatch-fill. */
   [part='bar'],
   [part='line'],
   [part='point'],

package/dist/components/conversation/agent-workspace/agent-workspace.class.d.ts

@@ -3,10 +3,13 @@ import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../../internal/lyra-element.js';
 import type { ChatComposerStatus } from '../chat-composer/chat-composer.class.js';
 import type { AgentRunMetric } from '../../agent-tools/agent-run/agent-run.class.js';
+export type { AgentRunMetric } from '../../agent-tools/agent-run/agent-run.class.js';
 import type { ContextInspectorSegment } from '../../agent-tools/context-inspector/context-inspector.class.js';
+export type { ContextInspectorSegment } from '../../agent-tools/context-inspector/context-inspector.class.js';
 import type { AgentRun, CancelEventDetail, ChatMessage, Citation, CitationSelectEventDetail, GroundingAssessment, RetrievalChunk, RetryEventDetail } from '../../../ai/types.js';
 import type { RetrievalResultsSelectDetail } from '../../retrieval/retrieval-results/retrieval-results.class.js';
 import type { ToolTimelineEntry, ToolTimelineApprovalDetail } from '../../agent-tools/tool-timeline/tool-timeline.class.js';
+export type { ToolTimelineEntry } from '../../agent-tools/tool-timeline/tool-timeline.class.js';
 export interface LyraAgentWorkspaceEventMap {
     'lr-input': CustomEvent<{
         value: string;
@@ -47,6 +50,19 @@ export interface LyraAgentWorkspaceEventMap {
  * Public collection properties take bounded, clone-owned readonly snapshots. Create a new
  * collection and reassign it after changes; mutating the assigned array does not update the view.
  *
+ * **The transcript is the only region that scrolls.** `[part='base']` is a three-row grid —
+ * header, conversation, composer — where only the middle row can shrink, so the composed
+ * `<lr-chat-viewport>` owns the scrolling and the chrome rows stay put. Header and composer
+ * content are therefore sized by their own content: give the workspace less block-size than they
+ * need and the conversation row collapses to zero first, after which the chrome is clipped with no
+ * scrollbar. That only happens with unusually large slotted chrome — a very tall `header-actions`
+ * toolbar, or a `composer` replacement much taller than the built-in one — and the fix belongs to
+ * whoever supplied it, through the public parts:
+ * `lr-agent-workspace::part(header) { max-block-size: 4rem; overflow: auto; }` (the same applies
+ * to `::part(composer)`). No component-owned custom property duplicates that, because a
+ * `::part()` rule from the consumer's tree already wins over the shadow stylesheet regardless of
+ * specificity and can set the cap and the overflow together.
+ *
  * @customElement lr-agent-workspace
  * @slot messages - Replaces the data-driven transcript message list.
  * @slot details - Replaces the built-in run/tool/retrieval/grounding/context details pane.
@@ -150,6 +166,10 @@ export declare class LyraAgentWorkspace extends LyraElement<LyraAgentWorkspaceEv
     private renderMessage;
     private renderMessages;
     private messageWindowOffsetFor;
+    /** Bound to every named slot whose assignment `render()` reads back through `hasSlotted()` --
+     *  `messages` (which decides how `safeUnreadStartIndex` is projected), `details`, and `composer`.
+     *  A slot assignment change alone schedules no Lit update, so without this the branch is only
+     *  ever evaluated at mount. */
     private onNamedSlotChange;
     private renderDetails;
     private get hasBuiltInDetails();

package/dist/components/conversation/agent-workspace/agent-workspace.class.js

@@ -59,7 +59,9 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               .unreadStartIndex=${this.safeUnreadStartIndex}
               aria-label=${this.localize("agentWorkspaceConversation")}
             >
-              <slot name="messages">${this.renderMessages()}</slot>
+              <slot name="messages" @slotchange=${this.onNamedSlotChange}
+                >${this.renderMessages()}</slot
+              >
             </lr-chat-viewport>
           </section>
           <aside

package/dist/components/conversation/agent-workspace/agent-workspace.styles.js

@@ -84,6 +84,9 @@ import{css}from"lit";const styles=css`
     max-inline-size: 100%;
     margin-block-end: var(--lr-space-m);
   }
+  slot[name='messages']::slotted([hidden]:not([hidden='until-found' i])) {
+    display: none;
+  }
   [part='messages-empty'] {
     margin-block: auto;
   }

package/dist/components/conversation/audio-visualizer/audio-visualizer.styles.js

@@ -4,13 +4,6 @@ import{css}from"lit";const styles=css`
     inline-size: 100%;
     block-size: var(--lr-audio-visualizer-height, var(--lr-size-3rem));
     --_lr-audio-visualizer-color-default: var(--lr-color-brand);
-    /* --lr-color-brand-quiet (the brand-95/brand-30 fill step) reads at ~1.1:1 against
-       --lr-color-surface in both themes -- nowhere near WCAG 1.4.11's 3:1 non-text minimum for the
-       idle bars, which paint no other distinguishing shape or border. --lr-color-brand-border-normal
-       (ramp step 60 in both light and dark) is the closest existing semantic-grid slot with enough
-       contrast against the surface in both themes (~4.0:1 light, ~4.3:1 dark; see
-       audio-visualizer.test.ts's "idle-state bar-fill contrast" suite) while staying visually
-       quieter than the active/loud --lr-color-brand fill. */
     --_lr-audio-visualizer-quiet-color-default: var(--lr-color-brand-border-normal);
     --_lr-audio-visualizer-ambient-duration-default: var(--lr-duration-ambient);
   }

package/dist/components/conversation/branch-picker/branch-picker.styles.js

@@ -25,14 +25,11 @@ import{css}from"lit";const styles=css`
     color: inherit;
     cursor: pointer;
   }
-  /* Keep state qualifiers low-specificity so sibling rules remain easy to compose. */
   :where([part='previous-button']):hover:where(:not(:disabled)),
   :where([part='next-button']):hover:where(:not(:disabled)) {
     background: var(--lr-color-brand-quiet);
     color: var(--lr-color-brand);
   }
-  /* Pressed: the same brand-quiet fill pushed a further step toward the text color, so the press
-     reads as a deliberate escalation of the hover tint rather than a second, unrelated color. */
   :where([part='previous-button']):active:where(:not(:disabled)),
   :where([part='next-button']):active:where(:not(:disabled)) {
     background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));

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

@@ -16,49 +16,20 @@ import{css}from"lit";const styles=css`
   [part='base']:focus-within {
     border-color: var(--lr-color-brand);
   }
-  /* Chrome-less escape, the library-wide frame="plain" (and lr-callout's [inline]): a composer is
-     routinely docked to the block-end edge of a surface that already draws its own
-     border/background (a chat panel, a dialog footer, a bordered toolbar), where this card chrome
-     doubles the frame. Only the box decoration goes -- the flex layout, gap, disabled treatment and
-     the send/stop button's own chrome stay. */
   :host([frame='plain']) [part='base'] {
     padding: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
   }
-  /* The border-color shift above is this component's only focus affordance, and there is no border
-     left to shift once plain has removed it -- focus would become invisible, which is an
-     accessibility regression rather than a cosmetic one (the textarea itself sets outline: none, so
-     nothing else marks the focused row). A chrome-less composer underlines its whole input row
-     instead, the same swap-the-affordance approach lr-stat's plain frame takes. Drawn as an
-     inset box-shadow rather than a border so it costs no layout: adding a real border back on focus
-     would shift the row by its width every time the textarea is focused. */
   :host([frame='plain']) [part='base']:focus-within {
     box-shadow: inset 0 calc(-1 * var(--lr-focus-ring-width)) 0 0 var(--lr-focus-ring-color);
   }
-  /* :host(:disabled), not :host([disabled]) -- this is a form-associated
-     custom element (FormAssociated mixin -> static formAssociated = true),
-     so the UA computes its disabled state (and therefore :disabled/:enabled
-     matching) the same way it does for a native form control: from its own
-     disabled content attribute *or* an ancestor <fieldset disabled>'s
-     cascade. Keying this off the attribute selector only ever matched the
-     first case -- a composer disabled purely via an ancestor fieldset had
-     effectiveDisabled correctly gating the textarea/button underneath, but
-     the card around them still rendered at full opacity with a normal
-     cursor. */
   :host(:disabled) [part='base'] {
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
 
-  /* :empty never matches [part='chips'] -- it always contains a literal
-     <slot> child regardless of assigned content -- so real emptiness is
-     tracked in JS (hasChipsSlot) and reflected via [hidden] instead (same
-     fix as lr-date-input's hint/error parts). Author-level display rules
-     always beat the UA stylesheet's [hidden] rule regardless of source
-     order/specificity (different cascade origins), so the override below is
-     required, not redundant. */
   [part='chips'] {
     display: flex;
     flex-wrap: wrap;
@@ -78,9 +49,6 @@ import{css}from"lit";const styles=css`
     display: flex;
     flex: 0 0 auto;
     align-items: center;
-    /* Matches the textarea's own first-line box so a start icon button
-       sits level with placeholder/typed text at min-rows, not glued to the
-       row's cross-axis edge. */
     padding-block-end: var(--lr-space-xs);
   }
   [part='start'][hidden] {
@@ -97,10 +65,6 @@ import{css}from"lit";const styles=css`
     background: transparent;
     color: inherit;
     font: inherit;
-    /* A concrete, unitless line-height so the runtime auto-resize logic
-       (chat-composer.ts's resizeTextarea()) can read a real pixel value
-       back out of getComputedStyle() -- the UA default of "normal" has no
-       single resolved px figure to measure rows against. */
     line-height: var(--lr-line-height-normal);
     padding-block: var(--lr-space-xs);
     overflow-y: hidden;
@@ -136,12 +100,6 @@ import{css}from"lit";const styles=css`
     cursor: pointer;
     transition: background-color var(--lr-transition-fast);
   }
-  /* Hover/press are a background mix, never filter: brightness(). brightness() multiplies every
-     channel, so it lightens a dark fill and darkens a light one only by accident, does nothing at
-     all to a pure white or pure black brand color, and -- because filter applies to the whole
-     subtree -- dims the glyph inside the button along with its fill. Mixing the resting fill toward
-     --lr-color-mix-partner (which tracks the text color) always moves, always in the direction the
-     surface needs, and leaves the icon alone. */
   :where([part='action-button']):hover:where(:not(:disabled)) {
     background: color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover));
   }
@@ -163,15 +121,6 @@ import{css}from"lit";const styles=css`
   :host(:dir(rtl)) [part='send-glyph'] {
     transform: scaleX(-1);
   }
-  /* Stop affordance while generating -- a neutral/quiet treatment rather
-     than the resting brand fill, so it doesn't read as "send is still
-     available" while a response is in flight. Reads a dedicated
-     --lr-chat-composer-busy-bg cssprop rather than the shared
-     --lr-color-text-quiet token directly: that same shared token also drives
-     [part='textarea']::placeholder's color above, so a consumer overriding it
-     to recolor just this busy-state fill would silently recolor the
-     placeholder too. Same decoupling lr-chat-message's user-bubble background
-     already does against its own shared-token collision. */
   :host([status='sending']) [part='action-button'],
   :host([status='streaming']) [part='action-button'] {
     background: var(--lr-chat-composer-busy-bg, var(--lr-color-text-quiet));

package/dist/components/conversation/chat-message/chat-message.styles.js

@@ -17,7 +17,6 @@ import{css}from"lit";const styles=css`
     overflow-wrap: anywhere;
   }
 
-  /* -- author ------------------------------------------------------------- */
   :host([message-role='user']) [part='bubble'] {
     margin-inline-start: auto;
     background: var(--lr-chat-message-user-bubble-bg, var(--lr-color-brand-quiet));
@@ -34,10 +33,6 @@ import{css}from"lit";const styles=css`
     border-style: dashed;
   }
 
-  /* -- status ---------------------------------------------------------------
-     'failed' gets an unmistakable treatment that does not rely on color
-     alone (see [part='status-text']); 'streaming' is a quieter accent plus
-     the pulsing dot below. */
   :host([status='failed']) [part='bubble'] {
     border-color: var(--lr-chat-message-failed-border-color, var(--lr-color-danger));
     background: var(--lr-chat-message-failed-bg, var(--lr-color-danger-quiet));
@@ -103,18 +98,9 @@ import{css}from"lit";const styles=css`
     display: inline-flex;
     transition: transform var(--lr-transition-fast);
   }
-  /* Chevron points at the content: rotated (pointing down) while expanded,
-     resting (pointing right) while collapsed -- same rotation direction as
-     lr-code-block's/lr-thinking-panel's own toggles. */
   :host(:not([collapsed])) [part='collapse-button'] .chevron {
     transform: rotate(90deg);
   }
-  /* RTL: the resting (collapsed) chevron mirrors to point left, the
-     conventional mirrored disclosure-triangle direction for RTL. Scoped to
-     [collapsed] specifically -- like lr-code-block's identical rule --
-     so it never competes with the expanded-state rule above, which needs
-     no mirroring: rotating this left-right-asymmetric glyph 90deg already
-     produces a left-right-symmetric down chevron. */
   :host([collapsed]:dir(rtl)) [part='collapse-button'] .chevron {
     transform: scaleX(-1);
   }
@@ -125,16 +111,6 @@ import{css}from"lit";const styles=css`
     gap: var(--lr-space-xs);
   }
 
-  /* Fully transparent to layout -- the same display:contents idiom
-     lr-attachment-trigger's :host and lr-combobox's [part='tags'] already
-     use for identical reasons. The slot itself contributes no box, so
-     whatever the host slots in here (expected to be a block-level
-     role="alert" element) becomes a direct flex item of [part='bubble'],
-     inheriting its gap, exactly as if it had been authored as a sibling of
-     [part='body']/[part='footer'] -- no ::part(failure) override needed to
-     get there. When empty, this produces zero boxes and zero footprint,
-     which is what keeps the failed state byte-identical to today's
-     rendering whenever the failure slot goes unused. */
   [part='failure'] {
     display: contents;
   }
@@ -162,23 +138,19 @@ import{css}from"lit";const styles=css`
   :host([actions-position='outside']) [part='actions'] {
     margin-block-start: var(--lr-space-2xs);
   }
+  :host([actions-position='outside'][message-role='user']) [part='actions'] {
+    justify-content: flex-end;
+  }
+  :host([actions-position='outside'][message-role='assistant']) [part='actions'],
+  :host([actions-position='outside'][message-role='system']) [part='actions'] {
+    justify-content: flex-start;
+  }
   [part='timestamp'] {
     white-space: nowrap;
   }
-  /* [part='timestamp']/[part='actions'] inherit the footer's own quiet
-     text color by default; against the brand-quiet bubble background a
-     user-role message gets, that muted color's contrast ratio drops below
-     4.5:1 (verified via axe's color-contrast rule — same failure mode as
-     the failed-state rule below), so the footer falls back to the bubble's
-     own full text color there instead. Declared before the failed-state
-     rule so an equal-specificity failed user message still gets the danger
-     footer that matches its danger-quiet background. */
   :host([message-role='user']) [part='footer'] {
     color: var(--lr-chat-message-user-footer-color, var(--lr-color-text));
   }
-  /* Same contrast reasoning against the danger-quiet bubble background a
-     'failed' message gets underneath it, so the whole footer switches to
-     the same --lr-color-danger already used for [part='status-text']. */
   :host([status='failed']) [part='footer'] {
     color: var(--lr-chat-message-failed-footer-color, var(--lr-color-danger));
   }

package/dist/components/conversation/chat-viewport/chat-viewport.class.js

@@ -1,4 +1,4 @@
-var __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--)(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}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteCount,finiteRange}from"../../../internal/numbers.js";import{LyraVirtualList}from"../../layout/virtual-list/virtual-list.class.js";import{styles}from"./chat-viewport.styles.js";import{getNumberFormat,getPluralRules}from"../../../internal/intl-cache.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{LYRA_DEFAULT_chatViewportLabel,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_jumpToLatest,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_newMessageCount,LYRA_DEFAULT_newMessages,LYRA_DEFAULT_newMessagesCount,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";class LyraChatViewport extends LyraElement{constructor(){super(...arguments),this.follow=!0,this.live="off",this.bottomThreshold=24,this.unreadStartIndex=null,this.label="",this.accessibleLabel=null,this.unreadDividerTop=null,this.pendingUserIntent=!1,this.pendingUserIntentExpiryFrame=null,this.scrollbarDragActive=!1,this.isMounting=!0,this.growthFrame=null,this.armedMode=null,this.armGeneration=0,this.followFocusRepair=null,this.knownProjectedNodes=new WeakSet,this.markUserIntent=()=>{this.pendingUserIntent=!0,this.cancelPendingUserIntentExpiry();const owner=this.ownerDocument.defaultView;if(!owner){this.pendingUserIntent=!1;return}const firstFrame={owner,handle:0};firstFrame.handle=owner.requestAnimationFrame(()=>{if(this.pendingUserIntentExpiryFrame!==firstFrame)return;if(!this.isConnected||this.ownerDocument.defaultView!==owner){this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1;return}const secondFrame={owner,handle:0};secondFrame.handle=owner.requestAnimationFrame(()=>{this.pendingUserIntentExpiryFrame===secondFrame&&(this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1)}),this.pendingUserIntentExpiryFrame=secondFrame}),this.pendingUserIntentExpiryFrame=firstFrame},this.onPointerDown=event=>{const scroll=this.scrollEl;if(!scroll||event.button!==0||event.target!==scroll)return;const computed=getComputedStyle(scroll),borderLeft=Number.parseFloat(computed.borderLeftWidth)||0,borderRight=Number.parseFloat(computed.borderRightWidth)||0,gutter=scroll.offsetWidth-scroll.clientWidth-borderLeft-borderRight;if(gutter<=0)return;const rect=scroll.getBoundingClientRect();if(!(computed.direction==="rtl"?event.clientX<=rect.left+borderLeft+gutter:event.clientX>=rect.right-borderRight-gutter))return;this.scrollbarDragActive=!0;const owner=this.ownerDocument.defaultView;!owner||this.scrollbarDragWindow===owner||(this.releaseScrollbarDragListeners(),this.scrollbarDragWindow=owner,owner.addEventListener("pointerup",this.onPointerUp),owner.addEventListener("pointercancel",this.onPointerUp),owner.addEventListener("lostpointercapture",this.onPointerUp))},this.onPointerUp=()=>{this.scrollbarDragActive=!1,this.releaseScrollbarDragListeners()},this.onKeyDown=e=>{(e.key==="PageUp"||e.key==="ArrowUp"||e.key==="Home")&&this.markUserIntent()},this.onScroll=()=>{const el=this.scrollEl;if(!el)return;if(el.scrollHeight-el.scrollTop-el.clientHeight<=this.effectiveBottomThreshold){this.clearUserIntent(),this.follow||(this.follow=!0);return}(this.consumeUserIntent()||this.scrollbarDragActive)&&this.follow&&(this.follow=!1)},this.onVirtualRangeChanged=e=>{const list=this.virtualListEl;if(!list||e.composedPath()[0]!==list)return;const detail=e.detail;if(!detail||!Number.isFinite(detail.start)||!Number.isFinite(detail.end)||detail.start<0||detail.end<detail.start)return;if(list.items.length>0&&detail.end>=list.items.length-1){this.clearUserIntent(),this.follow||(this.follow=!0);return}if(this.consumeUserIntent()||this.scrollbarDragActive){this.follow&&(this.follow=!1);return}this.follow&&this.performScrollToEnd("auto")},this.onSlotChange=()=>{this.announceNewProjectedNodes();const wasVirtual=this.armedMode==="virtual";this.armObservers(),this.armedMode==="virtual"!==wasVirtual&&this.requestUpdate()},this.onContentMutations=records=>{this.scheduleGrowthTick();const sink=this.announcementSink;if(sink)for(const record of records)for(const node of record.addedNodes){if(this.knownProjectedNodes.has(node)||node instanceof Element&&node.hasAttribute("data-lr-chat-viewport-unread-boundary"))continue;this.knownProjectedNodes.add(node);const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();text&&sink.announce(text)}}}static{this.defaultStrings={...super.defaultStrings,chatViewportLabel:LYRA_DEFAULT_chatViewportLabel,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,jumpToLatest:LYRA_DEFAULT_jumpToLatest,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,newMessageCount:LYRA_DEFAULT_newMessageCount,newMessages:LYRA_DEFAULT_newMessages,newMessagesCount:LYRA_DEFAULT_newMessagesCount,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get messageElements(){let elements=this.contentSlot?.assignedElements({flatten:!0})??Array.from(this.children);for(let depth=0;depth<4&&elements.some(element=>element.localName==="slot");depth++)elements=elements.flatMap(element=>element.localName==="slot"?element.assignedElements({flatten:!0}):[element]);return elements.filter(element=>!element.hasAttribute("data-lr-chat-viewport-unread-boundary"))}get virtualListEl(){const children=this.messageElements;return children.length===1&&children[0]instanceof LyraVirtualList?children[0]:null}get effectiveBottomThreshold(){return finiteRange(this.bottomThreshold,24,0)}get effectiveUnreadStartIndex(){return this.unreadStartIndex==null?null:finiteCount(this.unreadStartIndex)}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasUpdated&&this.armObservers()}disconnectedCallback(){super.disconnectedCallback(),this.releaseAnnouncementSink(),this.teardownObservers(),this.releaseScrollbarDragListeners(),this.clearUserIntent(),this.scrollbarDragActive=!1,this.followFocusRepair=null,this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0}willUpdate(changed){if(super.willUpdate(changed),!this.hasUpdated||!changed.has("follow")||!this.follow||changed.get("follow")!==!1)return;const pill=this.renderRoot.querySelector('[part="jump-pill"]');this.followFocusRepair=pill?captureComposedFocusRepair(pill,this.transcriptFocusOwner()):null}firstUpdated(changed){super.firstUpdated(changed),this.armObservers()}updated(changed){super.updated(changed),changed.has("live")&&this.syncAnnouncementSink();const wasMounting=this.isMounting;if(this.isMounting=!1,changed.has("follow")){if(this.follow){const behavior=wasMounting?"auto":this.pendingScrollBehavior??(prefersReducedMotion(this.ownerDocument.defaultView)?"auto":"smooth");this.pendingScrollBehavior=void 0,this.performScrollToEnd(behavior)}wasMounting||this.emit("lr-follow-change",{following:this.follow})}changed.has("unreadStartIndex")&&!wasMounting&&this.updateUnreadDividerPosition();const focusRepair=this.followFocusRepair;this.followFocusRepair=null,focusRepair&&applyComposedFocusRepair(focusRepair)}transcriptFocusOwner(){const list=this.virtualListEl;return list?collectComposedFocusTargets(list,{includeRoot:!1,mode:"programmatic"}).elements[0]??null:this.scrollEl??null}scrollToBottom(options){const behavior=prefersReducedMotion(this.ownerDocument.defaultView)?"auto":options?.behavior??"smooth";this.follow?this.performScrollToEnd(behavior):(this.pendingScrollBehavior=behavior,this.follow=!0)}scrollToUnread(options){const unreadStartIndex=this.effectiveUnreadStartIndex;if(unreadStartIndex==null)return!1;const behavior=prefersReducedMotion(this.ownerDocument.defaultView)?"auto":options?.behavior??"smooth",list=this.virtualListEl;if(list)return unreadStartIndex>=list.items.length?!1:(list.scrollToIndex(unreadStartIndex,{align:"start",behavior}),!0);const scrollEl=this.scrollEl;return!scrollEl||this.unreadDividerTop==null?!1:(scrollEl.scrollTo({top:this.unreadDividerTop,behavior}),!0)}performScrollToEnd(behavior){const list=this.virtualListEl;if(list){list.items.length>0&&list.scrollToIndex(list.items.length-1,{align:"end",behavior});return}const el=this.scrollEl;el&&el.scrollTo({top:el.scrollHeight,behavior})}get totalCount(){const list=this.virtualListEl;return list?list.items.length:this.messageElements.length}get unreadCount(){const unreadStartIndex=this.effectiveUnreadStartIndex;return unreadStartIndex==null?0:Math.max(0,this.totalCount-unreadStartIndex)}pillLabel(){const count=this.unreadCount;if(count<=0)return this.localize("jumpToLatest");const key=getPluralRules(this.effectiveLocale).select(count)==="one"?"newMessageCount":"newMessagesCount";return this.localize(key,void 0,{count:getNumberFormat(this.effectiveLocale).format(count)})}updateUnreadDividerPosition(){const unreadStartIndex=this.effectiveUnreadStartIndex;if(this.virtualListEl||unreadStartIndex==null){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}const content=this.contentEl,target=this.messageElements[unreadStartIndex];if(!target||!content){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}this.syncSemanticUnreadBoundary(target),this.unreadDividerTop=target.getBoundingClientRect().top-content.getBoundingClientRect().top}syncSemanticUnreadBoundary(target){if(!target||this.virtualListEl){this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0;return}const parent=target.parentNode;if(!parent)return;const boundary=this.unreadBoundaryEl??this.ownerDocument.createElement("div");boundary.setAttribute("data-lr-chat-viewport-unread-boundary",""),boundary.setAttribute("role","separator"),boundary.setAttribute("aria-label",this.localize("newMessages"));const targetSlot=target.getAttribute("slot");targetSlot===null?boundary.removeAttribute("slot"):boundary.setAttribute("slot",targetSlot),(boundary.parentNode!==parent||boundary.nextSibling!==target)&&parent.insertBefore(boundary,target),this.unreadBoundaryEl=boundary,this.knownProjectedNodes.add(boundary)}cancelPendingUserIntentExpiry(){const frame=this.pendingUserIntentExpiryFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.pendingUserIntentExpiryFrame=null}clearUserIntent(){this.pendingUserIntent=!1,this.cancelPendingUserIntentExpiry()}consumeUserIntent(){const wasPending=this.pendingUserIntent;return this.clearUserIntent(),wasPending}releaseScrollbarDragListeners(){const owner=this.scrollbarDragWindow;owner&&(owner.removeEventListener("pointerup",this.onPointerUp),owner.removeEventListener("pointercancel",this.onPointerUp),owner.removeEventListener("lostpointercapture",this.onPointerUp),this.scrollbarDragWindow=void 0)}scheduleGrowthTick(){if(this.growthFrame)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const frame={owner,handle:0};frame.handle=owner.requestAnimationFrame(()=>{this.growthFrame===frame&&(this.growthFrame=null,!(!this.isConnected||this.ownerDocument.defaultView!==owner)&&(this.updateUnreadDividerPosition(),this.follow&&this.performScrollToEnd("auto")))}),this.growthFrame=frame}releaseAnnouncementSink(){this.announcementSink?.release(),this.announcementSink=void 0}syncAnnouncementSink(){const politeness=this.live==="polite"||this.live==="assertive"?this.live:void 0;if(!this.isConnected||politeness===void 0){this.releaseAnnouncementSink();return}this.announcementSink?.politeness===politeness&&this.announcementSink.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSink(),this.announcementSink=acquireAnnouncementSink(politeness,{document:this.ownerDocument,source:this}))}announcementTextFor(node){const primary=composedAccessibilityText(node);if(!(node instanceof Element)||!node.shadowRoot)return primary;const content=composedAccessibilityText(node.childNodes),normalizedPrimary=primary.replace(/\s+/g," ").trim(),normalizedContent=content.replace(/\s+/g," ").trim();return!normalizedContent||normalizedPrimary.includes(normalizedContent)?primary:primary?`${primary} ${content}`:content}announceNewProjectedNodes(){const sink=this.announcementSink;for(const node of this.messageElements){if(this.knownProjectedNodes.has(node)||(this.knownProjectedNodes.add(node),!sink||!this.hasUpdated))continue;const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();text&&sink.announce(text)}}armObservers(){const owner=this.ownerDocument.defaultView,list=this.virtualListEl,mode=list?"virtual":"slotted";for(const node of this.messageElements)this.knownProjectedNodes.add(node);if(this.observerWindow===owner&&this.armedMode===mode&&(mode==="slotted"||this.listenedVirtualList===list))return;if(this.teardownObservers(),this.observerWindow=owner??void 0,this.armedMode=mode,list)this.listenedVirtualList=list,list.addEventListener("lr-visible-range-changed",this.onVirtualRangeChanged);else{const content=this.contentEl;if(content){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.scheduleGrowthTick()}}),this.contentResizeObserver=observer,this.contentResizeObserver.observe(content)}}const MutationObserverCtor=owner?.MutationObserver;if(MutationObserverCtor){let observer;observer=new MutationObserverCtor(records=>{!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentMutationObserver!==observer||this.onContentMutations(records)}),this.contentMutationObserver=observer,this.contentMutationObserver.observe(this,{childList:!0})}}const scrollEl=this.scrollEl;if(scrollEl){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.scrollResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.follow&&this.performScrollToEnd("auto")}}),this.scrollResizeObserver=observer,this.scrollResizeObserver.observe(scrollEl)}}const generation=++this.armGeneration;queueMicrotask(()=>{!this.isConnected||generation!==this.armGeneration||this.updateUnreadDividerPosition()})}teardownObservers(){this.scrollResizeObserver?.disconnect(),this.scrollResizeObserver=void 0,this.contentResizeObserver?.disconnect(),this.contentResizeObserver=void 0,this.contentMutationObserver?.disconnect(),this.contentMutationObserver=void 0,this.listenedVirtualList?.removeEventListener("lr-visible-range-changed",this.onVirtualRangeChanged),this.listenedVirtualList=void 0,this.observerWindow=void 0,this.armedMode=null,this.armGeneration++;const frame=this.growthFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.growthFrame=null}render(){const label=this.accessibleLabel??(this.label||this.localize("chatViewportLabel")),virtual=this.virtualListEl!==null;return html`
+var __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--)(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}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteCount,finiteRange}from"../../../internal/numbers.js";import{LyraVirtualList}from"../../layout/virtual-list/virtual-list.class.js";import{styles}from"./chat-viewport.styles.js";import{getNumberFormat,getPluralRules}from"../../../internal/intl-cache.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{LYRA_DEFAULT_chatViewportLabel,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_jumpToLatest,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_newMessageCount,LYRA_DEFAULT_newMessages,LYRA_DEFAULT_newMessagesCount,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";class LyraChatViewport extends LyraElement{constructor(){super(...arguments),this.follow=!0,this.live="off",this.bottomThreshold=24,this.unreadStartIndex=null,this.label="",this.accessibleLabel=null,this.unreadDividerTop=null,this.pendingUserIntent=!1,this.pendingUserIntentExpiryFrame=null,this.scrollbarDragActive=!1,this.isMounting=!0,this.growthFrame=null,this.armedMode=null,this.armGeneration=0,this.followFocusRepair=null,this.knownProjectedNodes=new WeakSet,this.markUserIntent=()=>{this.pendingUserIntent=!0,this.cancelPendingUserIntentExpiry();const owner=this.ownerDocument.defaultView;if(!owner){this.pendingUserIntent=!1;return}const firstFrame={owner,handle:0};firstFrame.handle=owner.requestAnimationFrame(()=>{if(this.pendingUserIntentExpiryFrame!==firstFrame)return;if(!this.isConnected||this.ownerDocument.defaultView!==owner){this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1;return}const secondFrame={owner,handle:0};secondFrame.handle=owner.requestAnimationFrame(()=>{this.pendingUserIntentExpiryFrame===secondFrame&&(this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1)}),this.pendingUserIntentExpiryFrame=secondFrame}),this.pendingUserIntentExpiryFrame=firstFrame},this.onPointerDown=event=>{const scroll=this.scrollEl;if(!scroll||event.button!==0||event.target!==scroll)return;const computed=getComputedStyle(scroll),borderLeft=Number.parseFloat(computed.borderLeftWidth)||0,borderRight=Number.parseFloat(computed.borderRightWidth)||0,gutter=scroll.offsetWidth-scroll.clientWidth-borderLeft-borderRight;if(gutter<=0)return;const rect=scroll.getBoundingClientRect();if(!(computed.direction==="rtl"?event.clientX<=rect.left+borderLeft+gutter:event.clientX>=rect.right-borderRight-gutter))return;this.scrollbarDragActive=!0;const owner=this.ownerDocument.defaultView;!owner||this.scrollbarDragWindow===owner||(this.releaseScrollbarDragListeners(),this.scrollbarDragWindow=owner,owner.addEventListener("pointerup",this.onPointerUp),owner.addEventListener("pointercancel",this.onPointerUp),owner.addEventListener("lostpointercapture",this.onPointerUp))},this.onPointerUp=()=>{this.scrollbarDragActive=!1,this.releaseScrollbarDragListeners()},this.onKeyDown=e=>{(e.key==="PageUp"||e.key==="ArrowUp"||e.key==="Home")&&this.markUserIntent()},this.onScroll=()=>{const el=this.scrollEl;if(!el)return;if(el.scrollHeight-el.scrollTop-el.clientHeight<=this.effectiveBottomThreshold){this.clearUserIntent(),this.follow||(this.follow=!0);return}(this.consumeUserIntent()||this.scrollbarDragActive)&&this.follow&&(this.follow=!1)},this.onVirtualRangeChanged=e=>{const list=this.virtualListEl;if(!list||e.composedPath()[0]!==list)return;const detail=e.detail;if(!detail||!Number.isFinite(detail.start)||!Number.isFinite(detail.end)||detail.start<0||detail.end<detail.start)return;if(list.items.length>0&&detail.end>=list.items.length-1){this.clearUserIntent(),this.follow||(this.follow=!0);return}if(this.consumeUserIntent()||this.scrollbarDragActive){this.follow&&(this.follow=!1);return}this.follow&&this.performScrollToEnd("auto")},this.onSlotChange=()=>{this.announceNewProjectedNodes();const wasVirtual=this.armedMode==="virtual";this.armObservers(),this.armedMode==="virtual"!==wasVirtual&&this.requestUpdate()},this.onContentMutations=records=>{this.scheduleGrowthTick();const sink=this.announcementSink;if(sink)for(const record of records)for(const node of record.addedNodes){if(this.knownProjectedNodes.has(node)||node instanceof Element&&node.hasAttribute("data-lr-chat-viewport-unread-boundary"))continue;this.knownProjectedNodes.add(node);const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();text&&sink.announce(text)}}}static{this.defaultStrings={...super.defaultStrings,chatViewportLabel:LYRA_DEFAULT_chatViewportLabel,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,jumpToLatest:LYRA_DEFAULT_jumpToLatest,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,newMessageCount:LYRA_DEFAULT_newMessageCount,newMessages:LYRA_DEFAULT_newMessages,newMessagesCount:LYRA_DEFAULT_newMessagesCount,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get messageElements(){let elements=this.contentSlot?.assignedElements({flatten:!0})??Array.from(this.children);for(let depth=0;depth<4&&elements.some(element=>element.localName==="slot");depth++)elements=elements.flatMap(element=>element.localName==="slot"?element.assignedElements({flatten:!0}):[element]);return elements.filter(element=>!element.hasAttribute("data-lr-chat-viewport-unread-boundary"))}get virtualListEl(){const children=this.messageElements;return children.length===1&&children[0]instanceof LyraVirtualList?children[0]:null}get effectiveBottomThreshold(){return finiteRange(this.bottomThreshold,24,0)}get effectiveUnreadStartIndex(){return this.unreadStartIndex==null?null:finiteCount(this.unreadStartIndex)}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasUpdated&&this.armObservers()}disconnectedCallback(){super.disconnectedCallback(),this.releaseAnnouncementSink(),this.teardownObservers(),this.releaseScrollbarDragListeners(),this.clearUserIntent(),this.scrollbarDragActive=!1,this.followFocusRepair=null,this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated&&changed.has("follow")&&this.follow&&changed.get("follow")===!1){const pill=this.renderRoot.querySelector('[part="jump-pill"]');this.followFocusRepair=pill?captureComposedFocusRepair(pill,this.transcriptFocusOwner()):null}this.hasUpdated&&changed.has("unreadStartIndex")&&this.updateUnreadDividerPosition()}firstUpdated(changed){super.firstUpdated(changed),this.armObservers()}updated(changed){super.updated(changed),changed.has("live")&&this.syncAnnouncementSink();const wasMounting=this.isMounting;if(this.isMounting=!1,changed.has("follow")){if(this.follow){const behavior=wasMounting?"auto":this.pendingScrollBehavior??(prefersReducedMotion(this.ownerDocument.defaultView)?"auto":"smooth");this.pendingScrollBehavior=void 0,this.performScrollToEnd(behavior)}wasMounting||this.emit("lr-follow-change",{following:this.follow})}const focusRepair=this.followFocusRepair;this.followFocusRepair=null,focusRepair&&applyComposedFocusRepair(focusRepair)}transcriptFocusOwner(){const list=this.virtualListEl;return list?collectComposedFocusTargets(list,{includeRoot:!1,mode:"programmatic"}).elements[0]??null:this.scrollEl??null}scrollToBottom(options){const behavior=prefersReducedMotion(this.ownerDocument.defaultView)?"auto":options?.behavior??"smooth";this.follow?this.performScrollToEnd(behavior):(this.pendingScrollBehavior=behavior,this.follow=!0)}scrollToUnread(options){const unreadStartIndex=this.effectiveUnreadStartIndex;if(unreadStartIndex==null)return!1;const behavior=prefersReducedMotion(this.ownerDocument.defaultView)?"auto":options?.behavior??"smooth",list=this.virtualListEl;if(list)return unreadStartIndex>=list.items.length?!1:(list.scrollToIndex(unreadStartIndex,{align:"start",behavior}),!0);const scrollEl=this.scrollEl;return!scrollEl||this.unreadDividerTop==null?!1:(scrollEl.scrollTo({top:this.unreadDividerTop,behavior}),!0)}performScrollToEnd(behavior){const list=this.virtualListEl;if(list){list.items.length>0&&list.scrollToIndex(list.items.length-1,{align:"end",behavior});return}const el=this.scrollEl;el&&el.scrollTo({top:el.scrollHeight,behavior})}get totalCount(){const list=this.virtualListEl;return list?list.items.length:this.messageElements.length}get unreadCount(){const unreadStartIndex=this.effectiveUnreadStartIndex;return unreadStartIndex==null?0:Math.max(0,this.totalCount-unreadStartIndex)}pillLabel(){const count=this.unreadCount;if(count<=0)return this.localize("jumpToLatest");const key=getPluralRules(this.effectiveLocale).select(count)==="one"?"newMessageCount":"newMessagesCount";return this.localize(key,void 0,{count:getNumberFormat(this.effectiveLocale).format(count)})}updateUnreadDividerPosition(){const unreadStartIndex=this.effectiveUnreadStartIndex;if(this.virtualListEl||unreadStartIndex==null){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}const content=this.contentEl,target=this.messageElements[unreadStartIndex];if(!target||!content){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}this.syncSemanticUnreadBoundary(target),this.unreadDividerTop=target.getBoundingClientRect().top-content.getBoundingClientRect().top}syncSemanticUnreadBoundary(target){if(!target||this.virtualListEl){this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0;return}const parent=target.parentNode;if(!parent)return;const boundary=this.unreadBoundaryEl??this.ownerDocument.createElement("div");boundary.setAttribute("data-lr-chat-viewport-unread-boundary",""),boundary.setAttribute("role","separator"),boundary.setAttribute("aria-label",this.localize("newMessages"));const targetSlot=target.getAttribute("slot");targetSlot===null?boundary.removeAttribute("slot"):boundary.setAttribute("slot",targetSlot),(boundary.parentNode!==parent||boundary.nextSibling!==target)&&parent.insertBefore(boundary,target),this.unreadBoundaryEl=boundary,this.knownProjectedNodes.add(boundary)}cancelPendingUserIntentExpiry(){const frame=this.pendingUserIntentExpiryFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.pendingUserIntentExpiryFrame=null}clearUserIntent(){this.pendingUserIntent=!1,this.cancelPendingUserIntentExpiry()}consumeUserIntent(){const wasPending=this.pendingUserIntent;return this.clearUserIntent(),wasPending}releaseScrollbarDragListeners(){const owner=this.scrollbarDragWindow;owner&&(owner.removeEventListener("pointerup",this.onPointerUp),owner.removeEventListener("pointercancel",this.onPointerUp),owner.removeEventListener("lostpointercapture",this.onPointerUp),this.scrollbarDragWindow=void 0)}scheduleGrowthTick(){if(this.growthFrame)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const frame={owner,handle:0};frame.handle=owner.requestAnimationFrame(()=>{this.growthFrame===frame&&(this.growthFrame=null,!(!this.isConnected||this.ownerDocument.defaultView!==owner)&&(this.updateUnreadDividerPosition(),this.follow&&this.performScrollToEnd("auto")))}),this.growthFrame=frame}releaseAnnouncementSink(){this.announcementSink?.release(),this.announcementSink=void 0}syncAnnouncementSink(){const politeness=this.live==="polite"||this.live==="assertive"?this.live:void 0;if(!this.isConnected||politeness===void 0){this.releaseAnnouncementSink();return}this.announcementSink?.politeness===politeness&&this.announcementSink.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSink(),this.announcementSink=acquireAnnouncementSink(politeness,{document:this.ownerDocument,source:this}))}announcementTextFor(node){const primary=composedAccessibilityText(node);if(!(node instanceof Element)||!node.shadowRoot)return primary;const content=composedAccessibilityText(node.childNodes),normalizedPrimary=primary.replace(/\s+/g," ").trim(),normalizedContent=content.replace(/\s+/g," ").trim();return!normalizedContent||normalizedPrimary.includes(normalizedContent)?primary:primary?`${primary} ${content}`:content}announceNewProjectedNodes(){const sink=this.announcementSink;for(const node of this.messageElements){if(this.knownProjectedNodes.has(node)||(this.knownProjectedNodes.add(node),!sink||!this.hasUpdated))continue;const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();text&&sink.announce(text)}}armObservers(){const owner=this.ownerDocument.defaultView,list=this.virtualListEl,mode=list?"virtual":"slotted";for(const node of this.messageElements)this.knownProjectedNodes.add(node);if(this.observerWindow===owner&&this.armedMode===mode&&(mode==="slotted"||this.listenedVirtualList===list))return;if(this.teardownObservers(),this.observerWindow=owner??void 0,this.armedMode=mode,list)this.listenedVirtualList=list,list.addEventListener("lr-visible-range-change",this.onVirtualRangeChanged);else{const content=this.contentEl;if(content){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.scheduleGrowthTick()}}),this.contentResizeObserver=observer,this.contentResizeObserver.observe(content)}}const MutationObserverCtor=owner?.MutationObserver;if(MutationObserverCtor){let observer;observer=new MutationObserverCtor(records=>{!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentMutationObserver!==observer||this.onContentMutations(records)}),this.contentMutationObserver=observer,this.contentMutationObserver.observe(this,{childList:!0})}}const scrollEl=this.scrollEl;if(scrollEl){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.scrollResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.follow&&this.performScrollToEnd("auto")}}),this.scrollResizeObserver=observer,this.scrollResizeObserver.observe(scrollEl)}}const generation=++this.armGeneration;queueMicrotask(()=>{!this.isConnected||generation!==this.armGeneration||this.updateUnreadDividerPosition()})}teardownObservers(){this.scrollResizeObserver?.disconnect(),this.scrollResizeObserver=void 0,this.contentResizeObserver?.disconnect(),this.contentResizeObserver=void 0,this.contentMutationObserver?.disconnect(),this.contentMutationObserver=void 0,this.listenedVirtualList?.removeEventListener("lr-visible-range-change",this.onVirtualRangeChanged),this.listenedVirtualList=void 0,this.observerWindow=void 0,this.armedMode=null,this.armGeneration++;const frame=this.growthFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.growthFrame=null}render(){const label=this.accessibleLabel??(this.label||this.localize("chatViewportLabel")),virtual=this.virtualListEl!==null;return html`
       <div part="base" ?data-virtual=${virtual}>
         <div
           part="scroll"

package/dist/components/conversation/chat-viewport/chat-viewport.styles.js

@@ -18,32 +18,16 @@ import{css}from"lit";const styles=css`
   [part='scroll'] {
     flex: 1 1 auto;
     min-block-size: 0;
-    /* overflow-x pinned explicitly, not left implicit: per the CSS overflow spec, once one axis is
-       set to a non-'visible' value the other axis's used value is forced to 'auto' too (it never
-       stays 'visible') -- an implicit overflow-x here would risk a phantom horizontal scrollbar
-       from a wide inline code span or a fractional-width bubble under zoom, even though this
-       transcript is only ever meant to scroll vertically. Same fix lr-tab-group already applies for the
-       identical reason. */
     overflow-x: hidden;
     overflow-y: auto;
     overflow-anchor: none;
     padding: var(--lr-space-m);
   }
-  /* Virtual mode. Keyed off [part='base']'s data-virtual marker, not :host(:has(> lr-virtual-list)):
-     :has() is invalid inside :host() (Chromium reports CSS.supports('selector(:host(:has(> em)))')
-     as false), which silently dropped every one of these rules. */
   [part='base'][data-virtual] [part='scroll'] {
     overflow: visible;
     block-size: auto;
     padding: 0;
   }
-  /* Deliberately no padding/gap/margin here -- this coordinate system (the offsetParent for every
-   * slotted row) is exactly what the unread divider's own pixel position is computed against.
-   * Any block-direction spacing added here would shift that math by a constant amount for every
-   * row after the first; breathing room around the transcript belongs on [part="scroll"] instead,
-   * one level up, where it can't skew that measurement. Inter-message spacing is left entirely to
-   * slotted content (or its host) -- this component renders no messages and imposes no spacing
-   * contract of its own. */
   [part='content'] {
     position: relative;
     min-block-size: 100%;
@@ -52,17 +36,6 @@ import{css}from"lit";const styles=css`
     block-size: 100%;
     min-block-size: 0;
   }
-  /* Virtual mode: [part='scroll'] has stepped aside above, so the slotted list's own viewport is
-     the real scroller and has to be this component's full height -- otherwise it scrolls inside
-     lr-virtual-list's 24rem --lr-virtual-list-height default no matter how tall this viewport is.
-     The explicit block-size is what makes the inherited 100% resolvable: without it the list host
-     is auto-height, its own [part='base'] percentage chains to auto, and the two size each other
-     circularly. lr-thread-list solves the same problem by turning the internal list's shipped
-     24rem into a flex-basis via ::part(base) -- unavailable here, because that list lives in the
-     consumer's light DOM and ::slotted() cannot be followed by ::part(). Virtual mode therefore
-     inherits this component's existing requirement of a height-bounded parent, exactly as slotted
-     mode's own [part='scroll'] already does. A document-tree declaration on the list (a consumer's
-     own rule or inline style) still wins over this. */
   [part='base'][data-virtual] ::slotted(lr-virtual-list) {
     block-size: 100%;
     --lr-virtual-list-height: 100%;
@@ -98,8 +71,6 @@ import{css}from"lit";const styles=css`
     border-radius: var(--lr-radius-pill);
     background: var(--lr-color-surface);
     color: var(--lr-color-text);
-    /* Overlay step: the pill floats over the transcript it scrolls, so it is an anchored layer
-       rather than resting chrome. */
     box-shadow: var(--lr-shadow-m);
     cursor: pointer;
     white-space: nowrap;
@@ -107,10 +78,6 @@ import{css}from"lit";const styles=css`
     text-overflow: ellipsis;
     transition: opacity var(--lr-transition-fast);
   }
-  /* inset-inline-start: 50% anchors the pill's *start* edge -- the physical right edge under RTL
-   * -- to the horizontal center, so the fixed translateX(-50%) above would push the whole pill
-   * start-of-center there. Flip the sign to keep it centered (translateX is physical; logical
-   * properties don't cover transforms). */
   :host(:dir(rtl)) [part='jump-pill'] {
     transform: translateX(50%);
   }

package/dist/components/conversation/checkpoint/checkpoint.class.js

@@ -46,7 +46,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
                   part="restore-button"
                   type="button"
                   aria-label=${this.localize("checkpointRestoreWithContext",void 0,{label})}
-                  aria-disabled=${this.restoring?"true":nothing}
+                  aria-disabled=${this.restoring?"true":"false"}
                   @click=${this.onRestoreClick}
                 >
                   ${this.restoring?html`<span class="restore-spinner" aria-hidden="true">${spinnerIcon()}</span>`:nothing}

package/dist/components/conversation/checkpoint/checkpoint.styles.js

@@ -56,9 +56,6 @@ import{css}from"lit";const styles=css`
     border-color: var(--lr-color-brand);
     color: var(--lr-color-brand);
   }
-  /* Hover recolors the chrome only; the press additionally fills the pill, mixing its resting
-     surface toward the text color so the pressed state is a strictly stronger signal than hover
-     rather than a differently-colored one. */
   [part='restore-button']:active:not([aria-disabled='true']) {
     border-color: var(--lr-color-brand);
     color: var(--lr-color-brand);

package/dist/components/conversation/code-block/code-block-shared.d.ts

@@ -174,8 +174,11 @@ export interface CodeBlockPlainCodeOptions {
  * is what `highlight-lines`/`highlights`/`activatable-lines` attach to. `.split()` consumes each
  * newline character, so a literal `'\n'` text node is re-inserted between lines to keep the
  * non-line-numbered case's visual output (relying on `[part='pre']`'s `white-space: pre`) identical
- * to a single-text-node rendering -- the line-numbered case's `.line` elements are already
- * `display: block` (`code-block.styles.ts`) so that text node is inert there. The gutter is a
+ * to a single-text-node rendering. That text node is NOT inert in the line-numbered case, as this
+ * comment once claimed: inside a block container each whitespace run becomes its own anonymous
+ * block, which rendered a blank row between every line (a 3-line block laid out 5 rows). The
+ * container is `display: grid` (`code-block.styles.ts`), which drops whitespace-only runs instead
+ * of boxing them, so one row is painted per line in both modes. The gutter is a
  * separate real button, leaving source text selectable in both plain and highlighted output.
  */
 export declare function renderCodeBlockPlainCode(options: CodeBlockPlainCodeOptions): TemplateResult;

package/dist/components/conversation/code-block/code-block.class.js

@@ -1 +1 @@
-var __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--)(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"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadShikiHighlighter,loadShikiLanguage,loadShikiHighlighterCore,normalizeShikiLanguage}from"./code-loader.js";import{styles}from"./code-block.styles.js";import{CodeBlockInteractionController,applyCodeBlockAriaBusy,clampCodeBlockFocusedLine,codeBlockActiveHighlightLineSet,codeBlockLineHasFocus,codeBlockLineCount,codeBlockLineHighlightSet,codeBlockNeedsHighlightResync,codeBlockPreSuppliedGrammar,codeBlockShowsSkeleton,renderCodeBlockPlainCode,renderCodeBlockShell,restoreCodeBlockLineFocus,scrollCodeBlockToAnchor,tokenizeCodeBlock}from"./code-block-shared.js";import"../../overlays/skeleton/skeleton.class.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_codeBlockLineLabel,LYRA_DEFAULT_codeRegion,LYRA_DEFAULT_codeRegionWithLanguage,LYRA_DEFAULT_collapseCode,LYRA_DEFAULT_copied,LYRA_DEFAULT_copiedToClipboard,LYRA_DEFAULT_copy,LYRA_DEFAULT_copyCode,LYRA_DEFAULT_copyFailed,LYRA_DEFAULT_expandCode}from"../../../internal/default-strings.generated.js";class LyraCodeBlock extends LyraElement{static{this.defaultStrings={...super.defaultStrings,codeBlockLineLabel:LYRA_DEFAULT_codeBlockLineLabel,codeRegion:LYRA_DEFAULT_codeRegion,codeRegionWithLanguage:LYRA_DEFAULT_codeRegionWithLanguage,collapseCode:LYRA_DEFAULT_collapseCode,copied:LYRA_DEFAULT_copied,copiedToClipboard:LYRA_DEFAULT_copiedToClipboard,copy:LYRA_DEFAULT_copy,copyCode:LYRA_DEFAULT_copyCode,copyFailed:LYRA_DEFAULT_copyFailed,expandCode:LYRA_DEFAULT_expandCode}}static{this.immutableEventDetails=Object.freeze(["lr-text-select"])}static{this.styles=[LyraElement.styles,styles]}constructor(){super(),this.code="",this.language="",this.filename="",this.accessibleLabel=null,this.collapsible=!1,this.collapsed=!1,this.copyable=!0,this.maxHeight="",this.lineNumbers=!1,this.highlightLines="",this.activatableLines=!1,this.highlights=[],this.activeHighlightId=null,this.anchorKinds=["line-range"],this.focusedLine=1,this.restoreFocusedLineAfterUpdate=!1,this.highlightedHtml=null,this.shikiReady=!1,this.justCopied=!1,this.copyFailed=!1,this.isDarkTheme=!1,this.interactions=new CodeBlockInteractionController({host:this,setFocusedLine:line=>{this.focusedLine=line},setJustCopied:value=>{this.justCopied=value},setCopyFailed:value=>{this.copyFailed=value},setDarkTheme:value=>{this.isDarkTheme=value},emitLineActivate:line=>this.emit("lr-line-activate",{line}),emitCopy:outcome=>this.emit("lr-copy",outcome),emitError:()=>this.emit("lr-error",null),emitCopyError:outcome=>this.emit("lr-copy-error",outcome),requestToggle:collapsed=>!this.emit("lr-toggle-request",{collapsed},{cancelable:!0}).defaultPrevented,emitToggle:collapsed=>this.emit("lr-toggle",{collapsed}),emitTextSelect:selection=>this.emit("lr-text-select",selection)}),this.highlightToken=0,this.defaultHighlighterLoading=!1,this.bodyId=nextId("code-block-body"),new ThemeWatcher(this,()=>this.refreshTheme())}connectedCallback(){super.connectedCallback(),this.refreshTheme(),this.ensureDefaultHighlighter(),(this.preSuppliedGrammar()||this.highlighter)&&this.syncHighlight()}ensureDefaultHighlighter(){!this.isConnected||this.highlighter!==void 0||this.defaultHighlighterLoading||(this.defaultHighlighterLoading=!0,loadShikiHighlighter().then(hl=>{this.defaultHighlighterLoading=!1,this.isConnected&&(this.highlighter=hl,this.shikiReady=!0,this.syncHighlight())}))}disconnectedCallback(){this.highlightToken++,super.disconnectedCallback(),this.interactions.disconnect(),this.highlightedHtml=null}adoptedCallback(){super.adoptedCallback(),this.interactions.disconnect()}preSuppliedGrammar(){return codeBlockPreSuppliedGrammar(this.languages,this.language)}lineHighlightSet(){return codeBlockLineHighlightSet(this.highlightLines,this.highlights,this.lineCount())}activeHighlightLineSet(){return codeBlockActiveHighlightLineSet(this.highlights,this.activeHighlightId,this.lineCount())}lineCount(){return codeBlockLineCount(this.code)}async scrollToAnchor(target){return scrollCodeBlockToAnchor(this,target)}refreshTheme(){this.interactions.refreshTheme()}willUpdate(changed){super.willUpdate(changed),this.restoreFocusedLineAfterUpdate=codeBlockLineHasFocus(this),changed.has("code")&&(this.focusedLine=clampCodeBlockFocusedLine(this.focusedLine,this.lineCount())),codeBlockNeedsHighlightResync(changed)&&(this.shikiReady||this.preSuppliedGrammar())&&this.syncHighlight()}updated(changed){super.updated(changed),applyCodeBlockAriaBusy(this,this.showsSkeleton()),this.restoreFocusedLineAfterUpdate&&(restoreCodeBlockLineFocus(this,this.focusedLine),this.restoreFocusedLineAfterUpdate=!1)}showsSkeleton(){return codeBlockShowsSkeleton(this.shikiReady,this.language,!this.preSuppliedGrammar())}syncHighlight(){const token=++this.highlightToken,lang=normalizeShikiLanguage(this.language);if(!lang){this.highlightedHtml=null;return}const languages=this.languages;if(languages?.[lang]??languages?.[this.language]){this.highlightedHtml=null,loadShikiHighlighterCore(languages).then(hl2=>{token===this.highlightToken&&this.isConnected&&(this.highlightedHtml=hl2?this.tokenize(hl2,lang):null)});return}const hl=this.highlighter;if(!hl){this.highlightedHtml=null;return}if(hl.getLoadedLanguages().includes(lang)){this.highlightedHtml=this.tokenize(hl,lang);return}this.highlightedHtml=null,loadShikiLanguage(hl,lang).then(ok=>{token===this.highlightToken&&this.isConnected&&(this.highlightedHtml=ok?this.tokenize(hl,lang):null)})}tokenize(hl,lang){return tokenizeCodeBlock(hl,{code:this.code,lang,lineNumbers:this.lineNumbers,activatableLines:this.activatableLines,focusedLine:this.focusedLine,highlightedLines:this.lineHighlightSet(),activeLines:this.activeHighlightLineSet(),lineLabel:line=>this.localize("codeBlockLineLabel",void 0,{line:getNumberFormat(this.effectiveLocale).format(line)}),lineNumberText:line=>getNumberFormat(this.effectiveLocale).format(line)})}renderPlainCode(){return renderCodeBlockPlainCode({code:this.code,lineNumbers:this.lineNumbers,activatableLines:this.activatableLines,focusedLine:this.focusedLine,highlightedLines:this.lineHighlightSet(),activeLines:this.activeHighlightLineSet(),localize:this.localize.bind(this),lineLabel:line=>this.localize("codeBlockLineLabel",void 0,{line:getNumberFormat(this.effectiveLocale).format(line)}),lineNumberText:line=>getNumberFormat(this.effectiveLocale).format(line),onLineActivate:line=>this.interactions.onLineActivate(line),onLineKeyDown:(e,line)=>this.interactions.onLineKeyDown(e,line)})}render(){return renderCodeBlockShell({filename:this.filename,language:this.language,copyable:this.copyable,collapsible:this.collapsible,collapsed:this.collapsed,justCopied:this.justCopied,copyFailed:this.copyFailed,bodyId:this.bodyId,accessibleLabel:this.accessibleLabel,maxHeight:this.maxHeight,isDarkTheme:this.isDarkTheme,showSkeleton:this.showsSkeleton(),highlightedHtml:this.highlightedHtml,lineNumbers:this.lineNumbers,localize:this.localize.bind(this),renderPlainCode:()=>this.renderPlainCode(),onToggle:this.interactions.toggleCollapsed,onCopy:this.interactions.copy,onBodyMouseUp:this.interactions.onBodyMouseUp,onBodyClick:this.interactions.onBodyClick,onBodyKeyDown:this.interactions.onBodyKeyDown,onBodyFocusIn:this.interactions.onBodyFocusIn})}}__decorate([property()],LyraCodeBlock.prototype,"code",void 0),__decorate([property()],LyraCodeBlock.prototype,"language",void 0),__decorate([property()],LyraCodeBlock.prototype,"filename",void 0),__decorate([property({attribute:"aria-label"})],LyraCodeBlock.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeBlock.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeBlock.prototype,"collapsed",void 0),__decorate([property({type:Boolean,reflect:!0,converter:trueDefaultBooleanConverter})],LyraCodeBlock.prototype,"copyable",void 0),__decorate([property({attribute:"max-height"})],LyraCodeBlock.prototype,"maxHeight",void 0),__decorate([property({type:Boolean,attribute:"line-numbers",reflect:!0})],LyraCodeBlock.prototype,"lineNumbers",void 0),__decorate([property({attribute:"highlight-lines"})],LyraCodeBlock.prototype,"highlightLines",void 0),__decorate([property({type:Boolean,attribute:"activatable-lines"})],LyraCodeBlock.prototype,"activatableLines",void 0),__decorate([property({attribute:!1})],LyraCodeBlock.prototype,"highlights",void 0),__decorate([property({attribute:"active-highlight-id"})],LyraCodeBlock.prototype,"activeHighlightId",void 0),__decorate([state()],LyraCodeBlock.prototype,"focusedLine",void 0),__decorate([property({attribute:!1})],LyraCodeBlock.prototype,"languages",void 0),__decorate([state()],LyraCodeBlock.prototype,"highlightedHtml",void 0),__decorate([state()],LyraCodeBlock.prototype,"shikiReady",void 0),__decorate([state()],LyraCodeBlock.prototype,"justCopied",void 0),__decorate([state()],LyraCodeBlock.prototype,"copyFailed",void 0),__decorate([state()],LyraCodeBlock.prototype,"isDarkTheme",void 0);export{LyraCodeBlock};
+var __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--)(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"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadShikiHighlighter,loadShikiLanguage,loadShikiHighlighterCore,normalizeShikiLanguage,shikiHasLoadedLanguage}from"./code-loader.js";import{styles}from"./code-block.styles.js";import{CodeBlockInteractionController,applyCodeBlockAriaBusy,clampCodeBlockFocusedLine,codeBlockActiveHighlightLineSet,codeBlockLineHasFocus,codeBlockLineCount,codeBlockLineHighlightSet,codeBlockNeedsHighlightResync,codeBlockPreSuppliedGrammar,codeBlockShowsSkeleton,renderCodeBlockPlainCode,renderCodeBlockShell,restoreCodeBlockLineFocus,scrollCodeBlockToAnchor,tokenizeCodeBlock}from"./code-block-shared.js";import"../../overlays/skeleton/skeleton.class.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_codeBlockLineLabel,LYRA_DEFAULT_codeRegion,LYRA_DEFAULT_codeRegionWithLanguage,LYRA_DEFAULT_collapseCode,LYRA_DEFAULT_copied,LYRA_DEFAULT_copiedToClipboard,LYRA_DEFAULT_copy,LYRA_DEFAULT_copyCode,LYRA_DEFAULT_copyFailed,LYRA_DEFAULT_expandCode}from"../../../internal/default-strings.generated.js";class LyraCodeBlock extends LyraElement{static{this.defaultStrings={...super.defaultStrings,codeBlockLineLabel:LYRA_DEFAULT_codeBlockLineLabel,codeRegion:LYRA_DEFAULT_codeRegion,codeRegionWithLanguage:LYRA_DEFAULT_codeRegionWithLanguage,collapseCode:LYRA_DEFAULT_collapseCode,copied:LYRA_DEFAULT_copied,copiedToClipboard:LYRA_DEFAULT_copiedToClipboard,copy:LYRA_DEFAULT_copy,copyCode:LYRA_DEFAULT_copyCode,copyFailed:LYRA_DEFAULT_copyFailed,expandCode:LYRA_DEFAULT_expandCode}}static{this.immutableEventDetails=Object.freeze(["lr-text-select"])}static{this.styles=[LyraElement.styles,styles]}constructor(){super(),this.code="",this.language="",this.filename="",this.accessibleLabel=null,this.collapsible=!1,this.collapsed=!1,this.copyable=!0,this.maxHeight="",this.lineNumbers=!1,this.highlightLines="",this.activatableLines=!1,this.highlights=[],this.activeHighlightId=null,this.anchorKinds=["line-range"],this.focusedLine=1,this.restoreFocusedLineAfterUpdate=!1,this.highlightedHtml=null,this.shikiReady=!1,this.justCopied=!1,this.copyFailed=!1,this.isDarkTheme=!1,this.interactions=new CodeBlockInteractionController({host:this,setFocusedLine:line=>{this.focusedLine=line},setJustCopied:value=>{this.justCopied=value},setCopyFailed:value=>{this.copyFailed=value},setDarkTheme:value=>{this.isDarkTheme=value},emitLineActivate:line=>this.emit("lr-line-activate",{line}),emitCopy:outcome=>this.emit("lr-copy",outcome),emitError:()=>this.emit("lr-error",null),emitCopyError:outcome=>this.emit("lr-copy-error",outcome),requestToggle:collapsed=>!this.emit("lr-toggle-request",{collapsed},{cancelable:!0}).defaultPrevented,emitToggle:collapsed=>this.emit("lr-toggle",{collapsed}),emitTextSelect:selection=>this.emit("lr-text-select",selection)}),this.highlightToken=0,this.defaultHighlighterLoading=!1,this.bodyId=nextId("code-block-body"),new ThemeWatcher(this,()=>this.refreshTheme())}connectedCallback(){super.connectedCallback(),this.refreshTheme(),this.ensureDefaultHighlighter(),(this.preSuppliedGrammar()||this.highlighter)&&this.syncHighlight()}ensureDefaultHighlighter(){!this.isConnected||this.highlighter!==void 0||this.defaultHighlighterLoading||(this.defaultHighlighterLoading=!0,loadShikiHighlighter().then(hl=>{this.defaultHighlighterLoading=!1,this.isConnected&&(this.highlighter=hl,this.shikiReady=!0,this.syncHighlight())}))}disconnectedCallback(){this.highlightToken++,super.disconnectedCallback(),this.interactions.disconnect(),this.highlightedHtml=null}adoptedCallback(){super.adoptedCallback(),this.interactions.disconnect()}preSuppliedGrammar(){return codeBlockPreSuppliedGrammar(this.languages,this.language)}lineHighlightSet(){return codeBlockLineHighlightSet(this.highlightLines,this.highlights,this.lineCount())}activeHighlightLineSet(){return codeBlockActiveHighlightLineSet(this.highlights,this.activeHighlightId,this.lineCount())}lineCount(){return codeBlockLineCount(this.code)}async scrollToAnchor(target){return scrollCodeBlockToAnchor(this,target)}refreshTheme(){this.interactions.refreshTheme()}willUpdate(changed){super.willUpdate(changed),this.restoreFocusedLineAfterUpdate=codeBlockLineHasFocus(this),changed.has("code")&&(this.focusedLine=clampCodeBlockFocusedLine(this.focusedLine,this.lineCount())),codeBlockNeedsHighlightResync(changed)&&(this.shikiReady||this.preSuppliedGrammar())&&this.syncHighlight()}updated(changed){super.updated(changed),applyCodeBlockAriaBusy(this,this.showsSkeleton()),this.restoreFocusedLineAfterUpdate&&(restoreCodeBlockLineFocus(this,this.focusedLine),this.restoreFocusedLineAfterUpdate=!1)}showsSkeleton(){return codeBlockShowsSkeleton(this.shikiReady,this.language,!this.preSuppliedGrammar())}syncHighlight(){const token=++this.highlightToken,lang=normalizeShikiLanguage(this.language);if(!lang){this.highlightedHtml=null;return}const languages=this.languages;if(languages?.[lang]??languages?.[this.language]){this.highlightedHtml=null,loadShikiHighlighterCore(languages).then(hl2=>{token===this.highlightToken&&this.isConnected&&(this.highlightedHtml=hl2?this.tokenize(hl2,lang):null)});return}const hl=this.highlighter;if(!hl){this.highlightedHtml=null;return}if(shikiHasLoadedLanguage(hl,lang)){this.highlightedHtml=this.tokenize(hl,lang);return}this.highlightedHtml=null,loadShikiLanguage(hl,lang).then(ok=>{token===this.highlightToken&&this.isConnected&&(this.highlightedHtml=ok?this.tokenize(hl,lang):null)})}tokenize(hl,lang){return tokenizeCodeBlock(hl,{code:this.code,lang,lineNumbers:this.lineNumbers,activatableLines:this.activatableLines,focusedLine:this.focusedLine,highlightedLines:this.lineHighlightSet(),activeLines:this.activeHighlightLineSet(),lineLabel:line=>this.localize("codeBlockLineLabel",void 0,{line:getNumberFormat(this.effectiveLocale).format(line)}),lineNumberText:line=>getNumberFormat(this.effectiveLocale).format(line)})}renderPlainCode(){return renderCodeBlockPlainCode({code:this.code,lineNumbers:this.lineNumbers,activatableLines:this.activatableLines,focusedLine:this.focusedLine,highlightedLines:this.lineHighlightSet(),activeLines:this.activeHighlightLineSet(),localize:this.localize.bind(this),lineLabel:line=>this.localize("codeBlockLineLabel",void 0,{line:getNumberFormat(this.effectiveLocale).format(line)}),lineNumberText:line=>getNumberFormat(this.effectiveLocale).format(line),onLineActivate:line=>this.interactions.onLineActivate(line),onLineKeyDown:(e,line)=>this.interactions.onLineKeyDown(e,line)})}render(){return renderCodeBlockShell({filename:this.filename,language:this.language,copyable:this.copyable,collapsible:this.collapsible,collapsed:this.collapsed,justCopied:this.justCopied,copyFailed:this.copyFailed,bodyId:this.bodyId,accessibleLabel:this.accessibleLabel,maxHeight:this.maxHeight,isDarkTheme:this.isDarkTheme,showSkeleton:this.showsSkeleton(),highlightedHtml:this.highlightedHtml,lineNumbers:this.lineNumbers,localize:this.localize.bind(this),renderPlainCode:()=>this.renderPlainCode(),onToggle:this.interactions.toggleCollapsed,onCopy:this.interactions.copy,onBodyMouseUp:this.interactions.onBodyMouseUp,onBodyClick:this.interactions.onBodyClick,onBodyKeyDown:this.interactions.onBodyKeyDown,onBodyFocusIn:this.interactions.onBodyFocusIn})}}__decorate([property()],LyraCodeBlock.prototype,"code",void 0),__decorate([property()],LyraCodeBlock.prototype,"language",void 0),__decorate([property()],LyraCodeBlock.prototype,"filename",void 0),__decorate([property({attribute:"aria-label"})],LyraCodeBlock.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeBlock.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeBlock.prototype,"collapsed",void 0),__decorate([property({type:Boolean,reflect:!0,converter:trueDefaultBooleanConverter})],LyraCodeBlock.prototype,"copyable",void 0),__decorate([property({attribute:"max-height"})],LyraCodeBlock.prototype,"maxHeight",void 0),__decorate([property({type:Boolean,attribute:"line-numbers",reflect:!0})],LyraCodeBlock.prototype,"lineNumbers",void 0),__decorate([property({attribute:"highlight-lines"})],LyraCodeBlock.prototype,"highlightLines",void 0),__decorate([property({type:Boolean,attribute:"activatable-lines"})],LyraCodeBlock.prototype,"activatableLines",void 0),__decorate([property({attribute:!1})],LyraCodeBlock.prototype,"highlights",void 0),__decorate([property({attribute:"active-highlight-id"})],LyraCodeBlock.prototype,"activeHighlightId",void 0),__decorate([state()],LyraCodeBlock.prototype,"focusedLine",void 0),__decorate([property({attribute:!1})],LyraCodeBlock.prototype,"languages",void 0),__decorate([state()],LyraCodeBlock.prototype,"highlightedHtml",void 0),__decorate([state()],LyraCodeBlock.prototype,"shikiReady",void 0),__decorate([state()],LyraCodeBlock.prototype,"justCopied",void 0),__decorate([state()],LyraCodeBlock.prototype,"copyFailed",void 0),__decorate([state()],LyraCodeBlock.prototype,"isDarkTheme",void 0);export{LyraCodeBlock};