@rtc-agent/component 0.2.7-rc.2 → 0.2.7-rc.4

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:
+ *   ┌──────────────────┐
+ *   │ 复制             │
+ *   │ 分叉             │
+ *   │ 重试  (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;
+    /** 格式化时间戳为紧凑格式（委托给共享工具函数） */
+    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,6BAA6B;IAC7B,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,202 @@
+/**
+ * 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 (时间线布局)
+ *
+ * DOM 结构：
+ *   .timeline-item (position: relative, padding-left 给 dot + 竖线留位)
+ *     ├── .timeline-dot          (absolute, 与竖线共享 left 参考系)
+ *     ├── ::before               (竖线, 绝对定位伪元素)
+ *     └── .timeline-content
+ *           └── div              (rendered-HTML 包裹层)
+ *                 └── <p>/<h1>/... (Markdown 渲染出的块级元素)
+ *
+ * 对齐原理（详见 rtc-message.styles.ts 注释）：
+ *   - 竖线 center X = 15px（left: 14px + width 2px 的一半）
+ *   - dot center X    = 15px（left: 15px + translateX(-50%)）
+ *   - dot center Y    ≈ 首行文本行高中点 Y（top: 9px，基于默认 token 计算）
+ *
+ * @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;
+    /**
+     * Markdown 经 marked + DOMPurify 处理后得到的安全 HTML 字符串。
+     *
+     * 为什么需要这个中间 state，而不是直接渲染 message.content？
+     * 1. marked + DOMPurify 通过动态 import 懒加载（首次加载是异步的）
+     * 2. 解析结果需要在异步完成后才可用
+     * 3. 使用 @state 让结果可用时自动触发重渲染
+     */
+    private _renderedHtml;
+    /**
+     * Thinking 内容的折叠状态。
+     *
+     * 默认折叠（false）。streaming 期间用户可以手动展开查看实时思考过程，
+     * streaming 结束后保持用户的当前选择，不自动切换。
+     */
+    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;
+    /**
+     * 只在 message 变化时重新解析 Markdown。
+     *
+     * 为什么不监听所有属性？
+     * - isLast 只影响外层 class（success 状态），不影响内容渲染
+     * - 监听所有属性会导致 isLast 变化时也重新跑一遍 marked + DOMPurify，浪费性能
+     */
+    willUpdate(changed: Map<string, unknown>): void;
+    private _parseMarkdown;
+    /**
+     * 对 Markdown 渲染出的所有 <pre><code> 块应用 highlight.js 语法高亮。
+     *
+     * 流程：
+     *   1. DOMParser 把 HTML 字符串解析成 DOM
+     *   2. 遍历所有 <pre><code> 元素
+     *   3. 调用 hljs.highlightElement()，它会根据 <code> 的 class
+     *      （如 language-javascript）选择语言，否则自动检测
+     *   4. 序列化回 HTML 字符串
+     *
+     * 为什么用 DOMParser 而不是正则？
+     *   - 正则无法正确处理嵌套标签、HTML 实体、language hint 属性
+     *   - DOMParser 由浏览器原生实现，性能足够（代码块不会很大）
+     *   - highlight.js 的官方 API 就是面向 DOM 元素的 highlightElement()
+     */
+    private _highlightCodeBlocks;
+    /**
+     * 当前消息是否为思考类型（content.type === 'thinking'）。
+     * 思考类型消息渲染为可折叠区域，而非直接展示 Markdown。
+     */
+    private get _isThinkingContent();
+    /**
+     * 当前消息是否是压缩摘要（content.type === 'summary'）。
+     * 压缩摘要渲染为不可折叠的指示块：streaming 态显示"正在压缩"，
+     * 完成态显示释放/增加的 token 数。
+     */
+    private get _isSummaryContent();
+    /**
+     * 当前消息是否是 prompt 类型（content.type === 'prompt'）。
+     * Prompt 消息渲染为特殊卡片，而非 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;
+    /**
+     * 点击 timeline-dot：复制消息内容到剪贴板
+     */
+    private _handleDotClick;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * 渲染思考内容块（可折叠）。
+     *
+     * 折叠态：显示 header 行（chevron + "思考过程"），内容隐藏。
+     * 展开态：header 行 + 下方渲染 Markdown 内容。
+     */
+    private _renderThinkingBlock;
+    /**
+     * 渲染压缩摘要块（不可折叠）。
+     *
+     * streaming 态：显示"正在压缩上下文..."。
+     * 完成态：显示"已压缩上下文 · 释放/增加 X token"。
+     *
+     * 不再展示压缩后的摘要内容，用户无需阅读；
+     * 只关注"正在压缩"和"释放了多少 token"两个信号。
+     */
+    private _renderSummaryBlock;
+    /**
+     * 渲染 prompt 内容块（不可折叠）。
+     *
+     * 显示格式：
+     *   SCENARIOS  $title
+     *   [提示词预览 max-height:3行]
+     *
+     * 设计决策：
+     * - 不支持展开：系统提示词用户无需阅读完整内容
+     * - 使用左边框而非全边框：视觉上更轻盈（与 summary-block 的全边框区分）
+     * - 预览区域限制为 3 行：节省空间
+     * - 使用 <pre> 渲染 prompt 文本：保留原始格式（换行、缩进），
+     *   同时避免 HTML 注入（prompt 内容可能包含 < 和 > 字符）
+     * - 自动支持暗色主题（使用 --rtc-* CSS 变量）
+     */
+    private _renderPromptBlock;
+    /**
+     * 从 message.content.data 提取压缩统计信息。
+     *
+     * 兼容两种数据格式：
+     *   - 新格式：SummaryContent { items, metadata }
+     *   - 旧格式：SummaryItem[]（无 metadata，返回全 0）
+     */
+    private _extractSummaryStats;
+    /**
+     * 格式化 token 数量，使用 K/B/T 单位。
+     *
+     * 规则：
+     * - < 1000: 显示原数（如 500）
+     * - < 1M: 显示 K（如 12.5K）
+     * - < 1B: 显示 M（如 1.5M）
+     * - >= 1B: 显示 B（如 2.3B）
+     * - >= 1T: 显示 T（如 1.2T）
+     */
+    private _formatTokens;
+    /**
+     * 格式化持续时间。
+     *
+     * 规则：
+     * - < 1000ms: 显示 ms（如 500ms）
+     * - < 60s: 显示 s（如 3.5s）
+     * - >= 60s: 显示 m s（如 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;;;;;OAKG;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;YAS1B,cAAc;IA+E5B;;;;;;;;;;;;;;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,2BAkgBlB,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"}