@a4ui/core 0.24.2 → 0.25.0

package/dist/lib/createOptimistic.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Holds an optimistic value that's updated immediately on `run`, then
+ * reconciled with the resolved (or rolled back on rejected) async result.
+ *
+ * @example
+ * ```ts
+ * const list = createOptimistic<Todo[]>([])
+ * async function addTodo(todo: Todo) {
+ *   await list.run([...list.value(), todo], () => api.addTodo(todo))
+ * }
+ * ```
+ */
+export declare function createOptimistic<T>(initial: T): {
+    value: () => T;
+    pending: () => boolean;
+    run: (optimistic: T, commit: () => Promise<T>) => Promise<T>;
+};

package/dist/lib/viewTransition.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Run `update` inside a View Transition when the browser supports it, so DOM
+ * changes cross-fade automatically; otherwise just run `update` synchronously.
+ * Respects reduced-motion (skips the transition).
+ * @example
+ * startViewTransition(() => setRoute('details'))
+ */
+export declare function startViewTransition(update: () => void): void;

package/dist/ui/ArtifactPanel.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+export interface ArtifactPanelProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: string;
+    /** Panel width in px when open. @default 420 */
+    width?: number;
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Right-side split panel that holds generated output (code, preview, doc) next
+ * to a chat — for AI UIs that keep the artifact and the conversation visible at
+ * once. Inline, not an overlay: place it as the last child of a flex row next
+ * to the main content. Slides open/closed by animating width (and a matching
+ * fade/slide on its content), reduced-motion aware via `motionReduced()`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <div class="flex h-full">
+ *   <main class="min-w-0 flex-1">…chat…</main>
+ *   <ArtifactPanel open={open()} onClose={() => setOpen(false)} title="script.py">
+ *     <pre class="p-4 text-sm">…generated code…</pre>
+ *   </ArtifactPanel>
+ * </div>
+ * ```
+ */
+export declare function ArtifactPanel(props: ArtifactPanelProps): JSX.Element;

package/dist/ui/ChatThread.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface ChatThreadProps {
+    children: JSX.Element;
+    /** Max width of the reading column, in px. Defaults to `768`. */
+    maxWidth?: number;
+    /** Auto-scroll to the newest message on mount and whenever children change. Defaults to `true`. */
+    stickToBottom?: boolean;
+    class?: string;
+}
+/**
+ * Scrollable, centered reading column that stacks chat messages. Layout-only:
+ * it renders whatever is passed as `children`, so pair it with your own
+ * message bubbles/components.
+ *
+ * @example
+ * ```tsx
+ * <ChatThread maxWidth={640}>
+ *   <div>Hi! Ask me anything about your itinerary.</div>
+ *   <div>What's the weather like in Rivertown this weekend?</div>
+ *   <div>Sunny and mild, 18–22°C, light breeze on Saturday.</div>
+ * </ChatThread>
+ * ```
+ */
+export declare function ChatThread(props: ChatThreadProps): JSX.Element;

package/dist/ui/Citation.d.ts

@@ -0,0 +1,44 @@
+import { JSX } from 'solid-js';
+export interface CitationProps {
+    /** The source number shown in the chip, e.g. `1`. */
+    index: number;
+    /** Links out to the source when present (opens in a new tab). */
+    href?: string;
+    /** Shown as a native tooltip and used as the accessible name. */
+    title?: string;
+    class?: string;
+}
+/**
+ * Small inline chip citing a numbered source, meant to sit inside a sentence
+ * right after the claim it backs up.
+ *
+ * @example
+ * ```tsx
+ * <p>
+ *   Glass surfaces use a translucent backdrop blur
+ *   <Citation index={1} href="https://example.com/spec" title="Design spec" />.
+ * </p>
+ * ```
+ */
+export declare function Citation(props: CitationProps): JSX.Element;
+export interface SourceListProps {
+    sources: {
+        title: string;
+        href?: string;
+    }[];
+    class?: string;
+}
+/**
+ * Compact numbered "Sources" block matching the indices used by {@link Citation}.
+ *
+ * @example
+ * ```tsx
+ * <SourceList
+ *   sources={[
+ *     { title: 'Design spec', href: 'https://example.com/spec' },
+ *     { title: 'Internal style guide' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SourceList(props: SourceListProps): JSX.Element;

package/dist/ui/FloatingToolbar.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface FloatingToolbarProps {
+    children: JSX.Element;
+    /** Which edge of the viewport the bar is anchored to. Defaults to `'bottom'`. */
+    position?: 'top' | 'bottom';
+    /** Shrink padding/scale and intensify the glass blur once scrolled past ~24px. Defaults to `true`. */
+    condenseOnScroll?: boolean;
+    class?: string;
+}
+/**
+ * Fixed, horizontally-centered glass toolbar that floats above the page
+ * content. When `condenseOnScroll` is on (the default), it tightens its
+ * padding and scales down slightly once the user scrolls past a small
+ * threshold, mimicking a "Liquid Glass" detached bar. Reduced-motion aware:
+ * the condense change applies instantly, without a transition, when
+ * {@link motionReduced} is true.
+ *
+ * @example
+ * ```tsx
+ * <FloatingToolbar position="bottom">
+ *   <IconButton label="Undo"><UndoIcon /></IconButton>
+ *   <IconButton label="Redo"><RedoIcon /></IconButton>
+ * </FloatingToolbar>
+ * ```
+ */
+export declare function FloatingToolbar(props: FloatingToolbarProps): JSX.Element;

package/dist/ui/InlineSelect.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+export interface InlineSelectOption {
+    value: string;
+    label: string;
+}
+export interface InlineSelectProps {
+    value: string;
+    options: InlineSelectOption[];
+    onChange: (value: string) => void;
+    placeholder?: string;
+    class?: string;
+}
+/**
+ * Edit-in-place select: renders the current value as a clickable chip until
+ * clicked, then swaps to a `Select` for picking a new value. Committing a
+ * choice returns it to text; blurring away or pressing Escape cancels back
+ * to the previous value. Built for status/priority-style editing inline in
+ * rows/tables.
+ *
+ * @example
+ * ```tsx
+ * <InlineSelect
+ *   value={status()}
+ *   options={[
+ *     { value: 'todo', label: 'To do' },
+ *     { value: 'doing', label: 'In progress' },
+ *     { value: 'done', label: 'Done' },
+ *   ]}
+ *   onChange={setStatus}
+ * />
+ * ```
+ */
+export declare function InlineSelect(props: InlineSelectProps): JSX.Element;

package/dist/ui/Message.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+/** Who sent a {@link Message}; drives its subtle visual treatment. */
+export type ChatRole = 'user' | 'assistant' | 'system';
+export interface MessageProps {
+    role: ChatRole;
+    children: JSX.Element;
+    /** Display name shown in the header line. Omitted for `system` messages. */
+    author?: string;
+    /** Small avatar node, e.g. an icon or `<Avatar/>`. Omitted for `system` messages. */
+    avatar?: JSX.Element;
+    /** Preformatted timestamp string, e.g. `'2:45 PM'`. */
+    timestamp?: string;
+    class?: string;
+}
+/**
+ * Full-width chat message row with no bubble: an optional avatar/author
+ * header line followed by a prose content block. Role is differentiated with
+ * subtle, token-based treatment only — `assistant` gets a faint muted panel,
+ * `user` stays plain, `system` is a small centered note.
+ *
+ * @example
+ * ```tsx
+ * <Message role="assistant" author="Nova" timestamp="2:45 PM">
+ *   <p>Here's the summary you asked for.</p>
+ * </Message>
+ * ```
+ */
+export declare function Message(props: MessageProps): JSX.Element;

package/dist/ui/PageTransition.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+/** Transition style for {@link PageTransition}. `slide` adds a small vertical shift. */
+export type PageTransitionMode = 'fade' | 'slide';
+export interface PageTransitionProps {
+    /** Change this value (e.g. a route or view id) to trigger a transition. */
+    key: string | number;
+    children: JSX.Element;
+    /** `fade` = opacity only; `slide` = opacity + small vertical shift. @default 'fade' */
+    mode?: PageTransitionMode;
+    class?: string;
+}
+/**
+ * Cross-fades (or slides) its `children` out and in whenever `key` changes —
+ * for route/view transitions. Driven purely by the `key` prop; pair it with a
+ * router's current path or any view-switch signal. Swaps instantly under
+ * reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <PageTransition key={activeTab()} mode="slide">
+ *   <TabContent id={activeTab()} />
+ * </PageTransition>
+ * ```
+ */
+export declare function PageTransition(props: PageTransitionProps): JSX.Element;

package/dist/ui/PromptComposer.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface PromptComposerProps {
+    value: string;
+    onInput: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Small helper text under the field, e.g. model name or a character count. */
+    hint?: JSX.Element;
+    /** Attachment labels/filenames shown as removable chips above the input. */
+    attachments?: string[];
+    onRemoveAttachment?: (index: number) => void;
+    /** When set, shows a paperclip button that calls this on click. */
+    onAttach?: () => void;
+    class?: string;
+}
+/**
+ * The input area for a chat/AI UI: an auto-growing textarea inside a glass
+ * card, removable attachment chips, and a bottom bar with an optional attach
+ * button and a Send button. Fully controlled — the parent owns `value`.
+ * Submits on **Cmd/Ctrl+Enter** or the Send button click.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = createSignal('')
+ * <PromptComposer
+ *   value={value()}
+ *   onInput={setValue}
+ *   onSubmit={(v) => { sendMessage(v); setValue('') }}
+ *   placeholder="Ask anything…"
+ * />
+ * ```
+ */
+export declare function PromptComposer(props: PromptComposerProps): JSX.Element;

package/dist/ui/StreamingText.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface StreamingTextProps {
+    /** The (possibly growing) full text so far. */
+    text: string;
+    /** Whether more text is still coming; shows the blinking caret while `true`. @default true */
+    streaming?: boolean;
+    /** Reveal speed, in characters per second, for newly appended text. @default 120 */
+    speed?: number;
+    class?: string;
+}
+/**
+ * Reveals `text` as it "streams" in: when `text` grows, the newly appended
+ * characters ease in at `speed` chars/sec instead of snapping into place,
+ * with a blinking caret while `streaming`. Already-revealed characters never
+ * re-animate — only the new tail is eased in, so appending to `text` doesn't
+ * replay the whole reveal. Skips the reveal (shows the full text at once)
+ * under reduced motion — the caret still blinks while `streaming` in that
+ * case. `streaming={false}` shows the full text immediately with no caret,
+ * for the final/settled answer.
+ *
+ * @example
+ * ```tsx
+ * <StreamingText text={answer()} streaming={!done()} />
+ * ```
+ */
+export declare function StreamingText(props: StreamingTextProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.24.2",
+  "version": "0.25.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/preset.js

@@ -21,7 +21,12 @@ import plugin from 'tailwindcss/plugin.js'
 // Frosted "space glass" surfaces. addComponents so they tree-shake like any
 // utility (emitted only when the class is found in scanned content — a4ui's own
 // components use them, so scanning ./node_modules/@a4ui/core/dist covers it).
-const glass = plugin(({ addComponents }) => {
+const glass = plugin(({ addComponents, addVariant }) => {
+  // `light:` applies when an ancestor is in the light theme (`[data-theme='light']`),
+  // mirroring how dark is the base and light is the override throughout A4ui. Used
+  // for theme-aware tints (e.g. Badge tones) that need a lighter foreground on dark
+  // and a darker one on light to keep WCAG AA in both.
+  addVariant('light', "[data-theme='light'] &")
   addComponents({
     // ---- Primary glass surface ----
     '.card': {

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.24.2'
+export const A4UI_VERSION = '0.25.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -33,6 +33,8 @@ export {
 } from './lib/motion'
 export { useMediaQuery } from './lib/media'
 export { remeasureAfterLayout } from './lib/virtual'
+export { createOptimistic } from './lib/createOptimistic'
+export { startViewTransition } from './lib/viewTransition'
 
 // UI components (src/ui) — all 18 extracted. See CLAUDE.md.
 export { Accordion, type AccordionItem } from './ui/Accordion'
@@ -145,6 +147,17 @@ export { Portal, type PortalProps } from './ui/Portal'
 export { Sortable, type SortableProps } from './ui/Sortable'
 export { Clock, type ClockProps } from './ui/Clock'
 
+// Conversation / AI, transitions, and depth surfaces (roadmap phase 1).
+export { ChatThread, type ChatThreadProps } from './ui/ChatThread'
+export { Message, type MessageProps, type ChatRole } from './ui/Message'
+export { StreamingText, type StreamingTextProps } from './ui/StreamingText'
+export { Citation, type CitationProps, SourceList, type SourceListProps } from './ui/Citation'
+export { PromptComposer, type PromptComposerProps } from './ui/PromptComposer'
+export { ArtifactPanel, type ArtifactPanelProps } from './ui/ArtifactPanel'
+export { FloatingToolbar, type FloatingToolbarProps } from './ui/FloatingToolbar'
+export { PageTransition, type PageTransitionProps } from './ui/PageTransition'
+export { InlineSelect, type InlineSelectProps, type InlineSelectOption } from './ui/InlineSelect'
+
 // Motion components (src/ui) — animation primitives built on the `motion` engine
 // (adapted from motion.dev examples). All tree-shakeable and reduced-motion aware;
 // `motion` is external, so importing one of these is the only thing that pulls it.

package/src/lib/createOptimistic.ts

@@ -0,0 +1,43 @@
+// Optimistic-update helper: show a value immediately, then reconcile with the
+// real async result. On failure, rolls back to the previous settled value and
+// rethrows so callers still see the error (e.g. to show a toast).
+import { createSignal } from 'solid-js'
+
+/**
+ * Holds an optimistic value that's updated immediately on `run`, then
+ * reconciled with the resolved (or rolled back on rejected) async result.
+ *
+ * @example
+ * ```ts
+ * const list = createOptimistic<Todo[]>([])
+ * async function addTodo(todo: Todo) {
+ *   await list.run([...list.value(), todo], () => api.addTodo(todo))
+ * }
+ * ```
+ */
+export function createOptimistic<T>(initial: T): {
+  value: () => T
+  pending: () => boolean
+  run: (optimistic: T, commit: () => Promise<T>) => Promise<T>
+} {
+  const [value, setValue] = createSignal(initial)
+  const [pending, setPending] = createSignal(false)
+
+  async function run(optimistic: T, commit: () => Promise<T>): Promise<T> {
+    const previous = value()
+    setValue(() => optimistic)
+    setPending(true)
+    try {
+      const resolved = await commit()
+      setValue(() => resolved)
+      return resolved
+    } catch (err) {
+      setValue(() => previous)
+      throw err
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return { value, pending, run }
+}

package/src/lib/viewTransition.ts

@@ -0,0 +1,32 @@
+// Wrapper around the browser View Transitions API. Not every target browser
+// implements `document.startViewTransition` yet, and even where it exists we
+// want to skip it under reduced motion — this module centralizes both checks
+// so callers don't have to feature-detect or re-import motionReduced themselves.
+import { motionReduced } from './motion'
+
+/** Minimal shape of `Document` augmented with the View Transitions API. */
+interface DocumentWithViewTransitions {
+  startViewTransition: (callback: () => void) => unknown
+}
+
+function supportsViewTransitions(doc: Document): doc is Document & DocumentWithViewTransitions {
+  return (
+    'startViewTransition' in doc &&
+    typeof (doc as unknown as DocumentWithViewTransitions).startViewTransition === 'function'
+  )
+}
+
+/**
+ * Run `update` inside a View Transition when the browser supports it, so DOM
+ * changes cross-fade automatically; otherwise just run `update` synchronously.
+ * Respects reduced-motion (skips the transition).
+ * @example
+ * startViewTransition(() => setRoute('details'))
+ */
+export function startViewTransition(update: () => void): void {
+  if (typeof document === 'undefined' || motionReduced() || !supportsViewTransitions(document)) {
+    update()
+    return
+  }
+  document.startViewTransition(update)
+}

package/src/ui/ArtifactPanel.tsx

@@ -0,0 +1,88 @@
+// Inline (non-portalled) right-side panel for AI-generated output — code,
+// preview, or doc — shown alongside a chat. Unlike `Drawer` (a portalled
+// overlay on Kobalte's Dialog), the caller places this directly in a flex row
+// next to the main content: it reserves no space when closed (width collapses
+// to 0) and reveals by animating its own width, so the chat pane reflows next
+// to it instead of being covered. We collapse to width 0 rather than toggling
+// `display: none` because a `display` toggle jumps instantly — animating width
+// is what makes it slide.
+import { X } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface ArtifactPanelProps {
+  open: boolean
+  onClose?: () => void
+  title?: string
+  /** Panel width in px when open. @default 420 */
+  width?: number
+  children: JSX.Element
+  class?: string
+}
+
+/**
+ * Right-side split panel that holds generated output (code, preview, doc) next
+ * to a chat — for AI UIs that keep the artifact and the conversation visible at
+ * once. Inline, not an overlay: place it as the last child of a flex row next
+ * to the main content. Slides open/closed by animating width (and a matching
+ * fade/slide on its content), reduced-motion aware via `motionReduced()`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <div class="flex h-full">
+ *   <main class="min-w-0 flex-1">…chat…</main>
+ *   <ArtifactPanel open={open()} onClose={() => setOpen(false)} title="script.py">
+ *     <pre class="p-4 text-sm">…generated code…</pre>
+ *   </ArtifactPanel>
+ * </div>
+ * ```
+ */
+export function ArtifactPanel(props: ArtifactPanelProps): JSX.Element {
+  const width = () => props.width ?? 420
+  const reduced = () => motionReduced()
+
+  return (
+    <div
+      role="complementary"
+      aria-label={props.title ?? 'Artifact'}
+      aria-hidden={!props.open}
+      class={cn(
+        'card h-full shrink-0 overflow-hidden border-border bg-glass',
+        props.open ? 'border-l' : 'border-0',
+        reduced() ? undefined : 'transition-[width] duration-300 ease-in-out',
+        props.class,
+      )}
+      style={{ width: `${props.open ? width() : 0}px` }}
+    >
+      {/* Fixed-width inner wrapper: the content never reflows/wraps while the
+          outer element's width animates between 0 and `width()`. */}
+      <div
+        class={cn(
+          'flex h-full flex-col',
+          reduced() ? undefined : 'transition-[opacity,transform] duration-300 ease-in-out',
+        )}
+        style={{
+          width: `${width()}px`,
+          opacity: props.open ? 1 : 0,
+          transform: props.open ? 'translateX(0)' : 'translateX(16px)',
+        }}
+      >
+        <div class="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/90 px-5 py-4 backdrop-blur">
+          <span class="truncate text-[16px] font-bold leading-tight">{props.title ?? 'Artifact'}</span>
+          <button
+            type="button"
+            onClick={() => props.onClose?.()}
+            class="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground"
+            aria-label="Close"
+          >
+            <X class="h-5 w-5" />
+          </button>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto">{props.children}</div>
+      </div>
+    </div>
+  )
+}

package/src/ui/Badge.tsx

@@ -9,12 +9,15 @@ import { cn } from '../lib/cn'
 /** Semantic tone of a {@link Badge}; drives its background/text/ring color. */
 export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info'
 
+// Tinted tones carry a lighter foreground for the dark (base) theme and a darker
+// one under `[data-theme='light']`, so the text meets WCAG AA over the translucent
+// tint in both — a single fixed shade can't clear 4.5:1 on both backgrounds.
 const TONE_CLASSES: Record<BadgeTone, string> = {
   neutral: 'bg-muted text-muted-foreground ring-border',
-  success: 'bg-emerald-500/15 text-emerald-600 ring-emerald-500/30',
-  warning: 'bg-amber-500/15 text-amber-600 ring-amber-500/30',
-  danger: 'bg-rose-500/15 text-rose-600 ring-rose-500/30',
-  info: 'bg-sky-500/15 text-sky-600 ring-sky-500/30',
+  success: 'bg-emerald-500/15 text-emerald-300 ring-emerald-500/30 light:text-emerald-700',
+  warning: 'bg-amber-500/15 text-amber-300 ring-amber-500/30 light:text-amber-700',
+  danger: 'bg-rose-500/15 text-rose-300 ring-rose-500/30 light:text-rose-700',
+  info: 'bg-sky-500/15 text-sky-300 ring-sky-500/30 light:text-sky-700',
 }
 
 const BADGE_BASE =

package/src/ui/ChatThread.tsx

@@ -0,0 +1,59 @@
+// ChatThread — layout shell for AI/conversation UIs: a centered, scrollable
+// reading column that stacks chat messages. Purely a container: it has no
+// idea what a "message" looks like, so any element can be stacked inside it.
+import { createEffect, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface ChatThreadProps {
+  children: JSX.Element
+  /** Max width of the reading column, in px. Defaults to `768`. */
+  maxWidth?: number
+  /** Auto-scroll to the newest message on mount and whenever children change. Defaults to `true`. */
+  stickToBottom?: boolean
+  class?: string
+}
+
+/**
+ * Scrollable, centered reading column that stacks chat messages. Layout-only:
+ * it renders whatever is passed as `children`, so pair it with your own
+ * message bubbles/components.
+ *
+ * @example
+ * ```tsx
+ * <ChatThread maxWidth={640}>
+ *   <div>Hi! Ask me anything about your itinerary.</div>
+ *   <div>What's the weather like in Rivertown this weekend?</div>
+ *   <div>Sunny and mild, 18–22°C, light breeze on Saturday.</div>
+ * </ChatThread>
+ * ```
+ */
+export function ChatThread(props: ChatThreadProps): JSX.Element {
+  let scrollEl: HTMLDivElement | undefined
+
+  const scrollToBottom = () => {
+    if (!scrollEl) return
+    scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: motionReduced() ? 'auto' : 'smooth' })
+  }
+
+  onMount(() => {
+    if (props.stickToBottom ?? true) scrollToBottom()
+  })
+
+  createEffect(() => {
+    // Track children so newly appended messages pull the thread down.
+    void props.children
+    if (props.stickToBottom ?? true) queueMicrotask(scrollToBottom)
+  })
+
+  return (
+    <div
+      ref={scrollEl}
+      class={cn('mx-auto flex w-full flex-col gap-4 overflow-y-auto', props.class)}
+      style={{ 'max-width': `${props.maxWidth ?? 768}px` }}
+    >
+      {props.children}
+    </div>
+  )
+}