@aceshooting/lyra-ui 9.1.0 → 10.0.1

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_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,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};

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

@@ -16,18 +16,10 @@ import{css}from"lit";const styles=css`
     gap: var(--lr-space-xs);
     padding: var(--lr-space-xs) var(--lr-space-s);
     border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border);
-    /* --lr-color-surface (not -brand-quiet) -- pairing
-       --lr-color-text-quiet (the toggle/copy-button color below) against
-       --lr-color-brand-quiet fails WCAG AA contrast in this token
-       palette; --lr-color-surface is the same header background
-       lr-json-viewer's own toolbar already uses with that same text
-       color. */
     background: var(--lr-color-surface);
     font-family: var(--lr-font);
   }
   [part='toggle'] {
-    /* Keep the glyph compact while giving the interactive box the shared
-       minimum target size. */
     inline-size: var(--lr-size-1-25rem);
     block-size: var(--lr-size-1-25rem);
     min-inline-size: var(--lr-icon-button-size);
@@ -59,18 +51,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-thinking-panel's and lr-json-viewer's own toggles. */
   :host(:not([collapsed])) [part='toggle'] .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 (rather than a plain :dir(rtl) rule) so it
-     never has to compete with the rule above for the expanded state, which
-     needs no mirroring: rotating this left-right-asymmetric glyph 90deg
-     already produces a left-right-symmetric down chevron. */
   :host([collapsed]:dir(rtl)) [part='toggle'] .chevron {
     transform: scaleX(-1);
   }
@@ -94,12 +77,6 @@ import{css}from"lit";const styles=css`
     white-space: nowrap;
     padding: var(--lr-size-0-0625rem) var(--lr-size-0-4375rem);
     border-radius: var(--lr-radius-pill);
-    /* --lr-color-brand + -brand-quiet (not -text-quiet + -surface) --
-       this pill needs to read as distinct from the [part="header"]
-       background it sits on (also -surface as of the comment above), and
-       -brand on -brand-quiet is a pairing already relied on elsewhere in
-       this library (e.g. hover states below) that passes contrast, unlike
-       -text-quiet on -brand-quiet. */
     background: var(--lr-color-brand-quiet);
     color: var(--lr-color-brand);
     font-size: var(--lr-size-0-6875rem);
@@ -107,9 +84,6 @@ import{css}from"lit";const styles=css`
     text-transform: uppercase;
     letter-spacing: var(--lr-size-0-02em);
   }
-  /* Pushed to the end of the header whether or not filename/language
-     precede it -- margin-inline-start:auto works whether this is the first
-     flex child (copyable alone) or the last of several. */
   [part='copy-button'] {
     flex: 0 0 auto;
     margin-inline-start: auto;
@@ -152,8 +126,6 @@ import{css}from"lit";const styles=css`
   }
   [part='body']:focus-visible {
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
-    /* Negative (inward) so the ring isn't clipped by this element's own
-       overflow:auto -- same reasoning as lr-virtual-list's [part="base"]. */
     outline-offset: calc(-1 * var(--lr-focus-ring-offset));
   }
   [part='body'] lr-skeleton {
@@ -165,49 +137,23 @@ import{css}from"lit";const styles=css`
   [part='pre'] {
     margin: 0;
     padding: var(--lr-space-s) var(--lr-space-m);
-    /* The body owns scrolling, so this descendant's painted box must grow to the longest
-       unwrapped line instead of stopping at the body's initially visible width. The 100%
-       minimum keeps short code filling the scrollport; max-content extends the background and
-       line-state painting through the full horizontal overflow range. */
     box-sizing: border-box;
     inline-size: max-content;
     min-inline-size: 100%;
-    /* Source code is read left-to-right regardless of the surrounding document
-       direction -- like every code surface (VS Code, GitHub, devtools). Without
-       this, an ancestor dir="rtl" bidi-reorders each line (a trailing ';' jumps
-       to the visual start, an opening brace wraps to its own bottom line) and
-       right-aligns the block, making valid code look syntactically broken. The
-       header (filename/language/copy/toggle) is a separate part and still mirrors.
-       isolate keeps any RTL run *inside* a string/comment from leaking out and
-       reordering the surrounding code. Matches phone-input's calling-code and
-       terminal/stack-trace's own dir="ltr" content locks. */
     direction: ltr;
     unicode-bidi: isolate;
-    /* A default background so the plain-fallback path still reads as a
-       proper code block -- shiki's own inline background-color (part of the
-       generated-token-colors exception documented in code-block.ts's
-       tokenize()) silently overrides this the moment highlighting succeeds,
-       since an element's own style attribute always wins over an external
-       stylesheet rule at equal or lower specificity. */
     background: var(--lr-color-surface);
     font-family: var(--lr-code-block-font, var(--lr-font-mono));
     font-size: inherit;
     line-height: var(--lr-line-height-normal);
     white-space: pre;
-    /* Tab width, defaulting to the same value as --lr-code-editor-tab-size so the editable surface
-       and the read-only ones agree on what a literal tab looks like. The default lives here as a
-       var() fallback rather than as a :host declaration: a :host rule is re-stamped on every
-       instance and shadows any inherited value, so a page- or container-level declaration could
-       never reach it. lr-markdown/lr-markdown-core carry the same fallback for their own code-block
-       part -- they are sibling custom elements, not descendants, so no single rule covers both.
-       Never written as an inline tab-size: shiki puts its own style attribute on the highlighted
-       <pre>, and an inline declaration is the one thing a host override cannot beat. */
     tab-size: var(--lr-code-block-tab-size, 2);
   }
   [part='code'] {
+    display: grid;
     font-family: inherit;
   }
-  [part='pre'].line-numbers .line {
+  [part='pre'] .line {
     display: block;
   }
   [part='pre'] .line-number {
@@ -218,30 +164,13 @@ import{css}from"lit";const styles=css`
     text-align: end;
     user-select: none;
   }
-  /* A highlighted line, from either highlight-lines or a line-range entry in highlights --
-     stamped identically by codeBlockLineTransformer (shiki path) and renderPlainCode() (plain
-     path). See the dark-mode block below for why this needs its own !important there.
-
-     --lr-code-block-highlighted-line-bg is an inline var() fallback rather than a :host
-     declaration, for the same reason --lr-code-block-active-line-outline-color below is: a :host
-     declaration is re-stamped on every instance and would shadow any ancestor/theme-level value,
-     which is exactly what a state-styling override hook must not do. Unset, it resolves to
-     --lr-color-warning-quiet -- byte-identical to before it existed. */
   [part='pre'] [data-highlighted] {
     background: var(--lr-code-block-highlighted-line-bg, var(--lr-color-warning-quiet));
   }
-  /* The active highlight (highlights entry matching activeHighlightId) gets an outline on top of
-     any background -- inset so it doesn't add to the line's own box size.
-
-     --lr-code-block-active-line-outline-color is an inline var() fallback rather than a :host
-     declaration on purpose: a :host declaration is re-stamped on every instance and would shadow
-     any ancestor/theme-level value, which is exactly what a state-styling override hook must not
-     do. Unset, it resolves to --lr-color-brand -- byte-identical to before it existed. */
   [part='pre'] [data-active] {
     outline: var(--lr-border-width-thin) solid var(--lr-code-block-active-line-outline-color, var(--lr-color-brand));
     outline-offset: calc(-1 * var(--lr-border-width-thin));
   }
-  /* The gutter alone is interactive; source remains ordinary selectable text. */
   [part='pre'] button.line-gutter {
     display: inline-flex;
     align-items: center;
@@ -258,10 +187,10 @@ import{css}from"lit";const styles=css`
     text-align: start;
     cursor: pointer;
   }
-  :where([part='pre']) :where(button.line-gutter):hover {
+  [part='pre'] button.line-gutter:hover {
     background: var(--lr-color-brand-quiet);
   }
-  :where([part='pre']) :where(button.line-gutter):active {
+  [part='pre'] button.line-gutter:active {
     background: color-mix(
       in oklab,
       var(--lr-color-brand-quiet),
@@ -272,26 +201,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: calc(-1 * var(--lr-focus-ring-offset));
   }
-  /*
-   * Activates shiki's "dual themes" dark variant. codeToHtml() (see
-   * tokenize() in code-block.ts) renders every token with its *light* color
-   * as a plain inline color/background-color and its *dark* color stashed in
-   * the --shiki-dark/--shiki-dark-bg custom properties shiki itself defines
-   * inline on the same elements -- shiki's own documented pattern for
-   * toggling them is exactly this: an external stylesheet rule that
-   * reassigns color/background-color from those variables. This requires
-   * !important because an inline style="..." attribute always outranks an
-   * external stylesheet at any selector specificity short of !important --
-   * there's no other way for a page-level rule to override an element's own
-   * style attribute. This is the one legitimate exception to "every color is
-   * a --lr-* token" in this file: these values come from shiki's theme
-   * data, not this library's design tokens.
-   */
-  /* Gated on [part='body'][data-dark-theme='true'] (kept live by the shared ThemeWatcher, off the
-     component's own resolved --lr-color-text/--lr-color-surface) rather
-     than the OS-level prefers-color-scheme media query directly -- a consumer who sets
-     --lr-theme-color-* explicitly, independent of the OS's own setting, must still get the dark
-     shiki theme, matching every other --lr-color-* token's consumer-overrides-first resolution. */
   [part='body'][data-dark-theme='true'] [part='pre'],
   [part='body'][data-dark-theme='true'] [part='pre'] span {
     color: var(--shiki-dark, inherit) !important;

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

@@ -16,6 +16,17 @@ export { loadShikiHighlighterCore } from './shiki-types.js';
  * one incrementally the first time a `language` value actually requests it.
  */
 export declare function loadShikiHighlighter(): Promise<ShikiHighlighter | null>;
+/**
+ * Safely reports whether `lang` is already loaded into `hl`, tolerating a highlighter whose
+ * `getLoadedLanguages()` itself throws -- treated the same as "not loaded", which routes the
+ * caller into the existing unhighlighted-fallback path instead of throwing out of it.
+ * `loadShikiHighlighter()`/`loadShikiHighlighterCore()` already validate a highlighter's
+ * capability *shape* at load time, so `hl` here is never missing the method outright; this
+ * additionally tolerates a shape-valid peer whose method throws only when actually called (a
+ * load-time shape check alone cannot catch that). Shared by `loadShikiLanguage()` below and
+ * `<lr-code-block>`'s own synchronous per-render check in `syncHighlight()`.
+ */
+export declare function shikiHasLoadedLanguage(hl: ShikiHighlighter, lang: string): boolean;
 /**
  * Ensures `lang` is loaded into `hl`, loading it on demand the first time
  * it's requested rather than bundling every possible grammar up front —

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

@@ -1 +1 @@
-import{GREYCAT_LANGUAGE}from"./greycat-language.js";import{SHIKI_DARK_THEME,SHIKI_LIGHT_THEME,normalizeShikiLanguage}from"./shiki-types.js";import{SHIKI_DARK_THEME as SHIKI_DARK_THEME2,SHIKI_LIGHT_THEME as SHIKI_LIGHT_THEME2,SHIKI_THEMES,normalizeShikiLanguage as normalizeShikiLanguage2}from"./shiki-types.js";import{loadShikiHighlighterCore}from"./shiki-types.js";let highlighter;const unsupportedLanguages=new Set,CUSTOM_LANGUAGES={gcl:GREYCAT_LANGUAGE,greycat:GREYCAT_LANGUAGE};function loadShikiHighlighter(){return highlighter||(highlighter=import("shiki").then(mod=>mod.createHighlighter({themes:[SHIKI_LIGHT_THEME,SHIKI_DARK_THEME],langs:[]})).catch(err=>(console.warn("<lr-code-block> needs the optional peer dependency `shiki` for syntax highlighting \u2014 install it with `pnpm add shiki`. Code still renders, just unhighlighted, without it:",err),null))),highlighter}async function loadShikiLanguage(hl,lang){const normalizedLanguage=normalizeShikiLanguage(lang);if(hl.getLoadedLanguages().includes(normalizedLanguage))return!0;if(unsupportedLanguages.has(normalizedLanguage))return!1;try{return await hl.loadLanguage(CUSTOM_LANGUAGES[normalizedLanguage]??normalizedLanguage),!0}catch{return unsupportedLanguages.add(normalizedLanguage),!1}}export{SHIKI_DARK_THEME2 as SHIKI_DARK_THEME,SHIKI_LIGHT_THEME2 as SHIKI_LIGHT_THEME,SHIKI_THEMES,loadShikiHighlighter,loadShikiHighlighterCore,loadShikiLanguage,normalizeShikiLanguage2 as normalizeShikiLanguage};
+import{GREYCAT_LANGUAGE}from"./greycat-language.js";import{SHIKI_DARK_THEME,SHIKI_LIGHT_THEME,isShikiHighlighter,normalizeShikiLanguage}from"./shiki-types.js";import{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{SHIKI_DARK_THEME as SHIKI_DARK_THEME2,SHIKI_LIGHT_THEME as SHIKI_LIGHT_THEME2,SHIKI_THEMES,normalizeShikiLanguage as normalizeShikiLanguage2}from"./shiki-types.js";import{loadShikiHighlighterCore}from"./shiki-types.js";let highlighter;const unsupportedLanguages=new Set,CUSTOM_LANGUAGES={gcl:GREYCAT_LANGUAGE,greycat:GREYCAT_LANGUAGE};function isShikiModule(candidate){return(typeof candidate=="object"||typeof candidate=="function")&&candidate!==null&&typeof candidate.createHighlighter=="function"}function loadShikiHighlighter(){return highlighter||(highlighter=import("shiki").then(async mod=>{const shikiModule=resolveOptionalPeerCapability(mod,isShikiModule);if(!shikiModule)throw new Error("Invalid optional peer `shiki`: missing `createHighlighter` capability.");const instance=await shikiModule.createHighlighter({themes:[SHIKI_LIGHT_THEME,SHIKI_DARK_THEME],langs:[]});if(!isShikiHighlighter(instance))throw new Error("Invalid optional peer `shiki`: `createHighlighter()` did not produce a usable highlighter capability.");return instance}).catch(err=>(console.warn("<lr-code-block> needs the optional peer dependency `shiki` for syntax highlighting \u2014 install it with `pnpm add shiki`. Code still renders, just unhighlighted, without it:",err),null))),highlighter}function shikiHasLoadedLanguage(hl,lang){try{return hl.getLoadedLanguages().includes(lang)}catch{return!1}}async function loadShikiLanguage(hl,lang){const normalizedLanguage=normalizeShikiLanguage(lang);if(shikiHasLoadedLanguage(hl,normalizedLanguage))return!0;if(unsupportedLanguages.has(normalizedLanguage))return!1;try{return await hl.loadLanguage(CUSTOM_LANGUAGES[normalizedLanguage]??normalizedLanguage),!0}catch{return unsupportedLanguages.add(normalizedLanguage),!1}}export{SHIKI_DARK_THEME2 as SHIKI_DARK_THEME,SHIKI_LIGHT_THEME2 as SHIKI_LIGHT_THEME,SHIKI_THEMES,loadShikiHighlighter,loadShikiHighlighterCore,loadShikiLanguage,normalizeShikiLanguage2 as normalizeShikiLanguage,shikiHasLoadedLanguage};

package/dist/components/conversation/code-block/shiki-types.d.ts

@@ -14,6 +14,18 @@ export interface ShikiHighlighter {
  * highlighter, but is constructed from application-supplied grammars.
  */
 export type ShikiHighlighterCore = ShikiHighlighter;
+/**
+ * Narrows an unknown value (the resolved output of `shiki`'s `createHighlighter()`/
+ * `createHighlighterCore()`) to the highlighter capability Lyra actually calls. Both
+ * `loadShikiHighlighter()` (`code-loader.ts`) and `loadShikiHighlighterCore()` below validate
+ * their built instance through this before caching/returning it, so a malformed or spoofed peer
+ * fails closed at load time -- resolving `null` with the documented warning -- instead of reaching
+ * `<lr-code-block>`/`<lr-markdown>`'s render path and throwing there. Exported so a call site that
+ * receives an already-resolved highlighter from elsewhere (e.g. `syncHighlight()`'s live
+ * per-language check) can also tolerate a shape-valid peer whose method throws only when actually
+ * invoked, which a load-time shape check alone cannot catch.
+ */
+export declare function isShikiHighlighter(candidate: unknown): candidate is ShikiHighlighter;
 /** The peer-neutral shape of a pre-imported TextMate grammar module's default export. */
 export interface ShikiLanguageInput {
     name: string;

package/dist/components/conversation/code-block/shiki-types.js

@@ -1 +1 @@
-const SHIKI_LIGHT_THEME="github-light",SHIKI_DARK_THEME="github-dark",SHIKI_THEMES={light:SHIKI_LIGHT_THEME,dark:SHIKI_DARK_THEME};function normalizeShikiLanguage(lang){return lang.trim().toLowerCase().replace(/^\./,"")}const highlighterCores=new WeakMap;let highlighterCoreLoaderForTesting;function __setShikiHighlighterCoreLoaderForTesting(loader){highlighterCoreLoaderForTesting=loader}function loadShikiHighlighterCore(languages){if(highlighterCoreLoaderForTesting)return highlighterCoreLoaderForTesting(languages);let cached=highlighterCores.get(languages);return cached||(cached=Promise.all([import("shiki/core"),import("shiki/engine/oniguruma"),import("shiki/themes/github-light.mjs"),import("shiki/themes/github-dark.mjs")]).then(([{createHighlighterCore},{createOnigurumaEngine},light,dark])=>createHighlighterCore({themes:[light.default,dark.default],langs:Object.values(languages),engine:createOnigurumaEngine(import("shiki/wasm"))})).catch(err=>(console.warn("<lr-code-block>'s `languages` property failed to build a fine-grained shiki highlighter \u2014 falling back to plain unhighlighted text for the languages it covers:",err),null)),highlighterCores.set(languages,cached)),cached}export{SHIKI_DARK_THEME,SHIKI_LIGHT_THEME,SHIKI_THEMES,__setShikiHighlighterCoreLoaderForTesting,loadShikiHighlighterCore,normalizeShikiLanguage};
+function isShikiHighlighter(candidate){return(typeof candidate=="object"||typeof candidate=="function")&&candidate!==null&&typeof candidate.getLoadedLanguages=="function"&&typeof candidate.loadLanguage=="function"&&typeof candidate.codeToHtml=="function"}const SHIKI_LIGHT_THEME="github-light",SHIKI_DARK_THEME="github-dark",SHIKI_THEMES={light:SHIKI_LIGHT_THEME,dark:SHIKI_DARK_THEME};function normalizeShikiLanguage(lang){return lang.trim().toLowerCase().replace(/^\./,"")}const highlighterCores=new WeakMap;let highlighterCoreLoaderForTesting;function __setShikiHighlighterCoreLoaderForTesting(loader){highlighterCoreLoaderForTesting=loader}function loadShikiHighlighterCore(languages){if(highlighterCoreLoaderForTesting)return highlighterCoreLoaderForTesting(languages);let cached=highlighterCores.get(languages);return cached||(cached=Promise.all([import("shiki/core"),import("shiki/engine/oniguruma"),import("shiki/themes/github-light.mjs"),import("shiki/themes/github-dark.mjs")]).then(async([{createHighlighterCore},{createOnigurumaEngine},light,dark])=>{const core=await createHighlighterCore({themes:[light.default,dark.default],langs:Object.values(languages),engine:createOnigurumaEngine(import("shiki/wasm"))});if(!isShikiHighlighter(core))throw new Error("Invalid optional peer `shiki`: `createHighlighterCore()` did not produce a usable highlighter capability.");return core}).catch(err=>(console.warn("<lr-code-block>'s `languages` property failed to build a fine-grained shiki highlighter \u2014 falling back to plain unhighlighted text for the languages it covers:",err),null)),highlighterCores.set(languages,cached)),cached}export{SHIKI_DARK_THEME,SHIKI_LIGHT_THEME,SHIKI_THEMES,__setShikiHighlighterCoreLoaderForTesting,isShikiHighlighter,loadShikiHighlighterCore,normalizeShikiLanguage};

package/dist/components/conversation/conversation-item/conversation-item.styles.js

@@ -5,12 +5,6 @@ import{css}from"lit";const styles=css`
     line-height: var(--lr-line-height-1-4);
   }
 
-  /* [part='base'] is a plain layout wrapper (no ARIA role of its own) --
-     the interactive/selectable region is [part='select-button'] alone, kept free
-     of focusable descendants (see the class doc's nested-interactive note).
-     The row-level hover/active background treatments still live here so
-     hovering anywhere across the row -- including over the trailing
-     rename/actions controls -- highlights the whole thing as one row. */
   [part='base'] {
     position: relative;
     display: flex;
@@ -31,25 +25,6 @@ import{css}from"lit";const styles=css`
     pointer-events: none;
     z-index: var(--lr-layer-content);
   }
-  /* Density escape -- same convention as lr-empty's compact. Conversation rows render in sidebar
-     lists, so the tuned values sit behind inline var() fallbacks (rather than a :host declaration,
-     which every instance re-declares and so shadows any ancestor value) letting a list retune every
-     row at once from the outside; the fallbacks are the pre-existing values scaled down one step, so
-     an unset row renders unchanged.
-
-     MUST stay before the :host([active]) rules below: :host([compact]) [part='base'] and
-     :host([active]) [part='base'] are equal specificity, so source order alone decides which wins
-     should either ever grow a declaration the other also sets. active is the stronger statement of
-     appearance ("this is the open session"), so it goes last.
-
-     Deliberately NOT changed by compact: [part='rename-button']'s min-inline-size/min-block-size
-     (the shared --lr-icon-button-size target floor -- a density flag must never silently opt a row
-     out of it; a consumer who really wants a sub-floor row lowers that token at an ancestor),
-     [part='start']'s min sizes, and the excerpt/timestamp font sizes (already the smallest steps
-     in use here; font size is retuned through the host's inherited font-size instead). The excerpt
-     also stays visible: it is already single-line ellipsised and ?hidden-bindable per row, so it
-     costs exactly one line -- hiding content is a per-row consumer decision, not a side effect of a
-     density flag. */
   :host([compact]) [part='base'] {
     padding: var(--lr-conversation-item-compact-padding, var(--lr-space-xs) var(--lr-space-s));
     gap: var(--lr-conversation-item-compact-gap, var(--lr-space-2xs));
@@ -57,28 +32,20 @@ import{css}from"lit";const styles=css`
   :host(:hover) [part='base'] {
     background: color-mix(in srgb, var(--lr-color-text) 6%, transparent);
   }
-  /* Pressed. Note the two very different selectors here: :host(:active) is the transient
-     pointer/keyboard press, :host([active]) below is "this is the open session". The press tint is
-     the hover tint escalated to --lr-color-mix-active, mixed toward --lr-color-mix-partner (which
-     tracks the text color) so it moves in the right direction on a light and a dark surface alike.
-     [part='base'] is a plain wrapper div, but :active propagates from the pressed [part='select-button']
-     inside it up through the host, so the whole row answers a press the way it answers hover. */
   :host(:active) [part='base'] {
     background: color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active));
   }
-  /* Placed after the :hover and :active rules (equal selector specificity) so an
-     active-and-hovered row keeps the stronger active tint instead of the
-     two backgrounds visually competing. */
   :host([active]) [part='base'] {
     background: var(--lr-conversation-item-active-bg, var(--lr-color-brand-quiet));
   }
+  :host([active]:active) [part='base'] {
+    background: color-mix(
+      in oklab,
+      var(--lr-conversation-item-active-bg, var(--lr-color-brand-quiet)),
+      var(--lr-color-mix-partner) var(--lr-color-mix-active)
+    );
+  }
 
-  /* text-quiet's contrast ratio against brand-quiet lands at ~4.25:1 --
-     just under the WCAG AA 4.5:1 floor for normal-size text -- even though
-     it comfortably passes against the plain (non-active) background used
-     the rest of the time. Same class of bug already hit and fixed in
-     lr-attachment-chip's [part='size'] and lr-chat-message's
-     [part='footer']; same fix, full-strength text color once active. */
   :host([active]) [part='excerpt'],
   :host([active]) [part='timestamp'] {
     color: var(--lr-conversation-item-active-color, var(--lr-color-text));
@@ -91,7 +58,7 @@ import{css}from"lit";const styles=css`
     flex: 1 1 auto;
     min-inline-size: 0;
     cursor: pointer;
-    outline: none; /* the visible ring below targets [part='select-button'] directly */
+    outline: none; 
     -webkit-tap-highlight-color: transparent;
   }
   [part='start'] {
@@ -117,9 +84,6 @@ import{css}from"lit";const styles=css`
     flex-direction: column;
     gap: var(--lr-size-0-125rem);
   }
-  /* The label/excerpt/meta column's own inter-row gap collapses entirely under compact -- the three
-     lines already carry their own line-height, so the extra hairline is the first thing to go. No
-     var() hatch here: this one has no smaller step left to retune to. */
   :host([compact]) [part='content'] {
     gap: 0;
   }
@@ -158,13 +122,6 @@ import{css}from"lit";const styles=css`
     color: var(--lr-color-text-quiet);
     font-size: var(--lr-font-size-sm);
   }
-  /* Needed because of the unconditional display: block above -- an author-origin declaration
-     always beats the UA stylesheet's [hidden] { display: none }, regardless of specificity, so
-     without this the ?hidden binding on [part='excerpt'] would be a visual no-op. Same reasoning
-     as [part='actions'][hidden] below, and mirrors lr-timeline-item's identical
-     [part='timestamp'][hidden] / [part='description'][hidden] rules for its own slot-wins-over-
-     property parts. [part='meta'] doesn't need the same override -- it has no author display
-     declaration of its own, so the UA stylesheet's default [hidden] handling already applies. */
   [part='excerpt'][hidden] {
     display: none;
   }
@@ -178,9 +135,6 @@ import{css}from"lit";const styles=css`
     font-variant-numeric: tabular-nums;
   }
 
-  /* A conversation-item row has real room (unlike a compact chip pill) -- the rename button gets
-     the full shared --lr-icon-button-size floor directly, no capped/split-glyph compromise
-     needed. */
   [part='rename-button'] {
     flex: 0 0 auto;
     display: inline-flex;