tempest-react-sdk 0.62.0 → 0.64.0

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,2 +1,3 @@
-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;
+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_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,5 +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,
@@ -19,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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatActionsMenu.cjs","names":[],"sources":["../../../src/components/Chat/ChatActionsMenu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { ContextMenu, type ContextMenuItem } from \"../ContextMenu\";\n\nexport interface ChatActionsMenuProps {\n    /** Actions for this message. */\n    items: ContextMenuItem[];\n    /** Which pointer gesture opens it — the bubble uses the right click, the ⋮ the left. */\n    trigger: \"contextmenu\" | \"click\";\n    /** The bubble, or the ⋮ button. */\n    children: ReactNode;\n}\n\n/**\n * The bridge from a message to the SDK's context menu.\n *\n * A separate module, reached through `lazy()` from the bubble, because\n * `ContextMenu` pulls `Portal` and its own geometry — measured, that is 3.07 kB\n * brotli — and a support thread or a comment list passes no `messageActions` at\n * all. Keeping it behind the dynamic import is what lets a text-only thread stay\n * the size it was.\n *\n * @param props - The items, the gesture and the trigger content.\n * @returns The content wrapped in a context menu.\n */\nexport function ChatActionsMenu({ items, trigger, children }: ChatActionsMenuProps) {\n    return (\n        <ContextMenu items={items} trigger={trigger}>\n            {children}\n        </ContextMenu>\n    );\n}\n"],"mappings":"qFAyBA,SAAgB,EAAgB,CAAE,QAAO,UAAS,YAAkC,CAChF,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CAAoB,QAAgB,UAC/B,UACQ,CAAA,CAErB"}

package/dist/components/Chat/ChatActionsMenu.js

@@ -0,0 +1,14 @@
+import { ContextMenu as e } from "../ContextMenu/ContextMenu.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Chat/ChatActionsMenu.tsx
+function n({ items: n, trigger: r, children: i }) {
+	return /* @__PURE__ */ t(e, {
+		items: n,
+		trigger: r,
+		children: i
+	});
+}
+//#endregion
+export { n as ChatActionsMenu };
+
+//# sourceMappingURL=ChatActionsMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatActionsMenu.js","names":[],"sources":["../../../src/components/Chat/ChatActionsMenu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { ContextMenu, type ContextMenuItem } from \"../ContextMenu\";\n\nexport interface ChatActionsMenuProps {\n    /** Actions for this message. */\n    items: ContextMenuItem[];\n    /** Which pointer gesture opens it — the bubble uses the right click, the ⋮ the left. */\n    trigger: \"contextmenu\" | \"click\";\n    /** The bubble, or the ⋮ button. */\n    children: ReactNode;\n}\n\n/**\n * The bridge from a message to the SDK's context menu.\n *\n * A separate module, reached through `lazy()` from the bubble, because\n * `ContextMenu` pulls `Portal` and its own geometry — measured, that is 3.07 kB\n * brotli — and a support thread or a comment list passes no `messageActions` at\n * all. Keeping it behind the dynamic import is what lets a text-only thread stay\n * the size it was.\n *\n * @param props - The items, the gesture and the trigger content.\n * @returns The content wrapped in a context menu.\n */\nexport function ChatActionsMenu({ items, trigger, children }: ChatActionsMenuProps) {\n    return (\n        <ContextMenu items={items} trigger={trigger}>\n            {children}\n        </ContextMenu>\n    );\n}\n"],"mappings":";;;AAyBA,SAAgB,EAAgB,EAAE,UAAO,YAAS,eAAkC;CAChF,OACI,kBAAC,GAAD;EAAoB;EAAgB;EAC/B;CACQ,CAAA;AAErB"}

package/dist/components/Chat/ChatAttachments.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/numbers.cjs"),t=require("../VideoPlayer/VideoPlayer.cjs"),n=require("../Lightbox/Lightbox.cjs"),r=require("./Chat.module.cjs"),i=require("../AudioPlayer/AudioPlayer.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=Array.from({length:28},()=>.25);function c(e){let t=Math.round(e/1e3),n=Math.floor(t/60),r=t%60;return`${n}:${String(r).padStart(2,`0`)}`}function l({attachments:l,strings:u}){let d=l.filter(e=>e.kind===`image`),[f,p]=(0,a.useState)(null);return(0,o.jsxs)(`div`,{className:r.default.attachments,children:[l.map((n,a)=>{let l=`${n.kind}-${n.url}-${a}`;if(n.kind===`image`){let e=d.indexOf(n);return(0,o.jsx)(`button`,{type:`button`,className:r.default.imageAttachment,onClick:()=>p(e),children:(0,o.jsx)(`img`,{src:n.thumbnailUrl??n.url,alt:n.alt??n.name??``,loading:`lazy`})},l)}return n.kind===`video`?(0,o.jsx)(t.VideoPlayer,{src:n.url,durationMs:n.durationMs,poster:n.thumbnailUrl,className:r.default.videoAttachment},l):n.kind===`voice`?(0,o.jsxs)(`div`,{className:r.default.voiceAttachment,children:[(0,o.jsx)(`div`,{className:r.default.waveform,"aria-hidden":`true`,children:(n.waveform??s).map((e,t)=>(0,o.jsx)(`span`,{style:{height:`${Math.max(8,Math.min(100,e*100))}%`}},t))}),(0,o.jsx)(i.AudioPlayer,{src:n.url,durationMs:n.durationMs,"aria-label":u.voiceNote})]},l):n.kind===`audio`?(0,o.jsx)(i.AudioPlayer,{src:n.url,durationMs:n.durationMs},l):(0,o.jsxs)(`a`,{className:r.default.fileAttachment,href:n.url,download:n.name??!0,children:[(0,o.jsx)(`span`,{className:r.default.fileName,children:n.name??u.download}),(0,o.jsx)(`span`,{className:r.default.fileMeta,children:[n.sizeBytes===void 0?null:e.formatBytes(n.sizeBytes),n.durationMs===void 0?null:c(n.durationMs)].filter(Boolean).join(` · `)})]},l)}),d.length>0&&(0,o.jsx)(n.Lightbox,{items:d.map(e=>({src:e.url,alt:e.alt??e.name??``,thumbnail:e.thumbnailUrl})),open:f!==null,index:f??0,onIndexChange:p,onClose:()=>p(null)})]})}exports.ChatAttachments=l;
+//# sourceMappingURL=ChatAttachments.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAttachments.cjs","names":[],"sources":["../../../src/components/Chat/ChatAttachments.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { formatBytes } from \"@/utils/numbers\";\n\nimport { AudioPlayer } from \"../AudioPlayer\";\nimport { Lightbox } from \"../Lightbox\";\nimport { VideoPlayer } from \"../VideoPlayer\";\nimport type { ChatAttachment } from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** Strings this view needs, passed in so the locale table stays in one file. */\nexport interface ChatAttachmentStrings {\n    voiceNote: string;\n    download: string;\n}\n\nexport interface ChatAttachmentsProps {\n    /** What this message carries. */\n    attachments: readonly ChatAttachment[];\n    /** Labels, from `chatStrings(locale)`. */\n    strings: ChatAttachmentStrings;\n}\n\n/** Bars a voice note draws when the app gave no peaks. */\nconst FLAT_WAVEFORM = Array.from({ length: 28 }, () => 0.25);\n\n/** `1:04` from milliseconds — a duration, never a clock time. */\nfunction durationLabel(durationMs: number): string {\n    const total = Math.round(durationMs / 1000);\n    const minutes = Math.floor(total / 60);\n    const seconds = total % 60;\n    return `${minutes}:${String(seconds).padStart(2, \"0\")}`;\n}\n\n/**\n * The media half of a bubble.\n *\n * Kept in its own module, and reached through `lazy()` from the thread, because\n * it pulls three of the heaviest components in the SDK — `Lightbox`,\n * `VideoPlayer`, `AudioPlayer` — and a support thread of plain text should not\n * pay for a photo viewer it never opens. The thread renders it only for messages\n * that actually carry an attachment, so that chunk is requested the first time\n * one appears.\n *\n * Nothing here is new UI: an image opens the SDK's lightbox, a video and an audio\n * clip use the SDK's players, and a file is a download row. That composition is\n * the whole point — every app was writing it again, the same way.\n *\n * @param props - The attachments and the locale strings.\n * @returns The rendered attachment list.\n */\nexport function ChatAttachments({ attachments, strings }: ChatAttachmentsProps) {\n    const images = attachments.filter((attachment) => attachment.kind === \"image\");\n    const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);\n\n    return (\n        <div className={styles.attachments}>\n            {attachments.map((attachment, index) => {\n                const key = `${attachment.kind}-${attachment.url}-${index}`;\n                if (attachment.kind === \"image\") {\n                    const position = images.indexOf(attachment);\n                    return (\n                        <button\n                            key={key}\n                            type=\"button\"\n                            className={styles.imageAttachment}\n                            onClick={() => setLightboxIndex(position)}\n                        >\n                            <img\n                                src={attachment.thumbnailUrl ?? attachment.url}\n                                alt={attachment.alt ?? attachment.name ?? \"\"}\n                                loading=\"lazy\"\n                            />\n                        </button>\n                    );\n                }\n                if (attachment.kind === \"video\") {\n                    return (\n                        <VideoPlayer\n                            key={key}\n                            src={attachment.url}\n                            durationMs={attachment.durationMs}\n                            poster={attachment.thumbnailUrl}\n                            className={styles.videoAttachment}\n                        />\n                    );\n                }\n                if (attachment.kind === \"voice\") {\n                    return (\n                        <div key={key} className={styles.voiceAttachment}>\n                            <div className={styles.waveform} aria-hidden=\"true\">\n                                {(attachment.waveform ?? FLAT_WAVEFORM).map((peak, bar) => (\n                                    <span\n                                        key={bar}\n                                        style={{\n                                            height: `${Math.max(8, Math.min(100, peak * 100))}%`,\n                                        }}\n                                    />\n                                ))}\n                            </div>\n                            <AudioPlayer\n                                src={attachment.url}\n                                durationMs={attachment.durationMs}\n                                aria-label={strings.voiceNote}\n                            />\n                        </div>\n                    );\n                }\n                if (attachment.kind === \"audio\") {\n                    return (\n                        <AudioPlayer\n                            key={key}\n                            src={attachment.url}\n                            durationMs={attachment.durationMs}\n                        />\n                    );\n                }\n                return (\n                    <a\n                        key={key}\n                        className={styles.fileAttachment}\n                        href={attachment.url}\n                        download={attachment.name ?? true}\n                    >\n                        <span className={styles.fileName}>\n                            {attachment.name ?? strings.download}\n                        </span>\n                        <span className={styles.fileMeta}>\n                            {[\n                                attachment.sizeBytes !== undefined\n                                    ? formatBytes(attachment.sizeBytes)\n                                    : null,\n                                attachment.durationMs !== undefined\n                                    ? durationLabel(attachment.durationMs)\n                                    : null,\n                            ]\n                                .filter(Boolean)\n                                .join(\" · \")}\n                        </span>\n                    </a>\n                );\n            })}\n\n            {images.length > 0 && (\n                <Lightbox\n                    items={images.map((image) => ({\n                        src: image.url,\n                        alt: image.alt ?? image.name ?? \"\",\n                        thumbnail: image.thumbnailUrl,\n                    }))}\n                    open={lightboxIndex !== null}\n                    index={lightboxIndex ?? 0}\n                    onIndexChange={setLightboxIndex}\n                    onClose={() => setLightboxIndex(null)}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Chat/ChatAttachments.js

@@ -0,0 +1,80 @@
+import { formatBytes as e } from "../../utils/numbers.js";
+import { VideoPlayer as t } from "../VideoPlayer/VideoPlayer.js";
+import { Lightbox as n } from "../Lightbox/Lightbox.js";
+import r from "./Chat.module.js";
+import { AudioPlayer as i } from "../AudioPlayer/AudioPlayer.js";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Chat/ChatAttachments.tsx
+var c = Array.from({ length: 28 }, () => .25);
+function l(e) {
+	let t = Math.round(e / 1e3), n = Math.floor(t / 60), r = t % 60;
+	return `${n}:${String(r).padStart(2, "0")}`;
+}
+function u({ attachments: u, strings: d }) {
+	let f = u.filter((e) => e.kind === "image"), [p, m] = a(null);
+	return /* @__PURE__ */ s("div", {
+		className: r.attachments,
+		children: [u.map((n, a) => {
+			let u = `${n.kind}-${n.url}-${a}`;
+			if (n.kind === "image") {
+				let e = f.indexOf(n);
+				return /* @__PURE__ */ o("button", {
+					type: "button",
+					className: r.imageAttachment,
+					onClick: () => m(e),
+					children: /* @__PURE__ */ o("img", {
+						src: n.thumbnailUrl ?? n.url,
+						alt: n.alt ?? n.name ?? "",
+						loading: "lazy"
+					})
+				}, u);
+			}
+			return n.kind === "video" ? /* @__PURE__ */ o(t, {
+				src: n.url,
+				durationMs: n.durationMs,
+				poster: n.thumbnailUrl,
+				className: r.videoAttachment
+			}, u) : n.kind === "voice" ? /* @__PURE__ */ s("div", {
+				className: r.voiceAttachment,
+				children: [/* @__PURE__ */ o("div", {
+					className: r.waveform,
+					"aria-hidden": "true",
+					children: (n.waveform ?? c).map((e, t) => /* @__PURE__ */ o("span", { style: { height: `${Math.max(8, Math.min(100, e * 100))}%` } }, t))
+				}), /* @__PURE__ */ o(i, {
+					src: n.url,
+					durationMs: n.durationMs,
+					"aria-label": d.voiceNote
+				})]
+			}, u) : n.kind === "audio" ? /* @__PURE__ */ o(i, {
+				src: n.url,
+				durationMs: n.durationMs
+			}, u) : /* @__PURE__ */ s("a", {
+				className: r.fileAttachment,
+				href: n.url,
+				download: n.name ?? !0,
+				children: [/* @__PURE__ */ o("span", {
+					className: r.fileName,
+					children: n.name ?? d.download
+				}), /* @__PURE__ */ o("span", {
+					className: r.fileMeta,
+					children: [n.sizeBytes === void 0 ? null : e(n.sizeBytes), n.durationMs === void 0 ? null : l(n.durationMs)].filter(Boolean).join(" · ")
+				})]
+			}, u);
+		}), f.length > 0 && /* @__PURE__ */ o(n, {
+			items: f.map((e) => ({
+				src: e.url,
+				alt: e.alt ?? e.name ?? "",
+				thumbnail: e.thumbnailUrl
+			})),
+			open: p !== null,
+			index: p ?? 0,
+			onIndexChange: m,
+			onClose: () => m(null)
+		})]
+	});
+}
+//#endregion
+export { u as ChatAttachments };
+
+//# sourceMappingURL=ChatAttachments.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAttachments.js","names":[],"sources":["../../../src/components/Chat/ChatAttachments.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { formatBytes } from \"@/utils/numbers\";\n\nimport { AudioPlayer } from \"../AudioPlayer\";\nimport { Lightbox } from \"../Lightbox\";\nimport { VideoPlayer } from \"../VideoPlayer\";\nimport type { ChatAttachment } from \"./chat-groups\";\nimport styles from \"./Chat.module.css\";\n\n/** Strings this view needs, passed in so the locale table stays in one file. */\nexport interface ChatAttachmentStrings {\n    voiceNote: string;\n    download: string;\n}\n\nexport interface ChatAttachmentsProps {\n    /** What this message carries. */\n    attachments: readonly ChatAttachment[];\n    /** Labels, from `chatStrings(locale)`. */\n    strings: ChatAttachmentStrings;\n}\n\n/** Bars a voice note draws when the app gave no peaks. */\nconst FLAT_WAVEFORM = Array.from({ length: 28 }, () => 0.25);\n\n/** `1:04` from milliseconds — a duration, never a clock time. */\nfunction durationLabel(durationMs: number): string {\n    const total = Math.round(durationMs / 1000);\n    const minutes = Math.floor(total / 60);\n    const seconds = total % 60;\n    return `${minutes}:${String(seconds).padStart(2, \"0\")}`;\n}\n\n/**\n * The media half of a bubble.\n *\n * Kept in its own module, and reached through `lazy()` from the thread, because\n * it pulls three of the heaviest components in the SDK — `Lightbox`,\n * `VideoPlayer`, `AudioPlayer` — and a support thread of plain text should not\n * pay for a photo viewer it never opens. The thread renders it only for messages\n * that actually carry an attachment, so that chunk is requested the first time\n * one appears.\n *\n * Nothing here is new UI: an image opens the SDK's lightbox, a video and an audio\n * clip use the SDK's players, and a file is a download row. That composition is\n * the whole point — every app was writing it again, the same way.\n *\n * @param props - The attachments and the locale strings.\n * @returns The rendered attachment list.\n */\nexport function ChatAttachments({ attachments, strings }: ChatAttachmentsProps) {\n    const images = attachments.filter((attachment) => attachment.kind === \"image\");\n    const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);\n\n    return (\n        <div className={styles.attachments}>\n            {attachments.map((attachment, index) => {\n                const key = `${attachment.kind}-${attachment.url}-${index}`;\n                if (attachment.kind === \"image\") {\n                    const position = images.indexOf(attachment);\n                    return (\n                        <button\n                            key={key}\n                            type=\"button\"\n                            className={styles.imageAttachment}\n                            onClick={() => setLightboxIndex(position)}\n                        >\n                            <img\n                                src={attachment.thumbnailUrl ?? attachment.url}\n                                alt={attachment.alt ?? attachment.name ?? \"\"}\n                                loading=\"lazy\"\n                            />\n                        </button>\n                    );\n                }\n                if (attachment.kind === \"video\") {\n                    return (\n                        <VideoPlayer\n                            key={key}\n                            src={attachment.url}\n                            durationMs={attachment.durationMs}\n                            poster={attachment.thumbnailUrl}\n                            className={styles.videoAttachment}\n                        />\n                    );\n                }\n                if (attachment.kind === \"voice\") {\n                    return (\n                        <div key={key} className={styles.voiceAttachment}>\n                            <div className={styles.waveform} aria-hidden=\"true\">\n                                {(attachment.waveform ?? FLAT_WAVEFORM).map((peak, bar) => (\n                                    <span\n                                        key={bar}\n                                        style={{\n                                            height: `${Math.max(8, Math.min(100, peak * 100))}%`,\n                                        }}\n                                    />\n                                ))}\n                            </div>\n                            <AudioPlayer\n                                src={attachment.url}\n                                durationMs={attachment.durationMs}\n                                aria-label={strings.voiceNote}\n                            />\n                        </div>\n                    );\n                }\n                if (attachment.kind === \"audio\") {\n                    return (\n                        <AudioPlayer\n                            key={key}\n                            src={attachment.url}\n                            durationMs={attachment.durationMs}\n                        />\n                    );\n                }\n                return (\n                    <a\n                        key={key}\n                        className={styles.fileAttachment}\n                        href={attachment.url}\n                        download={attachment.name ?? true}\n                    >\n                        <span className={styles.fileName}>\n                            {attachment.name ?? strings.download}\n                        </span>\n                        <span className={styles.fileMeta}>\n                            {[\n                                attachment.sizeBytes !== undefined\n                                    ? formatBytes(attachment.sizeBytes)\n                                    : null,\n                                attachment.durationMs !== undefined\n                                    ? durationLabel(attachment.durationMs)\n                                    : null,\n                            ]\n                                .filter(Boolean)\n                                .join(\" · \")}\n                        </span>\n                    </a>\n                );\n            })}\n\n            {images.length > 0 && (\n                <Lightbox\n                    items={images.map((image) => ({\n                        src: image.url,\n                        alt: image.alt ?? image.name ?? \"\",\n                        thumbnail: image.thumbnailUrl,\n                    }))}\n                    open={lightboxIndex !== null}\n                    index={lightboxIndex ?? 0}\n                    onIndexChange={setLightboxIndex}\n                    onClose={() => setLightboxIndex(null)}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;AAwBA,IAAM,IAAgB,MAAM,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAI;AAG3D,SAAS,EAAc,GAA4B;CAC/C,IAAM,IAAQ,KAAK,MAAM,IAAa,GAAI,GACpC,IAAU,KAAK,MAAM,IAAQ,EAAE,GAC/B,IAAU,IAAQ;CACxB,OAAO,GAAG,EAAQ,GAAG,OAAO,CAAO,CAAC,CAAC,SAAS,GAAG,GAAG;AACxD;AAmBA,SAAgB,EAAgB,EAAE,gBAAa,cAAiC;CAC5E,IAAM,IAAS,EAAY,QAAQ,MAAe,EAAW,SAAS,OAAO,GACvE,CAAC,GAAe,KAAoB,EAAwB,IAAI;CAEtE,OACI,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAvB,UAAA,CACK,EAAY,KAAK,GAAY,MAAU;GACpC,IAAM,IAAM,GAAG,EAAW,KAAK,GAAG,EAAW,IAAI,GAAG;GACpD,IAAI,EAAW,SAAS,SAAS;IAC7B,IAAM,IAAW,EAAO,QAAQ,CAAU;IAC1C,OACI,kBAAC,UAAD;KAEI,MAAK;KACL,WAAW,EAAO;KAClB,eAAe,EAAiB,CAAQ;KAExC,UAAA,kBAAC,OAAD;MACI,KAAK,EAAW,gBAAgB,EAAW;MAC3C,KAAK,EAAW,OAAO,EAAW,QAAQ;MAC1C,SAAQ;KACX,CAAA;IACG,GAVC,CAUD;GAEhB;GA0CA,OAzCI,EAAW,SAAS,UAEhB,kBAAC,GAAD;IAEI,KAAK,EAAW;IAChB,YAAY,EAAW;IACvB,QAAQ,EAAW;IACnB,WAAW,EAAO;GACrB,GALQ,CAKR,IAGL,EAAW,SAAS,UAEhB,kBAAC,OAAD;IAAe,WAAW,EAAO;IAAjC,UAAA,CACI,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU,eAAY;KACvC,WAAA,EAAW,YAAY,EAAA,CAAe,KAAK,GAAM,MAC/C,kBAAC,QAAD,EAEI,OAAO,EACH,QAAQ,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,IAAO,GAAG,CAAC,EAAE,GACtD,EACH,GAJQ,CAIR,CACJ;IACA,CAAA,GACL,kBAAC,GAAD;KACI,KAAK,EAAW;KAChB,YAAY,EAAW;KACvB,cAAY,EAAQ;IACvB,CAAA,CACA;GAhBK,GAAA,CAgBL,IAGT,EAAW,SAAS,UAEhB,kBAAC,GAAD;IAEI,KAAK,EAAW;IAChB,YAAY,EAAW;GAC1B,GAHQ,CAGR,IAIL,kBAAC,KAAD;IAEI,WAAW,EAAO;IAClB,MAAM,EAAW;IACjB,UAAU,EAAW,QAAQ;IAJjC,UAAA,CAMI,kBAAC,QAAD;KAAM,WAAW,EAAO;KACnB,UAAA,EAAW,QAAQ,EAAQ;IAC1B,CAAA,GACN,kBAAC,QAAD;KAAM,WAAW,EAAO;KACnB,UAAA,CACG,EAAW,cAAc,KAAA,IAEnB,OADA,EAAY,EAAW,SAAS,GAEtC,EAAW,eAAe,KAAA,IAEpB,OADA,EAAc,EAAW,UAAU,CAE7C,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,KAAK;IACb,CAAA,CACP;GApBM,GAAA,CAoBN;EAEX,CAAC,GAEA,EAAO,SAAS,KACb,kBAAC,GAAD;GACI,OAAO,EAAO,KAAK,OAAW;IAC1B,KAAK,EAAM;IACX,KAAK,EAAM,OAAO,EAAM,QAAQ;IAChC,WAAW,EAAM;GACrB,EAAE;GACF,MAAM,MAAkB;GACxB,OAAO,KAAiB;GACxB,eAAe;GACf,eAAe,EAAiB,IAAI;EACvC,CAAA,CAEJ;;AAEb"}

package/dist/components/Chat/ChatBubble.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../VisuallyHidden/VisuallyHidden.cjs"),n=require("./chat-groups.cjs"),r=require("./chat-receipt.cjs"),i=require("./Chat.module.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=(0,a.lazy)(()=>Promise.resolve().then(()=>require("./ChatAttachments.cjs")).then(e=>({default:e.ChatAttachments}))),c=(0,a.lazy)(()=>Promise.resolve().then(()=>require("./ChatActionsMenu.cjs")).then(e=>({default:e.ChatActionsMenu}))),l={sending:`◌`,sent:`✓`,delivered:`✓✓`,read:`✓✓`,failed:`!`};function u({message:l,own:u,locale:p,onRetry:m,onReact:h,messageActions:g,onQuoteClick:_}){let v=n.chatStrings(p),y=u?r.resolveReceiptState(l):null,b=l.deleted?[]:g?.(l)??[],x=(0,o.jsxs)(`div`,{className:e.cn(i.default.bubble,u&&i.default.ownBubble,l.deleted&&i.default.deletedBubble,l.status===`failed`&&i.default.failedBubble),children:[l.quote&&!l.deleted&&(0,o.jsx)(d,{message:l,locale:p,onQuoteClick:_}),l.deleted?(0,o.jsxs)(`div`,{className:i.default.tombstone,children:[(0,o.jsx)(`span`,{"aria-hidden":`true`,children:`🚫`}),` `,v.deleted]}):(0,o.jsxs)(o.Fragment,{children:[l.attachments&&l.attachments.length>0&&(0,o.jsx)(a.Suspense,{fallback:(0,o.jsx)(`div`,{className:i.default.attachmentsFallback}),children:(0,o.jsx)(s,{attachments:l.attachments,strings:v})}),l.body!==void 0&&l.body!==null&&l.body!==``&&(0,o.jsx)(`div`,{className:i.default.body,children:l.body})]}),(0,o.jsxs)(`div`,{className:i.default.meta,children:[l.edited&&!l.deleted&&(0,o.jsx)(`span`,{className:i.default.edited,children:v.edited}),(0,o.jsx)(`time`,{dateTime:new Date(l.sentAt).toISOString(),children:n.timeLabel(l.sentAt,p)}),y&&(0,o.jsx)(f,{message:l,state:y,locale:p})]})]});return(0,o.jsxs)(`li`,{className:i.default.bubbleRow,children:[b.length>0?(0,o.jsx)(a.Suspense,{fallback:x,children:(0,o.jsx)(c,{items:b,trigger:`contextmenu`,children:x})}):x,b.length>0&&(0,o.jsx)(a.Suspense,{fallback:null,children:(0,o.jsx)(c,{items:b,trigger:`click`,children:(0,o.jsx)(`button`,{type:`button`,className:i.default.actionsButton,"aria-label":v.messageActions,children:(0,o.jsx)(`span`,{"aria-hidden":`true`,children:`⋮`})})})}),l.reactions&&l.reactions.length>0&&(0,o.jsx)(`ul`,{className:i.default.reactions,"aria-label":v.reactions,children:l.reactions.map(n=>(0,o.jsx)(`li`,{children:(0,o.jsxs)(`button`,{type:`button`,className:e.cn(i.default.reaction,n.reacted&&i.default.reactionMine),"aria-pressed":n.reacted??!1,title:n.names?.join(`, `),disabled:!h,onClick:()=>h?.(l,n.emoji),children:[(0,o.jsxs)(`span`,{"aria-hidden":`true`,children:[n.emoji,` `,n.count]}),(0,o.jsx)(t.VisuallyHidden,{children:v.react(n.emoji,n.count)})]})},n.emoji))}),l.status===`failed`&&m&&(0,o.jsx)(`button`,{type:`button`,className:i.default.retry,onClick:()=>m(l),children:v.retry})]})}function d({message:t,locale:r,onQuoteClick:a}){let s=n.chatStrings(r),c=t.quote;if(!c)return null;let l=c.revoked?s.quoteRevoked:c.excerpt??(c.kind&&c.kind!==`text`?s.quoteKind[c.kind]:``),u=(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(`span`,{className:i.default.quoteAuthor,children:c.senderName??s.replyingTo(c.messageId)}),(0,o.jsx)(`span`,{className:e.cn(i.default.quoteText,c.revoked&&i.default.quoteRevoked),children:l})]});return a?(0,o.jsx)(`button`,{type:`button`,className:e.cn(i.default.quote,i.default.quoteButton),onClick:()=>a(t),children:u}):(0,o.jsx)(`div`,{className:i.default.quote,children:u})}function f({message:a,state:s,locale:c}){let u=n.chatStrings(c),d=a.receipt&&a.receipt.totalRecipients>0&&s!==`failed`?r.receiptLabel(a.receipt,u):u[s===`delivered`?`sent`:s];return(0,o.jsxs)(`span`,{className:e.cn(i.default.status,s===`read`&&i.default.statusRead,s===`failed`&&i.default.statusFailed),title:d,children:[(0,o.jsx)(`span`,{"aria-hidden":`true`,children:l[s]}),(0,o.jsx)(t.VisuallyHidden,{children:d})]})}exports.ChatBubble=u;
+//# sourceMappingURL=ChatBubble.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.cjs","names":[],"sources":["../../../src/components/Chat/ChatBubble.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines props-count function-lines — one bubble is one unit of\n * layout, and every part of it reads from the same message: the quote above the\n * body, the body or its tombstone, the attachments, the reactions under it, and the\n * timestamp with its ticks. Splitting them would pass the same message to six\n * components and put the bubble's geometry in none of them.\n */\nimport { Suspense, lazy, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport type { ContextMenuItem } from \"../ContextMenu\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { chatStrings, timeLabel, type ChatMessage } from \"./chat-groups\";\nimport { receiptLabel, resolveReceiptState } from \"./chat-receipt\";\nimport styles from \"./Chat.module.css\";\n\nconst ChatAttachments = lazy(() =>\n    import(\"./ChatAttachments\").then((module) => ({ default: module.ChatAttachments })),\n);\n\nconst ChatActionsMenu = lazy(() =>\n    import(\"./ChatActionsMenu\").then((module) => ({ default: module.ChatActionsMenu })),\n);\n\n/** Glyph per tick state. `delivered` is the one a boolean `status` cannot say. */\nconst RECEIPT_GLYPH = {\n    sending: \"◌\",\n    sent: \"✓\",\n    delivered: \"✓✓\",\n    read: \"✓✓\",\n    failed: \"!\",\n} as const;\n\nexport interface ChatBubbleProps {\n    /** The message this bubble renders. */\n    message: ChatMessage;\n    /** Whether it belongs to the current user — side, colour and ticks. */\n    own: boolean;\n    /** Locale for labels. */\n    locale: \"pt-BR\" | \"en\";\n    /** Retry handler for a `\"failed\"` message. */\n    onRetry?: (message: ChatMessage) => void;\n    /** Toggles a reaction. Receives the emoji that was pressed. */\n    onReact?: (message: ChatMessage, emoji: string) => void;\n    /** Per-message actions, opened by right click, long press or the ⋮ button. */\n    messageActions?: (message: ChatMessage) => ContextMenuItem[];\n    /** Called when the quote stub is activated — scroll to the quoted message. */\n    onQuoteClick?: (message: ChatMessage) => void;\n}\n\n/**\n * One message bubble.\n *\n * Everything a messenger needs on a single message lives here, because every one\n * of these was a thing each app rebuilt on top of a text-only bubble: the reply\n * stub, attachments, reactions, per-recipient ticks, the actions menu, and the\n * tombstone of a deleted message.\n *\n * @param props - The message and its handlers.\n * @returns The bubble, wrapped in a context menu when actions are given.\n */\nexport function ChatBubble({\n    message,\n    own,\n    locale,\n    onRetry,\n    onReact,\n    messageActions,\n    onQuoteClick,\n}: ChatBubbleProps) {\n    const strings = chatStrings(locale);\n    const receiptState = own ? resolveReceiptState(message) : null;\n    const actions = message.deleted ? [] : (messageActions?.(message) ?? []);\n\n    const bubble = (\n        <div\n            className={cn(\n                styles.bubble,\n                own && styles.ownBubble,\n                message.deleted && styles.deletedBubble,\n                message.status === \"failed\" && styles.failedBubble,\n            )}\n        >\n            {message.quote && !message.deleted && (\n                <QuoteStub message={message} locale={locale} onQuoteClick={onQuoteClick} />\n            )}\n\n            {message.deleted ? (\n                <div className={styles.tombstone}>\n                    <span aria-hidden=\"true\">🚫</span> {strings.deleted}\n                </div>\n            ) : (\n                <>\n                    {message.attachments && message.attachments.length > 0 && (\n                        <Suspense fallback={<div className={styles.attachmentsFallback} />}>\n                            <ChatAttachments attachments={message.attachments} strings={strings} />\n                        </Suspense>\n                    )}\n                    {message.body !== undefined && message.body !== null && message.body !== \"\" && (\n                        <div className={styles.body}>{message.body}</div>\n                    )}\n                </>\n            )}\n\n            <div className={styles.meta}>\n                {message.edited && !message.deleted && (\n                    <span className={styles.edited}>{strings.edited}</span>\n                )}\n                <time dateTime={new Date(message.sentAt).toISOString()}>\n                    {timeLabel(message.sentAt, locale)}\n                </time>\n                {receiptState && <Receipt message={message} state={receiptState} locale={locale} />}\n            </div>\n        </div>\n    );\n\n    return (\n        <li className={styles.bubbleRow}>\n            {actions.length > 0 ? (\n                <Suspense fallback={bubble}>\n                    <ChatActionsMenu items={actions} trigger=\"contextmenu\">\n                        {bubble}\n                    </ChatActionsMenu>\n                </Suspense>\n            ) : (\n                bubble\n            )}\n\n            {actions.length > 0 && (\n                <Suspense fallback={null}>\n                    <ChatActionsMenu items={actions} trigger=\"click\">\n                        <button\n                            type=\"button\"\n                            className={styles.actionsButton}\n                            aria-label={strings.messageActions}\n                        >\n                            <span aria-hidden=\"true\">⋮</span>\n                        </button>\n                    </ChatActionsMenu>\n                </Suspense>\n            )}\n\n            {message.reactions && message.reactions.length > 0 && (\n                <ul className={styles.reactions} aria-label={strings.reactions}>\n                    {message.reactions.map((reaction) => (\n                        <li key={reaction.emoji}>\n                            <button\n                                type=\"button\"\n                                className={cn(\n                                    styles.reaction,\n                                    reaction.reacted && styles.reactionMine,\n                                )}\n                                aria-pressed={reaction.reacted ?? false}\n                                title={reaction.names?.join(\", \")}\n                                disabled={!onReact}\n                                onClick={() => onReact?.(message, reaction.emoji)}\n                            >\n                                <span aria-hidden=\"true\">\n                                    {reaction.emoji} {reaction.count}\n                                </span>\n                                <VisuallyHidden>\n                                    {strings.react(reaction.emoji, reaction.count)}\n                                </VisuallyHidden>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            )}\n\n            {message.status === \"failed\" && onRetry && (\n                <button type=\"button\" className={styles.retry} onClick={() => onRetry(message)}>\n                    {strings.retry}\n                </button>\n            )}\n        </li>\n    );\n}\n\n/** The reply stub above a body, or its blanked form once the target is gone. */\nfunction QuoteStub({\n    message,\n    locale,\n    onQuoteClick,\n}: {\n    message: ChatMessage;\n    locale: \"pt-BR\" | \"en\";\n    onQuoteClick?: (message: ChatMessage) => void;\n}): ReactNode {\n    const strings = chatStrings(locale);\n    const quote = message.quote;\n    if (!quote) return null;\n    const label = quote.revoked\n        ? strings.quoteRevoked\n        : (quote.excerpt ??\n          (quote.kind && quote.kind !== \"text\" ? strings.quoteKind[quote.kind] : \"\"));\n\n    const content = (\n        <>\n            <span className={styles.quoteAuthor}>\n                {quote.senderName ?? strings.replyingTo(quote.messageId)}\n            </span>\n            <span className={cn(styles.quoteText, quote.revoked && styles.quoteRevoked)}>\n                {label}\n            </span>\n        </>\n    );\n\n    return onQuoteClick ? (\n        <button\n            type=\"button\"\n            className={cn(styles.quote, styles.quoteButton)}\n            onClick={() => onQuoteClick(message)}\n        >\n            {content}\n        </button>\n    ) : (\n        <div className={styles.quote}>{content}</div>\n    );\n}\n\n/** The ticks, and the sentence behind them. */\nfunction Receipt({\n    message,\n    state,\n    locale,\n}: {\n    message: ChatMessage;\n    state: keyof typeof RECEIPT_GLYPH;\n    locale: \"pt-BR\" | \"en\";\n}): ReactNode {\n    const strings = chatStrings(locale);\n    const label =\n        message.receipt && message.receipt.totalRecipients > 0 && state !== \"failed\"\n            ? receiptLabel(message.receipt, strings)\n            : strings[state === \"delivered\" ? \"sent\" : state];\n\n    return (\n        <span\n            className={cn(\n                styles.status,\n                state === \"read\" && styles.statusRead,\n                state === \"failed\" && styles.statusFailed,\n            )}\n            title={label}\n        >\n            <span aria-hidden=\"true\">{RECEIPT_GLYPH[state]}</span>\n            <VisuallyHidden>{label}</VisuallyHidden>\n        </span>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Chat/ChatBubble.js

@@ -0,0 +1,155 @@
+import { cn as e } from "../../utils/cn.js";
+import { VisuallyHidden as t } from "../VisuallyHidden/VisuallyHidden.js";
+import { chatStrings as n, timeLabel as r } from "./chat-groups.js";
+import { receiptLabel as i, resolveReceiptState as a } from "./chat-receipt.js";
+import o from "./Chat.module.js";
+import { Suspense as s, lazy as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/Chat/ChatBubble.tsx
+var f = c(() => import("./ChatAttachments.js").then((e) => ({ default: e.ChatAttachments }))), p = c(() => import("./ChatActionsMenu.js").then((e) => ({ default: e.ChatActionsMenu }))), m = {
+	sending: "◌",
+	sent: "✓",
+	delivered: "✓✓",
+	read: "✓✓",
+	failed: "!"
+};
+function h({ message: i, own: c, locale: m, onRetry: h, onReact: v, messageActions: y, onQuoteClick: b }) {
+	let x = n(m), S = c ? a(i) : null, C = i.deleted ? [] : y?.(i) ?? [], w = /* @__PURE__ */ d("div", {
+		className: e(o.bubble, c && o.ownBubble, i.deleted && o.deletedBubble, i.status === "failed" && o.failedBubble),
+		children: [
+			i.quote && !i.deleted && /* @__PURE__ */ u(g, {
+				message: i,
+				locale: m,
+				onQuoteClick: b
+			}),
+			i.deleted ? /* @__PURE__ */ d("div", {
+				className: o.tombstone,
+				children: [
+					/* @__PURE__ */ u("span", {
+						"aria-hidden": "true",
+						children: "🚫"
+					}),
+					" ",
+					x.deleted
+				]
+			}) : /* @__PURE__ */ d(l, { children: [i.attachments && i.attachments.length > 0 && /* @__PURE__ */ u(s, {
+				fallback: /* @__PURE__ */ u("div", { className: o.attachmentsFallback }),
+				children: /* @__PURE__ */ u(f, {
+					attachments: i.attachments,
+					strings: x
+				})
+			}), i.body !== void 0 && i.body !== null && i.body !== "" && /* @__PURE__ */ u("div", {
+				className: o.body,
+				children: i.body
+			})] }),
+			/* @__PURE__ */ d("div", {
+				className: o.meta,
+				children: [
+					i.edited && !i.deleted && /* @__PURE__ */ u("span", {
+						className: o.edited,
+						children: x.edited
+					}),
+					/* @__PURE__ */ u("time", {
+						dateTime: new Date(i.sentAt).toISOString(),
+						children: r(i.sentAt, m)
+					}),
+					S && /* @__PURE__ */ u(_, {
+						message: i,
+						state: S,
+						locale: m
+					})
+				]
+			})
+		]
+	});
+	return /* @__PURE__ */ d("li", {
+		className: o.bubbleRow,
+		children: [
+			C.length > 0 ? /* @__PURE__ */ u(s, {
+				fallback: w,
+				children: /* @__PURE__ */ u(p, {
+					items: C,
+					trigger: "contextmenu",
+					children: w
+				})
+			}) : w,
+			C.length > 0 && /* @__PURE__ */ u(s, {
+				fallback: null,
+				children: /* @__PURE__ */ u(p, {
+					items: C,
+					trigger: "click",
+					children: /* @__PURE__ */ u("button", {
+						type: "button",
+						className: o.actionsButton,
+						"aria-label": x.messageActions,
+						children: /* @__PURE__ */ u("span", {
+							"aria-hidden": "true",
+							children: "⋮"
+						})
+					})
+				})
+			}),
+			i.reactions && i.reactions.length > 0 && /* @__PURE__ */ u("ul", {
+				className: o.reactions,
+				"aria-label": x.reactions,
+				children: i.reactions.map((n) => /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
+					type: "button",
+					className: e(o.reaction, n.reacted && o.reactionMine),
+					"aria-pressed": n.reacted ?? !1,
+					title: n.names?.join(", "),
+					disabled: !v,
+					onClick: () => v?.(i, n.emoji),
+					children: [/* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						children: [
+							n.emoji,
+							" ",
+							n.count
+						]
+					}), /* @__PURE__ */ u(t, { children: x.react(n.emoji, n.count) })]
+				}) }, n.emoji))
+			}),
+			i.status === "failed" && h && /* @__PURE__ */ u("button", {
+				type: "button",
+				className: o.retry,
+				onClick: () => h(i),
+				children: x.retry
+			})
+		]
+	});
+}
+function g({ message: t, locale: r, onQuoteClick: i }) {
+	let a = n(r), s = t.quote;
+	if (!s) return null;
+	let c = s.revoked ? a.quoteRevoked : s.excerpt ?? (s.kind && s.kind !== "text" ? a.quoteKind[s.kind] : ""), f = /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
+		className: o.quoteAuthor,
+		children: s.senderName ?? a.replyingTo(s.messageId)
+	}), /* @__PURE__ */ u("span", {
+		className: e(o.quoteText, s.revoked && o.quoteRevoked),
+		children: c
+	})] });
+	return i ? /* @__PURE__ */ u("button", {
+		type: "button",
+		className: e(o.quote, o.quoteButton),
+		onClick: () => i(t),
+		children: f
+	}) : /* @__PURE__ */ u("div", {
+		className: o.quote,
+		children: f
+	});
+}
+function _({ message: r, state: a, locale: s }) {
+	let c = n(s), l = r.receipt && r.receipt.totalRecipients > 0 && a !== "failed" ? i(r.receipt, c) : c[a === "delivered" ? "sent" : a];
+	return /* @__PURE__ */ d("span", {
+		className: e(o.status, a === "read" && o.statusRead, a === "failed" && o.statusFailed),
+		title: l,
+		children: [/* @__PURE__ */ u("span", {
+			"aria-hidden": "true",
+			children: m[a]
+		}), /* @__PURE__ */ u(t, { children: l })]
+	});
+}
+//#endregion
+export { h as ChatBubble };
+
+//# sourceMappingURL=ChatBubble.js.map