@lapismd/design-core 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @lapismd/design-core
 
+## 0.2.0
+
+### Minor Changes
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`737c657`](https://github.com/lapismd/design-core/commit/737c65727a6beaeb6955a652aba67c42b882b222) Thanks [@stevejuma](https://github.com/stevejuma)! - Add composable same-side App Shell panels, responsive main-surface replacement, transparent rails, external controller toggles, and structural surface layers.
+
+### Patch Changes
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Relicense the published Design Core package to Apache 2.0.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Tighten shared Tooltip padding and type so compact overlays no longer inherit oversized content chrome.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Expose controlled multi-file review state, host-owned line annotations, leading file headers, and gutter line actions. Diff helpers stay compatible with strict TypeScript consumers.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep mobile App Shell panels visible while focus moves between the trigger and the opened surface.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Add opt-in `MessageList` virtualization while keeping the default unvirtualized chat layout. History scrolling now preserves user intent across measurements, state saves, and parent updates.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Add shared dialog frames, inset large frames, and retryable confirmations. Portal updates keep dialog controls mounted, and dialog headings stay out of document landmarks.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Export shared `ToolCallDetail` presentation so hosts can render tool payloads, summaries, and expandable detail without forking chat markup.
+
+## 0.1.2
+
+### Patch Changes
+
+- [#2](https://github.com/lapismd/design-core/pull/2) [`af3a0b3`](https://github.com/lapismd/design-core/commit/af3a0b3aaabd24be368acea795b150af8f4e5b89) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep workspace menu close handling lifecycle-safe when an action callback destroys its owning view.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`d153167`](https://github.com/lapismd/design-core/commit/d15316795ce7601a483796bce23f78bfc37188ae) Thanks [@stevejuma](https://github.com/stevejuma)! - Allow App Shell body content and body sidebar regions to configure scroll, hover, or always-on scrollbar visibility independently.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`31c7a2c`](https://github.com/lapismd/design-core/commit/31c7a2cb438213d75a5ef3193e957cd7c35dc34f) Thanks [@stevejuma](https://github.com/stevejuma)! - Inset vertical and horizontal Scroll Area thumbs by one pixel from their outer edge.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`24a6e98`](https://github.com/lapismd/design-core/commit/24a6e989354b9d00d2d93786e4255da088812ee9) Thanks [@stevejuma](https://github.com/stevejuma)! - Expose the canonical two-expanded-sidebars App Shell fixture, including bounded content extension points and an optional right-sidebar toggle, for downstream Storybook catalogs. Keep the focused Search Filter Bar source export compatible with strict consumers.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`413139d`](https://github.com/lapismd/design-core/commit/413139d1269d5f939d20c1f00de45f151372eae0) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep composed Shadcn, AI, and Filter source exports compatible with strict consumers that enable exact optional properties and unchecked indexed access.
+
+- [#4](https://github.com/lapismd/design-core/pull/4) [`61fa863`](https://github.com/lapismd/design-core/commit/61fa86315a840717c39f0a0701d8cb208a187cb2) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep the public App Shell source compatible with consumers that enable exact optional-property semantics.
+
+## 0.1.1
+
+### Patch Changes
+
+- [`d1dc4a8`](https://github.com/lapismd/design-core/commit/d1dc4a8fb13eec9b59075712f964a89cee18a1a8) Thanks [@stevejuma](https://github.com/stevejuma)! - Allow custom settings pages to contribute dynamic search entries and reveal the selected row before Design Core scrolls to and highlights it.
+
 ## 0.1.0
 
 ### Initial public release

package/LICENSE.md

@@ -1,4 +1,4 @@
-AGPL-3.0-or-later
+Apache-2.0
 
-This project is licensed under the GNU Affero General Public License v3.0 or later.
-See <https://www.gnu.org/licenses/agpl-3.0.en.html>.
+This project is licensed under the Apache License 2.0.
+See <https://www.apache.org/licenses/LICENSE-2.0>.

package/README.md

@@ -224,6 +224,26 @@ pnpm spec:search -- "tokens"
 pnpm spec:check
 ```
 
+### CI and local parity
+
+`pnpm checks` runs the nonvisual governance, quality, unit, Storybook, pointer,
+and AI browser lanes through Turbo. Governance, quality, and unit work executes
+concurrently with half the available processors, capped at four. Resource-heavy
+Storybook and browser suites run one at a time locally so catalog startup and
+interaction readiness remain deterministic; set `TURBO_CONCURRENCY` to a
+positive number or percentage to override the general task bound.
+
+Local task output is cached under `.turbo/`. The same tasks use the signed
+organization cache in CI and fail open to normal execution when it is
+unavailable. To use the remote cache locally, copy `.env.example` to the ignored
+root `.env` and provide `TURBO_TOKEN` and
+`TURBO_REMOTE_CACHE_SIGNATURE_KEY`. Never commit those credentials.
+
+CI fans the nine nonvisual lanes out in parallel, including separate Workspace,
+Shell, Shadcn, and AI browser runners. It runs full and production dependency
+audits after they pass and reports one stable `Validate` result. Visual
+comparison remains an explicit, separate command.
+
 ## Release and validation
 
 Common validation commands:
@@ -246,7 +266,7 @@ pnpm release:plan --registry https://registry.npmjs.org
 pnpm packages:pack
 ```
 
-The first public npm publication is a manual bootstrap from reviewed tarballs.
+`@lapismd/design-core@0.1.0` was manually bootstrapped from a reviewed tarball.
 Future releases use Changesets and the repository release workflow.
 
 ## Further reading

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lapismd/design-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared Lapis design system, forms, shell, and workspace primitives",
-  "license": "AGPL-3.0-or-later",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lapismd/design-core.git"
@@ -36,7 +36,6 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@lapismd/mira": "^0.0.1",
     "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-java": "^6.0.2",
@@ -54,16 +53,19 @@
     "@iconify-json/lucide": "^1.2.63",
     "@iconify/utils": "^2.3.0",
     "@internationalized/date": "^3.12.2",
+    "@lapismd/mira": "^0.0.1",
     "@lezer/common": "^1.2.3",
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.2",
     "@lucide/svelte": "^1.21.0",
+    "@tanstack/svelte-virtual": "^3.13.39",
+    "@types/luxon": "^3.4.2",
     "bits-ui": "^2.18.1",
     "chrono-node": "^2.10.1",
     "clsx": "^2.1.1",
     "codemirror-lang-mermaid": "^0.5.0",
     "luxon": "^3.5.0",
-    "minimatch": "^10.2.5",
+    "minimatch": "^10.2.6",
     "paneforge": "^1.0.2",
     "shadcn-svelte": "^1.3.0",
     "tailwind-merge": "^3.6.0",
@@ -90,28 +92,27 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.0",
-    "@tobilu/qmd": "2.5.3",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/luxon": "^3.4.2",
+    "@tobilu/qmd": "2.5.3",
     "@types/node": "^22.15.0",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
     "aria-query": "5.3.2",
     "execa": "^10.0.0",
     "highlight.js": "^11.11.1",
     "jsdom": "^29.1.1",
     "magic-string": "^1.0.0",
-    "markdownlint-cli2": "^0.22.1",
+    "markdownlint-cli2": "^0.23.2",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.52.0",
     "pngjs": "^7.0.0",
-    "postcss": "^8.5.20",
+    "postcss": "^8.5.28",
     "postcss-selector-parser": "^7.1.4",
     "prettier": "3.3.3",
     "prettier-plugin-svelte": "^3.3.2",
@@ -124,9 +125,10 @@
     "svelte-check": "^4.6.0",
     "tailwindcss": "^4.3.0",
     "tsx": "^4.23.1",
+    "turbo": "^2.5.4",
     "typescript": "^5.7.2",
     "vite": "^6.2.2",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
     "zod": "^4.4.3"
   },
   "exports": {
@@ -174,6 +176,7 @@
     "./styles.css": "./src/styles.css",
     "./storybook.css": "./src/storybook.css",
     "./storybook/catalog-layout": "./src/storybook/catalog-layout.ts",
+    "./storybook/app-shell-reference": "./src/storybook/app-shell-reference/index.ts",
     "./themes/lapis.css": "./src/themes/lapis.css",
     "./ai": "./src/shared/ai/index.ts",
     "./ai/chat": "./src/shared/ai/chat.ts",
@@ -225,7 +228,8 @@
     "./workspace/view-header": "./src/shared/workspace/view-header/index.ts",
     "./workspace/tokens": "./src/shared/workspace/workspace.tokens.ts",
     "./workspace/view-host": "./src/shared/workspace/view-host/index.ts",
-    "./workspace/workspace.tokens.css": "./src/shared/workspace/workspace.tokens.css"
+    "./workspace/workspace.tokens.css": "./src/shared/workspace/workspace.tokens.css",
+    "./forms/dialog": "./src/shared/forms/dialog.ts"
   },
   "scripts": {
     "storybook": "WATCHPACK_POLLING=250 node scripts/with-storybook-env.mjs node scripts/storybook-run.mjs",
@@ -233,9 +237,11 @@
     "storybook:stop": "node scripts/with-storybook-env.mjs bash scripts/storybook-stop.sh",
     "storybook:restart": "node scripts/with-storybook-env.mjs bash scripts/storybook-restart.sh",
     "storybook:check": "pnpm test:storybook && pnpm test:workspace:pointer && pnpm test:shell:pointer && pnpm test:shadcn:pointer && pnpm build-storybook && pnpm workspace:visual:audit",
-    "build-storybook": "node -e \"require('node:fs').mkdirSync('.visual-delta/cache',{recursive:true})\" && node --max-old-space-size=6144 ./node_modules/storybook/dist/bin/dispatcher.js build --stats-json .visual-delta/cache",
+    "build-storybook": "node --env-file-if-exists=.env scripts/run-turbo.mjs build:storybook",
+    "build:storybook": "node -e \"require('node:fs').mkdirSync('.visual-delta/cache',{recursive:true})\" && node --max-old-space-size=6144 ./node_modules/storybook/dist/bin/dispatcher.js build --stats-json .visual-delta/cache",
     "changeset": "changeset",
     "test:unit": "vitest run --project unit",
+    "test:turbo": "node --test scripts/concurrency.test.mjs scripts/turbo-cache-report.test.mjs",
     "test:storybook": "vitest run --project storybook",
     "test:storybook:watch": "vitest --project storybook",
     "spec:build": "spec-validator build",
@@ -277,11 +283,24 @@
     "ui:visual:tag": "tsx scripts/ui-generator/cli.ts visual:tag",
     "test-unit": "pnpm test:unit",
     "test-storybook": "pnpm test:storybook",
-    "check": "pnpm spec:validate && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "check": "pnpm spec:validate && pnpm check:types",
+    "check:types": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings && pnpm check:shell-consumer && pnpm check:filter-consumer && pnpm check:source-consumer",
+    "check:filter-consumer": "svelte-check --tsconfig ./tsconfig.filter-consumer.json --fail-on-warnings",
+    "check:shell-consumer": "svelte-check --tsconfig ./tsconfig.shell-consumer.json --fail-on-warnings",
+    "check:source-consumer": "svelte-check --tsconfig ./tsconfig.source-consumer.json --fail-on-warnings",
     "fmt": "prettier . --write",
     "fmt:check": "prettier . --check",
     "check:no-tailwind": "tsx scripts/check-no-tailwind-utilities.ts",
-    "checks:nonvisual": "pnpm fmt:check && pnpm spec:check && pnpm check && pnpm check:no-tailwind && pnpm test:unit && pnpm test:storybook && pnpm test:workspace:pointer && pnpm test:shell:pointer && pnpm test:shadcn:pointer && pnpm build-storybook && pnpm workspace:visual:audit && pnpm test:ai-chat-browser",
+    "ci:governance": "pnpm spec:check",
+    "ci:quality": "pnpm fmt:check && pnpm check:types && pnpm check:no-tailwind",
+    "ci:unit": "pnpm test:unit && pnpm test:turbo",
+    "ci:storybook-static": "pnpm workspace:visual:audit -- --index=storybook-static/index.json",
+    "ci:storybook-interaction": "pnpm test:storybook",
+    "ci:browser-workspace": "pnpm test:workspace:pointer",
+    "ci:browser-shell": "pnpm test:shell:pointer",
+    "ci:browser-shadcn": "pnpm test:shadcn:pointer",
+    "ci:browser-ai": "pnpm test:ai-chat-browser",
+    "checks:nonvisual": "node --env-file-if-exists=.env scripts/run-turbo.mjs ci:governance ci:quality ci:unit --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:storybook-static --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:storybook-interaction --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-workspace --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-shell --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-ai --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-shadcn --summarize",
     "checks:release": "pnpm spec:check && pnpm check && pnpm check:no-tailwind && pnpm test:unit && pnpm build-storybook && pnpm workspace:visual:audit",
     "checks": "pnpm checks:nonvisual",
     "checks:visual": "pnpm checks:nonvisual && pnpm test:visual",

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

@@ -107,15 +107,15 @@ pages.
 
 ### Token layers
 
-| Layer               | Prefix                         | Defaults                                    |
-| ------------------- | ------------------------------ | ------------------------------------------- |
-| Theme               | `--background`, `--primary`, … | `src/theme.css`                             |
-| Shadcn family       | `--ui-<family>-*`              | `<family>.tokens.css`                       |
-| Forms               | `--ui-form-*`                  | `src/shared/forms/form.tokens.css`          |
-| Filter and AI       | `--ui-*` / `--ui-ai-*`         | colocated CSS and token maps                |
-| Diff                | `--ui-diff-*`                  | `src/shared/diff/diff.tokens.css`           |
-| Structural shell    | `--ui-shell-*`                 | `src/shared/shell/shell.tokens.css`         |
-| Workspace framework | `--ui-workspace-*`             | `src/shared/workspace/workspace.tokens.css` |
+| Layer               | Prefix                         | Defaults                                          |
+| ------------------- | ------------------------------ | ------------------------------------------------- |
+| Theme               | `--background`, `--primary`, … | `src/theme.css`                                   |
+| Shadcn family       | `--ui-<family>-*`              | `<family>.tokens.css`                             |
+| Forms               | `--ui-form-*`                  | `src/shared/forms/form.tokens.css`                |
+| Filter and AI       | `--ui-*` / `--ui-ai-*`         | colocated CSS and token maps                      |
+| Diff                | `--ui-diff-*`                  | `src/shared/diff/diff.tokens.css`                 |
+| Structural shell    | `--ui-shell-*`                 | `src/shared/shell/shell.tokens.css`               |
+| Workspace framework | `--ui-workspace-*`             | `src/shared/workspace/workspace.tokens.css`       |
 | Desktop drag        | `data-desktop-drag-region`     | `src/shared/workspace/workspace-desktop-drag.css` |
 
 Set public tokens on `:root` or an appropriate shared ancestor such as
@@ -186,3 +186,5 @@ refuses leftover utilities after native-CSS conversion.
 4. Stamp `data-ui-component` and `data-ui-part`.
 5. Document the tokens the component reads.
 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.

package/src/shared/ai/chat.css

@@ -1031,7 +1031,8 @@
 
 [data-ui-component="ai-chat-composer-drawer"]
   [data-ai-chat-part="drawer-content"]
-  [data-ui-part="attachment-remove"] svg {
+  [data-ui-part="attachment-remove"]
+  svg {
   width: 0.75rem;
   height: 0.75rem;
 }
@@ -1549,3 +1550,26 @@
     animation: none;
   }
 }
+
+[data-ui-component="ai-chat-message-list"] [data-ui-part="virtual-content"] {
+  position: relative;
+  flex: 0 0 auto;
+  width: 100%;
+  overflow-anchor: none;
+}
+[data-ui-component="ai-chat-message-list"] [data-ui-part="virtual-row"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding-bottom: var(--ui-ai-chat-balanced-gap);
+  overflow-anchor: none;
+}
+[data-ui-component="ai-chat-message-list"][data-density="compact"]
+  [data-ui-part="virtual-row"] {
+  padding-bottom: var(--ui-ai-chat-compact-gap);
+}
+[data-ui-component="ai-chat-message-list"][data-density="spacious"]
+  [data-ui-part="virtual-row"] {
+  padding-bottom: var(--ui-ai-chat-spacious-gap);
+}

package/src/shared/ai/chat.ts

@@ -12,6 +12,15 @@ export { default as SendButton } from "./send-button/SendButton.svelte";
 export { default as ComposerToken } from "./composer-token/ComposerToken.svelte";
 export { default as TokenizedText } from "./tokenized-text/TokenizedText.svelte";
 export { default as ToolCalls } from "./tool-calls/ToolCalls.svelte";
+export { default as ToolCallDetail } from "./tool-call-detail/ToolCallDetail.svelte";
+export {
+  isOneLineToolAlert,
+  presentToolPayload,
+  toolCallTarget,
+  type PresentedToolPayload,
+  type ToolPayloadHint,
+  type ToolPayloadLanguage,
+} from "./tool-call-detail/tool-call-detail.js";
 export { default as DictationButton } from "./dictation-button/DictationButton.svelte";
 
 export {
@@ -19,6 +28,7 @@ export {
   type ScrollBehavior,
   type ScrollToBottomOptions,
   type StreamScrollController,
+  type PositionedStreamScrollController,
   type StreamScrollOptions,
 } from "./stream-scroll.svelte.js";
 export {
@@ -68,3 +78,5 @@ export type {
   ToolCallStatus,
 } from "./types.js";
 export type { ComposerToken as ComposerTokenValue } from "./types.js";
+
+export type { MessageListPosition } from "./message-list/position.js";

package/src/shared/ai/composer-input/ComposerInput.svelte

@@ -331,9 +331,10 @@
           Math.max(1, searchState.items.length);
         return;
       }
-      if (event.key === "Enter" && searchState.items[highlightedIndex]) {
+      const highlightedItem = searchState.items[highlightedIndex];
+      if (event.key === "Enter" && highlightedItem) {
         event.preventDefault();
-        insertTriggerSelection(searchState.items[highlightedIndex]);
+        insertTriggerSelection(highlightedItem);
         return;
       }
       if (event.key === "Escape") {

package/src/shared/ai/context.svelte.ts

@@ -12,6 +12,8 @@ export type LayoutContextValue = {
   getScrollContainer: () => HTMLElement | null;
   setScrollContainer: (element: HTMLElement | null) => void;
   setContent: (element: HTMLElement | null) => void;
+  /** A virtual list owns row resize anchoring; the layout still owns scroll writes. */
+  setVirtualized?: (active: boolean) => void;
   streamScroll: StreamScrollController;
   newMessages: NewMessagesController;
 };

package/src/shared/ai/experimental/reaction-bar/ReactionBar.svelte

@@ -74,7 +74,7 @@
     {/each}
     {#if onAdd}
       <EmojiPicker
-        {emojis}
+        {...emojis === undefined ? {} : { emojis }}
         label={addLabel}
         triggerLabel={addLabel}
         onSelect={onAdd}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import SparklesIcon from "@lucide/svelte/icons/sparkles";
-  import type { Snippet } from "svelte";
+  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";
@@ -16,6 +16,12 @@
     scrollRef = $bindable(null),
     density = "balanced",
     isEmpty = false,
+    scrollMode = "stream",
+    conversationKey,
+    hasNewMessages: controlledNewMessages,
+    hasNewer = false,
+    onLoadLatest,
+    onViewportChange,
     emptyState,
     scrollButton,
     composer,
@@ -27,6 +33,13 @@
     scrollRef?: HTMLElement | null;
     density?: Density;
     isEmpty?: boolean;
+    /** Keep streaming scroll behavior by default; opt in to anchored cached-history navigation. */
+    scrollMode?: "stream" | "history";
+    conversationKey?: string;
+    hasNewMessages?: boolean;
+    hasNewer?: boolean;
+    onLoadLatest?: () => Promise<void>;
+    onViewportChange?: (state: { atLatest: boolean; active: boolean }) => void;
     emptyState?: Snippet;
     scrollButton?: Snippet<
       [
@@ -43,12 +56,20 @@
 
   let messageAreaRef = $state<HTMLElement | null>(null);
   let contentRef = $state<HTMLElement | null>(null);
-  const streamScroll = createStreamScroll();
+  let virtualized = false;
+  const streamScroll = createStreamScroll({
+    anchorOnResize: () => scrollMode === "history",
+  });
   const newMessages = createNewMessages({
+    deferResize: () => scrollMode === "history",
     isLocked: () => streamScroll.isLocked,
     onResize: () => {
-      streamScroll.scrollIfLocked();
-      streamScroll.update();
+      if (scrollMode === "history")
+        streamScroll.contentResized({ restoreAnchor: !virtualized });
+      else {
+        streamScroll.scrollIfLocked();
+        streamScroll.update();
+      }
     },
   });
 
@@ -57,10 +78,89 @@
     newMessages.attach(element);
   }
 
+  let pendingJump = false;
+  let jumpVersion = 0;
+  let priorConversationKey: string | undefined;
+  let conversationInitialized = false;
+  let jumpError = $state<string | undefined>();
+  let documentActive = $state(true);
+  const unread = $derived(controlledNewMessages ?? newMessages.hasNewMessages);
+  const showNewMessages = $derived(
+    unread && (!streamScroll.isLocked || hasNewer || !documentActive),
+  );
+  const showScrollButton = $derived(
+    streamScroll.isScrolledUp || showNewMessages || hasNewer,
+  );
   function scrollToBottom(): void {
-    streamScroll.scrollToBottom();
-    newMessages.dismiss();
+    if (pendingJump) return;
+    if (scrollMode === "stream" && !onLoadLatest) {
+      newMessages.dismiss();
+      streamScroll.scrollToBottom();
+      return;
+    }
+    const key = conversationKey;
+    const version = ++jumpVersion;
+    const revision = streamScroll.positionRevision;
+    pendingJump = true;
+    jumpError = undefined;
+    void (async () => {
+      try {
+        await onLoadLatest?.();
+        if (
+          key === conversationKey &&
+          version === jumpVersion &&
+          revision === streamScroll.positionRevision
+        )
+          streamScroll.scrollToBottom({
+            behavior: scrollMode === "history" ? "instant" : "spring",
+          });
+      } catch (cause) {
+        if (key === conversationKey && version === jumpVersion)
+          jumpError =
+            cause instanceof Error
+              ? cause.message
+              : "Could not load latest messages";
+      } finally {
+        if (version === jumpVersion) pendingJump = false;
+      }
+    })();
   }
+  $effect(() => {
+    const key = conversationKey;
+    untrack(() => {
+      if (conversationInitialized && key === priorConversationKey) return;
+      conversationInitialized = true;
+      priorConversationKey = key;
+      jumpVersion++;
+      pendingJump = false;
+      if (key === undefined) return;
+      newMessages.attach(contentRef ?? messageAreaRef);
+      streamScroll.attach(null);
+      streamScroll.attach(scrollRef);
+      jumpError = undefined;
+    });
+    return () => {
+      void key;
+    };
+  });
+  $effect(() => {
+    if (streamScroll.isLocked && !hasNewer && documentActive)
+      newMessages.dismiss();
+    const observation = {
+      atLatest: streamScroll.isLocked && !hasNewer,
+      active: documentActive,
+    };
+    const notify = onViewportChange;
+    untrack(() => notify?.(observation));
+  });
+  $effect(() => {
+    const update = () => {
+      documentActive = document.visibilityState !== "hidden";
+    };
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  });
 
   setLayoutContext({
     getScrollContainer: () => scrollRef,
@@ -69,6 +169,9 @@
       streamScroll.attach(element);
     },
     setContent,
+    setVirtualized(active) {
+      virtualized = active;
+    },
     streamScroll,
     newMessages,
   });
@@ -118,16 +221,19 @@
         {/if}
       </div>
     </ScrollArea>
+    {#if jumpError}<p role="alert" data-ui-part="history-error">
+        {jumpError}
+      </p>{/if}
     {#if scrollButton}
       {@render scrollButton({
-        isVisible: streamScroll.isScrolledUp || newMessages.hasNewMessages,
-        hasNewMessages: newMessages.hasNewMessages,
+        isVisible: showScrollButton,
+        hasNewMessages: showNewMessages,
         scrollToBottom,
       })}
     {:else}
       <LayoutScrollButton
-        isVisible={streamScroll.isScrolledUp || newMessages.hasNewMessages}
-        hasNewMessages={newMessages.hasNewMessages}
+        isVisible={showScrollButton}
+        hasNewMessages={showNewMessages}
         onClick={scrollToBottom}
       />
     {/if}