@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/message.json

@@ -0,0 +1,879 @@
+{
+  "family": "message",
+  "ui": "message",
+  "binding": "react",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Chat message with author, bubble and actions."
+  },
+  "axes": {
+    "align": [
+      "start",
+      "end"
+    ],
+    "layout": [
+      "bubble",
+      "thread"
+    ],
+    "actionsVisibility": [
+      "always",
+      "hover"
+    ],
+    "status": [
+      "sending",
+      "sent",
+      "delivered",
+      "read",
+      "failed",
+      "streaming"
+    ],
+    "variant": [
+      "solid",
+      "soft",
+      "outline",
+      "plain"
+    ],
+    "tone": [
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ]
+  },
+  "members": {
+    "message": {
+      "nativeElement": "article",
+      "defaults": {
+        "align": "start",
+        "layout": "bubble",
+        "actionsVisibility": "hover",
+        "defaultVersion": 0
+      },
+      "capabilities": [
+        "appearance",
+        "arrangement",
+        "content",
+        "status",
+        "current"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "focus-visible",
+        "loading",
+        "invalid",
+        "read",
+        "complete",
+        "current"
+      ],
+      "parts": [
+        "root",
+        "group",
+        "avatar",
+        "body",
+        "header",
+        "author",
+        "time",
+        "footer",
+        "receipt",
+        "actions",
+        "activity",
+        "activity-step",
+        "versions",
+        "version-previous",
+        "version-label",
+        "version-next"
+      ]
+    },
+    "bubble": {
+      "nativeElement": "div",
+      "defaults": {
+        "variant": "soft",
+        "tone": "secondary",
+        "defaultRevealed": false
+      },
+      "capabilities": [
+        "appearance",
+        "content",
+        "focusable",
+        "pressed",
+        "revealed",
+        "disabled"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "pressed",
+        "revealed",
+        "loading",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "content",
+        "meta",
+        "quote",
+        "quote-author",
+        "more",
+        "stream",
+        "stream-chunk",
+        "caret",
+        "typing",
+        "retry",
+        "reactions",
+        "reaction",
+        "reaction-count"
+      ]
+    }
+  },
+  "docs": {
+    "message": {
+      "imports": {
+        "source": "import { Bubble, BubbleCaret, BubbleContent, BubbleMeta, BubbleQuote, BubbleReaction, BubbleReactions, BubbleRetry, BubbleStream, BubbleTyping, Message, MessageActions, MessageActivity, MessageActivityStep, MessageAuthor, MessageAvatar, MessageBody, MessageDefaultsProvider, MessageFooter, MessageGroup, MessageHeader, MessageReceipt, MessageTime, MessageVersions } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "article",
+          "required": true,
+          "purpose": "One message, named by its author. Carries data-ui=\"message\", data-align, data-layout, data-actions, data-status, and the states data-loading, data-invalid and data-read with aria-busy while it sends or streams."
+        },
+        {
+          "part": "group",
+          "element": "div",
+          "required": false,
+          "purpose": "A run from one sender. The rows stand two pixels apart, the facing corners on the sender’s side draw in, and the avatar column is kept on every row."
+        },
+        {
+          "part": "avatar",
+          "element": "div",
+          "required": false,
+          "purpose": "The box an Avatar stands in: at the foot of a run, or at the top in a thread."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": true,
+          "purpose": "The column of the words: header, bubbles, attachments and footer, on the sender’s side."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": false,
+          "purpose": "The name and, in a thread, the hour, set on the words’ inset; the dot between them is drawn, not written."
+        },
+        {
+          "part": "author",
+          "element": "span",
+          "required": false,
+          "purpose": "The sender’s name; while it is on the page the article is labelled by it."
+        },
+        {
+          "part": "time",
+          "element": "time",
+          "required": false,
+          "purpose": "An hour, with dateTime for machines: in the header, in the footer or inside a bubble’s meta."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "What is said under the words: a receipt as a word, the versions, the actions."
+        },
+        {
+          "part": "receipt",
+          "element": "span",
+          "required": false,
+          "purpose": "Where the message is in its delivery. Inside a bubble’s meta a mark with its word hidden; elsewhere the word alone."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "A toolbar of the message’s own controls, revealed by the pointer, by focus and on touch."
+        },
+        {
+          "part": "activity",
+          "element": "div",
+          "required": false,
+          "purpose": "A raised card logging what a reply is doing before it has words; a status region."
+        },
+        {
+          "part": "activity-step",
+          "element": "div",
+          "required": false,
+          "purpose": "One step of the activity: complete with a tick, current with the shared ring and a travelling band."
+        },
+        {
+          "part": "versions",
+          "element": "div",
+          "required": false,
+          "purpose": "The pager between a reply’s versions, drawn with two or more; a group named Versions."
+        },
+        {
+          "part": "version-previous",
+          "element": "button",
+          "required": false,
+          "purpose": "The previous version; disabled at the first, and turned in a right-to-left page."
+        },
+        {
+          "part": "version-label",
+          "element": "span",
+          "required": false,
+          "purpose": "“2 of 3”, a polite live region so a reader hears where the pager landed."
+        },
+        {
+          "part": "version-next",
+          "element": "button",
+          "required": false,
+          "purpose": "The next version; disabled at the last, never wrapping."
+        }
+      ],
+      "api": [
+        {
+          "name": "align",
+          "type": "'start' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "Message",
+          "description": "The sender’s side; end is the reader’s own message"
+        },
+        {
+          "name": "layout",
+          "type": "'bubble' | 'thread'",
+          "defaultValue": "bubble",
+          "appliesTo": "Message, MessageGroup",
+          "description": "Bubbles, or rows of a comment thread. Falls back to the group, then the provider"
+        },
+        {
+          "name": "actionsVisibility",
+          "type": "'always' | 'hover'",
+          "defaultValue": "hover",
+          "appliesTo": "Message",
+          "description": "Actions at rest, or revealed by pointer, focus and on touch"
+        },
+        {
+          "name": "status",
+          "type": "'sending' | 'sent' | 'delivered' | 'read' | 'failed' | 'streaming'",
+          "defaultValue": "—",
+          "appliesTo": "Message",
+          "description": "Delivery: aria-busy and data-loading while sending or streaming, data-invalid when failed, data-read when read"
+        },
+        {
+          "name": "version",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Message",
+          "description": "The version on screen, from 0. Present means controlled"
+        },
+        {
+          "name": "defaultVersion",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Message",
+          "description": "The version an uncontrolled message starts on"
+        },
+        {
+          "name": "versionCount",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "Message",
+          "description": "How many versions exist; the pager draws with two or more"
+        },
+        {
+          "name": "onRetry",
+          "type": "(request) => void",
+          "defaultValue": "—",
+          "appliesTo": "Message",
+          "description": "Asks to send the message again; BubbleRetry calls it"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<MessageMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Message",
+          "description": "Words laid over the language in force, key by key, for the row and every part and bubble inside it; a bubble outside a row speaks the language in force"
+        },
+        {
+          "name": "status",
+          "type": "'sending' | 'sent' | 'delivered' | 'read' | 'failed'",
+          "defaultValue": "the row’s",
+          "appliesTo": "MessageReceipt",
+          "description": "The receipt’s own status"
+        },
+        {
+          "name": "status",
+          "type": "'complete' | 'current' | 'pending'",
+          "defaultValue": "current",
+          "appliesTo": "MessageActivityStep",
+          "description": "Done with a tick, in progress with the ring, or waiting"
+        },
+        {
+          "name": "dateTime",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MessageTime",
+          "description": "The time element’s own machine-readable value"
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Renders the wiring into another element; spread it"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Reaches the native element"
+        }
+      ],
+      "composition": [
+        {
+          "name": "MessageDefaultsProvider",
+          "type": "{ layout, actionsVisibility, variant, tone }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "Sets them once; a group, a row or a bubble still wins"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Message",
+          "description": "Replaces the author as the article’s name"
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "The consumer element receives data-part and the wiring"
+        },
+        {
+          "name": "onKeyDown",
+          "type": "handler",
+          "defaultValue": "—",
+          "appliesTo": "MessageVersions",
+          "description": "Composed: preventDefault keeps the arrow from the pager"
+        }
+      ],
+      "events": [
+        {
+          "name": "onVersionChange",
+          "payload": "(version: number, request: ChangeRequest<number>)",
+          "when": "Before the version moves, bounded to the range. reason is pointer for a press and keyboard for Enter, Space or an arrow. cancel() keeps the version."
+        },
+        {
+          "name": "onRetry",
+          "payload": "(request: { reason, source })",
+          "when": "When BubbleRetry is pressed, after the consumer’s own onClick; nothing is committed, the message is the consumer’s to send again."
+        }
+      ],
+      "accessibility": [
+        "Each message is an article labelled by its author, so a screen reader that moves between articles hears who spoke; an aria-label on the row replaces the author.",
+        "Delivery is said three ways: a state attribute for styling, a mark for the eye, and a word for assistive technology — the word inside a bubble’s meta is visually hidden, and outside a bubble it is the only thing drawn.",
+        "A message that is sending or streaming is aria-busy, so its words are not announced as they land; the scroller’s log announces the finished row once.",
+        "The actions are a toolbar named Message actions; revealed by hover, they also appear on focus inside the row and are always painted where the pointer cannot hover.",
+        "The activity is a status region; the current step carries aria-current=\"step\", and its travelling band stops under reduced motion.",
+        "The version pager is a group with two named buttons and a polite live label; the buttons disable at the ends rather than wrapping."
+      ]
+    },
+    "bubble": {
+      "imports": {
+        "source": "import { Bubble, BubbleCaret, BubbleContent, BubbleMeta, BubbleQuote, BubbleReaction, BubbleReactions, BubbleRetry, BubbleStream, BubbleTyping, Message, MessageActions, MessageActivity, MessageActivityStep, MessageAuthor, MessageAvatar, MessageBody, MessageDefaultsProvider, MessageFooter, MessageGroup, MessageHeader, MessageReceipt, MessageTime, MessageVersions } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The bubble, written data-part=\"bubble\" because it nests inside a row. Carries data-variant, data-tone, data-clamped and data-revealed."
+        },
+        {
+          "part": "content",
+          "element": "div, button or a",
+          "required": true,
+          "purpose": "The painted surface. As a button it is a quick reply; as an a, a way out of the thread."
+        },
+        {
+          "part": "meta",
+          "element": "span",
+          "required": false,
+          "purpose": "The hour and the delivery mark riding at the end of the last line, inside the surface."
+        },
+        {
+          "part": "quote",
+          "element": "div or button",
+          "required": false,
+          "purpose": "The message a reply answers, at the head of the surface; a button when it jumps to it."
+        },
+        {
+          "part": "quote-author",
+          "element": "span",
+          "required": false,
+          "purpose": "The quoted message’s author, over its words."
+        },
+        {
+          "part": "more",
+          "element": "button",
+          "required": false,
+          "purpose": "“Show more” under a clamped text, drawn only while it overflows; aria-expanded and aria-controls."
+        },
+        {
+          "part": "stream",
+          "element": "span",
+          "required": false,
+          "purpose": "The words of a streamed reply. Each arrival is split into words that enter as a wave of at most 320 ms; the text is whole in the DOM at once."
+        },
+        {
+          "part": "stream-chunk",
+          "element": "span",
+          "required": false,
+          "purpose": "One word still entering, out of a blur, after its delay; folded back into the text once it has entered."
+        },
+        {
+          "part": "caret",
+          "element": "span",
+          "required": false,
+          "purpose": "A dot after the last word of a streaming reply, breathing; hidden from assistive technology."
+        },
+        {
+          "part": "typing",
+          "element": "span",
+          "required": false,
+          "purpose": "Three dots in a wave, role img, named “Typing”; the bubble trails two circles."
+        },
+        {
+          "part": "retry",
+          "element": "button",
+          "required": false,
+          "purpose": "The round danger control beside a message that did not go, which sends it again."
+        },
+        {
+          "part": "reactions",
+          "element": "div",
+          "required": false,
+          "purpose": "A raised pill straddling the surface’s lower edge; a row under the words in a thread."
+        },
+        {
+          "part": "reaction",
+          "element": "button",
+          "required": false,
+          "purpose": "One reaction, aria-pressed; the reader’s own takes the accent’s tint and edge."
+        },
+        {
+          "part": "reaction-count",
+          "element": "span",
+          "required": false,
+          "purpose": "The count the consumer’s store holds, in tabular figures."
+        }
+      ],
+      "api": [
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline' | 'plain'",
+          "defaultValue": "soft",
+          "appliesTo": "Bubble",
+          "description": "The painting. Falls back to the row (end is solid, thread is plain), then the provider"
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "Bubble",
+          "description": "The tone. Falls back to the row (end is accent), then the provider"
+        },
+        {
+          "name": "maxLines",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Bubble",
+          "description": "Lines shown before the text is clamped behind “Show more”"
+        },
+        {
+          "name": "revealed",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Bubble",
+          "description": "The clamped text shown whole. Present means controlled"
+        },
+        {
+          "name": "defaultRevealed",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Bubble",
+          "description": "Whether an uncontrolled clamp starts open"
+        },
+        {
+          "name": "pressed",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "BubbleReaction",
+          "description": "The reader’s own reaction. Present means controlled"
+        },
+        {
+          "name": "defaultPressed",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "BubbleReaction",
+          "description": "Whether an uncontrolled reaction starts pressed"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "BubbleReaction",
+          "description": "The count the consumer’s store holds"
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "BubbleStream",
+          "description": "The whole reply received so far; text that extends it enters word by word"
+        },
+        {
+          "name": "animate",
+          "type": "boolean",
+          "defaultValue": "the row is streaming",
+          "appliesTo": "BubbleStream",
+          "description": "Let arrivals enter; the arrival that ends the stream enters too"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "BubbleReaction",
+          "description": "The native disabled; the reaction stays legible"
+        },
+        {
+          "name": "author",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "BubbleQuote",
+          "description": "The quoted message’s author"
+        },
+        {
+          "name": "onJump",
+          "type": "(event) => void",
+          "defaultValue": "—",
+          "appliesTo": "BubbleQuote",
+          "description": "Makes the quote a button that jumps to the quoted message"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "typing message",
+          "appliesTo": "BubbleTyping",
+          "description": "The dots’ accessible name; the typing message when absent"
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Bubble, BubbleContent, BubbleMeta, BubbleQuote, BubbleStream, BubbleCaret, BubbleRetry, BubbleReactions",
+          "description": "Renders the wiring into another element — the surface as a button or a link"
+        }
+      ],
+      "composition": [
+        {
+          "name": "MessageDefaultsProvider",
+          "type": "{ variant, tone }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "The painting of a bubble nothing infers"
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "BubbleContent",
+          "description": "A button or an a keeps the painting, the states and the ring"
+        },
+        {
+          "name": "onClick",
+          "type": "handler",
+          "defaultValue": "—",
+          "appliesTo": "BubbleRetry, BubbleReaction",
+          "description": "Composed: runs first, preventDefault refuses the family’s request"
+        }
+      ],
+      "events": [
+        {
+          "name": "onRevealedChange",
+          "payload": "(revealed: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before a clamped text opens or closes, from the more control. reason is pointer or keyboard; cancel() keeps it."
+        },
+        {
+          "name": "onPressedChange",
+          "payload": "(pressed: boolean, request: ChangeRequest<boolean>)",
+          "when": "On BubbleReaction, before the reader’s own reaction toggles. The count stays the consumer’s."
+        },
+        {
+          "name": "onJump",
+          "payload": "(event)",
+          "when": "On BubbleQuote, when the quote is pressed; the page scrolls to the quoted message."
+        }
+      ],
+      "accessibility": [
+        "A bubble paints; it adds no role. A surface rendered as a button or an a is that element, so its name is its words and it keeps the platform’s keys.",
+        "Painting is never the only signal: a danger bubble says its failure in words, the reader’s own side is the row’s alignment, and a reaction’s pressed state is aria-pressed.",
+        "“Show more” is a button with aria-expanded and aria-controls on the surface; the clamped text is never removed from the DOM.",
+        "The typing dots are one image with a name, and the caret is aria-hidden: neither is read as characters.",
+        "The retry control is named Try sending again and sits beside the surface it resends, after it in the reading order."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-avatar-size-md",
+    "--slotted-avatar-size-sm",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-gap-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-radius",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-long",
+    "--slotted-duration-loop",
+    "--slotted-duration-loop-slow",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-emphasized",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-xs",
+    "--slotted-message-avatar-size",
+    "--slotted-message-bubble-padding-block",
+    "--slotted-message-bubble-padding-inline",
+    "--slotted-message-bubble-radius",
+    "--slotted-message-bubble-radius-joined",
+    "--slotted-message-bubble-share",
+    "--slotted-message-column-gap",
+    "--slotted-message-retry-state-layer",
+    "--slotted-message-run-gap",
+    "--slotted-message-stack-gap",
+    "--slotted-message-state-layer-active",
+    "--slotted-message-state-layer-hover",
+    "--slotted-message-thread-avatar-size",
+    "--slotted-radius-full",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-shadow-sm",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-surface",
+    "--slotted-surface-raised",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-on-solid",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-solid-active",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-on-solid",
+    "--slotted-tone-secondary-solid",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-success-border",
+    "--slotted-tone-success-on-solid",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-border",
+    "--slotted-tone-warning-on-solid",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One row with its side, layout, action visibility and status on the controls. Switch status to failed, read or streaming and watch the article’s own states and the receipt follow.",
+      "language": "tsx",
+      "source": "<Message align=\"start\" status=\"read\">\n  <MessageBody>\n    <Bubble>\n      <BubbleContent>O payout de terça voltou com o erro R03.</BubbleContent>\n    </Bubble>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "align",
+      "title": "Two sides, asked once",
+      "note": "align lives on the row. A bubble in an end row paints the accent’s fill by itself; a bubble in a start row the secondary tint. Nothing is repeated on the bubble.",
+      "language": "tsx",
+      "source": "<Message align=\"end\">\n  <MessageBody>\n    <Bubble>\n      <BubbleContent>Ótimo. Reenvio assim que chegar.</BubbleContent>\n    </Bubble>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "avatar",
+      "title": "The avatar at the foot of the words",
+      "note": "The avatar sits on the line of the last bubble, not of the footer under it, and moves to the end side with the row. It is the avatar family’s small step, so it follows the density.",
+      "language": "tsx",
+      "source": "<Message>\n  <MessageAvatar>\n    <Avatar name=\"Marta Silva\" size=\"sm\" />\n  </MessageAvatar>\n  <MessageBody>\n    <Bubble>\n      <BubbleContent>Chega hoje à tarde.</BubbleContent>\n    </Bubble>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "group",
+      "title": "A run from one sender",
+      "note": "Three rows, one avatar on the last. The rows stand two pixels apart and the corners facing each other on the sender’s side draw in to four; the earlier rows keep the avatar column without an empty slot.",
+      "language": "tsx",
+      "source": "<MessageGroup>\n  <Message>\n    <MessageBody>\n      <Bubble>\n        <BubbleContent>O payout de terça voltou com o erro R03.</BubbleContent>\n      </Bubble>\n    </MessageBody>\n  </Message>\n  <Message>\n    <MessageAvatar>\n      <Avatar name=\"Marta Silva\" size=\"sm\" />\n    </MessageAvatar>\n    <MessageBody>\n      <Bubble>\n        <BubbleContent>Chega hoje à tarde.</BubbleContent>\n      </Bubble>\n    </MessageBody>\n  </Message>\n</MessageGroup>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "header",
+      "title": "Who spoke, and when",
+      "note": "The header sets the name on the inset of the words, so the name stands over the first letter it names. The dot between name and hour is drawn by the stylesheet and never read aloud.",
+      "language": "tsx",
+      "source": "<MessageHeader>\n  <MessageAuthor>Marta Silva</MessageAuthor>\n  <MessageTime dateTime=\"2026-09-30T09:38\">09:38</MessageTime>\n</MessageHeader>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "receipt",
+      "title": "Where a message is in its delivery",
+      "note": "Inside the bubble the hour and the mark ride at the end of the last line: a breathing clock while sending, one tick, two ticks, and two ticks in full ink once read. A message that did not go says so in a word under it, with the retry control beside it.",
+      "language": "tsx",
+      "source": "<Message align=\"end\" status=\"read\">\n  <MessageBody>\n    <Bubble>\n      <BubbleContent>\n        E marco a fatura como paga só depois do crédito.\n        <BubbleMeta>\n          <MessageTime dateTime=\"2026-09-30T09:41\">09:41</MessageTime>\n          <MessageReceipt />\n        </BubbleMeta>\n      </BubbleContent>\n    </Bubble>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "actions",
+      "title": "Actions the row reveals",
+      "note": "With actionsVisibility=\"hover\" the toolbar keeps its room and appears under the pointer and on focus anywhere in the row; on a screen that cannot hover it is always painted. Tab into the row to see it arrive.",
+      "language": "tsx",
+      "source": "<MessageFooter>\n  <MessageActions>\n    <IconButton aria-label=\"Copiar\" variant=\"ghost\" size=\"sm\">\n      <Icon>\n        <Glyph name=\"copy\" />\n      </Icon>\n    </IconButton>\n  </MessageActions>\n</MessageFooter>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "activity",
+      "title": "What a reply is doing before it has words",
+      "note": "Steps done carry a tick and step back into the muted ink; the current one carries the shared ring and a band of light across its words. Under reduced motion the band stops and the words stand in the plain ink.",
+      "language": "tsx",
+      "source": "<Message status=\"streaming\">\n  <MessageBody>\n    <MessageActivity>\n      <MessageActivityStep status=\"complete\">Li o registo das 14:00 às 14:10</MessageActivityStep>\n      <MessageActivityStep>A procurar a causa do p95…</MessageActivityStep>\n    </MessageActivity>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "versions",
+      "title": "Versions of one reply",
+      "note": "The pager draws with two or more versions and stops at both ends. ArrowLeft and ArrowRight page from either control, mirrored in a right-to-left page; the label is a polite live region.",
+      "language": "tsx",
+      "source": "<Message versionCount={3} version={version} onVersionChange={setVersion}>\n  <MessageBody>\n    <Bubble>\n      <BubbleContent>{drafts[version]}</BubbleContent>\n    </Bubble>\n    <MessageFooter>\n      <MessageVersions />\n    </MessageFooter>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "layout",
+      "title": "A comment thread",
+      "note": "layout=\"thread\" sets every row at the start with the avatar at the top, the name inline, the words unframed and a band under the pointer; the actions float at the row’s top end on a raised plate.",
+      "language": "tsx",
+      "source": "<Message layout=\"thread\">\n  <MessageAvatar>\n    <Avatar name=\"Emília Parker\" />\n  </MessageAvatar>\n  <MessageBody>\n    <MessageHeader>\n      <MessageAuthor>Emília Parker</MessageAuthor>\n      <MessageTime dateTime=\"2026-09-30T09:12\">há 4 minutos</MessageTime>\n    </MessageHeader>\n    <Bubble>\n      <BubbleContent>Podemos nomear o dono do SSO antes da revisão?</BubbleContent>\n    </Bubble>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One bubble with its variant, tone and clamp on the controls. A bubble outside a row takes the provider’s painting; inside one it takes the row’s side.",
+      "language": "tsx",
+      "source": "<Bubble variant=\"soft\" tone=\"secondary\">\n  <BubbleContent>A conta de destino não existe no banco.</BubbleContent>\n</Bubble>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variants",
+      "title": "Four paintings",
+      "note": "solid is the tone’s fill, soft its tint with a rim that shows only in high contrast, outline its edge on the page, plain no box at all — the unframed answer that takes the whole row.",
+      "language": "tsx",
+      "source": "<Bubble variant=\"solid\" tone=\"accent\">\n  …\n</Bubble>;\n<Bubble variant=\"soft\">…</Bubble>;\n<Bubble variant=\"outline\">…</Bubble>;\n<Bubble variant=\"plain\">…</Bubble>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tones",
+      "title": "Five tones",
+      "note": "accent and secondary write in the page’s ink; success, warning and danger in their own, because there the colour of the words is the point — and the words say it too.",
+      "language": "tsx",
+      "source": "<Bubble tone=\"danger\">\n  <BubbleContent>O passo 5 falhou e o worker não voltou.</BubbleContent>\n</Bubble>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "interactive",
+      "title": "Quick replies and links",
+      "note": "render turns the surface itself into a button or an a, and it keeps the painting, the hover, a distinct press and the focus ring. A link keeps middle-click and its destination.",
+      "language": "tsx",
+      "source": "<Bubble tone=\"accent\">\n  <BubbleContent render={(props) => <button type=\"button\" {...props} onClick={retryAll} />}>\n    Reenviar as duas agora\n  </BubbleContent>\n</Bubble>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "quote",
+      "title": "Replying to a message",
+      "note": "The quote heads the surface in a block tinted with the surface’s own ink, author over up to three lines. With onJump it is a button that asks the scroller to take the reader to the quoted message.",
+      "language": "tsx",
+      "source": "<BubbleContent>\n  <BubbleQuote\n    author=\"Marta Silva\"\n    onJump={() => scroller.current?.scrollToMessage('m2', { highlight: true })}\n  >\n    A conta de destino não existe no banco.\n  </BubbleQuote>\n  Manda-me o IBAN quando chegar.\n</BubbleContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "clamp",
+      "title": "A long reply, clamped",
+      "note": "maxLines shows the first lines and draws “Show more” only while the text overflows. The whole text stays in the DOM for copying and finding in the page; the chevron turns as it opens.",
+      "language": "tsx",
+      "source": "<Bubble maxLines={3}>\n  <BubbleContent>{longAnswer}</BubbleContent>\n</Bubble>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "streaming",
+      "title": "A reply while it streams",
+      "note": "Words arrive in bursts. BubbleStream splits each arrival into words, and a burst enters as a wave of at most 320 ms, each word out of a blur; nothing is held back from the DOM. The dot breathes after the last word. The row is aria-busy, so the words are not read as they land. Under reduced motion every word lands settled and the dot stands lit.",
+      "language": "tsx",
+      "source": "<Message status=\"streaming\">\n  <MessageBody>\n    <Bubble>\n      <BubbleContent>\n        <BubbleStream text={received} />\n        <BubbleCaret />\n      </BubbleContent>\n    </Bubble>\n  </MessageBody>\n</Message>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "typing",
+      "title": "Someone is writing",
+      "note": "Three dots rise and brighten in a wave in the writer’s bubble, which trails two circles of its own fill and edge and arrives rising from them. It is one image named for assistive technology.",
+      "language": "tsx",
+      "source": "<Bubble>\n  <BubbleContent>\n    <BubbleTyping aria-label=\"Marta is typing\" />\n  </BubbleContent>\n</Bubble>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reactions",
+      "title": "Reactions",
+      "note": "The pill straddles the lower edge on the side away from the sender and rises into the surface by half its inset, clear of the words. The reader’s own reaction takes the accent’s tint and edge; a disabled one stays legible.",
+      "language": "tsx",
+      "source": "<BubbleReactions>\n  <BubbleReaction count={4} defaultPressed>\n    👍\n  </BubbleReaction>\n</BubbleReactions>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content nobody chose",
+      "note": "A URL of a hundred characters breaks where it must instead of pushing the bubble past its share; an Arabic line in a Portuguese thread reads from its own side; a two-letter reply is still a bubble, not a pill.",
+      "language": "tsx",
+      "source": "<Bubble>\n  <BubbleContent>{text}</BubbleContent>\n</Bubble>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}