markstream-vue: Skill for Codex

Markstream Solid

Read the Solid guide for setup and the Solid component/API reference for exact contracts. The repository source contains workspace commands and validation records. Check the selected package's actual version and publication status before installing it.

Setup

1. Detect solid-js / @solidjs/start in the host. TSX alone does not imply React. Require Solid 1.9 and the Solid compiler; SolidStart owns its compiler setup.
2. While the package is a workspace preview, build and pack the parser, core and Solid packages together. For npm releases, use the package's declared dependency versions; never substitute an older published core/parser for the workspace build.
3. Add only required peers: katex, mermaid, stream-diffs, @terrastruct/d2 or @antv/infographic. Math also requires katex/dist/katex.min.css.
4. Load resets before exactly one markstream-solid/index.css, index.px.css or index.tailwind.css. Use .markstream-solid around standalone basic nodes.
5. Keep props reactive: read props.content in JSX/accessors. Avoid destructuring reactive props or treating signals as Vue refs.

Streaming and restoration

import MarkdownRender from 'markstream-solid'
import 'markstream-solid/index.css'

export function Message(props: { content: string, done: boolean }) {
  return <MarkdownRender mode="chat" content={props.content} final={props.done} />
}

• Append decoded Markdown to accumulated content. Set final at completion and back to false before resuming. Replacement/empty content starts a new source session.
• Use mode="chat" for conversations and mode="docs" for documents. smoothStreaming controls pacing; fade controls animation. Solid and Vue 3 share the bounded text fade implementation.
• useSmoothMarkdownStream returns accessors (visible(), source(), final(), done(), snapshot()). Use one pacing owner per response.
• Use non-empty nodes for shared/preparsed ASTs; an empty array falls back to content.
• For full immediate DOM restoration, disable pacing, batching, viewport priority, deferral and live windows explicitly. Use the default window/timeline for large interactive histories.
• Use MarkstreamVirtualTimeline for mixed message windows. Markdown items use its built-in renderer; renderItem supplies the non-Markdown fallback. Use useMarkstreamVirtualAdapter when an existing outer virtualizer owns rows.