tempest-react-sdk 0.63.0 → 0.65.0

package/README.md

@@ -159,7 +159,7 @@ Via `package.json`:
 
 Requires React `>=18` and Node `>=22.12` to build.
 
-**A bundler is required.** Every component module imports its own stylesheet (see [CSS import](#css-import)), and `.css` is not a format Node can load — `node -e "import('tempest-react-sdk')"` fails with `ERR_UNKNOWN_FILE_EXTENSION`. Vite, webpack, Rspack, Parcel and esbuild all resolve that import, and the SDK is client-side only, so no real consumer is affected; a **Jest** suite needs `moduleNameMapper: { "\\.css$": "<rootDir>/test/css-stub.js" }`, the same mapping any CSS-Modules project already has. Vitest needs nothing.
+**A bundler is assumed — outside one, load the shipped `.css` loader.** Every component module imports its own stylesheet (see [CSS import](#css-import)), and `.css` is not a format Node can load — `node -e "import('tempest-react-sdk')"` fails with `ERR_UNKNOWN_FILE_EXTENSION`. Vite, webpack, Rspack, Parcel and esbuild all resolve that import, and the SDK is client-side only, so no real app consumer is affected. For everything that is not a bundler — a script, a Jest suite, reading the surface by introspection — the package ships the loader: `node --import tempest-react-sdk/node-css-loader your-script.mjs` resolves every stylesheet to an empty module, for `import` and `require` both. A **Jest** suite can use it or the usual `moduleNameMapper: { "\\.css$": "<rootDir>/test/css-stub.js" }`. Vitest needs nothing.
 
 ### Peer & bundled dependencies
 
@@ -284,7 +284,7 @@ Every module is re-exported from the package root — `import { Button, useDebou
 | `push`                                                                                            | `WebPushClient`, `WebPushUnsupportedError`, `WebPushPermissionDeniedError`, `usePushSubscription`, `urlBase64ToUint8Array`, `isPushSupported`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `sw` _(also subpath `tempest-react-sdk/sw`)_                                                      | `registerServiceWorker` (opt-in `autoUpdate` poll + reload, no `vite-plugin-pwa`), `skipWaiting`, `unregisterAllServiceWorkers`, `installPushHandler`, `installNotificationClickHandler`, `installSkipWaitingListener`, `installPrecache` (app-shell offline + Navigation Preload), `installRuntimeCache` (per-route caching, incl. `rangeRequests`), `createPartialResponse` (206 range slicing), `installBackgroundSync` (offline mutation queue + `periodicsync`), `registerPeriodicSync` (main-thread periodic sync), `inspectCaches`/`clearCaches` (cache observability) — the React-free `tempest-react-sdk/sw` subpath is ideal for bundling into your own `sw.ts`                                                                                                                                                                                                                                                                     |
 | `charts` _(subpath `tempest-react-sdk/charts`, opt. peer `recharts`)_                             | `AreaChart`, `BarChart`, `LineChart`, `PieChart`, `RadarChart`, `DEFAULT_CHART_COLORS` — themed recharts wrappers (recharts externalized; install it only if you use charts)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `icons` _(subpath `tempest-react-sdk/icons`)_                                                     | `Icon`, `IconProvider`, `createIconRegistry`, `useIcon`, `preloadIcons`, `iconStatus`, `peekIcon`, `loadIcon`, `resolveIconAlias`, `isIconName`, `iconNames`, `iconAliases`, type `IconName` — render any of lucide's **2024 icons by kebab-case slug**. A literal slug becomes a static import via the `tempestIcons()` Vite plugin (zero extra requests); a runtime slug loads **one chunk per initial letter** (25 max) instead of the ~2000 chunk boundaries `lucide-react`'s own `DynamicIcon` forces. Unknown slug renders `fallback` and never throws; lucide's 257 deprecated aliases keep resolving                                                                                                                                                                                                                                                                                                                                  |
+| `icons` _(subpath `tempest-react-sdk/icons`)_                                                     | `Icon`, `IconProvider`, `createIconRegistry`, `useIcon`, `preloadIcons`, `iconStatus`, `peekIcon`, `loadIcon`, `resolveIconAlias`, `isIconName`, `iconNames`, `iconAliases`, type `IconName` — render any of lucide's **2065 icons by kebab-case slug**. A literal slug becomes a static import via the `tempestIcons()` Vite plugin (zero extra requests); a runtime slug loads **one of 46 balanced shards** (40 slugs each) instead of the ~2000 chunk boundaries `lucide-react`'s own `DynamicIcon` forces — sharding by range rather than by initial letter took the worst fetch from 19.10 KB to 4.78 KB brotli. Unknown slug renders `fallback` and never throws; lucide's 258 deprecated aliases keep resolving                                                                                                                                                                                                                       |
 | `audio`                                                                                           | `createAudioPlayer`, `playAudio`, `stopAudio`, `useAudio`, `createAudioBus` / `useAudioBus` (gain above 100%, post-mix limiter, `setSinkId` routing), `DEFAULT_MAX_GAIN`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `capture`                                                                                         | `BarcodeScanner`, `useBarcodeScanner`, `useTorch`, `isBarcodeDetectionSupported`, `getSupportedBarcodeFormats`, `createBarcodeDetector`, `normalizeBarcode`, `useVideoRecorder`, `createVideoRecorder`, `pickVideoMimeType`, `isVideoRecordingSupported`, `useScreenCapture`, `isScreenCaptureSupported`, `useSpeechRecognition`, `isSpeechRecognitionSupported`, `createMediaRecorder` — barcode/QR reading over the native `BarcodeDetector` (Chromium-only, so inject a polyfill through `detector` or render the `unsupported` fallback), video + screen recording on the same engine as the audio recorder, and Web Speech dictation (**Chromium streams the audio to a Google server**)                                                                                                                                                                                                                                                 |
 | `offline` _(peer: `dexie`)_                                                                       | `createOfflineStore`, `createOfflineSync` (outbox + delta-pull + watermark engine, now with `subscribe`/`getState`/`dispose` + cross-tab `crossTab`), `useOfflineSync`/`useSyncStatus` (reactive hooks), `lastWriteWins`/`higherVersionWins` (conflict resolvers), types: `OfflineStore`, `OfflineStoreConfig`, `ListOptions`, `OfflineSync`, `OfflineSyncConfig`, `OutboxEntry`, `PullPage`, `SyncPhase`, `SyncState`, `SyncRunSummary`, `SyncTrigger`, `SyncStatus`, `SyncTone`, `WatermarkStore`                                                                                                                                                                                                                                                                                                                                                                                                                                           |
@@ -316,7 +316,7 @@ Every module is re-exported from the package root — `import { Button, useDebou
 | `webrtc`                                                                                          | `tuneOpus` (Opus `fmtp` per audio m-line: per-key merge, `stereo` + `sprop-stereo`, inserts a missing `fmtp`), `setTunedLocalDescription` (falls back to the untouched SDP when the browser refuses the edit), `setSenderBitrate`, `createLinkStatsSampler` / `useLinkStats` / `readRoundTripMs` (throughput as a delta, round trip from the **selected** candidate pair)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `geo` _(opt. peer `leaflet`)_                                                                     | `haversineKm`, `pathLengthKm`, `bearingDeg`, `estimateTravel`, `createOSRMBackend`, `boundingBox`, `projectMercator`, `fitProjection`, `createPositionTracker`, `usePositionTracker`, `TrajectoryMap` — tile-free SVG map + trajectory tracking (no external/paid API; Leaflet is an opt-in, lazy-loaded tile layer for self-hosted tiles), types: `Coordinate`, `TrackPoint`, `TravelEstimate`, `TravelMode`, `GeoBounds`, `RoutingBackend`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `br` _(subpath `tempest-react-sdk/br`)_                                                           | `BrazilMap`, `BrazilStateMap`, `BrazilStateCitySelect`, `listStates`, `getState`, `citiesByUf`, `statesByRegion`, `ufChoices`, `cityChoices`, `isValidUf`, `normalizeUf`, `isValidCity`, `loadBrUfGeoJson`, `loadStateMunicipalities`, types `UF`, `BrRegion`, `BrazilState` — clickable 27-UF SVG map + per-state municipality submaps (bundled simplified IBGE GeoJSON, lazy per UF) + states/cities dataset, no external API; mirrors the FastAPI SDK `utils/locations`                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `icons` _(subpath `tempest-react-sdk/icons`)_                                                     | `Icon`, `IconProvider`, `createIconRegistry`, `useIcon`, `preloadIcons`, `iconStatus`, `peekIcon`, `loadIcon`, `resolveIconAlias`, `isIconName`, `iconNames`, `iconAliases`, type `IconName` — render any of lucide's **2024 icons by kebab-case slug**. A literal slug becomes a static import via the `tempestIcons()` Vite plugin (zero extra requests); a runtime slug loads **one chunk per initial letter** (25 max) instead of the ~2000 chunk boundaries `lucide-react`'s own `DynamicIcon` forces. Unknown slug renders `fallback` and never throws; lucide's 257 deprecated aliases keep resolving                                                                                                                                                                                                                                                                                                                                  |
+| `icons` _(subpath `tempest-react-sdk/icons`)_                                                     | `Icon`, `IconProvider`, `createIconRegistry`, `useIcon`, `preloadIcons`, `iconStatus`, `peekIcon`, `loadIcon`, `resolveIconAlias`, `isIconName`, `iconNames`, `iconAliases`, type `IconName` — render any of lucide's **2065 icons by kebab-case slug**. A literal slug becomes a static import via the `tempestIcons()` Vite plugin (zero extra requests); a runtime slug loads **one of 46 balanced shards** (40 slugs each) instead of the ~2000 chunk boundaries `lucide-react`'s own `DynamicIcon` forces — sharding by range rather than by initial letter took the worst fetch from 19.10 KB to 4.78 KB brotli. Unknown slug renders `fallback` and never throws; lucide's 258 deprecated aliases keep resolving                                                                                                                                                                                                                       |
 | `push`                                                                                            | `WebPushClient`, `WebPushUnsupportedError`, `WebPushPermissionDeniedError`, `usePushSubscription`, `urlBase64ToUint8Array`, `isPushSupported`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `sw` _(also subpath `tempest-react-sdk/sw`)_                                                      | `registerServiceWorker` (opt-in `autoUpdate` poll + reload, no `vite-plugin-pwa`), `skipWaiting`, `unregisterAllServiceWorkers`, `installPushHandler`, `installNotificationClickHandler`, `installSkipWaitingListener`, `installPrecache` (app-shell offline + Navigation Preload), `installRuntimeCache` (per-route caching, incl. `rangeRequests`), `createPartialResponse` (206 range slicing), `installBackgroundSync` (offline mutation queue + `periodicsync`), `registerPeriodicSync` (main-thread periodic sync), `inspectCaches`/`clearCaches` (cache observability) — the React-free `tempest-react-sdk/sw` subpath is ideal for bundling into your own `sw.ts`                                                                                                                                                                                                                                                                     |
 | `editor` _(subpath `tempest-react-sdk/editor`, opt. peers `@tiptap/react`+`@tiptap/starter-kit`)_ | `RichTextEditor` — themed tiptap v3 rich-text editor with toolbar (tiptap externalized; install it only if you use the editor)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
@@ -1938,8 +1938,8 @@ npm run clean          # rm -rf dist coverage
 Snapshot of current health:
 
 - 4705 tests / 485 files — 98.7% lines, 97.4% statements, 97.1% functions, 94.6% branches (CI floors: 98/97/96/94).
-- What your app actually pays (brotli, tree-shaken slices measured by `npm run size`): `cn` alone 133 B · one `Button` 798 B · a typical app shell (5 components + router + providers + HTTP + auth + a hook) 6.88 KB · offline/PWA surface 4.41 KB · `AIChat` 9.76 KB · audio capture 5.59 KB · device capture (barcode + video + screen + speech) 5.28 KB · BR payment rails (Pix + boleto + NFe + holidays) 9.00 KB · passkeys 2.15 KB · `styles.css` 27.64 KB · the opt-in `utilities.css` 1.33 KB.
-- Full-barrel ceiling — nobody imports this, it is the no-tree-shaking worst case: 108.04 KB ESM / 129.51 KB CJS.
+- What your app actually pays (brotli, tree-shaken slices measured by `npm run size` on 0.65.0): `cn` alone 203 B · one `Button` 853 B · a typical app shell (5 components + router + providers + HTTP + auth + a hook) 9.94 KB · offline/PWA surface 4.64 KB · `Chat` 10.53 KB · `AIChat` 10.16 KB · audio capture 5.88 KB · device capture (barcode + video + screen + speech) 5.46 KB · BR payment rails (Pix + boleto + NFe + holidays) 9.21 KB · passkeys 2.27 KB · `styles.css` 29.75 KB · the opt-in `utilities.css` 1.36 KB.
+- Full-barrel ceiling — nobody imports this, it is the no-tree-shaking worst case: 130.22 KB ESM / 155.07 KB CJS.
 - Husky pre-commit runs `lint-staged` (eslint --fix + prettier --write) on staged files.
 
 The demo gallery lives in `examples/gallery` and consumes the local SDK via `file:../..`:

package/dist/components/Chat/Chat.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../EmptyState/EmptyState.cjs"),n=require("../VisuallyHidden/VisuallyHidden.cjs"),r=require("./chat-groups.cjs"),i=require("./Chat.module.cjs"),a=require("./ChatComposer.cjs");let o=require("react"),s=require("react/jsx-runtime");var c={sending:`◌`,sent:`✓`,read:`✓✓`,failed:`!`};function l({messages:l,currentUserId:u,onSend:d,onRetry:f,typing:p=[],renderAvatar:m,header:h,emptyState:g,groupWindowMs:_,locale:v=`pt-BR`,now:y,placeholder:b,composerActions:x,composerDisabled:S,onSendError:C,className:w,...T}){let E=r.chatStrings(v),D=r.groupMessages({messages:l,currentUserId:u,windowMs:_}),O=(0,o.useRef)(null),k=(0,o.useRef)(null),A=(0,o.useRef)(!0),j=()=>{let e=k.current;if(!e)return;let t=e.scrollHeight-e.scrollTop-e.clientHeight;A.current=t<48};(0,o.useLayoutEffect)(()=>{let e=k.current;e&&A.current&&(e.scrollTop=e.scrollHeight)},[l,p]),(0,o.useEffect)(()=>{let e=k.current;e&&(e.scrollTop=e.scrollHeight)},[]);let M=r.typingLabel(p,v);return(0,s.jsxs)(`div`,{className:e.cn(i.default.panel,w),...T,children:[h&&(0,s.jsx)(`header`,{className:i.default.header,children:h}),(0,s.jsx)(`div`,{ref:k,className:i.default.thread,onScroll:j,role:`log`,"aria-live":`polite`,"aria-relevant":`additions text`,tabIndex:0,"aria-label":E.thread,children:l.length===0?g??(0,s.jsx)(t.EmptyState,{title:E.empty}):D.map(t=>t.kind===`day`?(0,s.jsx)(`div`,{className:i.default.day,children:(0,s.jsx)(`span`,{className:i.default.dayLabel,children:r.dayLabel(t.date,{locale:v,now:y})})},t.key):(0,s.jsxs)(`div`,{className:e.cn(i.default.run,t.own&&i.default.ownRun),children:[m&&(0,s.jsx)(`div`,{className:i.default.avatar,"aria-hidden":`true`,children:m(t.messages[0])}),(0,s.jsxs)(`div`,{className:i.default.runBody,children:[(0,s.jsx)(`span`,{className:i.default.author,children:t.own?E.you:t.authorName??t.authorId}),(0,s.jsx)(`ul`,{className:i.default.bubbles,children:t.messages.map(a=>(0,s.jsxs)(`li`,{className:i.default.bubbleRow,children:[(0,s.jsxs)(`div`,{className:e.cn(i.default.bubble,t.own&&i.default.ownBubble,a.status===`failed`&&i.default.failedBubble),children:[(0,s.jsx)(`div`,{className:i.default.body,children:a.body}),(0,s.jsxs)(`div`,{className:i.default.meta,children:[(0,s.jsx)(`time`,{dateTime:new Date(a.sentAt).toISOString(),children:r.timeLabel(a.sentAt,v)}),t.own&&a.status&&(0,s.jsxs)(`span`,{className:e.cn(i.default.status,a.status===`failed`&&i.default.statusFailed),title:E[a.status],children:[(0,s.jsx)(`span`,{"aria-hidden":`true`,children:c[a.status]}),(0,s.jsx)(n.VisuallyHidden,{children:E[a.status]})]})]})]}),a.status===`failed`&&f&&(0,s.jsx)(`button`,{type:`button`,className:i.default.retry,onClick:()=>f(a),children:E.retry})]},a.id))})]})]},t.key))}),M&&(0,s.jsx)(`p`,{className:i.default.typing,"aria-live":`polite`,children:M}),d&&(0,s.jsx)(a.ChatComposer,{ref:O,onSend:d,locale:v,placeholder:b,actions:x,disabled:S,onError:C})]})}exports.Chat=l;
+const e=require("../../utils/cn.cjs"),t=require("../EmptyState/EmptyState.cjs"),n=require("./chat-groups.cjs"),r=require("./Chat.module.cjs"),i=require("./ChatBubble.cjs"),a=require("./ChatComposer.cjs");let o=require("react"),s=require("react/jsx-runtime");function c({messages:c,currentUserId:l,onSend:u,onRetry:d,typing:f=[],renderAvatar:p,header:m,emptyState:h,groupWindowMs:g,locale:_=`pt-BR`,now:v,placeholder:y,composerActions:b,composerDisabled:x,onSendError:S,onReact:C,messageActions:w,onQuoteClick:T,className:E,...D}){let O=n.chatStrings(_),k=n.groupMessages({messages:c,currentUserId:l,windowMs:g}),A=(0,o.useRef)(null),j=(0,o.useRef)(null),M=(0,o.useRef)(!0),N=()=>{let e=j.current;if(!e)return;let t=e.scrollHeight-e.scrollTop-e.clientHeight;M.current=t<48};(0,o.useLayoutEffect)(()=>{let e=j.current;e&&M.current&&(e.scrollTop=e.scrollHeight)},[c,f]),(0,o.useEffect)(()=>{let e=j.current;e&&(e.scrollTop=e.scrollHeight)},[]);let P=n.typingLabel(f,_);return(0,s.jsxs)(`div`,{className:e.cn(r.default.panel,E),...D,children:[m&&(0,s.jsx)(`header`,{className:r.default.header,children:m}),(0,s.jsx)(`div`,{ref:j,className:r.default.thread,onScroll:N,role:`log`,"aria-live":`polite`,"aria-relevant":`additions text`,tabIndex:0,"aria-label":O.thread,children:c.length===0?h??(0,s.jsx)(t.EmptyState,{title:O.empty}):k.map(t=>t.kind===`day`?(0,s.jsx)(`div`,{className:r.default.day,children:(0,s.jsx)(`span`,{className:r.default.dayLabel,children:n.dayLabel(t.date,{locale:_,now:v})})},t.key):(0,s.jsxs)(`div`,{className:e.cn(r.default.run,t.own&&r.default.ownRun),children:[p&&(0,s.jsx)(`div`,{className:r.default.avatar,"aria-hidden":`true`,children:p(t.messages[0])}),(0,s.jsxs)(`div`,{className:r.default.runBody,children:[(0,s.jsx)(`span`,{className:r.default.author,children:t.own?O.you:t.authorName??t.authorId}),(0,s.jsx)(`ul`,{className:r.default.bubbles,children:t.messages.map(e=>(0,s.jsx)(i.ChatBubble,{message:e,own:t.own,locale:_,onRetry:d,onReact:C,messageActions:w,onQuoteClick:T},e.id))})]})]},t.key))}),P&&(0,s.jsx)(`p`,{className:r.default.typing,"aria-live":`polite`,children:P}),u&&(0,s.jsx)(a.ChatComposer,{ref:A,onSend:u,locale:_,placeholder:y,actions:b,disabled:x,onError:S})]})}exports.Chat=c;
 //# sourceMappingURL=Chat.cjs.map

package/dist/components/Chat/Chat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.cjs","names":[],"sources":["../../../src/components/Chat/Chat.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — message grouping needs\n * more context than a list does: currentUserId to decide sides, groupWindowMs and\n * now to decide where a bubble group breaks, typing for the indicator. The remaining\n * props are the composer's (placeholder, composerActions, composerDisabled, onSend,\n * onSendError) and the slots (renderAvatar, header, emptyState).\n */\nimport { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { EmptyState } from \"../EmptyState\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { ChatComposer, type ChatComposerHandle } from \"./ChatComposer\";\nimport {\n    chatStrings,\n    dayLabel,\n    groupMessages,\n    timeLabel,\n    typingLabel,\n    type ChatMessage,\n} from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onSubmit\";\n\nexport interface ChatProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The thread, **oldest first**. Never reordered by the component. */\n    messages: readonly ChatMessage[];\n    /** Author id treated as \"own\" — decides side, colour and status ticks. */\n    currentUserId?: string;\n    /** Renders the composer when given. Receives the trimmed text. */\n    onSend?: (text: string) => void | Promise<void>;\n    /** Enables the retry control on a `\"failed\"` message. */\n    onRetry?: (message: ChatMessage) => void;\n    /** Names currently typing. One, two or a count is phrased for you. */\n    typing?: readonly string[];\n    /** Avatar for the first message of a run — an `<Avatar>`, an `<Icon>`. */\n    renderAvatar?: (message: ChatMessage) => ReactNode;\n    /** Rendered above the thread, inside the panel. */\n    header?: ReactNode;\n    /** Shown when there are no messages. */\n    emptyState?: ReactNode;\n    /** Gap that still keeps consecutive messages in one run. Default 5 min. */\n    groupWindowMs?: number;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Reference instant for \"Hoje\"/\"Ontem\". Default: now, at render time. */\n    now?: number;\n    /** Placeholder for the composer. */\n    placeholder?: string;\n    /** Extra controls inside the composer, before the send button. */\n    composerActions?: ReactNode;\n    /** Disable the composer — no permission, thread archived, offline. */\n    composerDisabled?: boolean;\n    /** Called when `onSend` rejects. The draft stays in the field either way. */\n    onSendError?: (error: unknown) => void;\n}\n\n/** Status glyph and label for an outgoing message. */\nconst STATUS_GLYPH: Record<NonNullable<ChatMessage[\"status\"]>, string> = {\n    sending: \"◌\",\n    sent: \"✓\",\n    read: \"✓✓\",\n    failed: \"!\",\n};\n\n/**\n * A message thread: grouped by author and by day, own messages on one side, with\n * delivery state, a typing indicator and an optional composer.\n *\n * Presentational and controlled, like the rest of the SDK: it takes a list and\n * emits intent (`onSend`, `onRetry`). Where messages come from — REST, the SDK's\n * `createWebSocket`, an SSE stream — and how an optimistic insert is done stay with\n * the app, because those differ per backend and a component that assumed one would\n * be wrong for most.\n *\n * It works as a comment thread too: that is the same component with\n * `currentUserId` set and no `typing`.\n *\n * @example\n * <Chat\n *     messages={messages}\n *     currentUserId={me.id}\n *     typing={typingNames}\n *     onSend={(text) => send({ text })}\n *     onRetry={(message) => resend(message.id)}\n * />\n */\nexport function Chat({\n    messages,\n    currentUserId,\n    onSend,\n    onRetry,\n    typing = [],\n    renderAvatar,\n    header,\n    emptyState,\n    groupWindowMs,\n    locale = \"pt-BR\",\n    now,\n    placeholder,\n    composerActions,\n    composerDisabled,\n    onSendError,\n    className,\n    ...rest\n}: ChatProps) {\n    const strings = chatStrings(locale);\n    const sections = groupMessages({ messages, currentUserId, windowMs: groupWindowMs });\n    const composer = useRef<ChatComposerHandle | null>(null);\n    const thread = useRef<HTMLDivElement | null>(null);\n    const stuckToBottom = useRef(true);\n\n    /**\n     * Remember whether the reader is at the bottom, before the next batch lands.\n     *\n     * A thread that always scrolls to the newest message yanks somebody out of the\n     * history they were reading, every time anyone types. So the jump only happens\n     * when they were already at the bottom — the same rule every chat app converges\n     * on. The 48px slack covers a partially visible last row.\n     */\n    const trackPosition = (): void => {\n        const node = thread.current;\n        if (!node) return;\n        const distance = node.scrollHeight - node.scrollTop - node.clientHeight;\n        stuckToBottom.current = distance < 48;\n    };\n\n    useLayoutEffect(() => {\n        const node = thread.current;\n        if (!node || !stuckToBottom.current) return;\n        node.scrollTop = node.scrollHeight;\n    }, [messages, typing]);\n\n    useEffect(() => {\n        const node = thread.current;\n        if (!node) return;\n        node.scrollTop = node.scrollHeight;\n        // Mount lands on the newest message; from then on `trackPosition` decides.\n    }, []);\n\n    const typingText = typingLabel(typing, locale);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {header && <header className={styles.header}>{header}</header>}\n\n            <div\n                ref={thread}\n                className={styles.thread}\n                onScroll={trackPosition}\n                role=\"log\"\n                aria-live=\"polite\"\n                aria-relevant=\"additions text\"\n                tabIndex={0}\n                aria-label={strings.thread}\n            >\n                {messages.length === 0\n                    ? (emptyState ?? <EmptyState title={strings.empty} />)\n                    : sections.map((section) =>\n                          section.kind === \"day\" ? (\n                              <div key={section.key} className={styles.day}>\n                                  <span className={styles.dayLabel}>\n                                      {dayLabel(section.date, { locale, now })}\n                                  </span>\n                              </div>\n                          ) : (\n                              <div\n                                  key={section.key}\n                                  className={cn(styles.run, section.own && styles.ownRun)}\n                              >\n                                  {renderAvatar && (\n                                      <div className={styles.avatar} aria-hidden=\"true\">\n                                          {renderAvatar(section.messages[0])}\n                                      </div>\n                                  )}\n                                  <div className={styles.runBody}>\n                                      <span className={styles.author}>\n                                          {section.own\n                                              ? strings.you\n                                              : (section.authorName ?? section.authorId)}\n                                      </span>\n                                      <ul className={styles.bubbles}>\n                                          {section.messages.map((message) => (\n                                              <li key={message.id} className={styles.bubbleRow}>\n                                                  <div\n                                                      className={cn(\n                                                          styles.bubble,\n                                                          section.own && styles.ownBubble,\n                                                          message.status === \"failed\" &&\n                                                              styles.failedBubble,\n                                                      )}\n                                                  >\n                                                      <div className={styles.body}>\n                                                          {message.body}\n                                                      </div>\n                                                      <div className={styles.meta}>\n                                                          <time\n                                                              dateTime={new Date(\n                                                                  message.sentAt,\n                                                              ).toISOString()}\n                                                          >\n                                                              {timeLabel(message.sentAt, locale)}\n                                                          </time>\n                                                          {section.own && message.status && (\n                                                              <span\n                                                                  className={cn(\n                                                                      styles.status,\n                                                                      message.status === \"failed\" &&\n                                                                          styles.statusFailed,\n                                                                  )}\n                                                                  title={strings[message.status]}\n                                                              >\n                                                                  <span aria-hidden=\"true\">\n                                                                      {STATUS_GLYPH[message.status]}\n                                                                  </span>\n                                                                  <VisuallyHidden>\n                                                                      {strings[message.status]}\n                                                                  </VisuallyHidden>\n                                                              </span>\n                                                          )}\n                                                      </div>\n                                                  </div>\n                                                  {message.status === \"failed\" && onRetry && (\n                                                      <button\n                                                          type=\"button\"\n                                                          className={styles.retry}\n                                                          onClick={() => onRetry(message)}\n                                                      >\n                                                          {strings.retry}\n                                                      </button>\n                                                  )}\n                                              </li>\n                                          ))}\n                                      </ul>\n                                  </div>\n                              </div>\n                          ),\n                      )}\n            </div>\n\n            {typingText && (\n                <p className={styles.typing} aria-live=\"polite\">\n                    {typingText}\n                </p>\n            )}\n\n            {onSend && (\n                <ChatComposer\n                    ref={composer}\n                    onSend={onSend}\n                    locale={locale}\n                    placeholder={placeholder}\n                    actions={composerActions}\n                    disabled={composerDisabled}\n                    onError={onSendError}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Chat.cjs","names":[],"sources":["../../../src/components/Chat/Chat.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — message grouping needs\n * more context than a list does: currentUserId to decide sides, groupWindowMs and\n * now to decide where a bubble group breaks, typing for the indicator. The remaining\n * props are the composer's (placeholder, composerActions, composerDisabled, onSend,\n * onSendError) and the slots (renderAvatar, header, emptyState).\n */\nimport { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport type { ContextMenuItem } from \"../ContextMenu\";\nimport { EmptyState } from \"../EmptyState\";\nimport { ChatBubble } from \"./ChatBubble\";\nimport { ChatComposer, type ChatComposerHandle } from \"./ChatComposer\";\nimport { chatStrings, dayLabel, groupMessages, typingLabel, type ChatMessage } from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onSubmit\";\n\nexport interface ChatProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The thread, **oldest first**. Never reordered by the component. */\n    messages: readonly ChatMessage[];\n    /** Author id treated as \"own\" — decides side, colour and status ticks. */\n    currentUserId?: string;\n    /** Renders the composer when given. Receives the trimmed text. */\n    onSend?: (text: string) => void | Promise<void>;\n    /** Enables the retry control on a `\"failed\"` message. */\n    onRetry?: (message: ChatMessage) => void;\n    /** Names currently typing. One, two or a count is phrased for you. */\n    typing?: readonly string[];\n    /** Avatar for the first message of a run — an `<Avatar>`, an `<Icon>`. */\n    renderAvatar?: (message: ChatMessage) => ReactNode;\n    /** Rendered above the thread, inside the panel. */\n    header?: ReactNode;\n    /** Shown when there are no messages. */\n    emptyState?: ReactNode;\n    /** Gap that still keeps consecutive messages in one run. Default 5 min. */\n    groupWindowMs?: number;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Reference instant for \"Hoje\"/\"Ontem\". Default: now, at render time. */\n    now?: number;\n    /** Placeholder for the composer. */\n    placeholder?: string;\n    /** Extra controls inside the composer, before the send button. */\n    composerActions?: ReactNode;\n    /** Disable the composer — no permission, thread archived, offline. */\n    composerDisabled?: boolean;\n    /** Called when `onSend` rejects. The draft stays in the field either way. */\n    onSendError?: (error: unknown) => void;\n    /**\n     * Toggles a reaction on a message. Enables the reaction chips.\n     *\n     * Called with the emoji that was pressed, including one the user already\n     * reacted with: reacting again clears it, rather than stacking a second copy.\n     * The app owns that rule — the component only reports the press.\n     */\n    onReact?: (message: ChatMessage, emoji: string) => void;\n    /**\n     * Per-message actions: reply, forward, star, edit, delete.\n     *\n     * Returns the items for one message, opened by right click, by long press on\n     * touch, and by a `⋮` button on the bubble. Buttons painted on every bubble\n     * turn a conversation into a toolbar, which is why this is a menu.\n     */\n    messageActions?: (message: ChatMessage) => ContextMenuItem[];\n    /** Called when a reply stub is activated — scroll to the quoted message. */\n    onQuoteClick?: (message: ChatMessage) => void;\n}\n\n/**\n * A message thread: grouped by author and by day, own messages on one side, with\n * delivery state, a typing indicator and an optional composer.\n *\n * Presentational and controlled, like the rest of the SDK: it takes a list and\n * emits intent (`onSend`, `onRetry`). Where messages come from — REST, the SDK's\n * `createWebSocket`, an SSE stream — and how an optimistic insert is done stay with\n * the app, because those differ per backend and a component that assumed one would\n * be wrong for most.\n *\n * It works as a comment thread too: that is the same component with\n * `currentUserId` set and no `typing`.\n *\n * @example\n * <Chat\n *     messages={messages}\n *     currentUserId={me.id}\n *     typing={typingNames}\n *     onSend={(text) => send({ text })}\n *     onRetry={(message) => resend(message.id)}\n * />\n */\nexport function Chat({\n    messages,\n    currentUserId,\n    onSend,\n    onRetry,\n    typing = [],\n    renderAvatar,\n    header,\n    emptyState,\n    groupWindowMs,\n    locale = \"pt-BR\",\n    now,\n    placeholder,\n    composerActions,\n    composerDisabled,\n    onSendError,\n    onReact,\n    messageActions,\n    onQuoteClick,\n    className,\n    ...rest\n}: ChatProps) {\n    const strings = chatStrings(locale);\n    const sections = groupMessages({ messages, currentUserId, windowMs: groupWindowMs });\n    const composer = useRef<ChatComposerHandle | null>(null);\n    const thread = useRef<HTMLDivElement | null>(null);\n    const stuckToBottom = useRef(true);\n\n    /**\n     * Remember whether the reader is at the bottom, before the next batch lands.\n     *\n     * A thread that always scrolls to the newest message yanks somebody out of the\n     * history they were reading, every time anyone types. So the jump only happens\n     * when they were already at the bottom — the same rule every chat app converges\n     * on. The 48px slack covers a partially visible last row.\n     */\n    const trackPosition = (): void => {\n        const node = thread.current;\n        if (!node) return;\n        const distance = node.scrollHeight - node.scrollTop - node.clientHeight;\n        stuckToBottom.current = distance < 48;\n    };\n\n    useLayoutEffect(() => {\n        const node = thread.current;\n        if (!node || !stuckToBottom.current) return;\n        node.scrollTop = node.scrollHeight;\n    }, [messages, typing]);\n\n    useEffect(() => {\n        const node = thread.current;\n        if (!node) return;\n        node.scrollTop = node.scrollHeight;\n        // Mount lands on the newest message; from then on `trackPosition` decides.\n    }, []);\n\n    const typingText = typingLabel(typing, locale);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {header && <header className={styles.header}>{header}</header>}\n\n            <div\n                ref={thread}\n                className={styles.thread}\n                onScroll={trackPosition}\n                role=\"log\"\n                aria-live=\"polite\"\n                aria-relevant=\"additions text\"\n                tabIndex={0}\n                aria-label={strings.thread}\n            >\n                {messages.length === 0\n                    ? (emptyState ?? <EmptyState title={strings.empty} />)\n                    : sections.map((section) =>\n                          section.kind === \"day\" ? (\n                              <div key={section.key} className={styles.day}>\n                                  <span className={styles.dayLabel}>\n                                      {dayLabel(section.date, { locale, now })}\n                                  </span>\n                              </div>\n                          ) : (\n                              <div\n                                  key={section.key}\n                                  className={cn(styles.run, section.own && styles.ownRun)}\n                              >\n                                  {renderAvatar && (\n                                      <div className={styles.avatar} aria-hidden=\"true\">\n                                          {renderAvatar(section.messages[0])}\n                                      </div>\n                                  )}\n                                  <div className={styles.runBody}>\n                                      <span className={styles.author}>\n                                          {section.own\n                                              ? strings.you\n                                              : (section.authorName ?? section.authorId)}\n                                      </span>\n                                      <ul className={styles.bubbles}>\n                                          {section.messages.map((message) => (\n                                              <ChatBubble\n                                                  key={message.id}\n                                                  message={message}\n                                                  own={section.own}\n                                                  locale={locale}\n                                                  onRetry={onRetry}\n                                                  onReact={onReact}\n                                                  messageActions={messageActions}\n                                                  onQuoteClick={onQuoteClick}\n                                              />\n                                          ))}\n                                      </ul>\n                                  </div>\n                              </div>\n                          ),\n                      )}\n            </div>\n\n            {typingText && (\n                <p className={styles.typing} aria-live=\"polite\">\n                    {typingText}\n                </p>\n            )}\n\n            {onSend && (\n                <ChatComposer\n                    ref={composer}\n                    onSend={onSend}\n                    locale={locale}\n                    placeholder={placeholder}\n                    actions={composerActions}\n                    disabled={composerDisabled}\n                    onError={onSendError}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Chat/Chat.js

@@ -1,126 +1,101 @@
 import { cn as e } from "../../utils/cn.js";
 import { EmptyState as t } from "../EmptyState/EmptyState.js";
-import { VisuallyHidden as n } from "../VisuallyHidden/VisuallyHidden.js";
-import { chatStrings as r, dayLabel as i, groupMessages as a, timeLabel as o, typingLabel as s } from "./chat-groups.js";
-import c from "./Chat.module.js";
-import { ChatComposer as l } from "./ChatComposer.js";
-import { useEffect as u, useLayoutEffect as d, useRef as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { chatStrings as n, dayLabel as r, groupMessages as i, typingLabel as a } from "./chat-groups.js";
+import o from "./Chat.module.js";
+import { ChatBubble as s } from "./ChatBubble.js";
+import { ChatComposer as c } from "./ChatComposer.js";
+import { useEffect as l, useLayoutEffect as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/Chat/Chat.tsx
-var h = {
-	sending: "◌",
-	sent: "✓",
-	read: "✓✓",
-	failed: "!"
-};
-function g({ messages: g, currentUserId: _, onSend: v, onRetry: y, typing: b = [], renderAvatar: x, header: S, emptyState: C, groupWindowMs: w, locale: T = "pt-BR", now: E, placeholder: D, composerActions: O, composerDisabled: k, onSendError: A, className: j, ...M }) {
-	let N = r(T), P = a({
-		messages: g,
-		currentUserId: _,
-		windowMs: w
-	}), F = f(null), I = f(null), L = f(!0), R = () => {
-		let e = I.current;
+function m({ messages: m, currentUserId: h, onSend: g, onRetry: _, typing: v = [], renderAvatar: y, header: b, emptyState: x, groupWindowMs: S, locale: C = "pt-BR", now: w, placeholder: T, composerActions: E, composerDisabled: D, onSendError: O, onReact: k, messageActions: A, onQuoteClick: j, className: M, ...N }) {
+	let P = n(C), F = i({
+		messages: m,
+		currentUserId: h,
+		windowMs: S
+	}), I = d(null), L = d(null), R = d(!0), z = () => {
+		let e = L.current;
 		if (!e) return;
 		let t = e.scrollHeight - e.scrollTop - e.clientHeight;
-		L.current = t < 48;
+		R.current = t < 48;
 	};
-	d(() => {
-		let e = I.current;
-		e && L.current && (e.scrollTop = e.scrollHeight);
-	}, [g, b]), u(() => {
-		let e = I.current;
+	u(() => {
+		let e = L.current;
+		e && R.current && (e.scrollTop = e.scrollHeight);
+	}, [m, v]), l(() => {
+		let e = L.current;
 		e && (e.scrollTop = e.scrollHeight);
 	}, []);
-	let z = s(b, T);
-	return /* @__PURE__ */ m("div", {
-		className: e(c.panel, j),
-		...M,
+	let B = a(v, C);
+	return /* @__PURE__ */ p("div", {
+		className: e(o.panel, M),
+		...N,
 		children: [
-			S && /* @__PURE__ */ p("header", {
-				className: c.header,
-				children: S
+			b && /* @__PURE__ */ f("header", {
+				className: o.header,
+				children: b
 			}),
-			/* @__PURE__ */ p("div", {
-				ref: I,
-				className: c.thread,
-				onScroll: R,
+			/* @__PURE__ */ f("div", {
+				ref: L,
+				className: o.thread,
+				onScroll: z,
 				role: "log",
 				"aria-live": "polite",
 				"aria-relevant": "additions text",
 				tabIndex: 0,
-				"aria-label": N.thread,
-				children: g.length === 0 ? C ?? /* @__PURE__ */ p(t, { title: N.empty }) : P.map((t) => t.kind === "day" ? /* @__PURE__ */ p("div", {
-					className: c.day,
-					children: /* @__PURE__ */ p("span", {
-						className: c.dayLabel,
-						children: i(t.date, {
-							locale: T,
-							now: E
+				"aria-label": P.thread,
+				children: m.length === 0 ? x ?? /* @__PURE__ */ f(t, { title: P.empty }) : F.map((t) => t.kind === "day" ? /* @__PURE__ */ f("div", {
+					className: o.day,
+					children: /* @__PURE__ */ f("span", {
+						className: o.dayLabel,
+						children: r(t.date, {
+							locale: C,
+							now: w
 						})
 					})
-				}, t.key) : /* @__PURE__ */ m("div", {
-					className: e(c.run, t.own && c.ownRun),
-					children: [x && /* @__PURE__ */ p("div", {
-						className: c.avatar,
+				}, t.key) : /* @__PURE__ */ p("div", {
+					className: e(o.run, t.own && o.ownRun),
+					children: [y && /* @__PURE__ */ f("div", {
+						className: o.avatar,
 						"aria-hidden": "true",
-						children: x(t.messages[0])
-					}), /* @__PURE__ */ m("div", {
-						className: c.runBody,
-						children: [/* @__PURE__ */ p("span", {
-							className: c.author,
-							children: t.own ? N.you : t.authorName ?? t.authorId
-						}), /* @__PURE__ */ p("ul", {
-							className: c.bubbles,
-							children: t.messages.map((r) => /* @__PURE__ */ m("li", {
-								className: c.bubbleRow,
-								children: [/* @__PURE__ */ m("div", {
-									className: e(c.bubble, t.own && c.ownBubble, r.status === "failed" && c.failedBubble),
-									children: [/* @__PURE__ */ p("div", {
-										className: c.body,
-										children: r.body
-									}), /* @__PURE__ */ m("div", {
-										className: c.meta,
-										children: [/* @__PURE__ */ p("time", {
-											dateTime: new Date(r.sentAt).toISOString(),
-											children: o(r.sentAt, T)
-										}), t.own && r.status && /* @__PURE__ */ m("span", {
-											className: e(c.status, r.status === "failed" && c.statusFailed),
-											title: N[r.status],
-											children: [/* @__PURE__ */ p("span", {
-												"aria-hidden": "true",
-												children: h[r.status]
-											}), /* @__PURE__ */ p(n, { children: N[r.status] })]
-										})]
-									})]
-								}), r.status === "failed" && y && /* @__PURE__ */ p("button", {
-									type: "button",
-									className: c.retry,
-									onClick: () => y(r),
-									children: N.retry
-								})]
-							}, r.id))
+						children: y(t.messages[0])
+					}), /* @__PURE__ */ p("div", {
+						className: o.runBody,
+						children: [/* @__PURE__ */ f("span", {
+							className: o.author,
+							children: t.own ? P.you : t.authorName ?? t.authorId
+						}), /* @__PURE__ */ f("ul", {
+							className: o.bubbles,
+							children: t.messages.map((e) => /* @__PURE__ */ f(s, {
+								message: e,
+								own: t.own,
+								locale: C,
+								onRetry: _,
+								onReact: k,
+								messageActions: A,
+								onQuoteClick: j
+							}, e.id))
 						})]
 					})]
 				}, t.key))
 			}),
-			z && /* @__PURE__ */ p("p", {
-				className: c.typing,
+			B && /* @__PURE__ */ f("p", {
+				className: o.typing,
 				"aria-live": "polite",
-				children: z
+				children: B
 			}),
-			v && /* @__PURE__ */ p(l, {
-				ref: F,
-				onSend: v,
-				locale: T,
-				placeholder: D,
-				actions: O,
-				disabled: k,
-				onError: A
+			g && /* @__PURE__ */ f(c, {
+				ref: I,
+				onSend: g,
+				locale: C,
+				placeholder: T,
+				actions: E,
+				disabled: D,
+				onError: O
 			})
 		]
 	});
 }
 //#endregion
-export { g as Chat };
+export { m as Chat };
 
 //# sourceMappingURL=Chat.js.map

package/dist/components/Chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","names":[],"sources":["../../../src/components/Chat/Chat.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — message grouping needs\n * more context than a list does: currentUserId to decide sides, groupWindowMs and\n * now to decide where a bubble group breaks, typing for the indicator. The remaining\n * props are the composer's (placeholder, composerActions, composerDisabled, onSend,\n * onSendError) and the slots (renderAvatar, header, emptyState).\n */\nimport { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { EmptyState } from \"../EmptyState\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { ChatComposer, type ChatComposerHandle } from \"./ChatComposer\";\nimport {\n    chatStrings,\n    dayLabel,\n    groupMessages,\n    timeLabel,\n    typingLabel,\n    type ChatMessage,\n} from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onSubmit\";\n\nexport interface ChatProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The thread, **oldest first**. Never reordered by the component. */\n    messages: readonly ChatMessage[];\n    /** Author id treated as \"own\" — decides side, colour and status ticks. */\n    currentUserId?: string;\n    /** Renders the composer when given. Receives the trimmed text. */\n    onSend?: (text: string) => void | Promise<void>;\n    /** Enables the retry control on a `\"failed\"` message. */\n    onRetry?: (message: ChatMessage) => void;\n    /** Names currently typing. One, two or a count is phrased for you. */\n    typing?: readonly string[];\n    /** Avatar for the first message of a run — an `<Avatar>`, an `<Icon>`. */\n    renderAvatar?: (message: ChatMessage) => ReactNode;\n    /** Rendered above the thread, inside the panel. */\n    header?: ReactNode;\n    /** Shown when there are no messages. */\n    emptyState?: ReactNode;\n    /** Gap that still keeps consecutive messages in one run. Default 5 min. */\n    groupWindowMs?: number;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Reference instant for \"Hoje\"/\"Ontem\". Default: now, at render time. */\n    now?: number;\n    /** Placeholder for the composer. */\n    placeholder?: string;\n    /** Extra controls inside the composer, before the send button. */\n    composerActions?: ReactNode;\n    /** Disable the composer — no permission, thread archived, offline. */\n    composerDisabled?: boolean;\n    /** Called when `onSend` rejects. The draft stays in the field either way. */\n    onSendError?: (error: unknown) => void;\n}\n\n/** Status glyph and label for an outgoing message. */\nconst STATUS_GLYPH: Record<NonNullable<ChatMessage[\"status\"]>, string> = {\n    sending: \"◌\",\n    sent: \"✓\",\n    read: \"✓✓\",\n    failed: \"!\",\n};\n\n/**\n * A message thread: grouped by author and by day, own messages on one side, with\n * delivery state, a typing indicator and an optional composer.\n *\n * Presentational and controlled, like the rest of the SDK: it takes a list and\n * emits intent (`onSend`, `onRetry`). Where messages come from — REST, the SDK's\n * `createWebSocket`, an SSE stream — and how an optimistic insert is done stay with\n * the app, because those differ per backend and a component that assumed one would\n * be wrong for most.\n *\n * It works as a comment thread too: that is the same component with\n * `currentUserId` set and no `typing`.\n *\n * @example\n * <Chat\n *     messages={messages}\n *     currentUserId={me.id}\n *     typing={typingNames}\n *     onSend={(text) => send({ text })}\n *     onRetry={(message) => resend(message.id)}\n * />\n */\nexport function Chat({\n    messages,\n    currentUserId,\n    onSend,\n    onRetry,\n    typing = [],\n    renderAvatar,\n    header,\n    emptyState,\n    groupWindowMs,\n    locale = \"pt-BR\",\n    now,\n    placeholder,\n    composerActions,\n    composerDisabled,\n    onSendError,\n    className,\n    ...rest\n}: ChatProps) {\n    const strings = chatStrings(locale);\n    const sections = groupMessages({ messages, currentUserId, windowMs: groupWindowMs });\n    const composer = useRef<ChatComposerHandle | null>(null);\n    const thread = useRef<HTMLDivElement | null>(null);\n    const stuckToBottom = useRef(true);\n\n    /**\n     * Remember whether the reader is at the bottom, before the next batch lands.\n     *\n     * A thread that always scrolls to the newest message yanks somebody out of the\n     * history they were reading, every time anyone types. So the jump only happens\n     * when they were already at the bottom — the same rule every chat app converges\n     * on. The 48px slack covers a partially visible last row.\n     */\n    const trackPosition = (): void => {\n        const node = thread.current;\n        if (!node) return;\n        const distance = node.scrollHeight - node.scrollTop - node.clientHeight;\n        stuckToBottom.current = distance < 48;\n    };\n\n    useLayoutEffect(() => {\n        const node = thread.current;\n        if (!node || !stuckToBottom.current) return;\n        node.scrollTop = node.scrollHeight;\n    }, [messages, typing]);\n\n    useEffect(() => {\n        const node = thread.current;\n        if (!node) return;\n        node.scrollTop = node.scrollHeight;\n        // Mount lands on the newest message; from then on `trackPosition` decides.\n    }, []);\n\n    const typingText = typingLabel(typing, locale);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {header && <header className={styles.header}>{header}</header>}\n\n            <div\n                ref={thread}\n                className={styles.thread}\n                onScroll={trackPosition}\n                role=\"log\"\n                aria-live=\"polite\"\n                aria-relevant=\"additions text\"\n                tabIndex={0}\n                aria-label={strings.thread}\n            >\n                {messages.length === 0\n                    ? (emptyState ?? <EmptyState title={strings.empty} />)\n                    : sections.map((section) =>\n                          section.kind === \"day\" ? (\n                              <div key={section.key} className={styles.day}>\n                                  <span className={styles.dayLabel}>\n                                      {dayLabel(section.date, { locale, now })}\n                                  </span>\n                              </div>\n                          ) : (\n                              <div\n                                  key={section.key}\n                                  className={cn(styles.run, section.own && styles.ownRun)}\n                              >\n                                  {renderAvatar && (\n                                      <div className={styles.avatar} aria-hidden=\"true\">\n                                          {renderAvatar(section.messages[0])}\n                                      </div>\n                                  )}\n                                  <div className={styles.runBody}>\n                                      <span className={styles.author}>\n                                          {section.own\n                                              ? strings.you\n                                              : (section.authorName ?? section.authorId)}\n                                      </span>\n                                      <ul className={styles.bubbles}>\n                                          {section.messages.map((message) => (\n                                              <li key={message.id} className={styles.bubbleRow}>\n                                                  <div\n                                                      className={cn(\n                                                          styles.bubble,\n                                                          section.own && styles.ownBubble,\n                                                          message.status === \"failed\" &&\n                                                              styles.failedBubble,\n                                                      )}\n                                                  >\n                                                      <div className={styles.body}>\n                                                          {message.body}\n                                                      </div>\n                                                      <div className={styles.meta}>\n                                                          <time\n                                                              dateTime={new Date(\n                                                                  message.sentAt,\n                                                              ).toISOString()}\n                                                          >\n                                                              {timeLabel(message.sentAt, locale)}\n                                                          </time>\n                                                          {section.own && message.status && (\n                                                              <span\n                                                                  className={cn(\n                                                                      styles.status,\n                                                                      message.status === \"failed\" &&\n                                                                          styles.statusFailed,\n                                                                  )}\n                                                                  title={strings[message.status]}\n                                                              >\n                                                                  <span aria-hidden=\"true\">\n                                                                      {STATUS_GLYPH[message.status]}\n                                                                  </span>\n                                                                  <VisuallyHidden>\n                                                                      {strings[message.status]}\n                                                                  </VisuallyHidden>\n                                                              </span>\n                                                          )}\n                                                      </div>\n                                                  </div>\n                                                  {message.status === \"failed\" && onRetry && (\n                                                      <button\n                                                          type=\"button\"\n                                                          className={styles.retry}\n                                                          onClick={() => onRetry(message)}\n                                                      >\n                                                          {strings.retry}\n                                                      </button>\n                                                  )}\n                                              </li>\n                                          ))}\n                                      </ul>\n                                  </div>\n                              </div>\n                          ),\n                      )}\n            </div>\n\n            {typingText && (\n                <p className={styles.typing} aria-live=\"polite\">\n                    {typingText}\n                </p>\n            )}\n\n            {onSend && (\n                <ChatComposer\n                    ref={composer}\n                    onSend={onSend}\n                    locale={locale}\n                    placeholder={placeholder}\n                    actions={composerActions}\n                    disabled={composerDisabled}\n                    onError={onSendError}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Chat.js","names":[],"sources":["../../../src/components/Chat/Chat.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — message grouping needs\n * more context than a list does: currentUserId to decide sides, groupWindowMs and\n * now to decide where a bubble group breaks, typing for the indicator. The remaining\n * props are the composer's (placeholder, composerActions, composerDisabled, onSend,\n * onSendError) and the slots (renderAvatar, header, emptyState).\n */\nimport { useEffect, useLayoutEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport type { ContextMenuItem } from \"../ContextMenu\";\nimport { EmptyState } from \"../EmptyState\";\nimport { ChatBubble } from \"./ChatBubble\";\nimport { ChatComposer, type ChatComposerHandle } from \"./ChatComposer\";\nimport { chatStrings, dayLabel, groupMessages, typingLabel, type ChatMessage } from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onSubmit\";\n\nexport interface ChatProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The thread, **oldest first**. Never reordered by the component. */\n    messages: readonly ChatMessage[];\n    /** Author id treated as \"own\" — decides side, colour and status ticks. */\n    currentUserId?: string;\n    /** Renders the composer when given. Receives the trimmed text. */\n    onSend?: (text: string) => void | Promise<void>;\n    /** Enables the retry control on a `\"failed\"` message. */\n    onRetry?: (message: ChatMessage) => void;\n    /** Names currently typing. One, two or a count is phrased for you. */\n    typing?: readonly string[];\n    /** Avatar for the first message of a run — an `<Avatar>`, an `<Icon>`. */\n    renderAvatar?: (message: ChatMessage) => ReactNode;\n    /** Rendered above the thread, inside the panel. */\n    header?: ReactNode;\n    /** Shown when there are no messages. */\n    emptyState?: ReactNode;\n    /** Gap that still keeps consecutive messages in one run. Default 5 min. */\n    groupWindowMs?: number;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Reference instant for \"Hoje\"/\"Ontem\". Default: now, at render time. */\n    now?: number;\n    /** Placeholder for the composer. */\n    placeholder?: string;\n    /** Extra controls inside the composer, before the send button. */\n    composerActions?: ReactNode;\n    /** Disable the composer — no permission, thread archived, offline. */\n    composerDisabled?: boolean;\n    /** Called when `onSend` rejects. The draft stays in the field either way. */\n    onSendError?: (error: unknown) => void;\n    /**\n     * Toggles a reaction on a message. Enables the reaction chips.\n     *\n     * Called with the emoji that was pressed, including one the user already\n     * reacted with: reacting again clears it, rather than stacking a second copy.\n     * The app owns that rule — the component only reports the press.\n     */\n    onReact?: (message: ChatMessage, emoji: string) => void;\n    /**\n     * Per-message actions: reply, forward, star, edit, delete.\n     *\n     * Returns the items for one message, opened by right click, by long press on\n     * touch, and by a `⋮` button on the bubble. Buttons painted on every bubble\n     * turn a conversation into a toolbar, which is why this is a menu.\n     */\n    messageActions?: (message: ChatMessage) => ContextMenuItem[];\n    /** Called when a reply stub is activated — scroll to the quoted message. */\n    onQuoteClick?: (message: ChatMessage) => void;\n}\n\n/**\n * A message thread: grouped by author and by day, own messages on one side, with\n * delivery state, a typing indicator and an optional composer.\n *\n * Presentational and controlled, like the rest of the SDK: it takes a list and\n * emits intent (`onSend`, `onRetry`). Where messages come from — REST, the SDK's\n * `createWebSocket`, an SSE stream — and how an optimistic insert is done stay with\n * the app, because those differ per backend and a component that assumed one would\n * be wrong for most.\n *\n * It works as a comment thread too: that is the same component with\n * `currentUserId` set and no `typing`.\n *\n * @example\n * <Chat\n *     messages={messages}\n *     currentUserId={me.id}\n *     typing={typingNames}\n *     onSend={(text) => send({ text })}\n *     onRetry={(message) => resend(message.id)}\n * />\n */\nexport function Chat({\n    messages,\n    currentUserId,\n    onSend,\n    onRetry,\n    typing = [],\n    renderAvatar,\n    header,\n    emptyState,\n    groupWindowMs,\n    locale = \"pt-BR\",\n    now,\n    placeholder,\n    composerActions,\n    composerDisabled,\n    onSendError,\n    onReact,\n    messageActions,\n    onQuoteClick,\n    className,\n    ...rest\n}: ChatProps) {\n    const strings = chatStrings(locale);\n    const sections = groupMessages({ messages, currentUserId, windowMs: groupWindowMs });\n    const composer = useRef<ChatComposerHandle | null>(null);\n    const thread = useRef<HTMLDivElement | null>(null);\n    const stuckToBottom = useRef(true);\n\n    /**\n     * Remember whether the reader is at the bottom, before the next batch lands.\n     *\n     * A thread that always scrolls to the newest message yanks somebody out of the\n     * history they were reading, every time anyone types. So the jump only happens\n     * when they were already at the bottom — the same rule every chat app converges\n     * on. The 48px slack covers a partially visible last row.\n     */\n    const trackPosition = (): void => {\n        const node = thread.current;\n        if (!node) return;\n        const distance = node.scrollHeight - node.scrollTop - node.clientHeight;\n        stuckToBottom.current = distance < 48;\n    };\n\n    useLayoutEffect(() => {\n        const node = thread.current;\n        if (!node || !stuckToBottom.current) return;\n        node.scrollTop = node.scrollHeight;\n    }, [messages, typing]);\n\n    useEffect(() => {\n        const node = thread.current;\n        if (!node) return;\n        node.scrollTop = node.scrollHeight;\n        // Mount lands on the newest message; from then on `trackPosition` decides.\n    }, []);\n\n    const typingText = typingLabel(typing, locale);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {header && <header className={styles.header}>{header}</header>}\n\n            <div\n                ref={thread}\n                className={styles.thread}\n                onScroll={trackPosition}\n                role=\"log\"\n                aria-live=\"polite\"\n                aria-relevant=\"additions text\"\n                tabIndex={0}\n                aria-label={strings.thread}\n            >\n                {messages.length === 0\n                    ? (emptyState ?? <EmptyState title={strings.empty} />)\n                    : sections.map((section) =>\n                          section.kind === \"day\" ? (\n                              <div key={section.key} className={styles.day}>\n                                  <span className={styles.dayLabel}>\n                                      {dayLabel(section.date, { locale, now })}\n                                  </span>\n                              </div>\n                          ) : (\n                              <div\n                                  key={section.key}\n                                  className={cn(styles.run, section.own && styles.ownRun)}\n                              >\n                                  {renderAvatar && (\n                                      <div className={styles.avatar} aria-hidden=\"true\">\n                                          {renderAvatar(section.messages[0])}\n                                      </div>\n                                  )}\n                                  <div className={styles.runBody}>\n                                      <span className={styles.author}>\n                                          {section.own\n                                              ? strings.you\n                                              : (section.authorName ?? section.authorId)}\n                                      </span>\n                                      <ul className={styles.bubbles}>\n                                          {section.messages.map((message) => (\n                                              <ChatBubble\n                                                  key={message.id}\n                                                  message={message}\n                                                  own={section.own}\n                                                  locale={locale}\n                                                  onRetry={onRetry}\n                                                  onReact={onReact}\n                                                  messageActions={messageActions}\n                                                  onQuoteClick={onQuoteClick}\n                                              />\n                                          ))}\n                                      </ul>\n                                  </div>\n                              </div>\n                          ),\n                      )}\n            </div>\n\n            {typingText && (\n                <p className={styles.typing} aria-live=\"polite\">\n                    {typingText}\n                </p>\n            )}\n\n            {onSend && (\n                <ChatComposer\n                    ref={composer}\n                    onSend={onSend}\n                    locale={locale}\n                    placeholder={placeholder}\n                    actions={composerActions}\n                    disabled={composerDisabled}\n                    onError={onSendError}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;AA8FA,SAAgB,EAAK,EACjB,aACA,kBACA,WACA,YACA,YAAS,CAAC,GACV,iBACA,WACA,eACA,kBACA,YAAS,SACT,QACA,gBACA,oBACA,qBACA,gBACA,YACA,mBACA,iBACA,cACA,GAAG,KACO;CACV,IAAM,IAAU,EAAY,CAAM,GAC5B,IAAW,EAAc;EAAE;EAAU;EAAe,UAAU;CAAc,CAAC,GAC7E,IAAW,EAAkC,IAAI,GACjD,IAAS,EAA8B,IAAI,GAC3C,IAAgB,EAAO,EAAI,GAU3B,UAA4B;EAC9B,IAAM,IAAO,EAAO;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,IAAW,EAAK,eAAe,EAAK,YAAY,EAAK;EAC3D,EAAc,UAAU,IAAW;CACvC;CAQA,AANA,QAAsB;EAClB,IAAM,IAAO,EAAO;EAChB,AAAC,KAAS,EAAc,YAC5B,EAAK,YAAY,EAAK;CAC1B,GAAG,CAAC,GAAU,CAAM,CAAC,GAErB,QAAgB;EACZ,IAAM,IAAO,EAAO;EACf,MACL,EAAK,YAAY,EAAK;CAE1B,GAAG,CAAC,CAAC;CAEL,IAAM,IAAa,EAAY,GAAQ,CAAM;CAE7C,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,OAAO,CAAS;EAAG,GAAI;EAAjD,UAAA;GACK,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;GAE7D,kBAAC,OAAD;IACI,KAAK;IACL,WAAW,EAAO;IAClB,UAAU;IACV,MAAK;IACL,aAAU;IACV,iBAAc;IACd,UAAU;IACV,cAAY,EAAQ;IAEnB,UAAA,EAAS,WAAW,IACd,KAAc,kBAAC,GAAD,EAAY,OAAO,EAAQ,MAAQ,CAAA,IAClD,EAAS,KAAK,MACV,EAAQ,SAAS,QACb,kBAAC,OAAD;KAAuB,WAAW,EAAO;KACrC,UAAA,kBAAC,QAAD;MAAM,WAAW,EAAO;MACnB,UAAA,EAAS,EAAQ,MAAM;OAAE;OAAQ;MAAI,CAAC;KACrC,CAAA;IACL,GAJK,EAAQ,GAIb,IAEL,kBAAC,OAAD;KAEI,WAAW,EAAG,EAAO,KAAK,EAAQ,OAAO,EAAO,MAAM;KAF1D,UAAA,CAIK,KACG,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAQ,eAAY;MACtC,UAAA,EAAa,EAAQ,SAAS,EAAE;KAChC,CAAA,GAET,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAvB,UAAA,CACI,kBAAC,QAAD;OAAM,WAAW,EAAO;OACnB,UAAA,EAAQ,MACH,EAAQ,MACP,EAAQ,cAAc,EAAQ;MACnC,CAAA,GACN,kBAAC,MAAD;OAAI,WAAW,EAAO;OACjB,UAAA,EAAQ,SAAS,KAAK,MACnB,kBAAC,GAAD;QAEa;QACT,KAAK,EAAQ;QACL;QACC;QACA;QACO;QACF;OACjB,GARQ,EAAQ,EAQhB,CACJ;MACD,CAAA,CACH;KACJ,CAAA,CAAA;IA7BI,GAAA,EAAQ,GA6BZ,CAEb;GACL,CAAA;GAEJ,KACG,kBAAC,KAAD;IAAG,WAAW,EAAO;IAAQ,aAAU;IAClC,UAAA;GACF,CAAA;GAGN,KACG,kBAAC,GAAD;IACI,KAAK;IACG;IACA;IACK;IACb,SAAS;IACT,UAAU;IACV,SAAS;GACZ,CAAA;EAEJ;;AAEb"}

package/dist/components/Chat/Chat.module.cjs

@@ -1,3 +1,3 @@
 require("../../styles/component/Chat.css");
-var e=`tempest_panel_xUVw0`,t=`tempest_header_muoPu`,n=`tempest_thread_-j8yS`,r=`tempest_day_uLsWA`,i=`tempest_dayLabel_m8rDy`,a=`tempest_run_jOUv7`,o=`tempest_ownRun_3XTG5`,s=`tempest_avatar_d9SYT`,c=`tempest_runBody_nHQC3`,l=`tempest_author_4MRkd`,u=`tempest_bubbles_VYaQ0`,d=`tempest_bubbleRow_QSc41`,f=`tempest_bubble_GGFcU`,p=`tempest_ownBubble_agOMW`,m=`tempest_failedBubble_kT3F5`,h=`tempest_body_1aH2F`,g=`tempest_meta_3fNx8`,_=`tempest_status_EeiUt`,v=`tempest_statusFailed_Bfro1`,y=`tempest_retry_DAbIj`,b=`tempest_typing_zdp3O`,x=`tempest_composer_krOGl`,S=`tempest_field_fBY-q`,C=`tempest_composerActions_MYwQx`,w=`tempest_send_NwcaR`,T={panel:e,header:t,thread:n,day:r,dayLabel:i,run:a,ownRun:o,avatar:s,runBody:c,author:l,bubbles:u,bubbleRow:d,bubble:f,ownBubble:p,failedBubble:m,body:h,meta:g,status:_,statusFailed:v,retry:y,typing:b,composer:x,field:S,composerActions:C,send:w};exports.author=l,exports.avatar=s,exports.body=h,exports.bubble=f,exports.bubbleRow=d,exports.bubbles=u,exports.composer=x,exports.composerActions=C,exports.day=r,exports.dayLabel=i,exports.default=T,exports.failedBubble=m,exports.field=S,exports.header=t,exports.meta=g,exports.ownBubble=p,exports.ownRun=o,exports.panel=e,exports.retry=y,exports.run=a,exports.runBody=c,exports.send=w,exports.status=_,exports.statusFailed=v,exports.thread=n,exports.typing=b;
+var e=`tempest_panel_xUVw0`,t=`tempest_header_muoPu`,n=`tempest_thread_-j8yS`,r=`tempest_day_uLsWA`,i=`tempest_dayLabel_m8rDy`,a=`tempest_run_jOUv7`,o=`tempest_ownRun_3XTG5`,s=`tempest_avatar_d9SYT`,c=`tempest_runBody_nHQC3`,l=`tempest_author_4MRkd`,u=`tempest_bubbles_VYaQ0`,d=`tempest_bubbleRow_QSc41`,f=`tempest_bubble_GGFcU`,p=`tempest_ownBubble_agOMW`,m=`tempest_failedBubble_kT3F5`,h=`tempest_body_1aH2F`,g=`tempest_meta_3fNx8`,_=`tempest_status_EeiUt`,v=`tempest_statusFailed_Bfro1`,y=`tempest_reactions_D4iGE`,b=`tempest_reaction_WkkNQ`,x=`tempest_reactionMine_81mXj`,S=`tempest_actionsButton_v8oqH`,C=`tempest_quote_1muxm`,w=`tempest_quoteButton_eD0Dx`,T=`tempest_quoteAuthor_Jpx15`,E=`tempest_quoteText_9KI-m`,D=`tempest_quoteRevoked_RQ-5u`,O=`tempest_tombstone_7Iiw-`,k=`tempest_deletedBubble_dZQFE`,A=`tempest_edited_kTire`,j=`tempest_statusRead_Wj77L`,M=`tempest_attachments_h8wIJ`,N=`tempest_attachmentsFallback_YT9RT`,P=`tempest_imageAttachment_PggzU`,F=`tempest_videoAttachment_0TsUC`,I=`tempest_voiceAttachment_1EUcu`,L=`tempest_waveform_5K-qs`,R=`tempest_fileAttachment_H803b`,z=`tempest_fileName_2Fwix`,B=`tempest_fileMeta_T1fdS`,V=`tempest_retry_DAbIj`,H=`tempest_typing_zdp3O`,U=`tempest_composer_krOGl`,W=`tempest_field_fBY-q`,G=`tempest_composerActions_MYwQx`,K=`tempest_send_NwcaR`,q={panel:e,header:t,thread:n,day:r,dayLabel:i,run:a,ownRun:o,avatar:s,runBody:c,author:l,bubbles:u,bubbleRow:d,bubble:f,ownBubble:p,failedBubble:m,body:h,meta:g,status:_,statusFailed:v,reactions:y,reaction:b,reactionMine:x,actionsButton:S,quote:C,quoteButton:w,quoteAuthor:T,quoteText:E,quoteRevoked:D,tombstone:O,deletedBubble:k,edited:A,statusRead:j,attachments:M,attachmentsFallback:N,imageAttachment:P,videoAttachment:F,voiceAttachment:I,waveform:L,fileAttachment:R,fileName:z,fileMeta:B,retry:V,typing:H,composer:U,field:W,composerActions:G,send:K};exports.actionsButton=S,exports.attachments=M,exports.attachmentsFallback=N,exports.author=l,exports.avatar=s,exports.body=h,exports.bubble=f,exports.bubbleRow=d,exports.bubbles=u,exports.composer=U,exports.composerActions=G,exports.day=r,exports.dayLabel=i,exports.default=q,exports.deletedBubble=k,exports.edited=A,exports.failedBubble=m,exports.field=W,exports.fileAttachment=R,exports.fileMeta=B,exports.fileName=z,exports.header=t,exports.imageAttachment=P,exports.meta=g,exports.ownBubble=p,exports.ownRun=o,exports.panel=e,exports.quote=C,exports.quoteAuthor=T,exports.quoteButton=w,exports.quoteRevoked=D,exports.quoteText=E,exports.reaction=b,exports.reactionMine=x,exports.reactions=y,exports.retry=V,exports.run=a,exports.runBody=c,exports.send=K,exports.status=_,exports.statusFailed=v,exports.statusRead=j,exports.thread=n,exports.tombstone=O,exports.typing=H,exports.videoAttachment=F,exports.voiceAttachment=I,exports.waveform=L;
 //# sourceMappingURL=Chat.module.cjs.map

package/dist/components/Chat/Chat.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.module.cjs","names":[],"sources":["../../../src/components/Chat/Chat.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n    height: var(--tempest-chat-height, 100%);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.thread {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    min-height: 0;\n    padding: var(--tempest-space-4);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n}\n\n.thread:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -2px;\n}\n\n.day {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n}\n\n.day::before,\n.day::after {\n    flex: 1 1 auto;\n    height: 1px;\n    background-color: var(--tempest-border);\n    content: \"\";\n}\n\n.dayLabel {\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n    text-transform: capitalize;\n}\n\n.run {\n    display: flex;\n    gap: var(--tempest-space-3);\n    align-items: flex-start;\n    max-width: 100%;\n}\n\n/*\n * Own messages mirror the row instead of moving to a second column: the avatar,\n * the name and the bubbles keep the same source order, so a screen reader still\n * reads \"who, then what\" while the eye reads it from the other side.\n */\n.ownRun {\n    flex-direction: row-reverse;\n}\n\n.avatar {\n    flex: 0 0 auto;\n}\n\n.runBody {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    max-width: min(78%, 42rem);\n}\n\n.ownRun .runBody {\n    align-items: flex-end;\n}\n\n.author {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.bubbles {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.bubbleRow {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.ownRun .bubbleRow {\n    flex-direction: row-reverse;\n}\n\n.bubble {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.ownBubble {\n    border-color: transparent;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n/*\n * A failed message keeps its text readable and states the failure at the border\n * and in the meta row. Tinting the whole bubble danger-red would make the message\n * itself hard to read — and re-reading it is exactly what somebody does before\n * deciding to retry.\n */\n.failedBubble {\n    border-color: var(--tempest-danger);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-text);\n}\n\n.body {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n}\n\n/*\n * The timestamp uses the muted token, not the subtle one, and switches to the\n * bubble's own foreground when the bubble is tinted.\n *\n * `--tempest-text-subtle` is solved against the page and surface backgrounds. On\n * `--tempest-primary-soft` it is a different composite, and the real browser\n * measured it below the 4.5:1 text floor — the same trap the syntax tokens hit.\n * Size is what de-emphasises the meta row here; colour still has to pass.\n */\n.meta {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.ownBubble .meta {\n    color: var(--tempest-primary-on-soft);\n}\n\n.status {\n    display: inline-flex;\n    align-items: center;\n}\n\n.statusFailed {\n    color: var(--tempest-danger);\n    font-weight: var(--tempest-weight-bold);\n}\n\n.retry {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-danger);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.typing {\n    flex: 0 0 auto;\n    margin: 0;\n    padding: 0 var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n}\n\n.composer {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n\n.field {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n    resize: none;\n}\n\n.field:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -1px;\n}\n\n.field:disabled {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.composerActions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.send {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.send:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n@media (max-width: 480px) {\n    .runBody {\n        max-width: 88%;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Chat.module.cjs","names":[],"sources":["../../../src/components/Chat/Chat.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n    height: var(--tempest-chat-height, 100%);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.thread {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    min-height: 0;\n    padding: var(--tempest-space-4);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n}\n\n.thread:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -2px;\n}\n\n.day {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n}\n\n.day::before,\n.day::after {\n    flex: 1 1 auto;\n    height: 1px;\n    background-color: var(--tempest-border);\n    content: \"\";\n}\n\n.dayLabel {\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n    text-transform: capitalize;\n}\n\n.run {\n    display: flex;\n    gap: var(--tempest-space-3);\n    align-items: flex-start;\n    max-width: 100%;\n}\n\n/*\n * Own messages mirror the row instead of moving to a second column: the avatar,\n * the name and the bubbles keep the same source order, so a screen reader still\n * reads \"who, then what\" while the eye reads it from the other side.\n */\n.ownRun {\n    flex-direction: row-reverse;\n}\n\n.avatar {\n    flex: 0 0 auto;\n}\n\n.runBody {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    max-width: min(78%, 42rem);\n}\n\n.ownRun .runBody {\n    align-items: flex-end;\n}\n\n.author {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.bubbles {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.bubbleRow {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.ownRun .bubbleRow {\n    flex-direction: row-reverse;\n}\n\n.bubble {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.ownBubble {\n    border-color: transparent;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n/*\n * A failed message keeps its text readable and states the failure at the border\n * and in the meta row. Tinting the whole bubble danger-red would make the message\n * itself hard to read — and re-reading it is exactly what somebody does before\n * deciding to retry.\n */\n.failedBubble {\n    border-color: var(--tempest-danger);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-text);\n}\n\n.body {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n}\n\n/*\n * The timestamp uses the muted token, not the subtle one, and switches to the\n * bubble's own foreground when the bubble is tinted.\n *\n * `--tempest-text-subtle` is solved against the page and surface backgrounds. On\n * `--tempest-primary-soft` it is a different composite, and the real browser\n * measured it below the 4.5:1 text floor — the same trap the syntax tokens hit.\n * Size is what de-emphasises the meta row here; colour still has to pass.\n */\n.meta {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.ownBubble .meta {\n    color: var(--tempest-primary-on-soft);\n}\n\n.status {\n    display: inline-flex;\n    align-items: center;\n}\n\n.statusFailed {\n    color: var(--tempest-danger);\n    font-weight: var(--tempest-weight-bold);\n}\n\n/*\n * A bubble row carries more than a bubble now: the actions button sits beside it\n * and the reaction chips hang under it, so the row wraps and the chips are given\n * the whole width to fall onto.\n */\n.bubbleRow {\n    flex-wrap: wrap;\n}\n\n.reactions {\n    display: flex;\n    flex-basis: 100%;\n    flex-wrap: wrap;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.ownRun .reactions {\n    justify-content: flex-end;\n}\n\n.reaction {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-full, 999px);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    line-height: 1.8;\n    cursor: pointer;\n}\n\n.reaction:disabled {\n    cursor: default;\n}\n\n/*\n * Your own reaction is marked by a tinted chip and its own foreground, never by\n * `--tempest-text-subtle` over the tint: that token is solved against the page\n * background and fails the text floor on a tinted surface.\n */\n.reactionMine {\n    border-color: transparent;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n/*\n * The ⋮ button is always in the DOM — on touch there is no hover to reveal it,\n * and a control that only appears on hover is a control a phone does not have.\n * A fine pointer gets it faded until the row is hovered or it is focused.\n */\n.actionsButton {\n    flex: 0 0 auto;\n    padding: 0 var(--tempest-space-1);\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .actionsButton {\n        opacity: 0;\n        transition: var(--tempest-transition-opacity, opacity 120ms ease);\n    }\n\n    .bubbleRow:hover .actionsButton,\n    .actionsButton:focus-visible {\n        opacity: 1;\n    }\n}\n\n/* The reply stub: a tinted strip with a bar on the side it is anchored to. */\n.quote {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border-left: 3px solid var(--tempest-primary);\n    border-radius: var(--tempest-radius-sm);\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    text-align: left;\n}\n\n.quoteButton {\n    border-top: none;\n    border-right: none;\n    border-bottom: none;\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n}\n\n/*\n * The author of a quote is text, so it is coloured like text.\n *\n * `--tempest-primary` here measured **4.35:1** against `--tempest-surface-2` in a\n * real browser — below the 4.5:1 floor for a 12px label, and invisible to the\n * jsdom axe sweep, which disables `color-contrast` because nothing is painted.\n * The brand still marks the quote: it is the bar down the side, which is a\n * non-text indicator and only owes 3:1.\n */\n.quoteAuthor {\n    color: var(--tempest-text);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.quoteText {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    overflow-wrap: anywhere;\n}\n\n/*\n * A revoked quote reads as absent, which is the point: the text of a deleted\n * message must not survive inside the reply to it.\n */\n.quoteRevoked {\n    color: var(--tempest-text-muted);\n    font-style: italic;\n}\n\n.tombstone {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-style: italic;\n}\n\n.deletedBubble {\n    border-style: dashed;\n    background-color: transparent;\n}\n\n.edited {\n    font-style: italic;\n}\n\n/* Read by everyone is the only state that turns the ticks. */\n.statusRead {\n    color: var(--tempest-info, var(--tempest-primary));\n}\n\n.attachments {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    max-width: 320px;\n}\n\n/* Holds the row's height while the attachments chunk is still loading. */\n.attachmentsFallback {\n    min-height: var(--tempest-space-8, 2rem);\n}\n\n.imageAttachment {\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background: none;\n    line-height: 0;\n    cursor: pointer;\n}\n\n.imageAttachment img {\n    max-width: 100%;\n    max-height: 260px;\n    border-radius: var(--tempest-radius-md);\n    object-fit: cover;\n}\n\n.videoAttachment {\n    max-width: 100%;\n    border-radius: var(--tempest-radius-md);\n}\n\n.voiceAttachment {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The waveform is the difference between a voice note and a grey rectangle: it\n * is what tells somebody whether this is a word or a two-minute monologue.\n */\n.waveform {\n    display: flex;\n    align-items: flex-end;\n    gap: 2px;\n    height: 28px;\n}\n\n.waveform span {\n    flex: 1 1 auto;\n    min-width: 2px;\n    border-radius: 1px;\n    background-color: var(--tempest-primary);\n    opacity: 0.7;\n}\n\n.fileAttachment {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding: var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    color: var(--tempest-text);\n    text-decoration: none;\n}\n\n.fileName {\n    overflow-wrap: anywhere;\n    font-weight: var(--tempest-weight-medium);\n}\n\n.fileMeta {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.retry {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-danger);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.typing {\n    flex: 0 0 auto;\n    margin: 0;\n    padding: 0 var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n}\n\n.composer {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n\n.field {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n    resize: none;\n}\n\n.field:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -1px;\n}\n\n.field:disabled {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.composerActions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.send {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.send:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n@media (max-width: 480px) {\n    .runBody {\n        max-width: 88%;\n    }\n}\n"],"mappings":";"}

package/dist/components/Chat/Chat.module.js

@@ -1,6 +1,6 @@
 import "../../styles/component/Chat.css";
 //#region src/components/Chat/Chat.module.css
-var e = "tempest_panel_xUVw0", t = "tempest_header_muoPu", n = "tempest_thread_-j8yS", r = "tempest_day_uLsWA", i = "tempest_dayLabel_m8rDy", a = "tempest_run_jOUv7", o = "tempest_ownRun_3XTG5", s = "tempest_avatar_d9SYT", c = "tempest_runBody_nHQC3", l = "tempest_author_4MRkd", u = "tempest_bubbles_VYaQ0", d = "tempest_bubbleRow_QSc41", f = "tempest_bubble_GGFcU", p = "tempest_ownBubble_agOMW", m = "tempest_failedBubble_kT3F5", h = "tempest_body_1aH2F", g = "tempest_meta_3fNx8", _ = "tempest_status_EeiUt", v = "tempest_statusFailed_Bfro1", y = "tempest_retry_DAbIj", b = "tempest_typing_zdp3O", x = "tempest_composer_krOGl", S = "tempest_field_fBY-q", C = "tempest_composerActions_MYwQx", w = "tempest_send_NwcaR", T = {
+var e = "tempest_panel_xUVw0", t = "tempest_header_muoPu", n = "tempest_thread_-j8yS", r = "tempest_day_uLsWA", i = "tempest_dayLabel_m8rDy", a = "tempest_run_jOUv7", o = "tempest_ownRun_3XTG5", s = "tempest_avatar_d9SYT", c = "tempest_runBody_nHQC3", l = "tempest_author_4MRkd", u = "tempest_bubbles_VYaQ0", d = "tempest_bubbleRow_QSc41", f = "tempest_bubble_GGFcU", p = "tempest_ownBubble_agOMW", m = "tempest_failedBubble_kT3F5", h = "tempest_body_1aH2F", g = "tempest_meta_3fNx8", _ = "tempest_status_EeiUt", v = "tempest_statusFailed_Bfro1", y = "tempest_reactions_D4iGE", b = "tempest_reaction_WkkNQ", x = "tempest_reactionMine_81mXj", S = "tempest_actionsButton_v8oqH", C = "tempest_quote_1muxm", w = "tempest_quoteButton_eD0Dx", T = "tempest_quoteAuthor_Jpx15", E = "tempest_quoteText_9KI-m", D = "tempest_quoteRevoked_RQ-5u", O = "tempest_tombstone_7Iiw-", k = "tempest_deletedBubble_dZQFE", A = "tempest_edited_kTire", j = "tempest_statusRead_Wj77L", M = "tempest_attachments_h8wIJ", N = "tempest_attachmentsFallback_YT9RT", P = "tempest_imageAttachment_PggzU", F = "tempest_videoAttachment_0TsUC", I = "tempest_voiceAttachment_1EUcu", L = "tempest_waveform_5K-qs", R = "tempest_fileAttachment_H803b", z = "tempest_fileName_2Fwix", B = "tempest_fileMeta_T1fdS", V = "tempest_retry_DAbIj", H = "tempest_typing_zdp3O", U = "tempest_composer_krOGl", W = "tempest_field_fBY-q", G = "tempest_composerActions_MYwQx", K = "tempest_send_NwcaR", q = {
 	panel: e,
 	header: t,
 	thread: n,
@@ -20,14 +20,36 @@ var e = "tempest_panel_xUVw0", t = "tempest_header_muoPu", n = "tempest_thread_-
 	meta: g,
 	status: _,
 	statusFailed: v,
-	retry: y,
-	typing: b,
-	composer: x,
-	field: S,
-	composerActions: C,
-	send: w
+	reactions: y,
+	reaction: b,
+	reactionMine: x,
+	actionsButton: S,
+	quote: C,
+	quoteButton: w,
+	quoteAuthor: T,
+	quoteText: E,
+	quoteRevoked: D,
+	tombstone: O,
+	deletedBubble: k,
+	edited: A,
+	statusRead: j,
+	attachments: M,
+	attachmentsFallback: N,
+	imageAttachment: P,
+	videoAttachment: F,
+	voiceAttachment: I,
+	waveform: L,
+	fileAttachment: R,
+	fileName: z,
+	fileMeta: B,
+	retry: V,
+	typing: H,
+	composer: U,
+	field: W,
+	composerActions: G,
+	send: K
 };
 //#endregion
-export { l as author, s as avatar, h as body, f as bubble, d as bubbleRow, u as bubbles, x as composer, C as composerActions, r as day, i as dayLabel, T as default, m as failedBubble, S as field, t as header, g as meta, p as ownBubble, o as ownRun, e as panel, y as retry, a as run, c as runBody, w as send, _ as status, v as statusFailed, n as thread, b as typing };
+export { S as actionsButton, M as attachments, N as attachmentsFallback, l as author, s as avatar, h as body, f as bubble, d as bubbleRow, u as bubbles, U as composer, G as composerActions, r as day, i as dayLabel, q as default, k as deletedBubble, A as edited, m as failedBubble, W as field, R as fileAttachment, B as fileMeta, z as fileName, t as header, P as imageAttachment, g as meta, p as ownBubble, o as ownRun, e as panel, C as quote, T as quoteAuthor, w as quoteButton, D as quoteRevoked, E as quoteText, b as reaction, x as reactionMine, y as reactions, V as retry, a as run, c as runBody, K as send, _ as status, v as statusFailed, j as statusRead, n as thread, O as tombstone, H as typing, F as videoAttachment, I as voiceAttachment, L as waveform };
 
 //# sourceMappingURL=Chat.module.js.map

package/dist/components/Chat/Chat.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.module.js","names":[],"sources":["../../../src/components/Chat/Chat.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n    height: var(--tempest-chat-height, 100%);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.thread {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    min-height: 0;\n    padding: var(--tempest-space-4);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n}\n\n.thread:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -2px;\n}\n\n.day {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n}\n\n.day::before,\n.day::after {\n    flex: 1 1 auto;\n    height: 1px;\n    background-color: var(--tempest-border);\n    content: \"\";\n}\n\n.dayLabel {\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n    text-transform: capitalize;\n}\n\n.run {\n    display: flex;\n    gap: var(--tempest-space-3);\n    align-items: flex-start;\n    max-width: 100%;\n}\n\n/*\n * Own messages mirror the row instead of moving to a second column: the avatar,\n * the name and the bubbles keep the same source order, so a screen reader still\n * reads \"who, then what\" while the eye reads it from the other side.\n */\n.ownRun {\n    flex-direction: row-reverse;\n}\n\n.avatar {\n    flex: 0 0 auto;\n}\n\n.runBody {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    max-width: min(78%, 42rem);\n}\n\n.ownRun .runBody {\n    align-items: flex-end;\n}\n\n.author {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.bubbles {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.bubbleRow {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.ownRun .bubbleRow {\n    flex-direction: row-reverse;\n}\n\n.bubble {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.ownBubble {\n    border-color: transparent;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n/*\n * A failed message keeps its text readable and states the failure at the border\n * and in the meta row. Tinting the whole bubble danger-red would make the message\n * itself hard to read — and re-reading it is exactly what somebody does before\n * deciding to retry.\n */\n.failedBubble {\n    border-color: var(--tempest-danger);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-text);\n}\n\n.body {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n}\n\n/*\n * The timestamp uses the muted token, not the subtle one, and switches to the\n * bubble's own foreground when the bubble is tinted.\n *\n * `--tempest-text-subtle` is solved against the page and surface backgrounds. On\n * `--tempest-primary-soft` it is a different composite, and the real browser\n * measured it below the 4.5:1 text floor — the same trap the syntax tokens hit.\n * Size is what de-emphasises the meta row here; colour still has to pass.\n */\n.meta {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.ownBubble .meta {\n    color: var(--tempest-primary-on-soft);\n}\n\n.status {\n    display: inline-flex;\n    align-items: center;\n}\n\n.statusFailed {\n    color: var(--tempest-danger);\n    font-weight: var(--tempest-weight-bold);\n}\n\n.retry {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-danger);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.typing {\n    flex: 0 0 auto;\n    margin: 0;\n    padding: 0 var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n}\n\n.composer {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n\n.field {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n    resize: none;\n}\n\n.field:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -1px;\n}\n\n.field:disabled {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.composerActions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.send {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.send:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n@media (max-width: 480px) {\n    .runBody {\n        max-width: 88%;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Chat.module.js","names":[],"sources":["../../../src/components/Chat/Chat.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n    height: var(--tempest-chat-height, 100%);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.thread {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    min-height: 0;\n    padding: var(--tempest-space-4);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n}\n\n.thread:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -2px;\n}\n\n.day {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n}\n\n.day::before,\n.day::after {\n    flex: 1 1 auto;\n    height: 1px;\n    background-color: var(--tempest-border);\n    content: \"\";\n}\n\n.dayLabel {\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n    text-transform: capitalize;\n}\n\n.run {\n    display: flex;\n    gap: var(--tempest-space-3);\n    align-items: flex-start;\n    max-width: 100%;\n}\n\n/*\n * Own messages mirror the row instead of moving to a second column: the avatar,\n * the name and the bubbles keep the same source order, so a screen reader still\n * reads \"who, then what\" while the eye reads it from the other side.\n */\n.ownRun {\n    flex-direction: row-reverse;\n}\n\n.avatar {\n    flex: 0 0 auto;\n}\n\n.runBody {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    max-width: min(78%, 42rem);\n}\n\n.ownRun .runBody {\n    align-items: flex-end;\n}\n\n.author {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.bubbles {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.bubbleRow {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.ownRun .bubbleRow {\n    flex-direction: row-reverse;\n}\n\n.bubble {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.ownBubble {\n    border-color: transparent;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n/*\n * A failed message keeps its text readable and states the failure at the border\n * and in the meta row. Tinting the whole bubble danger-red would make the message\n * itself hard to read — and re-reading it is exactly what somebody does before\n * deciding to retry.\n */\n.failedBubble {\n    border-color: var(--tempest-danger);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-text);\n}\n\n.body {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n}\n\n/*\n * The timestamp uses the muted token, not the subtle one, and switches to the\n * bubble's own foreground when the bubble is tinted.\n *\n * `--tempest-text-subtle` is solved against the page and surface backgrounds. On\n * `--tempest-primary-soft` it is a different composite, and the real browser\n * measured it below the 4.5:1 text floor — the same trap the syntax tokens hit.\n * Size is what de-emphasises the meta row here; colour still has to pass.\n */\n.meta {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.ownBubble .meta {\n    color: var(--tempest-primary-on-soft);\n}\n\n.status {\n    display: inline-flex;\n    align-items: center;\n}\n\n.statusFailed {\n    color: var(--tempest-danger);\n    font-weight: var(--tempest-weight-bold);\n}\n\n/*\n * A bubble row carries more than a bubble now: the actions button sits beside it\n * and the reaction chips hang under it, so the row wraps and the chips are given\n * the whole width to fall onto.\n */\n.bubbleRow {\n    flex-wrap: wrap;\n}\n\n.reactions {\n    display: flex;\n    flex-basis: 100%;\n    flex-wrap: wrap;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.ownRun .reactions {\n    justify-content: flex-end;\n}\n\n.reaction {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-full, 999px);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    line-height: 1.8;\n    cursor: pointer;\n}\n\n.reaction:disabled {\n    cursor: default;\n}\n\n/*\n * Your own reaction is marked by a tinted chip and its own foreground, never by\n * `--tempest-text-subtle` over the tint: that token is solved against the page\n * background and fails the text floor on a tinted surface.\n */\n.reactionMine {\n    border-color: transparent;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n/*\n * The ⋮ button is always in the DOM — on touch there is no hover to reveal it,\n * and a control that only appears on hover is a control a phone does not have.\n * A fine pointer gets it faded until the row is hovered or it is focused.\n */\n.actionsButton {\n    flex: 0 0 auto;\n    padding: 0 var(--tempest-space-1);\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .actionsButton {\n        opacity: 0;\n        transition: var(--tempest-transition-opacity, opacity 120ms ease);\n    }\n\n    .bubbleRow:hover .actionsButton,\n    .actionsButton:focus-visible {\n        opacity: 1;\n    }\n}\n\n/* The reply stub: a tinted strip with a bar on the side it is anchored to. */\n.quote {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border-left: 3px solid var(--tempest-primary);\n    border-radius: var(--tempest-radius-sm);\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    text-align: left;\n}\n\n.quoteButton {\n    border-top: none;\n    border-right: none;\n    border-bottom: none;\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n}\n\n/*\n * The author of a quote is text, so it is coloured like text.\n *\n * `--tempest-primary` here measured **4.35:1** against `--tempest-surface-2` in a\n * real browser — below the 4.5:1 floor for a 12px label, and invisible to the\n * jsdom axe sweep, which disables `color-contrast` because nothing is painted.\n * The brand still marks the quote: it is the bar down the side, which is a\n * non-text indicator and only owes 3:1.\n */\n.quoteAuthor {\n    color: var(--tempest-text);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.quoteText {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    overflow-wrap: anywhere;\n}\n\n/*\n * A revoked quote reads as absent, which is the point: the text of a deleted\n * message must not survive inside the reply to it.\n */\n.quoteRevoked {\n    color: var(--tempest-text-muted);\n    font-style: italic;\n}\n\n.tombstone {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-style: italic;\n}\n\n.deletedBubble {\n    border-style: dashed;\n    background-color: transparent;\n}\n\n.edited {\n    font-style: italic;\n}\n\n/* Read by everyone is the only state that turns the ticks. */\n.statusRead {\n    color: var(--tempest-info, var(--tempest-primary));\n}\n\n.attachments {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    max-width: 320px;\n}\n\n/* Holds the row's height while the attachments chunk is still loading. */\n.attachmentsFallback {\n    min-height: var(--tempest-space-8, 2rem);\n}\n\n.imageAttachment {\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background: none;\n    line-height: 0;\n    cursor: pointer;\n}\n\n.imageAttachment img {\n    max-width: 100%;\n    max-height: 260px;\n    border-radius: var(--tempest-radius-md);\n    object-fit: cover;\n}\n\n.videoAttachment {\n    max-width: 100%;\n    border-radius: var(--tempest-radius-md);\n}\n\n.voiceAttachment {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The waveform is the difference between a voice note and a grey rectangle: it\n * is what tells somebody whether this is a word or a two-minute monologue.\n */\n.waveform {\n    display: flex;\n    align-items: flex-end;\n    gap: 2px;\n    height: 28px;\n}\n\n.waveform span {\n    flex: 1 1 auto;\n    min-width: 2px;\n    border-radius: 1px;\n    background-color: var(--tempest-primary);\n    opacity: 0.7;\n}\n\n.fileAttachment {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding: var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    color: var(--tempest-text);\n    text-decoration: none;\n}\n\n.fileName {\n    overflow-wrap: anywhere;\n    font-weight: var(--tempest-weight-medium);\n}\n\n.fileMeta {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.retry {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-danger);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.typing {\n    flex: 0 0 auto;\n    margin: 0;\n    padding: 0 var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n}\n\n.composer {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n\n.field {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n    resize: none;\n}\n\n.field:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -1px;\n}\n\n.field:disabled {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.composerActions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n}\n\n.send {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.send:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n@media (max-width: 480px) {\n    .runBody {\n        max-width: 88%;\n    }\n}\n"],"mappings":";"}

package/dist/components/Chat/ChatActionsMenu.cjs

@@ -0,0 +1,2 @@
+const e=require("../ContextMenu/ContextMenu.cjs");let t=require("react/jsx-runtime");function n({items:n,trigger:r,children:i}){return(0,t.jsx)(e.ContextMenu,{items:n,trigger:r,children:i})}exports.ChatActionsMenu=n;
+//# sourceMappingURL=ChatActionsMenu.cjs.map