@vertesia/ui 1.6.0-dev.20261008.064737Z → 1.6.0-dev.20261014.015055Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.6.0-dev.20261008.064737Z",
+  "version": "1.6.0-dev.20261014.015055Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -47,11 +47,11 @@
     "@radix-ui/react-switch": "^1.3.7",
     "@radix-ui/react-tabs": "^1.1.21",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@vertesia/client": "1.6.0-dev.20261008.064737Z",
-    "@vertesia/common": "1.6.0-dev.20261008.064737Z",
-    "@vertesia/fusion-ux": "1.6.0-dev.20261008.064737Z",
-    "@vertesia/json": "1.6.0-dev.20261008.064737Z",
-    "@vertesia/rich-text": "1.6.0-dev.20261008.064737Z",
+    "@vertesia/client": "1.6.0-dev.20261014.015055Z",
+    "@vertesia/common": "1.6.0-dev.20261014.015055Z",
+    "@vertesia/fusion-ux": "1.6.0-dev.20261014.015055Z",
+    "@vertesia/json": "1.6.0-dev.20261014.015055Z",
+    "@vertesia/rich-text": "1.6.0-dev.20261014.015055Z",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "aria-hidden": "^1.2.6",
@@ -63,15 +63,15 @@
     "dompurify": "^3.4.16",
     "fast-xml-parser": "^5.11.2",
     "firebase": "^12.19.0",
-    "framer-motion": "^13.4.4",
+    "framer-motion": "^13.5.1",
     "i18next": "^26.4.2",
     "jwt-decode": "^4.0.0",
-    "katex": "^0.18.9",
+    "katex": "^0.19.0",
     "lodash-es": "^4.18.1",
-    "lucide-react": "^1.48.0",
-    "mermaid": "^12.0.0",
+    "lucide-react": "^1.52.0",
+    "mermaid": "^12.1.0",
     "monaco-editor": "^0.57.0",
-    "motion": "^13.4.4",
+    "motion": "^13.5.1",
     "papaparse": "^5.7.0",
     "react": "19.3.0",
     "react-calendar": "^6.0.1",
@@ -83,11 +83,11 @@
     "react-pdf": "^10.5.0",
     "react-remove-scroll": "^2.7.2",
     "react-remove-scroll-bar": "^2.3.8",
-    "react-resizable-panels": "^4.14.1",
+    "react-resizable-panels": "^4.14.2",
     "react-style-singleton": "^2.2.3",
     "react-vega": "^8.0.0",
     "rehype-katex": "^7.0.1",
-    "remark-definition-list": "^2.0.0",
+    "remark-definition-list": "^2.0.1",
     "remark-directive": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-github-blockquote-alert": "^2.1.0",
@@ -105,19 +105,19 @@
     "@testing-library/user-event": "^14.6.7",
     "@types/hast": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.19.0",
+    "@types/node": "^24.19.1",
     "@types/papaparse": "^5.5.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vertesia/tsconfig": "0.1.0",
-    "axe-core": "^4.13.0",
+    "axe-core": "^4.14.0",
     "culori": "^4.0.2",
-    "i18next-cli": "^1.74.2",
-    "jsdom": "^30.1.1",
-    "rolldown": "1.2.11",
+    "i18next-cli": "^1.74.8",
+    "jsdom": "^30.1.2",
+    "rolldown": "1.2.12",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "vitest": "5.0.2",
+    "vitest": "5.0.3",
     "vitest-axe": "^0.1.0",
     "wcag-contrast": "^3.0.0"
   },
@@ -193,7 +193,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "8ee3a33e9a7c3dbcd13937e971cbdcc5fad56717",
+  "gitHead": "468240ecf939f968e1324116be26386cdf5ada49",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/boot/index.ts

@@ -1,5 +1,7 @@
+import { isRTL, LANGUAGE_STORAGE_KEY, SUPPORTED_LANGUAGES, type SupportedLanguage } from '../i18n/rtl.js';
 import { vertesiaBranding } from './branding.js';
 import { LOADING_ICON_SIZE, LOADING_INDICATOR_STYLES } from './loading.js';
+import { BOOT_TEXT, type BootText } from './text.js';
 
 export interface BootScreenOptions {
     storageKey?: string;
@@ -8,6 +10,12 @@ export interface BootScreenOptions {
     slowLoadingLabel?: string;
     reloadLabel?: string;
     loadingLabel?: string;
+    /**
+     * Language of the boot copy. `'auto'` (the default) resolves it the way `LanguageProvider` does:
+     * the saved choice, then the browser language, then English. Pin a language when the app's
+     * React tree pins one, so the boot screen and the app agree.
+     */
+    language?: SupportedLanguage | 'auto';
     autoStart?: boolean;
     /** Trusted, app-authored HTML inside the loading container. Never pass user content. */
     html?: string;
@@ -22,7 +30,6 @@ export interface BootScreenHtmlPlugin {
 
 const DEFAULT_STORAGE_KEY = 'vite-ui-theme';
 const DEFAULT_ICON_SRC = vertesiaBranding.loadingIcon.light;
-const DEFAULT_LOADING_LABEL = 'Loading';
 
 export const BOOT_SCREEN_STYLES = `
 ${LOADING_INDICATOR_STYLES}
@@ -103,44 +110,95 @@ ${LOADING_INDICATOR_STYLES}
   }
 `;
 
-function inlineJson(value: string): string {
+function inlineJson(value: unknown): string {
     return JSON.stringify(value).replaceAll('<', '\\u003c');
 }
 
 function normalizedOptions(options: BootScreenOptions) {
     return {
+        ...options,
         storageKey: options.storageKey ?? DEFAULT_STORAGE_KEY,
         iconSrc: options.iconSrc ?? DEFAULT_ICON_SRC,
-        loadingLabel: options.loadingLabel ?? DEFAULT_LOADING_LABEL,
+        language: options.language ?? 'auto',
         autoStart: options.autoStart ?? true,
-        html: options.html,
-        styles: options.styles,
     };
 }
 
-/** Default markup shared by Studio and configurable applications. */
+/** An app-supplied label wins in every language. */
+function bootText(options: BootScreenOptions, language: SupportedLanguage): BootText {
+    return {
+        loading: options.loadingLabel ?? BOOT_TEXT[language].loading,
+        slowLoading: options.slowLoadingLabel ?? BOOT_TEXT[language].slowLoading,
+        reload: options.reloadLabel ?? BOOT_TEXT[language].reload,
+    };
+}
+
+/** The copy of every language the runtime may pick: only the pinned one, or all of them. */
+function bootTexts(options: BootScreenOptions): Partial<Record<SupportedLanguage, BootText>> {
+    const languages = options.language && options.language !== 'auto' ? [options.language] : SUPPORTED_LANGUAGES;
+    return Object.fromEntries(languages.map((language) => [language, bootText(options, language)]));
+}
+
+/**
+ * Default markup shared by Studio and configurable applications. It carries the copy of the pinned
+ * language (English under `'auto'`); `data-boot-text` and `data-boot-alt` let the runtime swap in
+ * the language it resolves at page load. Custom `html` may use the same attributes.
+ */
 export function renderDefaultBootContent(options: BootScreenOptions = {}): string {
     const escapeMarkup = (value: string) =>
         value.replace(
             /[&<>"']/g,
             (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char] ?? char,
         );
-    const { iconSrc, loadingLabel } = normalizedOptions(options);
+    const { iconSrc, language } = normalizedOptions(options);
+    const text = bootText(options, language === 'auto' ? 'en' : language);
     const icon = (src: string, className = '') =>
-        `<img class="vboot-spinner vertesia-loading-icon vertesia-loading-motion ${className}" width="${LOADING_ICON_SIZE}" height="${LOADING_ICON_SIZE}" src="${escapeMarkup(src)}" alt="${escapeMarkup(loadingLabel)}" />`;
+        `<img class="vboot-spinner vertesia-loading-icon vertesia-loading-motion ${className}" width="${LOADING_ICON_SIZE}" height="${LOADING_ICON_SIZE}" src="${escapeMarkup(src)}" alt="${escapeMarkup(text.loading)}" data-boot-alt="loading" />`;
     return `<div class="vboot-overlay" role="status" aria-live="polite">${options.darkIconSrc ? icon(iconSrc, 'vboot-icon-light') + icon(options.darkIconSrc, 'vboot-icon-dark') : icon(iconSrc)}
 <div id="loading-slow-notice" class="vboot-slow" style="display: none;">
-<p>${escapeMarkup(options.slowLoadingLabel ?? 'Still loading — this is taking longer than usual.')}</p>
-<div id="loading-slow-reload" style="display: none;"><button type="button" class="vboot-btn" data-boot-reload>${escapeMarkup(options.reloadLabel ?? 'Reload page')}</button></div></div></div>`;
+<p data-boot-text="slowLoading">${escapeMarkup(text.slowLoading)}</p>
+<div id="loading-slow-reload" style="display: none;"><button type="button" class="vboot-btn" data-boot-reload data-boot-text="reload">${escapeMarkup(text.reload)}</button></div></div></div>`;
 }
 
 export function renderBootScreenRuntime(options: BootScreenOptions = {}): string {
-    const { storageKey, html } = normalizedOptions(options);
+    const { storageKey, html, language } = normalizedOptions(options);
     const defaultHtml = renderDefaultBootContent(options);
     return `(() => {
   const storageKey = ${inlineJson(storageKey)};
 
   const customHtml = ${html === undefined ? 'undefined' : inlineJson(html)};
+  const bootText = ${inlineJson(bootTexts(options))};
+  // Mirrors resolveLanguage and LanguageProvider's initial read (i18n/rtl.ts, i18n/LanguageProvider.tsx).
+  const hasText = (code) => Object.prototype.hasOwnProperty.call(bootText, code);
+  const resolveLanguage = (raw) => {
+    if (!raw) return 'en';
+    if (hasText(raw)) return raw;
+    const base = String(raw).split('-')[0];
+    return hasText(base) ? base : 'en';
+  };
+  const language = (() => {
+    const pinned = ${inlineJson(language)};
+    if (pinned !== 'auto') return pinned;
+    try {
+      const stored = window.localStorage.getItem(${inlineJson(LANGUAGE_STORAGE_KEY)});
+      if (stored) return resolveLanguage(stored);
+    } catch (_error) {
+      // Storage can be unavailable in private or restricted browsing contexts.
+    }
+    return resolveLanguage(window.navigator && window.navigator.language);
+  })();
+  const direction = ${inlineJson(SUPPORTED_LANGUAGES.filter((code) => isRTL(code)))}.includes(language) ? 'rtl' : 'ltr';
+  const localize = (container) => {
+    const text = bootText[language];
+    container.querySelectorAll('[data-boot-text]').forEach((node) => {
+      const value = text[node.getAttribute('data-boot-text')];
+      if (value) node.textContent = value;
+    });
+    container.querySelectorAll('[data-boot-alt]').forEach((node) => {
+      const value = text[node.getAttribute('data-boot-alt')];
+      if (value) node.setAttribute('alt', value);
+    });
+  };
   let slowNoticeTimer;
   let slowReloadTimer;
   const previewTheme = (() => {
@@ -196,7 +254,10 @@ export function renderBootScreenRuntime(options: BootScreenOptions = {}): string
     const loading = document.createElement('div');
     loading.id = 'loading-indicator';
     loading.className = bootThemeClass();
+    loading.lang = language;
+    loading.dir = direction;
     loading.innerHTML = customHtml ?? ${inlineJson(defaultHtml)};
+    localize(loading);
     loading.querySelectorAll('[data-boot-title]').forEach((heading) => {
       if (document.title) heading.textContent = document.title;
     });
@@ -251,6 +312,8 @@ export function renderBootScreenRuntime(options: BootScreenOptions = {}): string
     }, 30000);
   };
   window.__vertesiaBoot = {
+    direction,
+    language,
     scheduleSlowLoadingNotice,
     applyTheme,
     bootThemeClass,

package/src/boot/text.ts

@@ -0,0 +1,80 @@
+import type { SupportedLanguage } from '../i18n/rtl.js';
+
+/**
+ * Copy for the pre-React boot overlay. It renders before any bundle loads, so it cannot use the
+ * `vertesia.ui` locale files: each string is inlined into the page by the boot runtime.
+ */
+export interface BootText {
+    /** Accessible name of the loading spinner. */
+    loading: string;
+    slowLoading: string;
+    reload: string;
+}
+
+export const BOOT_TEXT: Record<SupportedLanguage, BootText> = {
+    ar: {
+        loading: 'جارٍ التحميل',
+        slowLoading: 'لا يزال التحميل جاريًا — يستغرق الأمر وقتًا أطول من المعتاد.',
+        reload: 'إعادة تحميل الصفحة',
+    },
+    de: {
+        loading: 'Wird geladen',
+        slowLoading: 'Wird noch geladen – das dauert länger als üblich.',
+        reload: 'Seite neu laden',
+    },
+    en: {
+        loading: 'Loading',
+        slowLoading: 'Still loading — this is taking longer than usual.',
+        reload: 'Reload page',
+    },
+    es: {
+        loading: 'Cargando',
+        slowLoading: 'Todavía cargando: está tardando más de lo habitual.',
+        reload: 'Recargar la página',
+    },
+    fr: {
+        loading: 'Chargement',
+        slowLoading: 'Chargement en cours — cela prend plus de temps que d’habitude.',
+        reload: 'Recharger la page',
+    },
+    it: {
+        loading: 'Caricamento',
+        slowLoading: 'Caricamento ancora in corso: ci vuole più tempo del solito.',
+        reload: 'Ricarica la pagina',
+    },
+    ja: {
+        loading: '読み込み中',
+        slowLoading: '読み込み中です。通常より時間がかかっています。',
+        reload: 'ページを再読み込み',
+    },
+    ko: {
+        loading: '로드 중',
+        slowLoading: '아직 로드 중입니다. 평소보다 시간이 더 걸리고 있습니다.',
+        reload: '페이지 새로고침',
+    },
+    pt: {
+        loading: 'Carregando',
+        slowLoading: 'Ainda carregando — está demorando mais do que o normal.',
+        reload: 'Recarregar a página',
+    },
+    ru: {
+        loading: 'Загрузка',
+        slowLoading: 'Загрузка продолжается — это занимает больше времени, чем обычно.',
+        reload: 'Перезагрузить страницу',
+    },
+    tr: {
+        loading: 'Yükleniyor',
+        slowLoading: 'Hâlâ yükleniyor — bu, normalden uzun sürüyor.',
+        reload: 'Sayfayı yeniden yükle',
+    },
+    zh: {
+        loading: '正在加载',
+        slowLoading: '仍在加载，所需时间比平时更长。',
+        reload: '重新加载页面',
+    },
+    'zh-TW': {
+        loading: '載入中',
+        slowLoading: '仍在載入，所需時間比平常更長。',
+        reload: '重新載入頁面',
+    },
+};

package/src/core/components/shadcn/button.tsx

@@ -188,6 +188,7 @@ interface CopyButtonProps {
     /** @deprecated use `aria-label` */
     alt?: string;
     'aria-label'?: string;
+    BtnIcon?: React.ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon';
     toast?: {
         toast: (options: { status: 'success' | 'error'; title: string; duration: number }) => void;
@@ -197,7 +198,7 @@ interface CopyButtonProps {
 }
 
 const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
-    ({ size, content, toast, className, alt, 'aria-label': ariaLabel, ...props }, ref) => {
+    ({ size, content, toast, className, alt, BtnIcon, 'aria-label': ariaLabel, ...props }, ref) => {
         const [isCopied, setIsCopied] = useState(false);
         const { t } = useUITranslation();
 
@@ -246,7 +247,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
                 {...props}
                 title={label}
             >
-                {isCopied ? <Check className="text-success" /> : <CopyIcon className="size-4" />}
+                {isCopied ? <Check className="text-success" /> : (BtnIcon ?? <CopyIcon className="size-4" />)}
             </Button>
         );
     },

package/src/core/components/shadcn/selectBox.tsx

@@ -287,7 +287,7 @@ export function SelectBox<T = unknown>({
     const renderOptionsContent = () => (
         <>
             {filterBy && (
-                <div className="flex justify-start items-center mb-1">
+                <div className="flex justify-start items-center mb-1 shrink-0">
                     <div className="mx-2">
                         <SearchIcon className="size-4" />
                     </div>
@@ -300,9 +300,9 @@ export function SelectBox<T = unknown>({
                     />
                 </div>
             )}
-            <Command className="overflow-hidden">
+            <Command className={inline ? 'min-h-0 flex-1' : 'overflow-hidden'}>
                 <CommandList
-                    className={inline ? 'max-h-full overflow-y-auto' : 'max-h-[200px] overflow-y-auto'}
+                    className={inline ? 'min-h-0 flex-1 overflow-y-auto' : 'max-h-[200px] overflow-y-auto'}
                     onWheel={(e) => {
                         e.currentTarget.scrollTop += e.deltaY;
                     }}
@@ -342,7 +342,15 @@ export function SelectBox<T = unknown>({
 
     if (inline) {
         return (
-            <div className={clsx(className, border && 'border border-border rounded-md', 'bg-popover p-1', popupClass)}>
+            <div
+                className={clsx(
+                    'flex flex-col',
+                    className,
+                    border && 'border border-border rounded-md',
+                    'bg-popover p-1',
+                    popupClass,
+                )}
+            >
                 {isLoading ? (
                     <div className="flex justify-center items-center p-2 text-muted text-sm">
                         <LoaderCircle className="size-4 animate-spin" />

package/src/css/index.css

@@ -15,7 +15,7 @@
  *   @import "@vertesia/ui/css/theme.css";
  *
  * Typography (.vprose) is opt-in since it requires @tailwindcss/typography:
- *   @import "@vertesia/ui/css/typography.css" layer(base);
+ *   @import "@vertesia/ui/css/typography.css";
  */
 
 @import "./color.css" layer(base);

package/src/css/typography.css

@@ -1,89 +1,112 @@
-.vprose {
-    @apply prose text-foreground max-w-none;
-}
-
-.vprose p {
-    @apply bg-transparent my-2;
-}
-
-.vprose a {
-    @apply text-info hover:text-info/80;
-}
-
-.vprose pre,
-.vprose code {
-    @apply !bg-muted text-muted my-2;
-}
-
-.vprose h1,
-.vprose h2,
-.vprose h3,
-.vprose h4,
-.vprose h5,
-.vprose h6 {
-    @apply text-foreground;
-}
-
-.vprose strong {
-    @apply text-foreground font-bold;
-}
-
-.vprose em {
-    @apply italic;
-}
-
-.vprose ul {
-    @apply my-3 ps-6 list-disc space-y-1;
-}
-
-.vprose ol {
-    @apply my-3 ps-6 list-decimal space-y-1;
-}
-
-.vprose li {
-    @apply text-mixer-foreground/50 my-2 ps-1;
-}
-
-.vprose blockquote {
-    @apply border-s-4 border-muted/30 ps-4 italic text-muted my-3;
-}
-
-.vprose hr {
-    @apply border-muted/30 my-4;
-}
-
-.vprose h1 {
-    @apply font-bold text-2xl my-2;
-}
-
-.vprose h2 {
-    @apply font-bold text-xl my-2;
-}
-
-.vprose h3 {
-    @apply font-bold text-lg my-2;
-}
-
-.vprose table {
-    @apply min-w-full border-collapse border border-muted/30 my-4;
-}
-
-.vprose th {
-    @apply border border-muted/30 bg-mixer-muted/50 px-4 py-2 text-start text-muted font-bold;
-}
-
-.vprose td {
-    @apply border border-muted/30 px-4 py-2 text-muted;
-}
-
-.vprose code {
-    @apply font-mono text-sm;
-}
-
-.vprose :not(pre) > code {
-    @apply px-1.5 py-0.5 rounded text-muted bg-muted/20;
-}
-
-.vprose .code-language-indicator {
-    @apply text-xs px-3 py-1 rounded-t-md font-mono border-t border-s border-e -mb-2;
+/* Typography is opt-in. Own the layer here so normal imports cannot accidentally put
+   theme colours below the typography plugin's prose utilities. */
+@layer utilities {
+    .vprose {
+        @apply prose max-w-none;
+
+        /* Tailwind Typography's public palette interface. Use the active semantic tokens so
+           branding and dark mode share one source of truth; consumers do not need prose-invert.
+           https://github.com/tailwindlabs/tailwindcss-typography#adding-custom-color-themes */
+        --tw-prose-body: var(--foreground);
+        --tw-prose-headings: var(--foreground);
+        --tw-prose-lead: var(--muted);
+        --tw-prose-links: var(--info);
+        --tw-prose-bold: var(--foreground);
+        --tw-prose-counters: var(--muted);
+        --tw-prose-bullets: var(--muted);
+        --tw-prose-hr: var(--border);
+        --tw-prose-quotes: var(--muted);
+        --tw-prose-quote-borders: var(--border);
+        --tw-prose-captions: var(--muted);
+        --tw-prose-kbd: var(--foreground);
+        --tw-prose-kbd-shadows: var(--border);
+        --tw-prose-code: var(--muted);
+        --tw-prose-pre-code: var(--muted);
+        --tw-prose-pre-bg: var(--muted-background);
+        --tw-prose-th-borders: var(--border);
+        --tw-prose-td-borders: var(--border);
+    }
+
+    .vprose :where(p):not(:where(.not-prose, .not-prose *)) {
+        @apply bg-transparent my-2;
+    }
+
+    .vprose :where(a):not(:where(.not-prose, .not-prose *)) {
+        @variant hover {
+            color: color-mix(in oklab, var(--tw-prose-links) 80%, transparent);
+        }
+    }
+
+    .vprose :where(pre, code):not(:where(.not-prose, .not-prose *)) {
+        @apply my-2;
+        background-color: var(--tw-prose-pre-bg);
+    }
+
+    .vprose :where(strong):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold;
+    }
+
+    .vprose :where(em):not(:where(.not-prose, .not-prose *)) {
+        @apply italic;
+    }
+
+    .vprose :where(ul):not(:where(.not-prose, .not-prose *)) {
+        @apply my-3 ps-6 list-disc space-y-1;
+    }
+
+    .vprose :where(ol):not(:where(.not-prose, .not-prose *)) {
+        @apply my-3 ps-6 list-decimal space-y-1;
+    }
+
+    .vprose :where(li):not(:where(.not-prose, .not-prose *)) {
+        @apply my-2 ps-1;
+    }
+
+    .vprose :where(blockquote):not(:where(.not-prose, .not-prose *)) {
+        @apply border-s-4 ps-4 italic my-3;
+    }
+
+    .vprose :where(hr):not(:where(.not-prose, .not-prose *)) {
+        @apply my-4;
+    }
+
+    .vprose :where(h1):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold text-2xl my-2;
+    }
+
+    .vprose :where(h2):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold text-xl my-2;
+    }
+
+    .vprose :where(h3):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold text-lg my-2;
+    }
+
+    .vprose :where(table):not(:where(.not-prose, .not-prose *)) {
+        @apply min-w-full border-collapse border my-4;
+        border-color: var(--tw-prose-td-borders);
+    }
+
+    .vprose :where(th):not(:where(.not-prose, .not-prose *)) {
+        @apply border px-4 py-2 text-start font-bold;
+        border-color: var(--tw-prose-th-borders);
+        background-color: var(--muted-background);
+    }
+
+    .vprose :where(td):not(:where(.not-prose, .not-prose *)) {
+        @apply border px-4 py-2;
+        border-color: var(--tw-prose-td-borders);
+    }
+
+    .vprose :where(code):not(:where(.not-prose, .not-prose *)) {
+        @apply font-mono text-sm;
+    }
+
+    .vprose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
+        @apply px-1.5 py-0.5 rounded;
+    }
+
+    .vprose :where(.code-language-indicator):not(:where(.not-prose, .not-prose *)) {
+        @apply text-xs px-3 py-1 rounded-t-md font-mono border-t border-s border-e -mb-2;
+    }
 }

package/src/env/index.ts

@@ -1,8 +1,6 @@
 import { isTrustedAuthBrokerUrl } from '../session/auth/vertesiaHosts.js';
 
 export {
-    FIRST_PARTY_HOST_PATTERNS,
-    GATEWAY_HOST_PATTERNS,
     isLoopbackHostname,
     isTrustedAuthBrokerUrl,
     normalizeHostname,

package/src/features/agent/chat/AskUserWidget.tsx

@@ -169,7 +169,6 @@ export function AskUserWidget({
     submitButtonClassName,
 }: AskUserWidgetProps) {
     const { t } = useUITranslation();
-    const resolvedPlaceholder = placeholder ?? t('agent.typeYourResponse');
     const resolvedSubmitLabel = submitLabel ?? t('agent.send');
     const [inputValue, setInputValue] = React.useState('');
     const [selectedOptions, setSelectedOptions] = React.useState<Set<string>>(new Set());
@@ -179,6 +178,9 @@ export function AskUserWidget({
     const DefaultIcon = VARIANT_ICONS[variant];
     const validOptions = isAskUserOptions(options);
     const safeOptions = validOptions ? options : [];
+    // Next to predefined options the input is an alternative to picking one, not the whole prompt.
+    const resolvedPlaceholder =
+        placeholder ?? (safeOptions.length > 0 ? t('agent.typeDifferentResponse') : t('agent.typeYourResponse'));
     const invalidOptionsReported = React.useRef(false);
 
     React.useEffect(() => {

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -1397,10 +1397,13 @@ function StartWorkflowView({
                             rows={2}
                             className={cn(
                                 'min-h-[72px] resize-none border-0 bg-transparent px-0 py-0 text-sm leading-6 shadow-none focus-visible:ring-0',
-                                // The expanded composer is a fixed-height flex box (adjustTextareaHeight
-                                // pins it to 100%), so it has to scroll its own overflow. The auto-growing
-                                // variant hides overflow because it resizes to fit instead.
-                                isExpandedStartComposer ? 'min-h-0 flex-1 overflow-y-auto' : 'overflow-hidden',
+                                // Both variants scroll their own overflow: the expanded composer is a
+                                // fixed-height flex box (adjustTextareaHeight pins it to 100%), and the
+                                // auto-growing one stops growing at 200px. Hiding overflow there left long
+                                // text unscrollable, so the wheel scrolled the surrounding page instead.
+                                // overscroll-contain keeps that from happening at the ends of the text too.
+                                'overflow-y-auto overscroll-contain',
+                                isExpandedStartComposer && 'min-h-0 flex-1',
                                 inputClassName,
                             )}
                             style={