Showcase / host composition

Quote.

quote.tsx / quote-composer.tsx: selection toolbar, composer preview, and in-message quote block. Host owns selection → quote wiring.

quote.tsxquote-composer.tsxhost-chrome

selectiontoolbar

composerquote preview

messagequote block

The runtime system follows a layered architecture

Can you explain how the layers connect?

Deferred: selection detection runtime, Lexical quote nodes. Escape quoted text; host sets preview contents.

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-skins.css">
<link rel="stylesheet" href="host-extracts.css">