prime-ui-kit 0.13.1 → 0.15.0

package/dist/skill/reference/components/chart-frame/examples/tooltip.tsx

@@ -1,4 +1,4 @@
-/** Invoices by week as grouped bars: pointing at a week or stepping with the arrows shows the kit tooltip body with a row per series — `ChartFrame.Tooltip`, `items`. */
+/** Invoices by week as grouped bars: the kit tooltip follows the pointer with a row per series, the arrows step through the weeks — `ChartFrame.Tooltip`, `items`, `point`. */
 import { ChartFrame, type ChartFrameSeries, chartColors } from "prime-ui-kit";
 import * as React from "react";
 
@@ -18,12 +18,13 @@ const WEEKS = [
 
 const MARGIN = { top: 8, right: 0, bottom: 24, left: 32 };
 const TICKS = [0, 20, 40, 60];
-const TOOLTIP = { width: 176, height: 88 };
 
 const formatCount = (value: number) => `${value} шт.`;
 
 export default function ChartFrameTooltipExample() {
   const [active, setActive] = React.useState<number | null>(null);
+  // The pointer in plot coordinates; `null` while the arrow keys step through the weeks.
+  const [pointer, setPointer] = React.useState<{ x: number; y: number } | null>(null);
 
   return (
     <ChartFrame.Root series={SERIES} formatValue={formatCount}>
@@ -39,13 +40,11 @@ export default function ChartFrameTooltipExample() {
           const bar = Math.min(24, (band - 16) / series.length);
           const y = (v: number) => MARGIN.top + innerH * (1 - v / TICKS[TICKS.length - 1]);
           const point = active === null ? null : WEEKS[active];
-          const tooltipX =
+          // Beside the pointer; from the keyboard beside the middle of the active week.
+          const tooltipAt =
             active === null
-              ? 0
-              : Math.min(
-                  Math.max(MARGIN.left + band * active + band / 2 - TOOLTIP.width / 2, 0),
-                  width - TOOLTIP.width,
-                );
+              ? null
+              : (pointer ?? { x: MARGIN.left + band * active + band / 2, y: height / 2 });
           return (
             <div
               role="slider"
@@ -58,6 +57,7 @@ export default function ChartFrameTooltipExample() {
               onPointerMove={(event) => {
                 const rect = event.currentTarget.getBoundingClientRect();
                 const index = Math.floor((event.clientX - rect.left - MARGIN.left) / band);
+                setPointer({ x: event.clientX - rect.left, y: event.clientY - rect.top });
                 setActive(index >= 0 && index < WEEKS.length ? index : null);
               }}
               onPointerLeave={() => setActive(null)}
@@ -67,6 +67,7 @@ export default function ChartFrameTooltipExample() {
                 const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
                 if (!step) return;
                 event.preventDefault();
+                setPointer(null);
                 setActive((current) =>
                   Math.min(Math.max((current ?? 0) + step, 0), WEEKS.length - 1),
                 );
@@ -124,24 +125,19 @@ export default function ChartFrameTooltipExample() {
                     </g>
                   );
                 })}
-                {point ? (
-                  <foreignObject
-                    x={tooltipX}
-                    y={0}
-                    width={TOOLTIP.width}
-                    height={TOOLTIP.height}
-                    overflow="visible"
-                  >
-                    <ChartFrame.Tooltip
-                      label={point.label}
-                      items={[
+              </svg>
+              <ChartFrame.Tooltip
+                point={tooltipAt}
+                label={point?.label}
+                items={
+                  point
+                    ? [
                         { id: "paid", value: point.paid },
                         { id: "pending", value: point.pending },
-                      ]}
-                    />
-                  </foreignObject>
-                ) : null}
-              </svg>
+                      ]
+                    : []
+                }
+              />
             </div>
           );
         }}

package/dist/skill/reference/components/chat/COMPONENT.md

@@ -97,7 +97,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `search` | `string \| null` | — | The search query (controlled); `null` — the search bar is closed. Matches in the messages' text and transcripts are marked; the newest is current. |
 | `defaultSearch` | `string \| null` | `null` | The initial search (uncontrolled). |
 | `onSearchChange` | `(search: string \| null) => void` | — | The search opened (`""`), changed its query or closed (`null`). |
-| `current` | `string \| null` | `null` | A message to bring into view (a link, a notification): on change the chat brings it to the middle and the other messages blink back. The focus stays where it is. |
+| `current` | `string \| null` | `null` | A message to bring into view (a link, a notification): on change the chat brings it to the middle and the message itself blinks. The focus stays where it is. |
 | `typing` | `boolean` | `false` | The other side is typing: `Chat.Description` cross-fades into «печатает…» and the list ends with the typing bubble (`Message.Typing`), which gives way at once to the reply that ends it. |
 | `labels` | `Partial<ChatLabels>` | — | System strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">` | — | `className` and the other attributes of the frame. |
@@ -248,7 +248,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | away from the end | the reader scrolled up | a round soft «к последним» button at the bottom-end, rising in (`fast`); a `Badge` counts incoming messages that came meanwhile; a press glides to the end — from far away it lands one view before the end first — and stops when the reader scrolls; at the end it leaves and the count resets |
 | first load | `Chat.Messages loading` | the messages' region is `aria-busy`: six `Skeleton` bubbles in the message geometry (the bubble's radius, one or two lines of body text in its padding, widths within its cap), on alternating sides at the end of the list, a group chat's incoming ones beside a circle in the avatar's gutter; `labels.loading` is announced politely. When it ends they cross-fade into the list (`Crossfade`: the new state in `base`, the placeholders out in `fast`); the list mounts then, so what it shows is its first render — nothing enters, nothing is reported new |
 | older history | `hasOlder` | a bubble-shaped `Skeleton` above the first message; reaching it calls `onLoadOlder`; the rows that arrive above keep the reader's place |
-| jumped to | `Message.Reply target`, `Chat.Pinned`, `current` | the list brings the message to the middle (a near one glides, a far one lands at once — rendering it first — and settles once its neighbours have laid out); nothing is drawn on it: every other message steps back and comes forward three times (opacity 1 → `--prime-message-dim-opacity` → 1, `base` each) — `data-pointing="a"` / `"b"` on the list, flipped on every jump so a repeated jump restarts it, and `data-pointed` on the message; a reply's target also takes the focus, a `current` change leaves it where it is. While the search is open its current match takes the place of `current`. Reduced motion: the others stand back for a moment, no blink |
+| jumped to | `Message.Reply target`, `Chat.Pinned`, `current` | the list brings the message to the middle (a near one glides, a far one lands at once — rendering it first — and settles once its neighbours have laid out); the message itself steps back and comes forward three times, the others stay still (opacity 1 → `--prime-message-dim-opacity` → 1, `base` each) — `data-pointing="a"` / `"b"` on the list, flipped on every jump so a repeated jump restarts it, and `data-pointed` on the message; a reply's target also takes the focus, a `current` change leaves it where it is. While the search is open its current match takes the place of `current`. Reduced motion: no blink, the others stand back for a moment |
 | search | `search` (the bar open) | every case-insensitive match in the messages' text and transcripts under a soft accent wash (`<mark>`); the newest match is current: brought into view while the others stay back (`data-pointing="current"`); Enter and the older / newer buttons move the full strength to the older or newer match in one step; «2 из 5» or «Нет совпадений» beside the field |
 | typing | `typing` | the description cross-fades into «печатает…» in the accent (`Crossfade`); the typing bubble enters at the end of the list like an incoming message and leaves closing its height |
 | pinned | `Chat.Pinned items` | the rail's current segment in the accent; a press jumps to the message and steps the bar to the older one (the oldest wraps to the newest), its line entering; without items the bar renders nothing |
@@ -318,12 +318,14 @@ Chat.Root                         <div> column, fills its host; owns selection,
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A complete team messenger over two thousand messages: the header whose status turns into typing, search with highlight, pinned messages, history that loads above, author headers with tags in a group chat, every kind of message, transcripts, reactions, the menu with reply, edit, pin and select, jumps, the new-messages button and the Composer whose messages rise into the list — `Chat.Root`, `Chat.Header`, `Chat.Search`, `Chat.Pinned`, `Chat.Messages`, `type`, `items`, `renderMessage`, `typing`, `selected`, `Chat.Footer`. |
 | [structure.tsx](examples/structure.tsx) | The list alone, written as parts: `Chat.Root` with only `Chat.Messages`, a date that stays on top while its day scrolls, an event of the chat and the unread band — `Chat.Messages`, `Chat.Separator`, `Chat.Service`, `Chat.Unread`. |
-| [group-chat.tsx](examples/group-chat.tsx) | A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run; a direct chat shows neither — `type`, `items`, `renderMessage`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. |
+| [group-chat.tsx](examples/group-chat.tsx) | A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run, which holds messages up to a quarter of an hour apart; the dates carry the weekday — `type`, `items`, `renderMessage`, `groupWindow`, `formatDate`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. |
+| [reactions.tsx](examples/reactions.tsx) | A team's own reactions for approvals: a double tap or `L` puts the approval mark, a long press or `R` opens the team's set, and a chip toggles them back — `quickReaction`, `reactionOptions`, `onReactionToggle`. |
 | [live.tsx](examples/live.tsx) | A live support chat: the client types — the header and the end of the list say so — then answers; new messages enter at the end, read receipts come from what is on screen, and scrolled up the round button counts what arrived — `typing`, `onNewMessage`, `onRead`. |
-| [search.tsx](examples/search.tsx) | Search and pinned messages: the search bar marks every match in the texts and transcripts, counts them and steps between them while the others step back; a pinned message's press jumps to it and blinks the others — `Chat.SearchButton`, `Chat.Search`, `defaultSearch`, `Chat.Pinned`. |
+| [search.tsx](examples/search.tsx) | Search and pinned messages: the search bar marks every match in the texts and transcripts, counts them and steps between them while the others step back; a pinned message's press jumps to it and blinks it — `Chat.SearchButton`, `Chat.Search`, `defaultSearch`, `Chat.Pinned`. |
 | [states.tsx](examples/states.tsx) | The first load of a conversation: bubble-shaped placeholders on both sides stand in the list's place, then cross-fade into the messages — `loading`. |
 | [controlled.tsx](examples/controlled.tsx) | Selection mode owned by the screen: the Select item of a message's menu starts it, a check stands beside every message, a press toggles one while the others step back, the bar counts and acts, Escape leaves — `selected`, `onSelectedChange`, `Chat.SelectionBar`. |
 | [narrow.tsx](examples/narrow.tsx) | At phone width the header keeps its actions and lets the title ellipsize, bubbles take up to 85% of the chat, long links wrap and an album keeps its layout — `Chat.Root`, `Chat.Header`, `Chat.Messages`, `Chat.Footer`. |
+| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in the app header, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. |
 
 ## Mistakes
 - A header, a search bar and a scroller of your own around the messages → `Chat.Header`, `Chat.Search`, `Chat.Messages`: the chat wires typing, search, jumps and selection between them.

package/dist/skill/reference/components/chat/examples/group-chat.tsx

@@ -1,4 +1,4 @@
-/** A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run; a direct chat shows neither — `type`, `items`, `renderMessage`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. */
+/** A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run, which holds messages up to a quarter of an hour apart; the dates carry the weekday — `type`, `items`, `renderMessage`, `groupWindow`, `formatDate`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. */
 import { Avatar, Card, Chat, hueOf, Icon, Message } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -52,7 +52,7 @@ const MESSAGES: ChatMessage[] = [
     id: "2",
     author: "anna",
     text: "Причина — миграция базы счетов.",
-    sentAt: new Date(2026, 9, 7, 18, 41),
+    sentAt: new Date(2026, 9, 7, 18, 52),
   },
   {
     id: "3",
@@ -80,6 +80,17 @@ const MESSAGES: ChatMessage[] = [
   },
 ];
 
+/** A team writes in bursts: a run holds one author's messages up to 15 minutes apart. */
+const RUN_MINUTES = 15;
+
+const DAY = new Intl.DateTimeFormat("ru", { weekday: "long", day: "numeric", month: "long" });
+
+/** «Среда, 8 октября»: the weekday matters in a work week. */
+const formatDay = (date: Date) => {
+  const label = DAY.format(date);
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
 const renderMessage = (message: ChatMessage) => {
   const person = PEOPLE[message.author] as Person;
   const outgoing = message.author === "me";
@@ -122,6 +133,8 @@ export default function ChatGroupChatExample() {
           getAuthor={(message) => message.author}
           getDate={(message) => message.sentAt}
           renderMessage={renderMessage}
+          groupWindow={RUN_MINUTES}
+          formatDate={formatDay}
           now={NOW}
         />
       </Chat.Root>

package/dist/skill/reference/components/chat/examples/reactions.tsx

@@ -0,0 +1,121 @@
+/** A team's own reactions for approvals: a double tap or `L` puts the approval mark, a long press or `R` opens the team's set, and a chip toggles them back — `quickReaction`, `reactionOptions`, `onReactionToggle`. */
+import { Card, Chat, Message, type MessageReaction, type MessageUser } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Request = {
+  id: string;
+  author: "anna" | "me";
+  text: string;
+  sentAt: Date;
+  reactions: MessageReaction[];
+};
+
+const NOW = new Date(2026, 9, 8, 15, 0);
+
+const ME: MessageUser = { id: "me", name: "Вы", color: "blue" };
+const ANNA: MessageUser = { id: "anna", name: "Анна Котова", color: "orange" };
+
+/** The approvals team's set: approve, look, ask, flag. The first is the quick one. */
+const REACTION_OPTIONS = [
+  { emoji: "✅", label: "Согласовано" },
+  { emoji: "👀", label: "Смотрю" },
+  { emoji: "❓", label: "Есть вопрос" },
+  { emoji: "❗", label: "Срочно" },
+] as const;
+
+const QUICK_REACTION = REACTION_OPTIONS[0].emoji;
+
+const REQUESTS: Request[] = [
+  {
+    id: "r1",
+    author: "anna",
+    text: "Прошу согласовать счёт **INV-2051** на 184 000 ₽ — оплата подрядчику за монтаж.",
+    sentAt: new Date(2026, 9, 8, 14, 10),
+    reactions: [{ emoji: "👀", count: 1, users: [ANNA] }],
+  },
+  {
+    id: "r2",
+    author: "anna",
+    text: "И договор с «Гранитом» на 2027 год, скан во вложении к сделке.",
+    sentAt: new Date(2026, 9, 8, 14, 12),
+    reactions: [],
+  },
+  {
+    id: "r3",
+    author: "me",
+    text: "Счёт смотрю, договор передал юристам.",
+    sentAt: new Date(2026, 9, 8, 14, 20),
+    reactions: [],
+  },
+];
+
+/** The reader's reaction put or taken back, with the reader among the chip's `users`. */
+const toggleOwn = (reactions: MessageReaction[], emoji: string): MessageReaction[] => {
+  if (!reactions.some((reaction) => reaction.emoji === emoji)) {
+    return [...reactions, { emoji, count: 1, selected: true, users: [ME] }];
+  }
+  return reactions
+    .map((reaction) => {
+      if (reaction.emoji !== emoji) return reaction;
+      const others = (reaction.users ?? []).filter((user) => user.id !== ME.id);
+      return {
+        ...reaction,
+        selected: !reaction.selected,
+        count: reaction.count + (reaction.selected ? -1 : 1),
+        users: reaction.selected ? others : [...others, ME],
+      };
+    })
+    .filter((reaction) => reaction.count > 0);
+};
+
+export default function ChatReactionsExample() {
+  const [requests, setRequests] = React.useState(REQUESTS);
+
+  const toggle = React.useCallback(
+    (id: string, emoji: string) =>
+      setRequests((current) =>
+        current.map((request) =>
+          request.id === id
+            ? { ...request, reactions: toggleOwn(request.reactions, emoji) }
+            : request,
+        ),
+      ),
+    [],
+  );
+
+  const renderMessage = React.useCallback(
+    (request: Request) => (
+      <Message.Root
+        direction={request.author === "me" ? "outgoing" : "incoming"}
+        time={request.sentAt}
+        status={request.author === "me" ? "read" : undefined}
+        onReactionToggle={(emoji) => toggle(request.id, emoji)}
+      >
+        <Message.Text>{request.text}</Message.Text>
+        {request.reactions.length ? <Message.Reactions items={request.reactions} /> : null}
+      </Message.Root>
+    ),
+    [toggle],
+  );
+
+  return (
+    <Card.Root className={styles.short}>
+      <Chat.Root>
+        <Chat.Messages
+          aria-label="Согласования"
+          reader={ME}
+          quickReaction={QUICK_REACTION}
+          reactionOptions={REACTION_OPTIONS}
+          items={requests}
+          getKey={(request) => request.id}
+          getAuthor={(request) => request.author}
+          getDate={(request) => request.sentAt}
+          renderMessage={renderMessage}
+          now={NOW}
+        />
+      </Chat.Root>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/chat/examples/screen.module.css

@@ -0,0 +1,9 @@
+/* Messenger: a work screen — the header carries the title, the page fills the app panel
+   (`AppShell.Root fillViewport` + `PageContent.Root fill`); each pane is a card with a scrolling
+   region. */
+
+.paneCard {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}