From 493096965ff758af16707da0f7b23897de58d0f3 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Thu, 23 Jul 2026 15:10:47 +1000
Subject: [PATCH 1/2] more prose examples

---
 packages/@react-spectrum/ai/stories/chat.mdx  |  26 +++
 .../ai/stories/prose.stories.tsx              | 177 +++++++++++++++++-
 2 files changed, 202 insertions(+), 1 deletion(-)
 create mode 100644 packages/@react-spectrum/ai/stories/chat.mdx

diff --git a/packages/@react-spectrum/ai/stories/chat.mdx b/packages/@react-spectrum/ai/stories/chat.mdx
new file mode 100644
index 00000000000..f975dad5280
--- /dev/null
+++ b/packages/@react-spectrum/ai/stories/chat.mdx
@@ -0,0 +1,26 @@
+{/* Copyright 2026 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+Let me see what the documents say about travel reimbursement rules.
+
+
+Here are the key rules for travel reimbursement at
+Adobe:
+
+### Booking & Payment
+
+1. <b>Travel Booking:</b> All travel must be booked through Adobe's preferred travel services provider. Booking outside of approved providers is not allowed.
+2. <b>Corporate Card Use:</b> Employees must use their
+Adobe Corporate Card for business travel expenses unless the merchant does not accept it. Personal expenses are strictly prohibited on the Corporate Card and must be reimbursed to Adobe immediately if charged.
+
+### Air & Rail Travel
+
+1. <b>Advance Booking:</b> Airfare should be purchased as early as possible. Tickets bought less than 7 days before travel are flagged as exceptions.
+2. <b>Class of Service:</b>
+    - Domestic and international flights under 6.5 hours: Econom/Coach class onlv.
diff --git a/packages/@react-spectrum/ai/stories/prose.stories.tsx b/packages/@react-spectrum/ai/stories/prose.stories.tsx
index 4f008187549..a0a0dd9ec86 100644
--- a/packages/@react-spectrum/ai/stories/prose.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/prose.stories.tsx
@@ -10,12 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
+import {
+  Chat,
+  PromptField,
+  PromptFieldSubmitButton,
+  PromptTokenField,
+  Thread,
+  ThreadItem,
+  UserMessage
+} from '../exports';
+import ChatExample from './chat.mdx';
 import {createPortal} from 'react-dom';
 import type {Meta} from '@storybook/react';
 import {prose} from '@react-spectrum/ai/style' with {type: 'macro'};
 import ProseExample from './prose.mdx';
 // @ts-ignore
 import React, {ReactNode, useRef, useState} from 'react';
+import {Slider} from '@react-spectrum/s2';
 import * as spectrumTokens from '@adobe/spectrum-tokens/dist/json/variables.json';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
@@ -251,7 +262,7 @@ function BlueLine({box}: {box: MarginBox}) {
     <>
       <div
         style={{
-          display: 'none',
+          // display: 'none',
           position: 'absolute',
           left: x,
           top: box.top,
@@ -540,3 +551,167 @@ function specificity(selector: string): number {
     .length;
   return ids * 100 + classes * 10 + types;
 }
+
+// The side panel thread: a user prompt followed by the assistant's reply,
+// which is rendered from chat.mdx as prose.
+type ChatMessage = {id: number; type: 'user'; content: string} | {id: number; type: 'prose'};
+
+const chatMessages: ChatMessage[] = [
+  {id: 0, type: 'user', content: 'Summarize key travel reimbursement rules'},
+  {id: 1, type: 'prose'}
+];
+
+function SidePanelExample() {
+  let [fontSize, setFontSize] = useState(14);
+
+  return (
+    <div
+      className={style({
+        display: 'grid',
+        gridTemplateColumns: [300, '1fr', 400],
+        gridTemplateRows: [60, '1fr'],
+        height: '100vh',
+        gridTemplateAreas: ['header header header', 'left main right']
+      })}
+      style={{'--prose-base-font': fontSize} as React.CSSProperties}>
+      <div
+        className={style({
+          gridArea: 'header',
+          backgroundColor: 'gray-200',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 12
+        })}>
+        <h1 className={style({font: 'heading'})}>Heading stuff</h1>
+        <Slider
+          labelPosition="side"
+          label="Font Size"
+          minValue={10}
+          maxValue={24}
+          value={fontSize}
+          onChange={setFontSize}
+        />
+      </div>
+      <div
+        className={style({
+          gridArea: 'left',
+          backgroundColor: 'gray-100',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        })}>
+        <h2>Left Panel</h2>
+      </div>
+      <div
+        className={style({
+          gridArea: 'main',
+          backgroundColor: 'gray-50',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        })}>
+        <h2>Main Content</h2>
+      </div>
+      <div
+        className={style({
+          gridArea: 'right',
+          backgroundColor: 'layer-2',
+          display: 'flex',
+          // Allow this grid item to shrink below its content so the prose can
+          // scroll internally instead of stretching the grid past 100vh.
+          minHeight: 0,
+          minWidth: 0,
+          borderStartWidth: 1,
+          borderEndWidth: 0,
+          borderTopWidth: 0,
+          borderBottomWidth: 0,
+          borderColor: 'gray-300',
+          borderStyle: 'solid'
+        })}>
+        <div
+          className={style({
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+            padding: 12,
+            // Fill the panel and permit shrinking so the nested overflow works.
+            flexGrow: 1,
+            minHeight: 0,
+            minWidth: 0
+          })}>
+          <h2
+            className={style({
+              font: 'heading-lg',
+              flexGrow: 0,
+              flexShrink: 0,
+              flexBasis: 'auto',
+              marginY: 4
+            })}>
+            Ask AI Assistant
+          </h2>
+          <Chat
+            styles={style({
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+              // Fill the panel and permit shrinking so the nested overflow works.
+              flexGrow: 1,
+              gap: 16,
+              minHeight: 0,
+              minWidth: 0
+            })}>
+            <Thread
+              // Thread lays out column-reversed, so pass items newest-first to
+              // render the user prompt above the assistant's reply.
+              items={[...chatMessages].reverse()}
+              aria-label="Chat thread"
+              styles={style({
+                flexGrow: 1,
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                paddingEnd: 4,
+                rowGap: 16
+              })}>
+              {(msg: ChatMessage) => {
+                if (msg.type === 'user') {
+                  return (
+                    <ThreadItem
+                      textValue={msg.content}
+                      styles={style({display: 'flex', justifyContent: 'end'})}>
+                      <UserMessage>{msg.content}</UserMessage>
+                    </ThreadItem>
+                  );
+                }
+                return (
+                  <ThreadItem textValue="Travel reimbursement rules">
+                    <div
+                      role="document"
+                      className={prose()}
+                      style={
+                        {'--s2-font-size-base': 'var(--prose-base-font)'} as React.CSSProperties
+                      }>
+                      <ChatExample components={{CodeBlock: 'pre'}} />
+                    </div>
+                  </ThreadItem>
+                );
+              }}
+            </Thread>
+            <PromptField onSubmit={() => {}}>
+              <div className={style({display: 'flex', gap: 16, alignItems: 'center'})}>
+                <PromptTokenField />
+                <PromptFieldSubmitButton />
+              </div>
+            </PromptField>
+          </Chat>
+        </div>
+      </div>
+    </div>
+  );
+}
+export const SidePanel = {
+  render: () => <SidePanelExample />,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};

From 7eb01a25795f2841050d1dee833a545598983fbc Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Thu, 23 Jul 2026 15:58:07 +1000
Subject: [PATCH 2/2] add font size control

---
 .../ai/stories/prose.stories.tsx              | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/ai/stories/prose.stories.tsx b/packages/@react-spectrum/ai/stories/prose.stories.tsx
index a0a0dd9ec86..de8557f60cb 100644
--- a/packages/@react-spectrum/ai/stories/prose.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/prose.stories.tsx
@@ -38,13 +38,34 @@ const meta: Meta = {
 
 export default meta;
 
-export const Example = () => (
-  <MarginVisualizer>
-    <article className={`${prose()} ${style({maxWidth: 800, marginX: 'auto'})}`}>
-      <ProseExample components={{CodeBlock: 'pre'}} />
-    </article>
-  </MarginVisualizer>
-);
+function ProseStory() {
+  let [fontSize, setFontSize] = useState(14);
+  return (
+    <MarginVisualizer>
+      <div
+        className={style({
+          position: 'absolute'
+        })}>
+        <Slider
+          labelPosition="side"
+          label="Font Size"
+          minValue={10}
+          maxValue={24}
+          value={fontSize}
+          onChange={setFontSize}
+        />
+      </div>
+      <article
+        data-testid="prose"
+        className={`${prose()} ${style({maxWidth: 800, marginX: 'auto'})}`}
+        style={{'--s2-font-size-base': fontSize} as React.CSSProperties}>
+        <ProseExample components={{CodeBlock: 'pre'}} />
+      </article>
+    </MarginVisualizer>
+  );
+}
+
+export const Example = () => <ProseStory />;
 
 // Spectrum tokens applied to each prose element (see style/prose.ts). When a
 // font isn't specified the element inherits `body`; when a margin isn't
@@ -297,7 +318,9 @@ function BlueLine({box}: {box: MarginBox}) {
 }
 
 function computeBoxes(root: HTMLElement): MarginBox[] {
-  let prose = root.querySelector('.prose') ?? root;
+  // Scope measurement to the prose article (tagged with data-testid) so the
+  // overlay ignores sibling controls like the font size slider.
+  let prose = root.querySelector('[data-testid="prose"]') ?? root;
   let scrollX = window.scrollX;
   let scrollY = window.scrollY;
   let entries: Omit<MarginBox, 'type' | 'groupIndex'>[] = [];