@lapismd/design-core 0.2.0 → 0.3.0

package/spec/src/styling-and-themes.md

@@ -2,6 +2,13 @@
 
 Design Core styling is native CSS driven by semantic tokens. Themes and consumers may customize documented tokens without depending on private DOM selectors. Diff surfaces read `--ui-diff-*` defaults from `src/shared/diff/diff.tokens.css`.
 
+File Listing exposes `--ui-diff-file-listing-row-gap` (default `2px`) for
+separation between eager and virtualized rows.
+
+Panel Toggle exposes compact button/icon geometry and reversible motion through
+`--ui-panel-toggle-*` tokens imported by the shared stylesheet. Its icon inherits
+currentColor, reduced-motion preferences and Button focus semantics.
+
 ## Public surface coverage
 
 | Surface               | Public boundary | Requirement |
@@ -188,3 +195,7 @@ refuses leftover utilities after native-CSS conversion.
 6. Run `pnpm check:no-tailwind`, focused story checks, and the repository gate.
 
 Dialog recipes consume runtime container and text tokens explicitly defined in the theme so packaged consumers retain geometry without generating Tailwind utilities.
+
+Chat typography exposes `--ui-ai-chat-type-scale` (default 1) on a shared
+ancestor. It scales chat text and text line heights without scaling geometry,
+leaving browser zoom independent and retaining mobile composer minimum sizing.

package/src/shared/ai/chat.css

@@ -80,6 +80,12 @@
   overscroll-behavior: contain;
 }
 
+[data-ui-component="ai-chat-layout"][data-virtualized]
+  [data-ui-part="scroll-shell"]
+  [data-ui-part="scroll-area-thumb"] {
+  transition: background-color 140ms ease;
+}
+
 [data-ui-component="ai-chat-layout"]
   [data-ui-part="scroll-shell"]
   [data-scroll-area-content] {
@@ -349,9 +355,9 @@
 
 [data-ui-component="ai-chat-message"] [data-ui-part="name"] {
   margin-bottom: 0.25rem;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
   font-weight: 600;
-  line-height: 1rem;
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
   color: var(--muted-foreground);
 }
 
@@ -391,8 +397,8 @@
   flex-direction: column;
   overflow-wrap: anywhere;
   border-radius: var(--ui-ai-chat-bubble-radius);
-  font-size: 0.875rem;
-  line-height: 1.375rem;
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.375rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-message-bubble"][data-density="compact"] {
@@ -460,9 +466,9 @@
   height: 1.25rem;
   margin-bottom: -0.375rem;
   align-items: center;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
   font-weight: 600;
-  line-height: 1rem;
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
   color: var(--muted-foreground);
 }
 
@@ -483,7 +489,7 @@
   margin-top: 0.25rem;
   align-items: center;
   gap: 0.375rem;
-  font-size: 0.6875rem;
+  font-size: calc(0.6875rem * var(--ui-ai-chat-type-scale, 1));
   color: var(--muted-foreground);
 }
 
@@ -518,7 +524,7 @@
   justify-content: center;
   gap: 0.625rem;
   color: var(--muted-foreground);
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
   text-align: center;
 }
 
@@ -667,8 +673,8 @@
   margin-inline-start: auto;
   gap: 0.5rem;
   color: var(--muted-foreground);
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-composer"] [data-ui-part="send-actions"] {
@@ -684,8 +690,8 @@
   align-items: center;
   gap: 0.5rem;
   padding-inline: 1rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-composer"]
@@ -782,8 +788,8 @@
   outline: none;
   color: var(--foreground);
   caret-color: var(--ring);
-  font-size: 0.875rem;
-  line-height: 1.375rem;
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.375rem * var(--ui-ai-chat-type-scale, 1));
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
@@ -791,7 +797,7 @@
 @media (pointer: coarse) {
   [data-ui-component="ai-chat-composer-input"] [data-ui-part="editable"],
   [data-ui-component="ai-chat-composer-input"] [data-ui-part="placeholder"] {
-    font-size: max(1rem, 0.875rem);
+    font-size: max(1rem, calc(0.875rem * var(--ui-ai-chat-type-scale, 1)));
   }
 }
 
@@ -807,8 +813,8 @@
   padding: 0.25rem;
   pointer-events: none;
   color: var(--muted-foreground);
-  font-size: 0.875rem;
-  line-height: 1.375rem;
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.375rem * var(--ui-ai-chat-type-scale, 1));
   user-select: none;
 }
 
@@ -892,9 +898,9 @@
   background: var(--secondary);
   padding-inline: 0.45rem;
   color: var(--secondary-foreground);
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
   font-weight: 500;
-  line-height: 1.25rem;
+  line-height: calc(1.25rem * var(--ui-ai-chat-type-scale, 1));
   white-space: nowrap;
   cursor: default;
 }
@@ -946,8 +952,8 @@
   align-items: center;
   justify-self: start;
   gap: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.25rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-composer-drawer"] [data-ui-part="drawer-handle"] {
@@ -991,8 +997,8 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-composer-drawer"]
@@ -1098,7 +1104,7 @@
 
 [data-ui-component="ai-chat-tool-calls"] {
   display: flex;
-  width: min(100%, 42rem);
+  width: var(--ui-ai-chat-tool-width, min(100%, 42rem));
   margin-top: 0.5rem;
   flex-direction: column;
 }
@@ -1112,10 +1118,11 @@
   border: 0;
   background: transparent;
   padding: 0.125rem 0;
+  padding-inline: var(--ui-ai-chat-tool-trigger-padding-inline, 0);
   color: var(--muted-foreground);
   font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
   text-align: left;
   cursor: pointer;
 }
@@ -1138,6 +1145,7 @@
 [data-ui-component="ai-chat-tool-calls"] [data-ui-part="detail-chevron"] {
   width: 0.875rem;
   height: 0.875rem;
+  flex-shrink: 0;
 }
 
 [data-ui-component="ai-chat-tool-calls"] [data-ui-part="chevron"] {
@@ -1171,10 +1179,11 @@
   border-radius: 0.375rem;
   background: transparent;
   padding: 0.125rem 0;
+  padding-inline: var(--ui-ai-chat-tool-trigger-padding-inline, 0);
   color: var(--muted-foreground);
   font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
   text-align: left;
 }
 
@@ -1294,13 +1303,13 @@
 [data-ui-component="ai-chat-tool-calls"] [data-ui-part="error"] {
   margin: 0;
   padding: 0 0.5rem 0.5rem 1.95rem;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-tool-calls"] [data-ai-chat-part="call-detail"] {
   padding: 0.25rem 0 0.5rem 1.375rem;
   color: var(--muted-foreground);
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 @keyframes ui-ai-chat-pulse {
@@ -1320,8 +1329,8 @@
   margin-block-start: 0.5rem;
 }
 
-[data-ui-component="ai-chat-reasoning"]
-  [data-ai-chat-part="reasoning-trigger"] {
+[data-ui-component="ai-chat-reasoning"] [data-ai-chat-part="reasoning-trigger"],
+[data-ui-component="ai-chat-reasoning"] [data-ai-chat-part="reasoning-status"] {
   display: flex;
   width: 100%;
   min-height: 1.75rem;
@@ -1335,6 +1344,10 @@
   cursor: pointer;
 }
 
+[data-ui-component="ai-chat-reasoning"] [data-ai-chat-part="reasoning-status"] {
+  cursor: default;
+}
+
 [data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-icon"],
 [data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-chevron"] {
   width: 0.875rem;
@@ -1349,7 +1362,7 @@
   align-items: center;
   gap: 0.25rem;
   overflow: hidden;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-label"] {
@@ -1357,14 +1370,36 @@
   font-weight: 500;
 }
 
-[data-ui-component="ai-chat-reasoning"][data-streaming="true"]
-  [data-ui-part="reasoning-label"] {
-  animation: ui-ai-chat-pulse 1.5s ease-in-out infinite;
+@keyframes ui-ai-chat-reasoning-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
 }
 
-[data-ui-component="ai-chat-reasoning"][data-streaming="true"]
-  [data-ui-part="reasoning-icon"] {
-  animation: ui-ai-chat-spin 1s linear infinite;
+@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
+  [data-ui-component="ai-chat-reasoning"][data-streaming="true"]
+    [data-ui-part="reasoning-icon"] {
+    animation: ui-ai-chat-spin 1s linear infinite;
+  }
+
+  @supports (background-clip: text) {
+    [data-ui-component="ai-chat-reasoning"][data-streaming="true"]
+      [data-ui-part="reasoning-label"] {
+      background-image: linear-gradient(
+        110deg,
+        var(--ui-ai-chat-reasoning-accent) 35%,
+        var(--foreground) 50%,
+        var(--ui-ai-chat-reasoning-accent) 65%
+      );
+      background-size: 250% 100%;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: ui-ai-chat-reasoning-shimmer 2s linear infinite;
+    }
+  }
 }
 
 [data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-duration"],
@@ -1399,7 +1434,7 @@
   border-left: 2px solid var(--border);
   padding-left: 0.75rem;
   color: var(--muted-foreground);
-  font-size: 0.8125rem;
+  font-size: calc(0.8125rem * var(--ui-ai-chat-type-scale, 1));
   line-height: 1.5;
 }
 
@@ -1409,7 +1444,7 @@
   align-items: center;
   gap: 0.5rem;
   color: var(--muted-foreground);
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-typing-indicator"] [data-ui-part="typing-dots"] {
@@ -1453,7 +1488,7 @@
 
 [data-ui-component="ai-chat-unread-divider"] [data-ui-part="unread-label"] {
   flex: none;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
   font-weight: 700;
 }
 
@@ -1481,14 +1516,14 @@
   width: 2rem;
   height: 2rem;
   padding: 0;
-  font-size: 1.125rem;
+  font-size: calc(1.125rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-emoji-picker"] [data-ui-part="emoji-empty"] {
   margin: 0;
   padding: 0.5rem 0.25rem;
   color: var(--muted-foreground);
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-reaction-bar"] {
@@ -1509,7 +1544,7 @@
   border-radius: 999px;
   background: var(--ui-ai-chat-reaction-background);
   padding-inline: 0.5rem;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
 }
 
 [data-ui-component="ai-chat-reaction-bar"]

package/src/shared/ai/chat.tokens.ts

@@ -1,5 +1,6 @@
 /** CSS custom properties owned by the AI Chat family. */
 export const chatTokenNames = {
+  typeScale: "--ui-ai-chat-type-scale",
   maxContentWidth: "--ui-ai-chat-max-content-width",
   compactGap: "--ui-ai-chat-compact-gap",
   balancedGap: "--ui-ai-chat-balanced-gap",

package/src/shared/ai/experimental/emoji-picker/EmojiPicker.svelte

@@ -77,6 +77,25 @@
     setOpen(false);
   }
 
+  function gridButtons(): HTMLButtonElement[] {
+    const root = gridRef ?? ref;
+    return Array.from(
+      root?.querySelectorAll<HTMLButtonElement>("[data-emoji]") ?? [],
+    );
+  }
+
+  function focusGridButton(index: number): boolean {
+    const buttons = gridButtons();
+    const target = buttons[Math.min(buttons.length - 1, Math.max(0, index))];
+    target?.focus();
+    return Boolean(target);
+  }
+
+  function moveSearchFocusToGrid(event: KeyboardEvent): void {
+    if (event.key !== "ArrowDown") return;
+    if (focusGridButton(0)) event.preventDefault();
+  }
+
   function moveGridFocus(event: KeyboardEvent): void {
     if (
       ![
@@ -90,9 +109,7 @@
     ) {
       return;
     }
-    const buttons = Array.from(
-      gridRef?.querySelectorAll<HTMLButtonElement>("[data-emoji]") ?? [],
-    );
+    const buttons = gridButtons();
     if (buttons.length === 0) return;
     const current = Math.max(
       0,
@@ -111,9 +128,7 @@
                 ? -current
                 : buttons.length - 1 - current;
     event.preventDefault();
-    buttons[
-      Math.min(buttons.length - 1, Math.max(0, current + offset))
-    ]?.focus();
+    focusGridButton(current + offset);
   }
 </script>
 
@@ -146,6 +161,7 @@
           bind:value={query}
           aria-label={searchLabel}
           placeholder={searchLabel}
+          onkeydown={moveSearchFocusToGrid}
         />
         {#if visible.length === 0}
           <p data-ui-part="emoji-empty">No emoji match “{query.trim()}”.</p>

package/src/shared/ai/experimental/reasoning/Reasoning.svelte

@@ -19,7 +19,8 @@
     ...restProps
   }: HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
-    children: Snippet;
+    /** Omit children for a non-interactive progress indicator. */
+    children?: Snippet;
     /** Plain-text summary shown on the collapsed row. */
     preview?: string;
     label?: string;
@@ -45,26 +46,35 @@
   data-streaming={streaming}
   aria-busy={streaming}
 >
-  <Collapsible.Root open={expanded} onOpenChange={setExpanded}>
-    <Collapsible.Trigger data-ai-chat-part="reasoning-trigger">
+  {#if children}
+    <Collapsible.Root open={expanded} onOpenChange={setExpanded}>
+      <Collapsible.Trigger data-ai-chat-part="reasoning-trigger">
+        <CircleDashedIcon data-ui-part="reasoning-icon" aria-hidden="true" />
+        <span data-ui-part="reasoning-row">
+          <span data-ui-part="reasoning-label">{label}</span>
+          {#if duration && !streaming}
+            <span data-ui-part="reasoning-separator" aria-hidden="true">·</span>
+            <span data-ui-part="reasoning-duration">{duration}</span>
+          {/if}
+          {#if preview && !expanded && !streaming}
+            <span data-ui-part="reasoning-separator" aria-hidden="true">—</span>
+            <span data-ui-part="reasoning-preview">{preview}</span>
+          {/if}
+        </span>
+        <ChevronDownIcon data-ui-part="reasoning-chevron" aria-hidden="true" />
+      </Collapsible.Trigger>
+      <Collapsible.Content data-ai-chat-part="reasoning-content">
+        <div data-ui-part="reasoning-content-inner">
+          {@render children()}
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  {:else}
+    <div data-ai-chat-part="reasoning-status" role="status">
       <CircleDashedIcon data-ui-part="reasoning-icon" aria-hidden="true" />
       <span data-ui-part="reasoning-row">
         <span data-ui-part="reasoning-label">{label}</span>
-        {#if duration && !streaming}
-          <span data-ui-part="reasoning-separator" aria-hidden="true">·</span>
-          <span data-ui-part="reasoning-duration">{duration}</span>
-        {/if}
-        {#if preview && !expanded && !streaming}
-          <span data-ui-part="reasoning-separator" aria-hidden="true">—</span>
-          <span data-ui-part="reasoning-preview">{preview}</span>
-        {/if}
       </span>
-      <ChevronDownIcon data-ui-part="reasoning-chevron" aria-hidden="true" />
-    </Collapsible.Trigger>
-    <Collapsible.Content data-ai-chat-part="reasoning-content">
-      <div data-ui-part="reasoning-content-inner">
-        {@render children()}
-      </div>
-    </Collapsible.Content>
-  </Collapsible.Root>
+    </div>
+  {/if}
 </div>

package/src/shared/ai/layout/Layout.svelte

@@ -3,7 +3,10 @@
   import { untrack, type Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import * as Empty from "@lapismd/design-core/shadcn/empty";
-  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+  import {
+    ScrollArea,
+    type ScrollAreaStrategy,
+  } from "@lapismd/design-core/shadcn/scroll-area";
   import { createNewMessages } from "../new-messages.svelte.js";
   import { createStreamScroll } from "../stream-scroll.svelte.js";
   import { setLayoutContext } from "../context.svelte.js";
@@ -17,6 +20,7 @@
     density = "balanced",
     isEmpty = false,
     scrollMode = "stream",
+    scrollAreaStrategy = "auto",
     conversationKey,
     hasNewMessages: controlledNewMessages,
     hasNewer = false,
@@ -35,6 +39,7 @@
     isEmpty?: boolean;
     /** Keep streaming scroll behavior by default; opt in to anchored cached-history navigation. */
     scrollMode?: "stream" | "history";
+    scrollAreaStrategy?: ScrollAreaStrategy;
     conversationKey?: string;
     hasNewMessages?: boolean;
     hasNewer?: boolean;
@@ -56,9 +61,9 @@
 
   let messageAreaRef = $state<HTMLElement | null>(null);
   let contentRef = $state<HTMLElement | null>(null);
-  let virtualized = false;
+  let virtualized = $state(false);
   const streamScroll = createStreamScroll({
-    anchorOnResize: () => scrollMode === "history",
+    anchorOnResize: () => scrollMode === "history" && !virtualized,
   });
   const newMessages = createNewMessages({
     deferResize: () => scrollMode === "history",
@@ -193,10 +198,14 @@
   data-ui-component="ai-chat-layout"
   data-ui-part="root"
   data-density={density}
+  data-virtualized={virtualized ? "" : undefined}
   aria-label={ariaLabel}
 >
   <div data-ui-part="scroll-shell">
-    <ScrollArea bind:viewportRef={scrollRef}>
+    <ScrollArea
+      bind:viewportRef={scrollRef}
+      scrollStrategy={scrollAreaStrategy}
+    >
       <div bind:this={messageAreaRef} data-ui-part="message-area">
         {#if isEmpty}
           <div data-ui-part="empty-state">

package/src/shared/ai/message-list/MessageList.svelte

@@ -9,6 +9,7 @@
   import { setListContext, useLayoutContext } from "../context.svelte.js";
   import type { Density } from "../types.js";
   import type { MessageListPosition } from "./position.js";
+  import type { MessageListEstimateSize } from "./estimate-size.js";
   import "../chat.css";
 
   let {
@@ -51,10 +52,11 @@
     footer?: Snippet;
     items?: readonly T[];
     row?: Snippet<[T, number]>;
-    /** Opt in to bounded row rendering and automatic older-page loading; defaults to false. */
+    /** Opt in to bounded row rendering; non-virtual lists still auto-load older pages. */
     virtualize?: boolean;
     overscan?: number;
-    estimateSize?: number;
+    /** Estimated row size in pixels, or an item-aware estimator used before DOM measurement. */
+    estimateSize?: MessageListEstimateSize<T>;
     /** Scope restoration and arrivals to a conversation; existing unkeyed lists retain explicit arrival handling. */
     conversationKey?: string;
     initialPosition?: MessageListPosition;
@@ -68,6 +70,7 @@
   const componentId = $props.id();
   const errorId = `${componentId}-older-error`;
   let innerRef = $state<HTMLDivElement | null>(null);
+  let topSentinel = $state<HTMLDivElement | null>(null);
   let loadingOlder = $state(false);
   let loadVersion = 0;
   let loadError = $state<string | null>(null);
@@ -142,6 +145,32 @@
         loadingOlder = false;
     }
   }
+
+  $effect(() => {
+    const node = topSentinel;
+    const skip = virtualize;
+    const key = conversationKey;
+    void key;
+    if (!node || skip || !scrollToTopAction) return;
+    const root =
+      layout?.getScrollContainer() ??
+      node.closest("[data-ui-part='scroll-area-viewport']");
+    if (!(root instanceof HTMLElement)) return;
+    let armed = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const near = entries.some((entry) => entry.isIntersecting);
+        if (!near) armed = true;
+        else if (armed) {
+          armed = false;
+          void loadOlder();
+        }
+      },
+      { root, rootMargin: "600px 0px 0px 0px" },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  });
 </script>
 
 <div
@@ -158,7 +187,7 @@
 >
   <div bind:this={innerRef} data-ui-part="list-inner" style:gap>
     {#if scrollToTopAction && hasOlder}
-      <div data-ui-part="top-sentinel">
+      <div bind:this={topSentinel} data-ui-part="top-sentinel">
         <Button
           type="button"
           size="xs"

package/src/shared/ai/message-list/MessageListEstimateUpdateFixture.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Layout from "../layout/Layout.svelte";
+  import MessageList from "./MessageList.svelte";
+
+  const items = Array.from({ length: 200 }, (_, index) => ({
+    id: `estimate-${index}`,
+    label: `Estimated row ${index}`,
+  }));
+  let firstDetail = $state(false);
+  const estimate = $derived.by(() => {
+    const detail = firstDetail;
+    return (_item: (typeof items)[number], index: number) =>
+      detail && index === 0 ? 864 : 64;
+  });
+</script>
+
+<Button onclick={() => (firstDetail = true)}>Load first message detail</Button>
+<div
+  style="height: 420px; max-width: 40rem; display: flex; flex-direction: column;"
+>
+  <Layout scrollMode="history" conversationKey="estimate-updates">
+    {#snippet composer()}<span>Conversation composer</span>{/snippet}
+    <MessageList
+      {items}
+      estimateSize={estimate}
+      retainRowIds={[]}
+      virtualize
+      conversationKey="estimate-updates"
+    >
+      {#snippet row(item, index)}<div
+          data-story="estimated-row"
+          style:height={firstDetail && index === 0 ? "864px" : "64px"}
+        >
+          {item.label}
+          {#if firstDetail && index === 0}<span
+              >Loaded first message detail</span
+            >{/if}
+        </div>{/snippet}
+    </MessageList>
+  </Layout>
+</div>