@rtc-agent/component 0.2.7-rc.3 → 0.2.8-rc.0

package/dist/components/content-area/rtc-message-list.d.ts

@@ -0,0 +1,251 @@
+/**
+ * RTC Message List Component
+ *
+ * Renders messages in a scrollable container with timeline layout.
+ * Each `<rtc-message-list>` subscribes directly to `MessageRepository` for a
+ * specific `sessionId`. This allows multiple instances to coexist (e.g. one per
+ * open tab) without relying on a shared `MessageContext`.
+ *
+ * ## Auto-scroll mechanism (Intent-Based Architecture)
+ *
+ * Auto-scroll is controlled by a **computed property** `_shouldAutoScroll()` that
+ * combines geometric state (`_userAtBottom`) with behavioral intent (`_followInvalidatedUntil`):
+ *
+ * 1. **`_userAtBottom`** (geometric, `@state`): updated by `_onScroll` on every scroll event.
+ *    `distanceFromBottom < AT_BOTTOM_THRESHOLD_PX (300)` → true.
+ *
+ * 2. **`_followInvalidatedUntil`** (behavioral, plain field): set ONLY by user input events
+ *    (wheel, touchstart, pointerdown, keydown) to `Date.now() + 450ms`. Self-expires after
+ *    450ms of user inactivity. Programmatic scrolls do NOT modify this field.
+ *
+ * 3. **`_shouldAutoScroll()`** = `_userAtBottom && Date.now() >= _followInvalidatedUntil`.
+ *    Called by `updated()`, `_scheduleScroll()`, ResizeObserver.
+ *
+ * 4. **ResizeObserver** handles async content (Markdown rendering, thinking expansion).
+ *    Scrolls to bottom only if `_shouldAutoScroll()` is true.
+ *
+ * @element rtc-message-list
+ * @csspart scroll - The scroll container
+ * @csspart inner - The inner message container
+ */
+import { LitElement } from 'lit';
+import type { MessageController } from '../../controllers/message.controller.js';
+import type { Message } from '../../types/index.js';
+import './rtc-message.js';
+import './rtc-user-message.js';
+import './rtc-toolcall-card.js';
+import './rtc-toolcall-reply.js';
+import './rtc-error-message.js';
+export declare class RtcMessageList extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Session ID for this message list instance. */
+    sessionId: string | null;
+    /** Message controller for accessing repository. */
+    messageController?: MessageController;
+    private _localeCtx;
+    private _settingsCtx;
+    /** Unsubscribe function returned by MessageRepository.subscribe(). */
+    private _subscription?;
+    /** Messages for the current session (driven by repository subscription). */
+    private _messages;
+    /** Whether older messages are available (backward pagination). */
+    private _hasMore;
+    private _showNewBtn;
+    private _userAtBottom;
+    /**
+     * Follow-invalidation timestamp for auto-scroll.
+     *
+     * **Behavioral intent**, NOT scroll position. Set ONLY by user input events
+     * (wheel, touchstart, pointerdown, keydown) via `_setupFollowInvalidation()`.
+     *
+     * When `Date.now() < _followInvalidatedUntil`, auto-scroll is suppressed.
+     * After 450ms of user inactivity, it self-expires — no "user stopped scrolling"
+     * detection needed.
+     *
+     * This breaks the feedback loop: programmatic scrolls do NOT modify this field,
+     * so they cannot re-enable auto-scroll against user intent.
+     *
+     * Consumed by: `_shouldAutoScroll()` method (computed property).
+     */
+    private _followInvalidatedUntil;
+    private _scrollEl?;
+    private _resizeObserver?;
+    private _resizeDebounceTimer?;
+    /** Document visibility change listener for browser window blur/focus */
+    private _documentVisibilityHandler?;
+    /** Tracked short-lived timers — cleared in disconnectedCallback to prevent leaks. */
+    private _virtualScrollOpTimer?;
+    private _highlightTimer?;
+    private _scrollToMessageTimer?;
+    private _scrollToBottomTimer?;
+    /** Virtual scroll instance for efficient rendering */
+    private _virtualScroll?;
+    /** Flag to prevent ResizeObserver feedback loop during virtual scroll operations */
+    private _isVirtualScrollOperation;
+    /**
+     * Monotonically increasing version counter for scroll debouncing.
+     * Each scroll request increments and captures the current value.
+     * Before executing, the async scroll checks if its version is still current.
+     * A newer request invalidates older ones -- no boolean flag needed.
+     */
+    private _scrollVersion;
+    get messages(): Message[];
+    /**
+     * Public API: scroll to the bottom of the message list.
+     * Called by parent components (e.g., rtc-content-area) when needed.
+     */
+    scrollToBottom(): void;
+    /**
+     * Public API: scroll to a specific message by clientId.
+     * Called by parent components to navigate to a particular message.
+     *
+     * Phase 5 (I3): Enhanced with debounce and skeleton awareness.
+     * - Debounces rapid successive calls (100ms)
+     * - If target is a skeleton placeholder, sync-restores it first
+     * - Falls back to DOM query if virtual scroll is not initialized
+     */
+    scrollToMessage(clientId: string): void;
+    private _doScrollToMessage;
+    firstUpdated(): void;
+    /**
+     * Subscribe to MessageRepository for the current session.
+     * Called on firstUpdated and when sessionId changes.
+     */
+    private _subscribeToSession;
+    /**
+     * Handle messages update from repository subscription.
+     * Simplified: just call setItems, which handles all diff logic internally.
+     */
+    private _handleMessagesUpdate;
+    /**
+     * Auto-scroll decision point.
+     *
+     * The component is responsible for its own scrolling. It does not analyze
+     * what kind of change happened (growth, shrink, reorder, toolcall merge, etc.).
+     * It only asks two questions:
+     *
+     * 1. **Did messages change?** (`_messages` changed) → if following, scroll to bottom.
+     * 2. **Did session change?** (`sessionId` changed) → reset follow intent to true,
+     *    then scroll to bottom (user expects to see latest messages in a new session).
+     *
+     * Async content rendering (Markdown, tool call expansion) is handled by
+     * ResizeObserver, which scrolls when the inner container size changes.
+     *
+     * Load-more (prepend) is a special case: preserve scroll position via anchor.
+     */
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    /**
+     * Tab visibility handler - called by parent component when tab switches.
+     *
+     * This is the primary mechanism for the visibility state machine:
+     * - When Tab becomes active: setVisibility(true) → VISIBLE state
+     * - When Tab becomes inactive: setVisibility(false) → HIDDEN state
+     *
+     * The state machine ensures:
+     * - HIDDEN: pauses all skeletonize/restore operations (prevents bug)
+     * - VISIBLE: synchronously rebuilds skeleton positions and restores visible skeletons
+     *
+     * @param visible - Whether the tab is currently visible (active)
+     */
+    onTabVisibilityChange(visible: boolean): void;
+    /**
+     * Computed property: whether auto-scroll should fire.
+     *
+     * Combines geometric state (`_userAtBottom`) with behavioral intent
+     * (`_followInvalidatedUntil`). This is NOT a stored field — it's computed
+     * on every access, so there's no state to manage and no feedback loop possible.
+     *
+     * Architecture: mirrors Telegram's `scrolledDown && Date.now() >= streamFollowInvalidatedUntil`.
+     */
+    private _shouldAutoScroll;
+    /**
+     * Schedule a scroll-to-bottom after the current render completes.
+     *
+     * Uses a version counter for clean debouncing:
+     * - Each call increments `_scrollVersion`
+     * - The async callback captures its version
+     * - If version is stale when callback runs, a newer request has superseded it
+     *
+     * Waits for:
+     * 1. `this.updateComplete` -- this component's render is done (new message
+     *    element is in the DOM)
+     * 2. All child message elements' `updateComplete` -- their first render
+     *    (empty content for async Markdown, complete for sync components)
+     *
+     * Note: async Markdown rendering (marked + DOMPurify + highlight.js) happens
+     * AFTER the child's first `updateComplete` resolves. The ResizeObserver is the
+     * safety net that scrolls again when the content actually renders and the inner
+     * container size changes.
+     */
+    private _scheduleScroll;
+    private _scrollToBottom;
+    /**
+     * Set scroll position. _onScroll always processes scroll events normally
+     * (geometric state update). After programmatic scroll to bottom, _onScroll
+     * calculates distanceFromBottom ≈ 0 and sets _userAtBottom = true — the same
+     * value _scrollToBottom() would set. No suppression needed.
+     *
+     * The virtual scroll's scroll handler may fire, but it has its own guards
+     * (1.5s debounce, stability checks, _isVirtualScrollOperation) so this is harmless.
+     */
+    private _setScrollPositionSilently;
+    /**
+     * Register user input event listeners to invalidate follow intent.
+     *
+     * Architecture: mirrors Telegram's `streamFollowInvalidatedUntil` pattern.
+     * Any user input (wheel, touchstart, pointerdown, keydown) extends the
+     * invalidation timestamp by 450ms. Every auto-scroll check reads
+     * `Date.now() < _followInvalidatedUntil` — if the user touched anything
+     * in the last 450ms, the follow is skipped.
+     *
+     * This is the key mechanism that breaks the feedback loop:
+     * - User intent is detected from INPUT EVENTS, not scroll position
+     * - Programmatic scrolls do NOT fire wheel/touchstart/pointerdown/keydown
+     * - Therefore programmatic scrolls cannot re-enable auto-scroll
+     */
+    private _setupFollowInvalidation;
+    private _onScroll;
+    /**
+     * Handle virtual scroll's onLoadMore callback.
+     * Triggers load-more from repository. The actual prepend/append is handled by
+     * _handleMessagesUpdate via repository subscription.
+     * Returns empty array since we don't prepend/append here.
+     *
+     * IMPORTANT: For bottom direction, first check if repository has messages
+     * after the current window (from viewport slicing). If yes, return them
+     * directly from cache instead of going to DB.
+     */
+    private _handleVirtualScrollLoadMore;
+    /**
+     * Render a message element for virtual scroll.
+     * Toolcall input renders as a card; output renders as a reply with jump.
+     */
+    private _renderMessageElement;
+    /**
+     * Update a message element in-place with new data.
+     * Preserves DOM state (rendered Markdown) to prevent flicker during streaming.
+     * Lit's property setter triggers requestUpdate() → lit-html diffing for efficient updates.
+     */
+    private _updateMessageElement;
+    /**
+     * Guard: prevents _onScroll from modifying geometric state (_userAtBottom)
+     * during programmatic smooth scroll-to-bottom (initiated by _handleNewBtnClick).
+     * Without this, _onScroll fires mid-animation and may cause UI flicker
+     * (showNewBtn toggling) as the scroll position passes through non-bottom areas.
+     */
+    private _scrollingToBottom;
+    private _handleNewBtnClick;
+    /**
+     * Handle toolcall jump: scroll to the input message and highlight it.
+     * Triggered by clicking the reply header in rtc-toolcall-reply.
+     */
+    private _handleToolcallJump;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtc-message-list': RtcMessageList;
+    }
+}
+//# sourceMappingURL=rtc-message-list.d.ts.map

package/dist/components/content-area/rtc-message-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-message-list.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-message-list.ts"],"names":[],"mappings":"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"}

package/dist/components/content-area/rtc-message-list.skeleton-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Skeleton screen styles for message placeholders
+ *
+ * Provides shimmer animation and visual structure for skeleton screens.
+ * Imported and applied by rtc-message-list component.
+ *
+ * Phase 4 (I3 fix): Theme-aware colors using CSS custom properties.
+ */
+/**
+ * Skeleton screen CSS styles
+ */
+export declare const skeletonStyles: import("lit").CSSResult;
+//# sourceMappingURL=rtc-message-list.skeleton-styles.d.ts.map

package/dist/components/content-area/rtc-message-list.skeleton-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-message-list.skeleton-styles.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-message-list.skeleton-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH;;GAEG;AACH,eAAO,MAAM,cAAc,yBAwL1B,CAAC"}

package/dist/components/content-area/rtc-message-list.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=rtc-message-list.styles.d.ts.map

package/dist/components/content-area/rtc-message-list.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-message-list.styles.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-message-list.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2FlB,CAAC"}

package/dist/components/content-area/rtc-message-more-menu.d.ts

@@ -0,0 +1,35 @@
+/**
+ * RTC Message More Menu Component
+ *
+ * A context menu that appears when the user clicks the more button on a
+ * user message bubble. Provides options: copy, fork, and retry (failed only).
+ *
+ * Layout:
+ *   ┌──────────────────┐
+ *   │ Copy             │
+ *   │ Fork             │
+ *   │ Retry  (failed)  │
+ *   ├──────────────────┤
+ *   │ MM-DD HH:mm      │
+ *   └──────────────────┘
+ *
+ * @element rtc-message-more-menu
+ */
+import { LitElement } from 'lit';
+import type { SyncStatus } from '../../types/index.js';
+export declare class RtcMessageMoreMenu extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _localeCtx;
+    syncStatus: SyncStatus;
+    timestamp: number;
+    /** Format timestamp to compact format (delegates to shared utility function) */
+    private get _formattedTimestamp();
+    private _handleSelect;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtc-message-more-menu': RtcMessageMoreMenu;
+    }
+}
+//# sourceMappingURL=rtc-message-more-menu.d.ts.map

package/dist/components/content-area/rtc-message-more-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-message-more-menu.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-message-more-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,qBAEa,kBAAmB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,0BAoDX;IAIF,OAAO,CAAC,UAAU,CAMhB;IAGF,UAAU,EAAE,UAAU,CAAY;IAGlC,SAAS,SAAK;IAEd,gFAAgF;IAChF,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,CAAC,aAAa;IAUrB,MAAM;CAiBT;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;CACJ"}

package/dist/components/content-area/rtc-message.d.ts

@@ -0,0 +1,208 @@
+/**
+ * RTC Message Component
+ *
+ * Renders a single AI message with timeline dot and Markdown content.
+ * Supports thinking, streaming, and success states.
+ *
+ * Markdown parsing is lazy-loaded (Lit best-practice 7-3).
+ *
+ * ## Layout model (Timeline layout)
+ *
+ * DOM structure:
+ *   .timeline-item (position: relative, padding-left reserves space for dot + vertical line)
+ *     ├── .timeline-dot          (absolute, shares left reference frame with the vertical line)
+ *     ├── ::before               (vertical line, absolutely positioned pseudo-element)
+ *     └── .timeline-content
+ *           └── div              (rendered-HTML wrapper layer)
+ *                 └── <p>/<h1>/... (block-level elements produced by Markdown rendering)
+ *
+ * Alignment principle (see rtc-message.styles.ts comments for details):
+ *   - vertical line center X = 15px (left: 14px + half of width 2px)
+ *   - dot center X             = 15px (left: 15px + translateX(-50%))
+ *   - dot center Y             ≈ first-line text line-height midpoint Y (top: 9px, based on default token calculation)
+ *
+ * @element rtc-message
+ * @csspart dot - The timeline dot
+ * @csspart content - The message content area
+ */
+import { LitElement } from 'lit';
+import type { Message } from '../../types/index.js';
+import type { StatefulComponent } from '../../utils/message-virtual-scroll.js';
+export declare class RtcMessage extends LitElement implements StatefulComponent {
+    static styles: import("lit").CSSResult[];
+    private _localeCtx;
+    message: Message;
+    isLast: boolean;
+    /**
+     * Safe HTML string produced by processing Markdown through marked + DOMPurify.
+     *
+     * Why is this intermediate @state needed instead of rendering message.content directly?
+     * 1. marked + DOMPurify are lazy-loaded via dynamic import (first load is async)
+     * 2. Parse results are only available after async completion
+     * 3. Using @state triggers automatic re-render when results become available
+     */
+    private _renderedHtml;
+    /**
+     * Collapse state for thinking content.
+     *
+     * Default collapsed (false). During streaming, user can manually expand to view
+     * real-time thinking process. After streaming ends, the user's current choice
+     * is preserved without automatic switching.
+     */
+    private _thinkingExpanded;
+    /**
+     * Generation counter — ensures stale parse results (from earlier content
+     * versions during streaming) never overwrite newer ones. Each call to
+     * `_parseMarkdown()` bumps the counter; if the result arrives when the
+     * counter has moved on, it is discarded.
+     *
+     * The marked + dompurify module imports are cached after first load, so
+     * subsequent parses only pay for parsing + sanitizing, not network I/O.
+     */
+    private _parseGeneration;
+    private _modulesPromise;
+    /**
+     * Last parsed content string — used to detect if content actually changed.
+     * This prevents unnecessary re-parsing when:
+     * 1. Component is restored from skeleton (content unchanged, use cached HTML)
+     * 2. Other message fields change (syncStatus, streaming) but content is same
+     *
+     * Only when content.data changes (streaming updates) do we need to re-parse.
+     */
+    private _lastParsedContent;
+    /**
+     * Only re-parse Markdown when message changes.
+     *
+     * Why not watch all properties?
+     * - isLast only affects outer class (success state), not content rendering
+     * - Watching all properties would cause marked + DOMPurify to re-run on isLast changes, wasting performance
+     */
+    willUpdate(changed: Map<string, unknown>): void;
+    /**
+     * Lazy-load marked + DOMPurify + highlight.js with retry logic.
+     * Handles stale chunk errors during development (when rebuilds change chunk hashes).
+     */
+    private _loadModulesWithRetry;
+    private _parseMarkdown;
+    /**
+     * Apply highlight.js syntax highlighting to all <pre><code> blocks from Markdown rendering.
+     *
+     * Flow:
+     *   1. DOMParser parses HTML string into DOM
+     *   2. Iterate all <pre><code> elements
+     *   3. Call hljs.highlightElement(), which selects language based on <code>'s class
+     *      (e.g. language-javascript), otherwise auto-detects
+     *   4. Serialize back to HTML string
+     *
+     * Why use DOMParser instead of regex?
+     *   - Regex cannot correctly handle nested tags, HTML entities, language hint attributes
+     *   - DOMParser is natively implemented by the browser, performance is sufficient (code blocks aren't large)
+     *   - highlight.js's official API is the DOM-element-oriented highlightElement()
+     */
+    private _highlightCodeBlocks;
+    /**
+     * Whether the current message is thinking type (content.type === 'thinking').
+     * Thinking type messages render as collapsible sections, not direct Markdown display.
+     */
+    private get _isThinkingContent();
+    /**
+     * Whether the current message is a compression summary (content.type === 'summary').
+     * Compression summaries render as non-collapsible indicator blocks: streaming state shows "compressing",
+     * completed state shows released/increased token count.
+     */
+    private get _isSummaryContent();
+    /**
+     * Whether the current message is prompt type (content.type === 'prompt').
+     * Prompt messages render as special cards, not Markdown.
+     */
+    private get _isPromptContent();
+    private _toggleThinking;
+    /**
+     * Extract component state for preservation across virtualization.
+     * Called by MessageVirtualScroll before destroying the element.
+     *
+     * Preserved state:
+     * - renderedHtml: Cached Markdown HTML (avoids re-parsing on restore)
+     * - thinkingExpanded: User's expand/collapse preference for thinking blocks
+     */
+    getState(): Record<string, unknown>;
+    /**
+     * Inject cached state after restoring from skeleton placeholder.
+     * Called synchronously before first render to avoid flicker.
+     *
+     * @param state - Previously extracted state from getState()
+     */
+    setState(state: Record<string, unknown>): void;
+    /**
+     * On timeline-dot click: copy message content to clipboard
+     */
+    private _handleDotClick;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * Render thinking content block (collapsible).
+     *
+     * Collapsed state: shows header row (chevron + "Thinking process"), content hidden.
+     * Expanded state: header row + Markdown content rendered below.
+     */
+    private _renderThinkingBlock;
+    /**
+     * Render compression summary block (non-collapsible).
+     *
+     * Streaming state: shows "Compressing context...".
+     * Completed state: shows "Compressed context · released/increased X tokens".
+     *
+     * No longer displays the compressed summary content, user doesn't need to read it;
+     * only focuses on two signals: "compressing" and "how many tokens were released".
+     */
+    private _renderSummaryBlock;
+    /**
+     * Render prompt content block (non-collapsible).
+     *
+     * Display format:
+     *   SCENARIOS  $title
+     *   [Prompt preview max-height:3 lines]
+     *
+     * Design decisions:
+     * - No expand support: users don't need to read full system prompt content
+     * - Uses left border instead of full border: visually lighter (distinguished from summary-block's full border)
+     * - Preview area limited to 3 lines: saves space
+     * - Uses <pre> to render prompt text: preserves original formatting (line breaks, indentation),
+     *   while avoiding HTML injection (prompt content may contain < and > characters)
+     * - Automatically supports dark theme (uses --rtc-* CSS variables)
+     */
+    private _renderPromptBlock;
+    /**
+     * Extract compression statistics from message.content.data.
+     *
+     * Compatible with two data formats:
+     *   - New format: SummaryContent { items, metadata }
+     *   - Old format: SummaryItem[] (no metadata, returns all zeros)
+     */
+    private _extractSummaryStats;
+    /**
+     * Format token count using K/B/T units.
+     *
+     * Rules:
+     * - < 1000: show raw number (e.g. 500)
+     * - < 1M: show K (e.g. 12.5K)
+     * - < 1B: show M (e.g. 1.5M)
+     * - >= 1B: show B (e.g. 2.3B)
+     * - >= 1T: show T (e.g. 1.2T)
+     */
+    private _formatTokens;
+    /**
+     * Format duration.
+     *
+     * Rules:
+     * - < 1000ms: show ms (e.g. 500ms)
+     * - < 60s: show s (e.g. 3.5s)
+     * - >= 60s: show m s (e.g. 2m 30s)
+     */
+    private _formatDuration;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtc-message': RtcMessage;
+    }
+}
+//# sourceMappingURL=rtc-message.d.ts.map

package/dist/components/content-area/rtc-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-message.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-message.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAOrC,OAAO,KAAK,EAAC,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;AAI7E,qBAEa,UAAW,SAAQ,UAAW,YAAW,iBAAiB;IACnE,MAAM,CAAC,MAAM,4BAAU;IAIvB,OAAO,CAAC,UAAU,CAMhB;IAGF,OAAO,EAAE,OAAO,CAA4G;IAG5H,MAAM,UAAS;IAEf;;;;;;;OAOG;IAEH,OAAO,CAAC,aAAa,CAAM;IAE3B;;;;;;OAMG;IAEH,OAAO,CAAC,iBAAiB,CAAS;IAElC;;;;;;;;OAQG;IACH,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,eAAe,CAIN;IAEjB;;;;;;;OAOG;IACH,OAAO,CAAC,kBAAkB,CAAc;IAExC;;;;;;OAMG;IACH,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IASxC;;;OAGG;YACW,qBAAqB;YA4BrB,cAAc;IAwE5B;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,oBAAoB;IAQ5B;;;OAGG;IACH,OAAO,KAAK,kBAAkB,GAE7B;IAED;;;;OAIG;IACH,OAAO,KAAK,iBAAiB,GAE5B;IAED;;;OAGG;IACH,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,CAAC,eAAe;IAMvB;;;;;;;OAOG;IACH,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAOnC;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAS9C;;OAEG;YACW,eAAe;IAe7B,MAAM;IAsDN;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IAgB5B;;;;;;;;OAQG;IACH,OAAO,CAAC,mBAAmB;IAuB3B;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;;;;;OAMG;IACH,OAAO,CAAC,oBAAoB;IAc5B;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAkBrB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;CAY1B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,UAAU,CAAC;KAC7B;CACJ"}

package/dist/components/content-area/rtc-message.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=rtc-message.styles.d.ts.map

package/dist/components/content-area/rtc-message.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-message.styles.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,MAAM,2BAmgBlB,CAAC"}

package/dist/components/content-area/rtc-scroll-container.d.ts

@@ -0,0 +1,44 @@
+/**
+ * RTC Scroll Container Component
+ *
+ * A reusable wrapper that provides scroll lock functionality for content areas.
+ * Prevents nested scroll conflicts by locking internal scroll by default.
+ *
+ * Features:
+ * - Default locked state with subtle bottom gradient overlay
+ * - Click toggle button to unlock scrolling
+ * - Smooth transitions between locked/unlocked states
+ * - Configurable max-height via CSS variables
+ *
+ * Usage:
+ * ```html
+ * <rtc-scroll-container max-height="var(--rtc-content-height-md)">
+ *   <pre>Long content here...</pre>
+ * </rtc-scroll-container>
+ * ```
+ *
+ * @element rtc-scroll-container
+ * @slot - Default slot for scrollable content
+ * @cssprop --rtc-scroll-max-height-locked - Max height when locked (default: 100px)
+ * @cssprop --rtc-scroll-max-height-unlocked - Max height when unlocked (default: 200px)
+ */
+import { LitElement } from 'lit';
+export declare class RtcScrollContainer extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Initial lock state (default: true = locked) */
+    initialLocked: boolean;
+    /** Whether content is currently scroll-locked */
+    private _scrollLocked;
+    constructor();
+    /** Toggle scroll lock state */
+    private _toggleScrollLock;
+    /** Get current lock state (for external access if needed) */
+    get isLocked(): boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtc-scroll-container': RtcScrollContainer;
+    }
+}
+//# sourceMappingURL=rtc-scroll-container.d.ts.map

package/dist/components/content-area/rtc-scroll-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-scroll-container.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-scroll-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAIrC,qBACa,kBAAmB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,0BAAU;IAEvB,kDAAkD;IAElD,aAAa,UAAQ;IAErB,iDAAiD;IAEjD,OAAO,CAAC,aAAa,CAAQ;;IAO7B,+BAA+B;IAC/B,OAAO,CAAC,iBAAiB;IAIzB,6DAA6D;IAC7D,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,MAAM;CAsBT;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,kBAAkB,CAAC;KAC9C;CACJ"}

package/dist/components/content-area/rtc-scroll-container.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=rtc-scroll-container.styles.d.ts.map

package/dist/components/content-area/rtc-scroll-container.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rtc-scroll-container.styles.d.ts","sourceRoot":"","sources":["../../../src/components/content-area/rtc-scroll-container.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,yBAiFlB,CAAC"}