@runtypelabs/persona 4.14.0 → 4.16.0

package/src/theme-editor/preview-utils.ts

@@ -195,7 +195,12 @@ export function buildSrcdoc(
 
 // ─── Preview Messages ───────────────────────────────────────────
 
-export type PreviewScene = 'home' | 'conversation' | 'minimized' | 'artifact';
+export type PreviewScene =
+  | 'home'
+  | 'conversation'
+  | 'follow-ups'
+  | 'minimized'
+  | 'artifact';
 
 export type PreviewTranscriptEntryPreset =
   | 'user-message'
@@ -543,8 +548,78 @@ export function createPreviewMessages(
   config?: Partial<AgentWidgetConfig>,
   appendedMessages: AgentWidgetMessage[] = []
 ): AgentWidgetMessage[] {
+  if (scene === 'follow-ups') {
+    const now = Date.now();
+    return [
+      {
+        id: 'preview-follow-up-user',
+        role: 'user',
+        content: 'What can Persona help me build?',
+        createdAt: new Date(now - 120000).toISOString(),
+      },
+      {
+        id: 'preview-follow-up-assistant',
+        role: 'assistant',
+        content:
+          'Persona gives you a themeable streaming chat interface with flexible integrations and interaction patterns. Where would you like to go next?',
+        createdAt: new Date(now - 60000).toISOString(),
+      },
+      {
+        id: 'preview-follow-up-suggestions',
+        role: 'assistant',
+        content: '',
+        createdAt: new Date(now - 59000).toISOString(),
+        streaming: false,
+        variant: 'tool',
+        toolCall: {
+          id: 'preview-follow-up-suggestions',
+          name: 'suggest_replies',
+          status: 'complete',
+          args: {
+            suggestions: [
+              {
+                id: 'preview-implementation',
+                label: 'Show me an implementation',
+                prompt: 'Show me a practical implementation',
+                description: 'See a complete integration example',
+                icon: 'code-2',
+                emphasis: 'primary',
+              },
+              {
+                id: 'preview-theming',
+                label: 'Explore theming',
+                prompt: 'Tell me how theming works',
+                description: 'Customize colors, type, and component styles',
+                icon: 'palette',
+              },
+              {
+                id: 'preview-security',
+                label: 'Review security',
+                prompt: 'Explain the security model',
+                description: 'Learn about isolation and safe rendering',
+                icon: 'shield-check',
+              },
+              {
+                id: 'preview-support',
+                label: 'Talk to support',
+                prompt: 'Help me contact support',
+                description: 'Get help choosing the right approach',
+                icon: 'messages-square',
+              },
+            ],
+          },
+          chunks: [],
+        },
+      },
+      ...appendedMessages,
+    ];
+  }
   if (scene === 'home') {
-    return [{ id: 'preview-home-1', role: 'assistant', content: 'Hi there! How can we help today?', createdAt: new Date().toISOString() }];
+    // Home is the pre-conversation state: welcome copy + starter suggestions
+    // already provide the greeting and entry points. Seeding an assistant
+    // bubble here creates a duplicate greeting that the default runtime never
+    // enters unless a host explicitly configures its own initialMessages.
+    return [];
   }
   if (scene === 'minimized') {
     return [{ id: 'preview-min-1', role: 'assistant', content: 'We are here whenever you are ready.', createdAt: new Date().toISOString() }];

package/src/theme-editor/sections.test.ts

@@ -60,6 +60,39 @@ describe("theme editor scroll-to-bottom controls", () => {
     expect(fieldPaths).toContain("theme.components.scrollToBottom.iconSize");
   });
 
+  it("exposes suggestion behavior and component token controls", () => {
+    const suggestions = CONFIGURE_SECTIONS.find(
+      (section) => section.id === "suggestions"
+    );
+    const configPaths =
+      suggestions?.fields.map((field) => field.path) ?? [];
+    expect(configPaths).toEqual(
+      expect.arrayContaining([
+        "suggestions.starters.variant",
+        "suggestions.starters.placement",
+        "suggestions.starters.behavior",
+        "suggestions.followUps.variant",
+        "suggestions.followUps.placement",
+        "suggestions.followUps.behavior",
+        "suggestions.followUps.overflow",
+      ])
+    );
+
+    const componentPaths = COMPONENTS_SECTIONS.flatMap((section) =>
+      section.fields.map((field) => field.path)
+    );
+    expect(componentPaths).toEqual(
+      expect.arrayContaining([
+        "theme.components.suggestion.chip.background",
+        "theme.components.suggestion.chip.hoverBackground",
+        "theme.components.suggestion.chip.focusRing",
+        "theme.components.suggestion.card.background",
+        "theme.components.suggestion.card.shadow",
+        "theme.components.suggestion.list.background",
+      ])
+    );
+  });
+
   it("exposes a shadow control for every themeable component", () => {
     const fieldPaths = COMPONENTS_SECTIONS.flatMap((section) => section.fields.map((field) => field.path));
 

package/src/theme-editor/sections.ts

@@ -369,6 +369,18 @@ const inputShapeSectionDef: SectionDef = {
   ],
 };
 
+const composerSpacingSectionDef: SectionDef = {
+  id: 'comp-composer-spacing',
+  title: 'Composer Spacing',
+  collapsed: true,
+  fields: [
+    { id: 'composer-padding', label: 'Padding', type: 'text', path: 'theme.components.composer.padding', defaultValue: '0.75rem 1rem' },
+    { id: 'composer-gap', label: 'Row Gap', description: 'Space between the textarea row and the actions row', type: 'text', path: 'theme.components.composer.gap', defaultValue: '0.5rem' },
+    { id: 'composer-font-size', label: 'Font Size', type: 'text', path: 'theme.components.composer.fontSize', defaultValue: '0.875rem' },
+    { id: 'composer-line-height', label: 'Line Height', type: 'text', path: 'theme.components.composer.lineHeight', defaultValue: '1.25rem' },
+  ],
+};
+
 const buttonShapeSectionDef: SectionDef = {
   id: 'comp-button-shape',
   title: 'Button Shape',
@@ -466,6 +478,35 @@ const scrollToBottomSectionDef: SectionDef = {
   ],
 };
 
+const suggestionStyleSectionDef: SectionDef = {
+  id: 'comp-suggestions',
+  title: 'Suggestions',
+  description: 'Style starter cards, follow-up chips, and list rows.',
+  collapsed: true,
+  fields: [
+    { id: 'suggestion-chip-bg', label: 'Chip Background', type: 'token-ref', path: 'theme.components.suggestion.chip.background', defaultValue: 'semantic.colors.surface', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-fg', label: 'Chip Text', type: 'token-ref', path: 'theme.components.suggestion.chip.foreground', defaultValue: 'semantic.colors.text', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-border', label: 'Chip Border', type: 'token-ref', path: 'theme.components.suggestion.chip.border', defaultValue: 'semantic.colors.border', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-hover', label: 'Chip Hover', type: 'token-ref', path: 'theme.components.suggestion.chip.hoverBackground', defaultValue: 'palette.colors.gray.100', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-focus', label: 'Chip Focus Ring', type: 'token-ref', path: 'theme.components.suggestion.chip.focusRing', defaultValue: 'semantic.colors.interactive.focus', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-bg', label: 'Card Background', type: 'token-ref', path: 'theme.components.suggestion.card.background', defaultValue: 'semantic.colors.surface', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-fg', label: 'Card Text', type: 'token-ref', path: 'theme.components.suggestion.card.foreground', defaultValue: 'semantic.colors.text', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-border', label: 'Card Border', type: 'token-ref', path: 'theme.components.suggestion.card.border', defaultValue: 'semantic.colors.border', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-hover', label: 'Card Hover', type: 'token-ref', path: 'theme.components.suggestion.card.hoverBackground', defaultValue: 'palette.colors.gray.100', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-shadow', label: 'Card Shadow', type: 'select', path: 'theme.components.suggestion.card.shadow', defaultValue: 'palette.shadows.sm', options: [
+      { value: 'palette.shadows.none', label: 'None' },
+      { value: 'palette.shadows.sm', label: 'Small' },
+      { value: 'palette.shadows.md', label: 'Medium' },
+      { value: 'palette.shadows.lg', label: 'Large' },
+    ] },
+    { id: 'suggestion-list-bg', label: 'List Background', type: 'color', path: 'theme.components.suggestion.list.background', defaultValue: 'transparent' },
+    { id: 'suggestion-list-border', label: 'List Border', type: 'token-ref', path: 'theme.components.suggestion.list.border', defaultValue: 'semantic.colors.border', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-item-gap', label: 'Chip Spacing', description: 'Space between chips', type: 'text', path: 'theme.components.suggestion.chip.itemGap', defaultValue: '8px' },
+    { id: 'suggestion-card-item-gap', label: 'Card Spacing', description: 'Space between cards', type: 'text', path: 'theme.components.suggestion.card.itemGap', defaultValue: '8px' },
+    { id: 'suggestion-list-item-gap', label: 'List Spacing', description: 'Space between list rows', type: 'text', path: 'theme.components.suggestion.list.itemGap', defaultValue: '8px' },
+  ],
+};
+
 // Reusable shadow-scale options matching the launcher / panel / scroll-to-bottom selects.
 const SHADOW_SCALE_OPTIONS: { value: string; label: string }[] = [
   { value: 'palette.shadows.none', label: 'None' },
@@ -497,12 +538,39 @@ const componentShadowsSectionDef: SectionDef = {
 };
 
 /** Shared shape sections (not scoped to light/dark) */
+// Blank keeps the built-in fallback: parseOptionalCssValue drops the path so
+// the CSS variable never emits.
+const TEXT_FONT_WEIGHT_OPTIONS: { value: string; label: string }[] = [
+  { value: '', label: 'Default' },
+  { value: '400', label: 'Normal (400)' },
+  { value: '500', label: 'Medium (500)' },
+  { value: '600', label: 'Semibold (600)' },
+  { value: '700', label: 'Bold (700)' },
+];
+
+const textStylesSectionDef: SectionDef = {
+  id: 'comp-text-styles',
+  title: 'Header & Welcome Text',
+  description: 'Typography for the header title and the welcome greeting. Leave blank to keep the built-in defaults.',
+  collapsed: true,
+  fields: [
+    { id: 'header-title-font-family', label: 'Header Title Font', description: 'CSS font-family, e.g. Georgia, serif', type: 'text', path: 'theme.components.header.title.fontFamily', defaultValue: '', parseValue: parseOptionalCssValue },
+    { id: 'header-title-font-size', label: 'Header Title Size', description: 'CSS length, e.g. 1.125rem', type: 'text', path: 'theme.components.header.title.fontSize', defaultValue: '', parseValue: parseOptionalCssValue },
+    { id: 'header-title-font-weight', label: 'Header Title Weight', type: 'select', path: 'theme.components.header.title.fontWeight', defaultValue: '', options: TEXT_FONT_WEIGHT_OPTIONS, parseValue: parseOptionalCssValue },
+    { id: 'welcome-title-font-family', label: 'Welcome Title Font', description: 'CSS font-family, e.g. Georgia, serif', type: 'text', path: 'theme.components.introCard.title.fontFamily', defaultValue: '', parseValue: parseOptionalCssValue },
+    { id: 'welcome-title-font-size', label: 'Welcome Title Size', description: 'CSS length, e.g. 1.5rem', type: 'text', path: 'theme.components.introCard.title.fontSize', defaultValue: '', parseValue: parseOptionalCssValue },
+    { id: 'welcome-title-font-weight', label: 'Welcome Title Weight', type: 'select', path: 'theme.components.introCard.title.fontWeight', defaultValue: '', options: TEXT_FONT_WEIGHT_OPTIONS, parseValue: parseOptionalCssValue },
+  ],
+};
+
 export const COMPONENT_SHAPE_SECTIONS: SectionDef[] = [
   panelLayoutSectionDef,
   launcherLayoutSectionDef,
   messageShapeSectionDef,
   inputShapeSectionDef,
+  composerSpacingSectionDef,
   buttonShapeSectionDef,
+  textStylesSectionDef,
   componentShadowsSectionDef,
 ];
 
@@ -513,6 +581,7 @@ export const COMPONENT_COLOR_SECTIONS: SectionDef[] = [
   inputColorsSectionDef,
   buttonColorsSectionDef,
   scrollToBottomSectionDef,
+  suggestionStyleSectionDef,
 ];
 
 export const COMPONENTS_SECTIONS: SectionDef[] = [
@@ -526,9 +595,9 @@ export const COMPONENTS_SECTIONS: SectionDef[] = [
 
 const MB = 1024 * 1024;
 const DEFAULT_SUGGESTION_CHIPS = [
-  'What can you help me with?',
-  'Tell me about your features',
-  'How does this work?',
+  'Show me what you can help with',
+  'Walk me through getting started',
+  'Answer a question about this page',
 ];
 
 const ATTACHMENT_TYPE_PRESETS: Record<string, string[]> = {
@@ -569,16 +638,24 @@ const copySectionDef: SectionDef = {
   fields: [
     { id: 'copy-show-welcome-card', label: 'Show Welcome Card', type: 'toggle', path: 'copy.showWelcomeCard', defaultValue: true },
     { id: 'copy-welcome-title', label: 'Welcome Title', type: 'text', path: 'copy.welcomeTitle', defaultValue: 'Hello 👋' },
-    { id: 'copy-welcome-subtitle', label: 'Welcome Subtitle', type: 'text', path: 'copy.welcomeSubtitle', defaultValue: 'Ask anything about your account or products.' },
+    { id: 'copy-welcome-subtitle', label: 'Welcome Subtitle', type: 'text', path: 'copy.welcomeSubtitle', defaultValue: 'I can answer questions and help you get things done here.' },
     { id: 'copy-placeholder', label: 'Input Placeholder', type: 'text', path: 'copy.inputPlaceholder', defaultValue: 'Type your message…' },
     { id: 'copy-send-label', label: 'Send Button Label', type: 'text', path: 'copy.sendButtonLabel', defaultValue: 'Send' },
   ],
 };
 
 const suggestionsSectionDef: SectionDef = {
-  id: 'suggestions', title: 'Suggestion Chips', description: 'Configure chip content and styling.', collapsed: true,
+  id: 'suggestions', title: 'Suggestions', description: 'Configure starter prompts and agent follow-ups.', collapsed: true,
   fields: [
-    { id: 'suggestions-list', label: 'Suggestions', description: 'Add, edit, and remove chips directly.', type: 'chip-list', path: 'suggestionChips', defaultValue: DEFAULT_SUGGESTION_CHIPS },
+    { id: 'suggestions-list', label: 'Starter Prompts', description: 'Add, edit, and remove starter prompts directly.', type: 'chip-list', path: 'suggestionChips', defaultValue: DEFAULT_SUGGESTION_CHIPS },
+    { id: 'suggestions-starter-variant', label: 'Starter Style', type: 'select', path: 'suggestions.starters.variant', defaultValue: 'card', options: [{ value: 'card', label: 'Cards' }, { value: 'chip', label: 'Chips' }, { value: 'list', label: 'List' }] },
+    { id: 'suggestions-starter-placement', label: 'Starter Placement', type: 'select', path: 'suggestions.starters.placement', defaultValue: 'auto', options: [{ value: 'auto', label: 'Automatic' }, { value: 'welcome', label: 'Welcome Surface' }, { value: 'composer', label: 'Above Composer' }] },
+    { id: 'suggestions-starter-behavior', label: 'Starter Click', type: 'select', path: 'suggestions.starters.behavior', defaultValue: 'send', options: [{ value: 'send', label: 'Send Immediately' }, { value: 'fill', label: 'Fill Composer' }] },
+    { id: 'suggestions-starter-overflow', label: 'Starter Overflow', type: 'select', path: 'suggestions.starters.overflow', defaultValue: 'wrap', options: [{ value: 'wrap', label: 'Wrap Rows' }, { value: 'scroll', label: 'Horizontal Scroll' }] },
+    { id: 'suggestions-followup-variant', label: 'Follow-up Style', type: 'select', path: 'suggestions.followUps.variant', defaultValue: 'chip', options: [{ value: 'chip', label: 'Chips' }, { value: 'card', label: 'Cards' }, { value: 'list', label: 'List' }] },
+    { id: 'suggestions-followup-placement', label: 'Follow-up Placement', type: 'select', path: 'suggestions.followUps.placement', defaultValue: 'auto', options: [{ value: 'auto', label: 'Automatic' }, { value: 'after-message', label: 'After Messages' }, { value: 'composer', label: 'Above Composer' }] },
+    { id: 'suggestions-followup-behavior', label: 'Follow-up Click', type: 'select', path: 'suggestions.followUps.behavior', defaultValue: 'send', options: [{ value: 'send', label: 'Send Immediately' }, { value: 'fill', label: 'Fill Composer' }] },
+    { id: 'suggestions-followup-overflow', label: 'Follow-up Overflow', type: 'select', path: 'suggestions.followUps.overflow', defaultValue: 'scroll', options: [{ value: 'scroll', label: 'Horizontal Scroll' }, { value: 'wrap', label: 'Wrap Rows' }] },
   ],
 };
 

package/src/theme-reference.ts

@@ -120,7 +120,9 @@ export const THEME_TOKEN_DOCS = {
       header: {
         description: 'Chat panel header.',
         properties:
-          'background, border, borderRadius, padding, iconBackground, iconForeground, titleForeground, subtitleForeground, actionIconForeground, shadow, borderBottom.',
+          'background, border, borderRadius, padding, iconBackground, iconForeground, actionIconForeground, shadow, borderBottom, title and subtitle (each fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color).',
+        legacy:
+          'titleForeground and subtitleForeground are legacy aliases of header.title.color and header.subtitle.color. Both still work; the title/subtitle color wins when both are set.',
       },
       message: {
         description: 'Chat message bubbles.',
@@ -131,7 +133,19 @@ export const THEME_TOKEN_DOCS = {
       markdown: {
         description: 'Markdown rendering in messages and artifact pane.',
         properties:
-          'inlineCode (background, foreground), link.foreground, prose.fontFamily, heading.h1/h2 (fontSize, fontWeight).',
+          'inlineCode (background, foreground), link.foreground, prose.fontFamily, heading.h1/h2 (fontSize, fontWeight), codeBlock (background, borderColor, textColor, borderRadius: follows palette.radius.md), table (headerBackground, borderColor), hr.color, blockquote (borderColor, background, textColor).',
+      },
+      introCard: {
+        description:
+          'Welcome surface above the message list. Flat by default (transparent, no shadow).',
+        properties:
+          'background, borderRadius, padding, shadow, border (full CSS shorthand, default none), title and subtitle (each fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color).',
+      },
+      suggestion: {
+        description:
+          'Starter prompt and follow-up suggestion chrome. Three variants: chip, card, list.',
+        properties:
+          'background, foreground, border, borderRadius, padding, shadow, gap (icon to copy inside one item), itemGap (space between items, default 8px), minHeight, fontSize, lineHeight, iconSize, hoverBackground, hoverForeground, hoverBorder, pressedBackground, focusRing, disabledOpacity.',
       },
       voice:
         'recording (indicator, background, border), processing (icon, background), speaking (icon).',
@@ -141,8 +155,11 @@ export const THEME_TOKEN_DOCS = {
       scrollToBottom:
         'Floating scroll-to-bottom affordance shared by transcript and event stream: background, foreground, border, size, borderRadius, shadow, padding, gap, fontSize, iconSize.',
       toolBubble: 'shadow: tool call row box-shadow.',
+      scrollbar:
+        'Shared scrollbar appearance for every scroller: thumb (default semantic.colors.border), track (default transparent).',
       reasoningBubble: 'shadow: reasoning/thinking row box-shadow.',
-      composer: 'shadow: message input form box-shadow.',
+      composer:
+        'Message input form: shadow (box-shadow), borderColor, padding (form inset), gap (textarea row to actions row), fontSize and lineHeight (textarea type).',
       artifact:
         'toolbar (icon styling, copy menu), tab (background, active states), pane (background, toolbarBackground).',
     },
@@ -234,7 +251,7 @@ export const THEME_TOKEN_DOCS = {
     copy: {
       description: 'Widget text content.',
       properties:
-        'showWelcomeCard (boolean), welcomeTitle, welcomeSubtitle, inputPlaceholder, sendButtonLabel.',
+        'inputPlaceholder, sendButtonLabel, stopButtonLabel. (showWelcomeCard, welcomeTitle, welcomeSubtitle are deprecated aliases of the welcome namespace.)',
     },
     voiceRecognition: {
       description: 'Voice input configuration.',
@@ -245,8 +262,20 @@ export const THEME_TOKEN_DOCS = {
       properties:
         'enabled, provider ("browser" | "runtype"), browserFallback, voice, rate, pitch.',
     },
+    suggestions: {
+      description:
+        'Rich starter and follow-up suggestion surfaces. Strings remain valid item shorthand.',
+      properties:
+        'starters.items, starters.variant ("card" | "chip" | "list"), starters.placement ("auto" | "welcome" | "composer"), starters.behavior ("send" | "fill"), starters.overflow ("scroll" | "wrap"), starters.maxItems, followUps.enabled, followUps.expose, followUps.variant, followUps.placement ("auto" | "after-message" | "composer"), followUps.behavior, followUps.overflow ("scroll" | "wrap"), followUps.maxItems.',
+    },
+    welcome: {
+      description:
+        'First-open welcome surface. Supersedes copy.welcomeTitle / welcomeSubtitle / showWelcomeCard.',
+      properties:
+        'title, subtitle, icon ({ type: "lucide", name } | { type: "image", url, alt } | { type: "text", text } | function), variant ("card" | "hero" | "none"), dismiss ("never" | "on-first-message"), message (display-only greeting bubble, ignored under "hero").',
+    },
     suggestionChips:
-      'string[]: Suggested prompts shown to the user.',
+      'Deprecated string[] shorthand for starter prompts. Prefer suggestions.starters.items.',
     messageActions: {
       description: 'Message action buttons (copy, upvote, downvote).',
       properties:

package/src/types/theme.ts

@@ -202,6 +202,16 @@ export interface PanelTokens extends ComponentTokenSet {
   canvasBackground?: string;
 }
 
+/** Per-element text styling shared by themable text surfaces. */
+export interface TextStyleTokens {
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  color?: TokenReference<'color'>;
+}
+
 export interface HeaderTokens extends ComponentTokenSet {
   background: TokenReference<'color'>;
   border: TokenReference<'color'>;
@@ -210,10 +220,14 @@ export interface HeaderTokens extends ComponentTokenSet {
   iconBackground: TokenReference<'color'>;
   /** Foreground (glyph stroke or emoji text) on the header avatar tile. */
   iconForeground: TokenReference<'color'>;
-  /** Header title line (next to the icon, or minimal layout title). */
+  /** Legacy alias of `title.color`; `title.color` wins when both are set. */
   titleForeground: TokenReference<'color'>;
-  /** Header subtitle line under the title. */
+  /** Legacy alias of `subtitle.color`; `subtitle.color` wins when both are set. */
   subtitleForeground: TokenReference<'color'>;
+  /** Header title typography (next to the icon, or minimal layout title). */
+  title?: TextStyleTokens;
+  /** Header subtitle typography, for the line under the title. */
+  subtitle?: TextStyleTokens;
   /** Default color for clear / close icon buttons when launcher overrides are unset. */
   actionIconForeground: TokenReference<'color'>;
   /** Box-shadow on the header (e.g., a fade shadow to replace the default border). */
@@ -245,7 +259,7 @@ export interface MessageTokens {
 
 /**
  * Welcome / intro card rendered above the message list when no messages exist.
- * Set `copy.showWelcomeCard: false` to hide it; use `layout.slots["body-top"]`
+ * Set `welcome.variant: "none"` to hide it; use `layout.slots["body-top"]`
  * to replace it wholesale.
  */
 export interface IntroCardTokens extends ComponentTokenSet {
@@ -254,6 +268,12 @@ export interface IntroCardTokens extends ComponentTokenSet {
   padding?: TokenReference<'spacing'>;
   /** Box-shadow on the intro card (token ref or raw CSS, e.g. `none`). */
   shadow?: string;
+  /** Full border shorthand on the intro card (raw CSS, e.g. `"1px solid rgba(0,0,0,0.1)"`). @default "none" */
+  border?: string;
+  /** Welcome title typography. */
+  title?: TextStyleTokens;
+  /** Welcome subtitle typography. */
+  subtitle?: TextStyleTokens;
 }
 
 /** Collapsible widget chrome (tool bubbles, reasoning bubbles, approval bubbles). */
@@ -298,6 +318,8 @@ export interface MarkdownTokens {
     background?: TokenReference<'color'>;
     borderColor?: TokenReference<'color'>;
     textColor?: TokenReference<'color'>;
+    /** Corner radius; follows `palette.radius.md` by default so square-corner themes get square code blocks. */
+    borderRadius?: TokenReference<'radius'>;
   };
   /** Table styling. */
   table?: {
@@ -361,10 +383,28 @@ export interface ReasoningBubbleTokens {
   shadow: string;
 }
 
+/** Scrollbar appearance shared by every scroller in the widget. */
+export interface ScrollbarTokens {
+  /** Thumb color. @default semantic.colors.border */
+  thumb?: TokenReference<'color'>;
+  /** Track color. @default "transparent" */
+  track?: TokenReference<'color'>;
+}
+
 /** Composer (message input) chrome. */
 export interface ComposerChromeTokens {
   /** Box-shadow on the composer form (raw CSS, e.g. `none`). */
   shadow: string;
+  /** Border color of the composer form. @default semantic.colors.border */
+  borderColor?: TokenReference<'color'>;
+  /** Inner padding of the composer form (raw CSS shorthand). @default "0.75rem 1rem" */
+  padding?: string;
+  /** Gap between the textarea row and the actions row. @default "0.5rem" */
+  gap?: string;
+  /** Composer textarea font-size. @default "0.875rem" */
+  fontSize?: string;
+  /** Composer textarea line-height. @default "1.25rem" */
+  lineHeight?: string;
 }
 
 /** Artifact toolbar chrome. */
@@ -524,6 +564,31 @@ export interface ScrollToBottomTokens extends ComponentTokenSet {
   iconSize?: string;
 }
 
+/** Visual tokens shared by one suggestion presentation variant. */
+export interface SuggestionVariantTokens extends ComponentTokenSet {
+  /** Space inside one item, between its icon and its copy. */
+  gap?: string;
+  /** Space between suggestion items in the container. */
+  itemGap?: string;
+  minHeight?: string;
+  fontSize?: string;
+  lineHeight?: string;
+  iconSize?: string;
+  hoverBackground?: TokenReference<'color'>;
+  hoverForeground?: TokenReference<'color'>;
+  hoverBorder?: TokenReference<'color'>;
+  pressedBackground?: TokenReference<'color'>;
+  focusRing?: TokenReference<'color'>;
+  disabledOpacity?: string;
+}
+
+/** Starter and follow-up suggestion chrome. */
+export interface SuggestionTokens {
+  chip: SuggestionVariantTokens;
+  card: SuggestionVariantTokens;
+  list: SuggestionVariantTokens;
+}
+
 /** Toggle group chrome (used by createToggleGroup). */
 export interface ToggleGroupTokens {
   /** Gap between toggle buttons. Default: 0 (connected). */
@@ -549,12 +614,16 @@ export interface ComponentTokens {
   toolBubble: ToolBubbleTokens;
   reasoningBubble: ReasoningBubbleTokens;
   composer: ComposerChromeTokens;
+  /** Scrollbar appearance for every scroller in the widget. */
+  scrollbar?: ScrollbarTokens;
   /** Icon button styling tokens. */
   iconButton?: IconButtonTokens;
   /** Label button styling tokens. */
   labelButton?: LabelButtonTokens;
   /** Scroll-to-bottom indicator styling tokens. */
   scrollToBottom?: ScrollToBottomTokens;
+  /** Starter prompt and follow-up suggestion styling tokens. */
+  suggestion?: SuggestionTokens;
   /** Toggle group styling tokens. */
   toggleGroup?: ToggleGroupTokens;
   /** Artifact toolbar, tab strip, and pane chrome. */