@stealthscale/component-messaging 0.1.0 → 0.2.2

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { a as recipe$1, n as recipe$3, o as recipe, r as recipe$2, t as recipe$4 } from "./recipe-f6w25oLs.js";
+import { a as recipe$1, n as recipe$3, o as recipe, r as recipe$2, t as recipe$4 } from "./recipes-D1oVFnRU.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#region src/theme.ts
 /**

package/locales/en/specimen/attachment.json

@@ -0,0 +1,66 @@
+{
+  "about": "A file attached to a message or waiting to be sent: a media square with the type's icon, a thumbnail or a spinner, the name and a line of detail, and the actions. A group lists several, stacked as rows or wrapped as tiles.",
+  "ada": "Ada Okafor",
+  "board": {
+    "detail": "WebP image, 1 kB",
+    "name": "whiteboard.webp"
+  },
+  "cancel": "Cancel {{name}}",
+  "contract": "contract-northwind.pdf",
+  "csv": "date,amount\n2026-09-30,4200\n",
+  "done": {
+    "detail": "PDF, 248 kB",
+    "name": "invoice-4471.pdf"
+  },
+  "download": "Download {{name}}",
+  "error": {
+    "detail": "Upload failed: over 25 MB",
+    "name": "site-survey.mov"
+  },
+  "idle": {
+    "detail": "Not sent yet",
+    "name": "notes.txt"
+  },
+  "label": "Attachments",
+  "orientation": {
+    "about": "`horizontal` renders a row: the media square, the name over the detail, and the actions at the end. `vertical` renders a tile with the media across the top and the actions over its corner. A group stacks rows and wraps tiles.",
+    "title": "Rows and tiles"
+  },
+  "photos": "Photos from the planning session.",
+  "photosScene": {
+    "about": "Tiles under a message, the group small and vertical. Each thumbnail has an empty `alt`, because the name under it already names the file.",
+    "title": "Photos in a message"
+  },
+  "payouts": "payouts-september.csv",
+  "payoutsDetail": "CSV, 18 kB",
+  "processing": {
+    "detail": "Checking for viruses",
+    "name": "quarterly-report.xlsx"
+  },
+  "progress": "Uploading, {{percent}}%",
+  "remove": "Remove {{name}}",
+  "retry": "Retry {{name}}",
+  "roadmap": {
+    "detail": "WebP image, 1 kB",
+    "name": "roadmap.webp"
+  },
+  "size": {
+    "about": "The size sets the media square, the padding, the gap and the text styles. A group states the size of every attachment in it.",
+    "title": "Sizes"
+  },
+  "sprint": {
+    "detail": "WebP image, 1 kB",
+    "name": "sprint-board.webp"
+  },
+  "states": {
+    "about": "`idle` dashes the edge of a file not yet sent, and `error` inks the edge, the media and the detail in the error palette. A spinner in the media square shows a file on its way. The detail states each state in words, because a screen reader reads no edge or ink.",
+    "title": "States"
+  },
+  "title": "Attachment",
+  "uploading": {
+    "detail": "Uploading, 64%",
+    "name": "floor-plan.pdf"
+  },
+  "whiteboard": "whiteboard.webp",
+  "whiteboardDetail": "WebP image, 1 kB"
+}

package/locales/en/specimen/composer.json

@@ -0,0 +1,56 @@
+{
+  "about": "The box a reader writes a message in: an optional strip for the message it replies to, the files waiting to be sent, a text that grows with its content, and a row of controls with attach and send. Enter sends, Shift+Enter starts a new line, and a paste of files attaches them.",
+  "answering": "Answering. Press stop to interrupt.",
+  "askLabel": "Ask the assistant",
+  "askPlaceholder": "Ask about last quarter",
+  "attach": "Attach files",
+  "cancelEdit": "Stop editing",
+  "cancelReply": "Cancel the reply",
+  "design": "Design",
+  "edit": {
+    "about": "ArrowUp in an empty composer loads the last message for editing, with a strip that says so. Escape or the strip's own control leaves the edit, and a send replaces the message. The composer here is controlled through `value`, so the caller writes the last message into it.",
+    "title": "Editing the last message"
+  },
+  "editPlaceholder": "Press the up arrow to edit your last message",
+  "editing": "Editing your message",
+  "engineering": "Engineering",
+  "files": "Files to send",
+  "finance": "Finance",
+  "first": "I'll send the contract tomorrow.",
+  "hint": "Ctrl+Enter to send",
+  "label": "Message",
+  "mentionPlaceholder": "Type @ to mention a teammate",
+  "mentions": {
+    "about": "`triggers` makes `@` open a mention. The caller finds the people whose names contain the term `onQueryChange` reports, and the list above the box offers them. The arrows move the highlight, Enter or Tab inserts the name, and Escape closes the list. A sent message marks each mention with the typography `Mark`.",
+    "title": "Mentions"
+  },
+  "people": "People",
+  "placeholder": "Write a message",
+  "remove": "Remove {{name}}",
+  "reply": {
+    "about": "A strip above the text shows the message the reply answers. Escape or the strip's own control dismisses it, and focus returns to the text. Picked, dropped or pasted files wait above the text as small tiles, each with a control that removes it. Files alone make a message that can be sent.",
+    "title": "A reply with files"
+  },
+  "replyPlaceholder": "Reply to Ada",
+  "replying": "Replying to Ada Okafor: The invoice from Northwind is in.",
+  "sales": "Sales",
+  "send": "Send",
+  "sent_one": "Sent “{{text}}” with {{count}} file.",
+  "sent_other": "Sent “{{text}}” with {{count}} files.",
+  "sent_zero": "Sent “{{text}}”.",
+  "size": {
+    "about": "The size sets the text style and the inset around the text and the controls.",
+    "title": "Sizes"
+  },
+  "stop": "Stop the answer",
+  "stopping": {
+    "about": "While an answer runs the composer is `busy`: it sends nothing, and the send control turns into a stop control that interrupts the answer. Focus stays on the control across the swap. Here Ctrl+Enter or Cmd+Enter sends, and Enter starts a new line.",
+    "title": "Stopping an answer"
+  },
+  "title": "Composer",
+  "variant": {
+    "about": "The box takes the field looks: outline, subtle and flushed. Its edge, its focus ring and its invalid and disabled states come from the textarea inside it.",
+    "title": "Looks"
+  },
+  "you": "You"
+}

package/locales/en/specimen/conversation.json

@@ -0,0 +1,70 @@
+{
+  "about": "A transcript of turns that follows the latest message. The view opens at the end and scrolls with each message that arrives or grows, until the reader scrolls up. A control then brings the reader back to the latest message.",
+  "ada": "Ada Okafor",
+  "answer": "Last quarter closed **12% above** plan.\n\n- Revenue: €4.2M, up from €3.7M\n- Churn: 1.8%, down from 2.4%\n- New accounts: 312\n\nMost of the gain came from annual plans sold in August, when the price change took effect. Support volume stayed flat while the customer count grew, so the cost to serve a customer fell for the third quarter in a row.",
+  "approve": "Can you approve it before five?",
+  "approved": "Approved. I'll send it to finance.",
+  "archive": "I'll archive the thread once the payment clears.",
+  "ask": "Ask the assistant",
+  "askPlaceholder": "Ask about last quarter",
+  "asked": "Did the supplier send the corrected invoice?",
+  "assistant": "Assistant",
+  "assistantLabel": "Conversation with the assistant",
+  "assisting": {
+    "about": "The answer opens with the reasoning and the tool call, each in a disclosure `Details`, with the call's arguments and result in a `JsonTreeView`. The answer streams as Markdown in a turn with `aria-busy`, so a screen reader reads it once it is complete. While it streams, the send control stops it. Send a question to replay it.",
+    "title": "An assistant"
+  },
+  "bram": "Bram Visser",
+  "call": "Arguments and result",
+  "cancelled": "Cancelled",
+  "chat": {
+    "about": "The chat runs the scroll engine with `useConversation` and passes it to the root, so a send moves the view to the reader's own message. Ada answers a moment later, after a typing row. Scroll up before she answers, and the view stays where it is and the control to jump back appears. The latest message reads Delivered until Ada answers, and Read after.",
+    "title": "A chat"
+  },
+  "check": "Do you want me to check it against the purchase order?",
+  "cleo": "Cleo Martin",
+  "confirmed": "Finance confirmed the bank details.",
+  "conversations": "Conversations",
+  "delivered": "Delivered",
+  "devi": "Devi Rao",
+  "done": "Done",
+  "found": "Found it in the shared inbox.",
+  "hello": "Morning! The Northwind invoice came in overnight.",
+  "history": {
+    "about": "Scrolling to the top loads the page of messages before the first, while the log is `aria-busy`. The browser keeps the message the reader was looking at in place as older messages are added above it.",
+    "title": "Older messages on demand"
+  },
+  "inbox": {
+    "about": "The conversations are a collections `Listbox`: one tab stop, the arrow keys move between the rows, and typing a name moves to it. Each row shows the avatar, the name, the latest message, its time and the count of unread messages. The count is in words, so a screen reader reads it with the row.",
+    "title": "An inbox"
+  },
+  "jump": "Jump to the latest message",
+  "label": "Conversation with Ada Okafor",
+  "loading": "Loading older messages",
+  "matches": "It matches, apart from the shipping line.",
+  "message": "Message",
+  "opened": "I opened a ticket with Northwind about the invoice.",
+  "placeholder": "Write a message",
+  "please": "Yes please, I'm in meetings until four.",
+  "question": "Summarise last quarter.",
+  "read": "Read",
+  "reasoning": "Last quarter is 2026-Q3. The question needs revenue, churn and new accounts, so I'll ask for all three and compare them with the plan.",
+  "running": "Running",
+  "scheduled": "The payment is scheduled for Friday.",
+  "send": "Send",
+  "sent": "They said they sent it on Monday.",
+  "stop": "Stop the answer",
+  "stopped": "Stopped",
+  "thanks": "Thanks, that settles September.",
+  "thought": "Thought for 4 seconds",
+  "title": "Conversation",
+  "tool": "get_quarter_metrics",
+  "transcript": {
+    "about": "Two days of messages, grouped into turns by `groupTurns`, with the day as the label of a `Divider`. The times are formatted in UTC, so `timeZone` starts each day at midnight UTC and a label names the day its messages were sent. The view opens at the end, under Ada typing. Scroll up and the control at the bottom brings the view back.",
+    "title": "A transcript"
+  },
+  "typing": "Ada is typing",
+  "unread_one": "{{count}} new",
+  "unread_other": "{{count}} new",
+  "you": "You"
+}

package/locales/en/specimen/message.json

@@ -0,0 +1,88 @@
+{
+  "about": "One turn of a conversation: the sender's avatar and name, a bubble per message, and a footer with the delivery status and the actions. The reader's own turns are at the end of the line.",
+  "ada": "Ada Okafor",
+  "align": {
+    "about": "`end` puts a turn at the end of the line, for the reader's own messages: the avatar moves to the end and the bubbles align to it. A screen reader reads the turns in the order they are written, so the side changes nothing it reads.",
+    "title": "Sides of the line"
+  },
+  "answer": {
+    "about": "The plain look has no fill and no padding, and the bubble takes the whole column, for an assistant's answer in Markdown. The actions under it are visible at rest.",
+    "title": "An answer as a document"
+  },
+  "approve": "Can you approve it before five?",
+  "approved": "Approved. I'll send it to finance.",
+  "assistant": "Assistant",
+  "bad": "Bad answer",
+  "bram": "Bram Visser",
+  "cancel": "Cancel",
+  "copy": "Copy",
+  "delete": "Delete",
+  "deleteNote": "It is removed for everyone in the thread.",
+  "deleteTitle": "Delete this comment?",
+  "delivered": "Delivered",
+  "deliveredText": "I'll bring the printed copy.",
+  "delivery": {
+    "about": "The status shows how far each message has got. The glyph shows the state at a glance and the words are what a screen reader reads, so the glyph is `aria-hidden`. A read message's status is in the primary palette's ink.",
+    "title": "Delivery states"
+  },
+  "edit": "Edit",
+  "editLabel": "Edit your comment",
+  "edited": "Edited",
+  "editing": "Editing your comment",
+  "exchange": {
+    "about": "Another person's turn opens with their avatar and name at the start of the line. The reader's reply is at the end of the line in the primary palette's solid look, with its time and status in the footer. A turn without a visible name takes `aria-label`, so a screen reader names the sender.",
+    "title": "An exchange"
+  },
+  "failed": "Not sent",
+  "failedText": "Here's the draft for Friday.",
+  "failure": {
+    "about": "`failed` paints the bubble in the error palette. A color reports nothing to a screen reader, so the status states the failure in words and the retry action is visible at rest.",
+    "title": "A message that did not send"
+  },
+  "good": "Good answer",
+  "invoice": "The invoice from Northwind is in.",
+  "liked_one": "Thumbs up, {{count}} person",
+  "liked_other": "Thumbs up, {{count}} people",
+  "liked_zero": "Thumbs up",
+  "likedMine_one": "Thumbs up, you",
+  "likedMine_other": "Thumbs up, {{count}} people, including you",
+  "look": {
+    "about": "A bubble takes the flat looks: solid, subtle, surface, outline and plain. A bubble is read and never pressed, so no look repaints under a pointer. The plain look has no fill and no padding.",
+    "title": "Looks"
+  },
+  "move": "Can we move the launch to Thursday? Marketing needs one more day for the assets.",
+  "palette": {
+    "about": "The palette colors the bubbles of the turn. Give the reader's own turns the primary palette and every other sender the neutral one, so the two sides differ by more than their place.",
+    "title": "Palettes"
+  },
+  "reactions": "Reactions",
+  "read": "Read",
+  "readText": "The contract is signed.",
+  "regenerate": "Regenerate",
+  "replyLabel": "Reply to the thread",
+  "replyPlaceholder": "Write a reply",
+  "retry": "Retry",
+  "reveal": {
+    "about": "`hover` keeps the actions transparent until a pointer is over the turn or focus is inside it, and shows them at rest under a coarse pointer, which cannot hover. `always` shows them at rest, for the last turn of a conversation. The actions are in the tab order under both values.",
+    "title": "Actions on hover"
+  },
+  "save": "Save",
+  "send": "Send",
+  "sending": "Sending",
+  "sendingText": "On my way.",
+  "sent": "Sent",
+  "sentText": "Running five minutes late.",
+  "size": {
+    "about": "The size sets the text style of the bubbles, the header and the footer, the padding inside a bubble, and the gap between the avatar and the column.",
+    "title": "Sizes"
+  },
+  "summary": "The quarter closed **12% above** plan.\n\n- Revenue: €4.2M\n- Churn: 1.8%, down from 2.4%\n\nMost of the gain came from annual plans sold in August.",
+  "tell": "Moved it to Thursday. I'll tell support.",
+  "thread": {
+    "about": "Comments are turns in the plain look, each with its time, a reaction and, on the reader's own, the actions. Edit swaps the words for a composer in place: Enter saves, Escape or Cancel keeps the words, and focus returns to Edit. Delete asks first, with focus on Cancel, and a deletion moves focus to the reply box.",
+    "title": "A comment thread"
+  },
+  "title": "Message",
+  "works": "Thursday works for engineering. The release branch is ready.",
+  "you": "You"
+}

package/locales/en/specimen/reactions.json

@@ -0,0 +1,23 @@
+{
+  "about": "The reactions under a message: a toggle button for each reaction with the number of people who reacted, and a picker that adds one. Each button is named by the reaction, the count and whether the reader is among the people who reacted.",
+  "ada": "Ada Okafor",
+  "add": "Add a reaction",
+  "choose": "Choose a reaction",
+  "eyes": "Eyes",
+  "heart": "Heart",
+  "label": "Reactions",
+  "laugh": "Laughing face",
+  "mine_one": "{{name}}, you",
+  "mine_other": "{{name}}, {{count}} people, including you",
+  "party": "Party popper",
+  "reacting": {
+    "about": "Press a reaction to join it or to leave it: `aria-pressed` states whether the reader is among the people who reacted, and a pressed reaction takes the primary palette. The picker adds a reaction and closes, and focus returns to its button.",
+    "title": "Reactions under a message"
+  },
+  "rocket": "Rocket",
+  "shipped": "The September invoices are out. Thanks, everyone!",
+  "theirs_one": "{{name}}, {{count}} person",
+  "theirs_other": "{{name}}, {{count}} people",
+  "thumbs": "Thumbs up",
+  "title": "Reactions"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-messaging",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Renders conversations: turns of messages with a status and actions, a transcript that follows the latest message, reactions, attachments, mentions and a composer.",
   "keywords": [
     "chat",
@@ -20,6 +20,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -36,38 +37,38 @@
     "access": "public"
   },
   "dependencies": {
-    "@stealthscale/component-actions": "^0.1.0",
+    "@stealthscale/component-actions": "^0.2.3",
     "use-stick-to-bottom": "^1.1"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18",
-    "@stealthscale/component-disclosure": "^0.1.0",
-    "@stealthscale/component-primitives": "^0.1.0",
-    "@stealthscale/hooks": "^0.1.0",
-    "@stealthscale/theme": "^0.3.0",
-    "@stealthscale/vite-config": "^0.6.0",
-    "@stealthscale/vite-config-i18n": "^0.1.0",
-    "@stealthscale/vite-config-react": "^0.8.0",
-    "@stealthscale/vite-config-specimen": "^0.1.0",
-    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@stealthscale/component-disclosure": "^0.2.4",
+    "@stealthscale/component-primitives": "^0.3.1",
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/theme": "^0.5.0",
+    "@stealthscale/vite-config": "^0.8.0",
+    "@stealthscale/vite-config-i18n": "^0.2.2",
+    "@stealthscale/vite-config-react": "^0.9.1",
+    "@stealthscale/vite-config-specimen": "^0.3.0",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
     "@testing-library/react": "^16.3",
     "@types/react": "^19.3",
     "@types/react-dom": "^19.3",
     "happy-dom": "^20.14",
-    "lucide-react": "^1.48",
-    "oxc-transform-react": "^0.151",
+    "lucide-react": "^1.52",
+    "oxc-transform-react": "^0.153",
     "publint": "^0.3",
     "react": "^19.3",
     "react-dom": "^19.3",
     "typescript": "^7.0",
-    "vitest": "5.0.1"
+    "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@stealthscale/component-disclosure": "^0.1.0",
-    "@stealthscale/component-primitives": "^0.1.0",
-    "@stealthscale/hooks": "^0.1.0",
-    "@stealthscale/theme": "^0.3.0",
+    "@stealthscale/component-disclosure": "^0.2.4",
+    "@stealthscale/component-primitives": "^0.3.1",
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/theme": "^0.5.0",
     "react": "^19.3",
     "react-dom": "^19.3"
   },