@gemboss/ui 0.42.0 → 0.43.0

package/src/gemboss-tokens.css

@@ -1 +1 @@
-:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-text-strong: #1b1c1e;--gemboss-text: #1b1c1e;--gemboss-text-muted: #686b71;--gemboss-surface: #ffffff;--gemboss-canvas: #ffffff;--gemboss-preview-canvas: #eceef1;--gemboss-rail-bg: #ffffff;--gemboss-panel-bg: #ffffff;--gemboss-divider: #e5e7ea;--gemboss-invite-h: 0px;--gemboss-divider-soft: #edeff2;--gemboss-hover: #eceef2;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-danger: #d72c0d;--gemboss-danger-strong: #b42318;--gemboss-danger-soft: #fff0e9;--gemboss-danger-border: #f5c9bc;--gemboss-success: #007f5f;--gemboss-success-strong: #0a6a4c;--gemboss-success-soft: #e3f1df;--gemboss-success-border: #b7dfcd;--gemboss-warning: #9a6700;--gemboss-warning-soft: #fff8e0;--gemboss-warning-border: #f5d569;--gemboss-radius-xs: 4px;--gemboss-radius-sm: 6px;--gemboss-radius-md: 8px;--gemboss-radius-lg: 12px;--gemboss-radius-xl: 16px;--gemboss-radius-2xl: 20px;--gemboss-radius-full: 999px;--gemboss-shadow-resting: 0 1px 2px rgba(31, 30, 29, .04), 0 2px 6px rgba(31, 30, 29, .06);--gemboss-shadow-raised: 0 4px 16px rgba(31, 30, 29, .1);--gemboss-shadow-overlay: 0 16px 48px rgba(31, 30, 29, .18);--gemboss-transition-fast: .12s;--gemboss-transition-base: .15s;--gemboss-fs-micro: 11px;--gemboss-fs-caption: 12px;--gemboss-fs-body: 14px;--gemboss-fs-body-lg: 16px;--gemboss-fs-h3: 16px;--gemboss-fs-h2: 20px;--gemboss-fs-h1: 24px;--gemboss-fs-display: 30px;--gemboss-dark-bg: #0a0a0c;--gemboss-dark-rail: #0e0e11;--gemboss-dark-surface: #16161a;--gemboss-dark-surface-2: #1e1e24;--gemboss-dark-divider: #2a2a31;--gemboss-dark-text: #ededf0;--gemboss-dark-muted: #9a9aa4;--gemboss-serif: var(--p-font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);--gemboss-font-sans: var(--p-font-family-sans, "Inter", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif);--gemboss-field-bg: #fdfdfd;--gemboss-field-bg-hover: #fafafa;--gemboss-field-ink: #303030;--gemboss-field-placeholder: #616161;--gemboss-field-line: #8a8a8a;--gemboss-field-line-hover: #616161;--gemboss-field-line-active: #1a1a1a;--gemboss-chip-ink: #303633;--gemboss-chip-line: #cfd6ce;--gemboss-chip-line-hover: #aab4ad;--gemboss-chip-bg-hover: #f6f7f5;--gemboss-on-primary: #ffffff;--gemboss-topbar-bg: rgba(255, 255, 255, .98);--gemboss-nav-bg: var(--gemboss-surface);--gemboss-nav-hover: rgba(20, 19, 18, .045)}:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-app-bg: #ffffff}
+:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-accent-wash: #f7f8ff;--gemboss-accent-tint: #dfe2ff;--gemboss-accent-mid: #c9cffd;--gemboss-text-strong: #1b1c1e;--gemboss-text: #1b1c1e;--gemboss-text-muted: #686b71;--gemboss-surface: #ffffff;--gemboss-canvas: #ffffff;--gemboss-preview-canvas: #eceef1;--gemboss-rail-bg: #ffffff;--gemboss-panel-bg: #ffffff;--gemboss-divider: #e5e7ea;--gemboss-invite-h: 0px;--gemboss-divider-soft: #edeff2;--gemboss-hover: #eceef2;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-danger: #d72c0d;--gemboss-danger-strong: #b42318;--gemboss-danger-soft: #fff0e9;--gemboss-danger-border: #f5c9bc;--gemboss-success: #007f5f;--gemboss-success-strong: #0a6a4c;--gemboss-success-soft: #e3f1df;--gemboss-success-border: #b7dfcd;--gemboss-warning: #9a6700;--gemboss-warning-soft: #fff8e0;--gemboss-warning-border: #f5d569;--gemboss-radius-xs: 4px;--gemboss-radius-sm: 6px;--gemboss-radius-md: 8px;--gemboss-radius-lg: 12px;--gemboss-radius-xl: 16px;--gemboss-radius-2xl: 20px;--gemboss-radius-full: 999px;--gemboss-shadow-resting: 0 1px 2px rgba(31, 30, 29, .04), 0 2px 6px rgba(31, 30, 29, .06);--gemboss-shadow-raised: 0 4px 16px rgba(31, 30, 29, .1);--gemboss-shadow-overlay: 0 16px 48px rgba(31, 30, 29, .18);--gemboss-transition-fast: .12s;--gemboss-transition-base: .15s;--gemboss-fs-micro: 11px;--gemboss-fs-caption: 12px;--gemboss-fs-body: 14px;--gemboss-fs-body-lg: 16px;--gemboss-fs-h3: 16px;--gemboss-fs-h2: 20px;--gemboss-fs-h1: 24px;--gemboss-fs-display: 30px;--gemboss-dark-bg: #0a0a0c;--gemboss-dark-rail: #0e0e11;--gemboss-dark-surface: #16161a;--gemboss-dark-surface-2: #1e1e24;--gemboss-dark-divider: #2a2a31;--gemboss-dark-text: #ededf0;--gemboss-dark-muted: #9a9aa4;--gemboss-serif: var(--p-font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);--gemboss-font-sans: var(--p-font-family-sans, "Inter", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif);--gemboss-field-bg: #fdfdfd;--gemboss-field-bg-hover: #fafafa;--gemboss-field-ink: #303030;--gemboss-field-placeholder: #616161;--gemboss-field-line: #8a8a8a;--gemboss-field-line-hover: #616161;--gemboss-field-line-active: #1a1a1a;--gemboss-chip-ink: #303633;--gemboss-chip-line: #cfd6ce;--gemboss-chip-line-hover: #aab4ad;--gemboss-chip-bg-hover: #f6f7f5;--gemboss-on-primary: #ffffff;--gemboss-topbar-bg: rgba(255, 255, 255, .98);--gemboss-nav-bg: var(--gemboss-surface);--gemboss-nav-hover: rgba(20, 19, 18, .045)}:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-app-bg: #ffffff}

package/src/icons.tsx

@@ -76,6 +76,8 @@ const P = {
   chevronLeft: <path d="M12.5 4.5 7 10l5.5 5.5" />,
   chevronsDown: <path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4" />,
   panelRight: <><rect x="3" y="3.5" width="14" height="13" rx="2" /><path d="M12.5 3.5v13" /></>,
+  // The composer's emoji button (21/10/2026): `reaction`'s face, closed and without the plus (it writes, it does not react).
+  emoji: <><circle cx="10" cy="10" r="6.5" /><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2" /><path d="M7.8 8.2h.01M12.2 8.2h.01" /></>,
 } satisfies Record<string, React.ReactNode>;
 // `satisfies`, not a `Record<string, …>` annotation: the annotation widened `keyof` to `string`, so a
 // typo (`name="setings"`) type-checked and drew an empty box (review #3474).

package/src/index.ts

@@ -55,15 +55,21 @@ export { SettingsDialog, type SettingsDialogProps, type SettingsSectionItem } fr
 export { SearchDialog, type SearchItem, type SearchSection } from "./search-dialog";
 export { ThemeToggle } from "./theme";
 export { THEME_KEY, themeScript } from "./theme-script";
-export { Reactions, ReactionPicker, type ReactionsProps } from "./reactions";
+export { Reactions, ReactionPicker, type ReactionPickerProps, type ReactionsProps } from "./reactions";
 export { ActionCard, ActionCardItem, ActionCardSection, ActionChange, type ActionCardItemProps, type ActionCardOutcome, type ActionCardProps } from "./action-card";
+// 0.43.0 (the Market redesign, 21/10/2026): the assistant asks one question and a person only confirms, and the pieces around it.
+export { QuestionCard, MAX_QUESTION_CHOICES, type QuestionCardProps, type QuestionChoice, type QuestionChoices } from "./question-card";
+export { BriefingCard, type BriefingCardProps } from "./briefing-card";
+export { RangeBar, rangeBarGeometry, type RangeBarGeometry, type RangeBarProps } from "./range-bar";
+export { ProgressRing, progressRingGeometry, RING_BOX, type ProgressRingGeometry, type ProgressRingProps } from "./progress-ring";
+export { SpotArt, SPOT_ART_NAMES, type SpotArtName, type SpotArtProps } from "./spot-art";
 export { FREQUENT_MAX, frequentReactions, isReactionEmoji, QUICK_REACTIONS, REACTION_EMOJI, REACTION_GROUPS, reactionLabel, reactionWords, searchReactions, SUGGESTED_REACTIONS, toggleReaction, type Reaction } from "./reactions-data";
 // The team chat layer (20/10/2026, README "The team chat layer"): GemCare's channel chat for every surface, with
 // team-chat.css its own entry. The row rules (turns, day separators, the "New messages" line) are plain data.
 export {
   ChannelItem, ChannelRail, ChannelSection, ChatHeader, Composer, DaySeparator, JumpToLatest, Message, MessageList, NewMessagesLine,
   PeoplePanel, PeopleSection, PersonRow, ReadReceipt, TeamChat, ThreadPanel, TEAM_CHAT_DRAWER_MAX, TEAM_CHAT_LABELS, TEAM_CHAT_PHONE_MAX,
-  type ChannelItemProps, type ChannelKind, type ChannelRailProps, type ChatHeaderProps, type ComposerProps, type MessageListProps, type MessageProps,
+  type ChannelItemProps, type ChannelKind, type ChannelRailProps, type ChatHeaderProps, type ComposerProps, type DmAvatar, type MessageListProps, type MessageProps,
   type PeoplePanelProps, type PersonRowProps, type Presence, type TeamChatLabels, type TeamChatPanel, type TeamChatProps, type TeamChatView, type ThreadPanelProps,
 } from "./team-chat";
 export { chatDayISO, chatDayKey, chatDayWord, teamChatRows, type ChatRow, type ChatRowMessage, type ChatRowOptions } from "./team-chat-data";

package/src/progress-ring.css

@@ -0,0 +1 @@
+.ui-ring{display:block;flex:none;max-width:100%;height:auto}.ui-ring__track,.ui-ring__arc{fill:none;stroke-width:10}.ui-ring__track{stroke:var(--gemboss-accent-tint, #dfe2ff)}.ui-ring__arc{stroke:var(--gemboss-accent, #5661f5);stroke-linecap:round}.ui-ring__label{fill:var(--ui-text-strong, #1b1c1e);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}

package/src/progress-ring.tsx

@@ -0,0 +1,65 @@
+/**
+ * Progress ring — @gemboss/ui 0.43.0. "3 of 5" as a ring with the count in the middle (the Market redesign 21/10/2026: Your store
+ * asks five things one at a time and says how far it is). The kit's `ui-progress` is a bar; a bar says "how much", a ring beside a
+ * heading says "how far along" without taking a row.
+ *
+ * Server-renderable (no state, no effect). The colours are tokens (`--gemboss-accent`, `--gemboss-accent-tint`), so the dark
+ * palette follows. A page that writes the markup itself computes the arc with `progressRingGeometry` (pure, `@gemboss/ui`
+ * index) or by hand, and links `progress-ring.css`.
+ */
+import "./progress-ring.css";
+import React, { type ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+const r1 = (n: number) => Math.round(n * 10) / 10;
+
+/** The viewBox is 104 wide: a 10px stroke on a 42px radius leaves 5px of margin. */
+export const RING_BOX = 104;
+const RING_R = 42;
+
+export interface ProgressRingGeometry {
+  /** The share done, 0 to 1. */
+  fraction: number;
+  /** The length of the whole circle, the second number of `stroke-dasharray`. */
+  circumference: number;
+  /** The length of the arc that is done, the first number of `stroke-dasharray`. */
+  dash: number;
+}
+
+/**
+ * The arc of a ring. `value` is clamped into 0..max, and a `max` that is not a positive number is an empty ring, never NaN
+ * in the markup: "0 of 0" is a ring with nothing in it.
+ */
+export function progressRingGeometry(value: number, max: number): ProgressRingGeometry {
+  const circumference = r1(2 * Math.PI * RING_R);
+  const fraction = Number.isFinite(value) && Number.isFinite(max) && max > 0 ? Math.min(Math.max(value, 0), max) / max : 0;
+  return { fraction, circumference, dash: r1(fraction * circumference) };
+}
+
+export interface ProgressRingProps {
+  value: number;
+  max: number;
+  /** The size in px (default 104). The ring scales; the text inside scales with it. */
+  size?: number;
+  /** Inside the ring (default "value/max"). */
+  label?: ReactNode;
+  /** What a screen reader hears (default "value of max"). */
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function ProgressRing({ value, max, size = RING_BOX, label, ariaLabel, className }: ProgressRingProps) {
+  const g = progressRingGeometry(value, max);
+  // The words say what the arc says: whole numbers, inside 0..max.
+  const total = Number.isFinite(max) ? Math.max(Math.round(max), 0) : 0;
+  const shown = Math.min(Math.max(Math.round(Number.isFinite(value) ? value : 0), 0), total);
+  const mid = RING_BOX / 2;
+  return (
+    <svg className={cx("ui-ring", className)} viewBox={`0 0 ${RING_BOX} ${RING_BOX}`} width={size} height={size} role="img"
+      aria-label={ariaLabel ?? `${shown} of ${total}`}>
+      <circle className="ui-ring__track" cx={mid} cy={mid} r={RING_R} />
+      <circle className="ui-ring__arc" cx={mid} cy={mid} r={RING_R} strokeDasharray={`${g.dash} ${g.circumference}`} transform={`rotate(-90 ${mid} ${mid})`} />
+      <text className="ui-ring__label" x={mid} y={mid + 8} textAnchor="middle">{label ?? `${shown}/${total}`}</text>
+    </svg>
+  );
+}

package/src/question-card.css

@@ -0,0 +1 @@
+.ui-qcard{display:grid;gap:24px;min-width:0;padding:28px;border:1px solid var(--ui-border);border-radius:var(--gemboss-radius-xl, 16px);background:var(--ui-surface);box-shadow:var(--gemboss-shadow-resting, 0 1px 2px rgba(31, 30, 29, .04), 0 2px 6px rgba(31, 30, 29, .06))}.ui-qcard__head{display:flex;align-items:center;gap:24px;min-width:0}.ui-qcard__art{flex:none}.ui-qcard__ask{display:grid;gap:6px;min-width:0}.ui-qcard__eyebrow{margin:0;font-size:var(--gemboss-fs-caption, 12px);line-height:16px;color:var(--ui-text-muted)}.ui-qcard__question{margin:0;font-size:var(--gemboss-fs-h2, 20px);line-height:28px;font-weight:650;letter-spacing:-.01em;color:var(--ui-text-strong);overflow-wrap:anywhere}.ui-qcard__evidence{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}.ui-qcard__choices{display:grid;gap:10px;min-width:0}.ui-qcard__choice{position:relative;display:flex;align-items:center;gap:14px;min-width:0;min-height:44px;box-sizing:border-box;padding:14px 16px;border:1px solid var(--ui-border);border-radius:var(--gemboss-radius-lg, 12px);background:var(--ui-surface);cursor:pointer;transition:border-color var(--gemboss-transition-fast, .12s),background-color var(--gemboss-transition-fast, .12s)}.ui-qcard__choice:hover{border-color:var(--ui-text-muted)}.ui-qcard__input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.ui-qcard__choice:has(>input:checked){border-color:var(--gemboss-accent, #5661f5);background:var(--gemboss-accent-wash, #f7f8ff);box-shadow:0 0 0 3px var(--gemboss-accent-soft, #eef0fe)}.ui-qcard__choice:has(>input:focus-visible){outline:2px solid var(--ui-focus);outline-offset:2px}.ui-qcard__choice:has(>input:disabled){cursor:default;opacity:.6}.ui-qcard__dot{flex:none;display:inline-grid;place-content:center;width:18px;height:18px;box-sizing:border-box;border:1.5px solid var(--ui-text-muted);border-radius:50%}.ui-qcard__choice:has(>input:checked) .ui-qcard__dot{border-color:var(--gemboss-accent, #5661f5);background:var(--gemboss-accent, #5661f5)}.ui-qcard__choice:has(>input:checked) .ui-qcard__dot:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gemboss-surface, #fff)}.ui-qcard__text{display:grid;flex:1;gap:2px;min-width:0}.ui-qcard__label{font-weight:600;color:var(--ui-text-strong);overflow-wrap:anywhere}.ui-qcard__note{font-size:var(--gemboss-fs-caption, 12px);line-height:16px;color:var(--ui-text-muted)}.ui-qcard__pick{flex:none;background:var(--gemboss-accent-soft, #eef0fe);color:var(--gemboss-accent-strong, #3a44de)}.ui-qcard__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.ui-qcard__confirm{min-height:36px;padding-inline:22px}.ui-qcard__fine{flex-basis:100%;margin:0;font-size:var(--gemboss-fs-caption, 12px);line-height:16px;color:var(--ui-text-muted)}@media (pointer: coarse),(max-width: 47.9975em){.ui-qcard{padding:20px}.ui-qcard__choice{min-height:48px}.ui-qcard__confirm{min-height:44px}}

package/src/question-card.tsx

@@ -0,0 +1,116 @@
+/**
+ * Question card — @gemboss/ui 0.43.0. The one look for "the assistant asks, a person only confirms" (Chris 21/10/2026, the Market
+ * redesign: "trợ lý trang cũng phải đặt câu hỏi rõ ràng và có thể là cần fill sẵn câu trả lời chứ ko bắt user phải nghĩ gì hết chỉ
+ * confirm thôi", "thậm chí đưa cho họ 1 - 3 lựa chọn tối đa"). README "Question card".
+ *
+ * The contract it draws, which every surface keeps:
+ * - ONE question at a time, in the person's words;
+ * - the answer is already chosen: the first choice is the assistant's best guess (`pick`), with where it came from in `note`
+ *   ("From your site"), so the person confirms instead of thinking;
+ * - ONE TO THREE choices, never more: the type refuses a fourth (`QuestionChoices`), and a list that gets past the type
+ *   (a cast, plain JS) is cut to the first three, because a fourth is a form;
+ * - one primary button confirms the chosen one; typing your own answer and skipping are quiet buttons, offered only when the
+ *   surface handles them;
+ * - nothing is saved by choosing: `onChange` moves the selection, `onConfirm` is the only thing that commits (the surface shows
+ *   Undo after, as `ActionCard` does).
+ *
+ * Presentational and controlled: no state of its own, so it renders on the server. The choices are real radio inputs (a keyboard
+ * and a screen reader get a radio group, the arrow keys move the selection); the dot and the highlight are drawn by the card.
+ * Its stylesheet travels with it (`question-card.css`, own entry; `@gemboss/ui/question-card.css` for a plain-HTML surface that
+ * writes the same classes).
+ */
+import "./question-card.css";
+import React, { type ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+
+/** The most choices a question offers. Said once, so a surface and its test read the same number. */
+export const MAX_QUESTION_CHOICES = 3;
+
+export interface QuestionChoice {
+  /** What `value`, `onChange` and `onConfirm` carry. Unique in the question. */
+  id: string;
+  label: ReactNode;
+  /** Where the choice came from, one short line: "From your site", "From ketone.com's ads". */
+  note?: ReactNode;
+  /** The assistant's best guess: gets the pick tag. At most one choice should carry it, and it goes first. */
+  pick?: boolean;
+}
+
+/** One, two or three choices. A fourth does not type-check. */
+export type QuestionChoices =
+  | readonly [QuestionChoice]
+  | readonly [QuestionChoice, QuestionChoice]
+  | readonly [QuestionChoice, QuestionChoice, QuestionChoice];
+
+export interface QuestionCardProps {
+  /** The radio group's name and the base of the ids this card writes. Unique on the page. */
+  id: string;
+  question: ReactNode;
+  /** Above the question: "Question 2 of 4". */
+  eyebrow?: ReactNode;
+  /** Small chips under the question that say what the guess rests on: "$59.95 to $110.70". */
+  evidence?: ReactNode;
+  /** A picture beside the question (`SpotArt`). */
+  art?: ReactNode;
+  choices: QuestionChoices;
+  /** The `id` of the chosen choice. Start with the `pick`. */
+  value: string;
+  onChange: (id: string) => void;
+  /** "Yes, that one". Names what happens. */
+  confirmLabel: ReactNode;
+  onConfirm: (id: string) => void;
+  /** The tag on the pick (default "Gem's pick"). */
+  pickLabel?: ReactNode;
+  /** Typing an answer of their own: shown only when handled. */
+  onOther?: () => void;
+  otherLabel?: ReactNode;
+  onSkip?: () => void;
+  skipLabel?: ReactNode;
+  /** Under the buttons: "Nothing is saved until you confirm." */
+  fine?: ReactNode;
+  /** While the confirm is being saved: the card stops taking input. */
+  busy?: boolean;
+  className?: string;
+}
+
+export function QuestionCard({
+  id, question, eyebrow, evidence, art, choices, value, onChange, confirmLabel, onConfirm, pickLabel = "Gem's pick",
+  onOther, otherLabel = "Type my own", onSkip, skipLabel = "Skip", fine, busy, className,
+}: QuestionCardProps) {
+  const list: readonly QuestionChoice[] = choices.slice(0, MAX_QUESTION_CHOICES);
+  const qid = `${id}-q`;
+  return (
+    <section className={cx("ui-qcard", className)} aria-labelledby={qid} aria-busy={busy || undefined}>
+      <header className="ui-qcard__head">
+        {art ? <div className="ui-qcard__art" aria-hidden>{art}</div> : null}
+        <div className="ui-qcard__ask">
+          {eyebrow ? <p className="ui-qcard__eyebrow">{eyebrow}</p> : null}
+          <h2 className="ui-qcard__question" id={qid}>{question}</h2>
+          {evidence ? <div className="ui-qcard__evidence">{evidence}</div> : null}
+        </div>
+      </header>
+      <div className="ui-qcard__choices" role="radiogroup" aria-labelledby={qid}>
+        {list.map((c) => (
+          <label className="ui-qcard__choice" key={c.id}>
+            <input className="ui-qcard__input" type="radio" name={id} value={c.id} checked={value === c.id} disabled={busy}
+              onChange={() => onChange(c.id)} />
+            <span className="ui-qcard__dot" aria-hidden />
+            <span className="ui-qcard__text">
+              <span className="ui-qcard__label">{c.label}</span>
+              {c.note ? <span className="ui-qcard__note">{c.note}</span> : null}
+            </span>
+            {c.pick ? <span className="ui-tag ui-tag--accent ui-qcard__pick">{pickLabel}</span> : null}
+          </label>
+        ))}
+      </div>
+      <div className="ui-qcard__foot">
+        <button type="button" className="ui-btn ui-btn--primary ui-qcard__confirm" disabled={busy || !list.some((c) => c.id === value)}
+          onClick={() => onConfirm(value)}>{confirmLabel}</button>
+        {onOther ? <button type="button" className="ui-btn ui-btn--ghost" disabled={busy} onClick={onOther}>{otherLabel}</button> : null}
+        {onSkip ? <button type="button" className="ui-btn ui-btn--ghost" disabled={busy} onClick={onSkip}>{skipLabel}</button> : null}
+        {fine ? <p className="ui-qcard__fine">{fine}</p> : null}
+      </div>
+    </section>
+  );
+}

package/src/range-bar.css

@@ -0,0 +1 @@
+.ui-rangebar{position:relative;min-width:0}.ui-rangebar--sm{height:44px}.ui-rangebar--lg{height:132px}.ui-rangebar__track,.ui-rangebar__grid,.ui-rangebar__band,.ui-rangebar__mid,.ui-rangebar__you{position:absolute;display:block}.ui-rangebar__track{left:0;right:0;height:6px;border-radius:3px;background:var(--gemboss-divider-soft, #edeff2)}.ui-rangebar--sm .ui-rangebar__track{top:20px;height:4px}.ui-rangebar--lg .ui-rangebar__track{top:56px}.ui-rangebar__grid{width:1px;background:var(--gemboss-divider-soft, #edeff2)}.ui-rangebar--sm .ui-rangebar__grid{display:none}.ui-rangebar--lg .ui-rangebar__grid{top:36px;height:46px}.ui-rangebar__band{background:var(--gemboss-accent-tint, #dfe2ff)}.ui-rangebar--sm .ui-rangebar__band{top:14px;height:16px;border-radius:6px}.ui-rangebar--lg .ui-rangebar__band{top:44px;height:30px;border-radius:var(--gemboss-radius-lg, 12px)}.ui-rangebar__mid{width:2px;background:var(--gemboss-accent, #5661f5)}.ui-rangebar--sm .ui-rangebar__mid{top:10px;height:24px}.ui-rangebar--lg .ui-rangebar__mid{top:36px;height:46px}.ui-rangebar__you{box-sizing:border-box;border-radius:50%;background:var(--gemboss-text-strong, #1b1c1e);border:3px solid var(--gemboss-surface, #fff);box-shadow:0 0 0 1px var(--gemboss-text-strong, #1b1c1e);transform:translate(-50%)}.ui-rangebar--sm .ui-rangebar__you{top:13px;width:18px;height:18px}.ui-rangebar--lg .ui-rangebar__you{top:46px;width:26px;height:26px;border-width:4px}.ui-rangebar__tag,.ui-rangebar__caption,.ui-rangebar__tick{position:absolute;font-size:var(--gemboss-fs-caption, 12px);line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums}.ui-rangebar__tag{top:10px;transform:translate(-50%);font-weight:650;color:var(--ui-text-strong, #1b1c1e)}.ui-rangebar__tag--mid{color:var(--gemboss-accent-strong, #3a44de)}.ui-rangebar__tag--you{color:var(--ui-text-strong, #1b1c1e)}.ui-rangebar__caption{top:92px;text-align:center;color:var(--ui-text-muted, #686b71)}.ui-rangebar__tick{top:116px;transform:translate(-50%);color:var(--ui-text-muted, #686b71)}.ui-rangebar__tick--start{transform:none}.ui-rangebar__tick--end{transform:translate(-100%)}

package/src/range-bar.tsx

@@ -0,0 +1,102 @@
+/**
+ * Range bar — @gemboss/ui 0.43.0. One value against a market's spread, on one axis: the band where half of the market sits, its
+ * middle, and where you are (the Market redesign 21/10/2026: "where your prices sit"). The kit's `ShareBar` divides one whole,
+ * `Sparkline` draws a trend, `ui-progress` one value; none of them says "here is the spread, and here is you inside or outside it".
+ *
+ * Two sizes. `sm` is the shape alone, for a metric tile. `lg` adds the labels: the middle above its tick, "You" above the dot,
+ * what the band is under it, and the axis numbers under that. The numbers are the surface's (`format`, `labels`): the bar does no
+ * money maths and names no currency.
+ *
+ * Server-renderable (no state, no effect). The colours are tokens, so the dark palette follows. Positions are inline percentages:
+ * a plain-HTML page under a CSP that forbids inline style (gemcare: `style-src 'self'`) computes them with `rangeBarGeometry`
+ * (pure, `@gemboss/ui` index) and sets them from its own stylesheet or script.
+ */
+import "./range-bar.css";
+import React, { type ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+const r2 = (n: number) => Math.round(n * 100) / 100;
+const isNum = (n: unknown): n is number => typeof n === "number" && Number.isFinite(n);
+
+export interface RangeBarGeometry {
+  /** The band, in percent of the axis; null when it was not given, or when it has no width left inside the axis. */
+  band: { left: number; width: number } | null;
+  /** The middle, in percent of the axis. */
+  mid: number | null;
+  /** The value, in percent of the axis. */
+  you: number | null;
+  /** Each tick: its value and its place, in percent. */
+  ticks: Array<{ value: number; at: number }>;
+}
+
+/**
+ * Where each thing sits on the axis, as percentages. A value outside the axis is pinned to its edge (a price far above the range
+ * still shows, at the end, instead of leaving the bar), a band given high-to-low is turned round, and anything that is not a finite
+ * number is left out rather than drawn at NaN%. An axis with no width draws nothing.
+ */
+export function rangeBarGeometry(opts: {
+  axis: readonly [number, number]; band?: readonly [number, number] | null; mid?: number | null; you?: number | null; ticks?: readonly number[];
+}): RangeBarGeometry {
+  const [lo, hi] = opts.axis;
+  const empty: RangeBarGeometry = { band: null, mid: null, you: null, ticks: [] };
+  if (!isNum(lo) || !isNum(hi) || hi <= lo) return empty;
+  const span = hi - lo;
+  const at = (v: number) => r2((Math.min(Math.max(v, lo), hi) - lo) / span * 100);
+  let band: RangeBarGeometry["band"] = null;
+  if (opts.band && isNum(opts.band[0]) && isNum(opts.band[1])) {
+    const a = at(Math.min(opts.band[0], opts.band[1]));
+    const b = at(Math.max(opts.band[0], opts.band[1]));
+    band = b > a ? { left: a, width: r2(b - a) } : null;
+  }
+  return {
+    band,
+    mid: isNum(opts.mid) ? at(opts.mid) : null,
+    you: isNum(opts.you) ? at(opts.you) : null,
+    ticks: (opts.ticks ?? []).filter(isNum).filter((v) => v >= lo && v <= hi).map((value) => ({ value, at: at(value) })),
+  };
+}
+
+export interface RangeBarProps {
+  /** The two ends of the axis, low then high. */
+  axis: readonly [number, number];
+  /** Where half of the market sits: low then high. */
+  band?: readonly [number, number] | null;
+  /** The market's middle. */
+  mid?: number | null;
+  /** The value being placed. */
+  you?: number | null;
+  /** Axis numbers to print under the bar (`lg` only), e.g. [0, 20, 40, 60, 80]. */
+  ticks?: readonly number[];
+  /** A number as the surface writes it: "$26.99". Used for the tick labels. */
+  format?: (n: number) => string;
+  /** The words (`lg` only): above the middle's tick, above the dot, under the band. */
+  labels?: { mid?: ReactNode; you?: ReactNode; band?: ReactNode };
+  size?: "sm" | "lg";
+  /** What a screen reader hears: say the numbers, the bar has no text of its own to read. */
+  ariaLabel: string;
+  className?: string;
+}
+
+const pos = (n: number) => ({ left: `${n}%` });
+
+export function RangeBar({ axis, band, mid, you, ticks, format, labels, size = "lg", ariaLabel, className }: RangeBarProps) {
+  const g = rangeBarGeometry({ axis, band, mid, you, ticks });
+  const lg = size === "lg";
+  return (
+    <div className={cx("ui-rangebar", lg ? "ui-rangebar--lg" : "ui-rangebar--sm", className)} role="img" aria-label={ariaLabel}>
+      {g.ticks.map((t) => <span className="ui-rangebar__grid" style={pos(t.at)} key={t.value} />)}
+      <span className="ui-rangebar__track" />
+      {g.band ? <span className="ui-rangebar__band" style={{ left: `${g.band.left}%`, width: `${g.band.width}%` }} /> : null}
+      {g.mid !== null ? <span className="ui-rangebar__mid" style={pos(g.mid)} /> : null}
+      {g.you !== null ? <span className="ui-rangebar__you" style={pos(g.you)} /> : null}
+      {lg && g.mid !== null && labels?.mid ? <span className="ui-rangebar__tag ui-rangebar__tag--mid" style={pos(g.mid)}>{labels.mid}</span> : null}
+      {lg && g.you !== null && labels?.you ? <span className="ui-rangebar__tag ui-rangebar__tag--you" style={pos(g.you)}>{labels.you}</span> : null}
+      {lg && g.band && labels?.band ? <span className="ui-rangebar__caption" style={{ left: `${g.band.left}%`, width: `${g.band.width}%` }}>{labels.band}</span> : null}
+      {lg ? g.ticks.map((t) => (
+        <span className={cx("ui-rangebar__tick", t.at <= 0 && "ui-rangebar__tick--start", t.at >= 100 && "ui-rangebar__tick--end")} style={pos(t.at)} key={`t${t.value}`}>
+          {format ? format(t.value) : String(t.value)}
+        </span>
+      )) : null}
+    </div>
+  );
+}

package/src/reactions.tsx

@@ -13,6 +13,8 @@
  *   bottom edge; a row in flow is scrolled to by the browser). Frequently used first (this browser's, filled up to nine
  *   with SUGGESTED_REACTIONS), then the groups; search by words; arrows move in the grid, Enter in the search picks the first, Escape closes
  *   and gives focus back to the button.
+ * - the same picker WRITES an emoji in the team chat composer (team-chat.tsx `Composer`, 21/10/2026): no `items`, so plain
+ *   buttons, nothing pressed; its picks go into the same "Frequently used".
  *
  * Each target is 44px (a control, CLAUDE.md §9.1) while the visible pill is 26px: transparent padding carries the rest,
  * so a message with reactions does not grow a whole line.
@@ -31,7 +33,9 @@ function readRecent(): string[] {
     return Array.isArray(v) ? v.filter((e): e is string => typeof e === "string" && reactionWords(e) !== "").slice(0, RECENT_MAX) : [];
   } catch { return []; }
 }
-function rememberRecent(emoji: string): void {
+/** Put an emoji first in this browser's "Frequently used" (the picker's row). The composer's emoji button records its picks
+ *  here too, so a person's emoji are one list whether they reacted with them or wrote them. */
+export function rememberRecent(emoji: string): void {
   try {
     const next = [emoji, ...readRecent().filter((e) => e !== emoji)].slice(0, RECENT_MAX);
     globalThis.localStorage?.setItem(RECENT_KEY, JSON.stringify(next));
@@ -89,17 +93,39 @@ export function Reactions({ items, onToggle, target = "this", canReact = true, o
   );
 }
 
-export function ReactionPicker({ items, onPick, onClose, id }: { items: readonly Reaction[]; onPick: (emoji: string) => void; onClose: () => void; id?: string }) {
+export type ReactionPickerProps = {
+  /** The reactions already put on the thing: the viewer's own are drawn pressed, and a pick of one takes it back. Absent: a
+   *  picker that WRITES an emoji (the team chat composer's): plain buttons named by the emoji and its words, none pressed. */
+  items?: readonly Reaction[];
+  onPick: (emoji: string) => void;
+  /** Escape. */
+  onClose: () => void;
+  id?: string;
+  /** The group's accessible name. Default "Pick a reaction". */
+  label?: string;
+  className?: string;
+  /** Where focus goes when it opens: the search (default), or the first emoji (under a finger, where a focused search
+   *  brings the keyboard up over the picker). */
+  initialFocus?: "search" | "emoji";
+};
+
+export function ReactionPicker({ items, onPick, onClose, id, label = "Pick a reaction", className, initialFocus = "search" }: ReactionPickerProps) {
   const [q, setQ] = useState("");
   const [recent, setRecent] = useState<readonly string[]>(() => frequentReactions([]));
   const search = useRef<HTMLInputElement>(null);
   const body = useRef<HTMLDivElement>(null);
   // Storage is read after mount: the server render and the first client render must draw the same picker.
-  useEffect(() => { const r = readRecent(); if (r.length) setRecent(frequentReactions(r)); search.current?.focus(); }, []);
-  const mine = (e: string) => items.some((r) => r.emoji === e && r.mine);
+  useEffect(() => {
+    const r = readRecent();
+    if (r.length) setRecent(frequentReactions(r));
+    if (initialFocus === "emoji") body.current?.querySelector<HTMLButtonElement>(".ui-reaction-picker__btn")?.focus();
+    else search.current?.focus();
+  }, []);
+  const mine = (e: string) => Boolean(items?.some((r) => r.emoji === e && r.mine));
   const btn = (e: string) => (
     <button key={e} type="button" className="ui-reaction-picker__btn" title={reactionWords(e).split(" ")[0] || e}
-      aria-label={`${mine(e) ? "Remove" : "Add"} ${e} ${reactionWords(e)}`.trim()} aria-pressed={mine(e)} onClick={() => onPick(e)}>{e}</button>
+      aria-label={(items ? `${mine(e) ? "Remove" : "Add"} ${e} ${reactionWords(e)}` : `${e} ${reactionWords(e)}`).trim()}
+      aria-pressed={items ? mine(e) : undefined} onClick={() => onPick(e)}>{e}</button>
   );
   const grid = (list: readonly string[]) => <div className="ui-reaction-picker__grid">{list.map(btn)}</div>;
   const found = q.trim() ? searchReactions(q) : null;
@@ -122,7 +148,7 @@ export function ReactionPicker({ items, onPick, onClose, id }: { items: readonly
     all[Math.min(all.length - 1, at + step)]?.focus();
   };
   return (
-    <div id={id} className="ui-reaction-picker" role="group" aria-label="Pick a reaction" onKeyDown={onKeyDown}>
+    <div id={id} className={["ui-reaction-picker", className].filter(Boolean).join(" ")} role="group" aria-label={label} onKeyDown={onKeyDown}>
       <input ref={search} type="search" className="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji"
         autoComplete="off" value={q} onChange={(e) => setQ(e.target.value)} />
       <div ref={body} className="ui-reaction-picker__body">

package/src/spot-art.css

@@ -0,0 +1 @@
+.ui-art{--ui-art-solid: var(--gemboss-accent, #5661f5);--ui-art-tint: var(--gemboss-accent-tint, #dfe2ff);--ui-art-mid: var(--gemboss-accent-mid, #c9cffd);--ui-art-soft: var(--gemboss-accent-soft, #eef0fe);--ui-art-wash: var(--gemboss-accent-wash, #f7f8ff);--ui-art-paper: var(--gemboss-surface, #ffffff);--ui-art-ink: var(--gemboss-text-strong, #1b1c1e);--ui-art-muted: var(--gemboss-divider, #e5e7ea);display:block;flex:none;max-width:100%;height:auto}.ui-art__line{fill:none;stroke:var(--ui-art-solid);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.ui-art__thin{stroke-width:1.5}.ui-art__mid-line{stroke:var(--ui-art-mid)}.ui-art__paper-line{stroke:var(--ui-art-paper);stroke-width:4}.ui-art__dashed{stroke-dasharray:4 5}.ui-art__dots{stroke-dasharray:1 6}.ui-art__ring{fill:none;stroke:var(--ui-art-tint);stroke-width:1.5}.ui-art__dash{fill:none;stroke:var(--ui-art-mid);stroke-width:1.5;stroke-dasharray:3 6}.ui-art__plus{fill:none;stroke:var(--ui-art-paper);stroke-width:2.4;stroke-linecap:round}.ui-art__solid{fill:var(--ui-art-solid)}.ui-art__tint{fill:var(--ui-art-tint)}.ui-art__mid{fill:var(--ui-art-mid)}.ui-art__soft{fill:var(--ui-art-soft)}.ui-art__wash{fill:var(--ui-art-wash)}.ui-art__paper{fill:var(--ui-art-paper)}.ui-art__ink{fill:var(--ui-art-ink)}.ui-art__muted{fill:var(--ui-art-muted)}.ui-art__muted-soft{fill:var(--ui-art-muted);opacity:.6}

package/src/spot-art.tsx

@@ -0,0 +1,130 @@
+/**
+ * Spot art — @gemboss/ui 0.43.0. A small set of line-and-fill pictures for the places a screen needs a pause or has nothing yet
+ * (the Market redesign 21/10/2026, Chris: "toàn chữ là chữ là không được, phải có những khoảng nghỉ có hình ảnh"). Before this,
+ * `ui-empty` was a title and a sentence, and every surface that wanted a picture drew its own.
+ *
+ * Six pictures, one drawing style: the gem the brand is, in iris, with its tints behind it.
+ *   gem-radar  a gem inside rings, with stores around it (a briefing, "what Gem found")
+ *   orbit      you in the middle and the stores around you (competitors)
+ *   people     three heads (customers)
+ *   page       a page with a plus (nothing to compare yet, build one)
+ *   plug       two halves that are not joined (not connected)
+ *   price      a band, a middle and a dot (prices)
+ *
+ * Every colour is a token (`--gemboss-accent`, `-tint`, `-mid`, `-soft`), so the dark palette follows, and nothing in a picture is
+ * text. Decorative by default (`aria-hidden`): the words beside it say what it says. Pass `title` when the picture is the only thing
+ * that says it, and it becomes an image with that name. Server-renderable (no state, no effect). A page that writes the markup itself
+ * links `spot-art.css`; the shapes are in this file.
+ */
+import "./spot-art.css";
+import React, { type ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+
+export type SpotArtName = "gem-radar" | "orbit" | "people" | "page" | "plug" | "price";
+export const SPOT_ART_NAMES: readonly SpotArtName[] = ["gem-radar", "orbit", "people", "page", "plug", "price"];
+
+const ART: Record<SpotArtName, { w: number; h: number; body: ReactNode }> = {
+  "gem-radar": {
+    w: 220, h: 164,
+    body: (
+      <>
+        <circle className="ui-art__ring" cx="110" cy="84" r="72" />
+        <circle className="ui-art__dash" cx="110" cy="84" r="50" />
+        <path className="ui-art__line ui-art__soft" d="M110 38 78 70l32 50 32-50z" />
+        <path className="ui-art__line ui-art__thin" d="M78 70h64M110 38l-13 32 13 50 13-50z" />
+        <circle className="ui-art__line ui-art__paper" cx="36" cy="62" r="7" />
+        <circle className="ui-art__solid" cx="184" cy="112" r="9" />
+        <circle className="ui-art__mid" cx="170" cy="34" r="5" />
+        <circle className="ui-art__mid" cx="52" cy="126" r="4" />
+      </>
+    ),
+  },
+  orbit: {
+    w: 200, h: 150,
+    body: (
+      <>
+        <circle className="ui-art__ring" cx="100" cy="75" r="66" />
+        <circle className="ui-art__dash" cx="100" cy="75" r="42" />
+        <rect className="ui-art__solid" x="80" y="55" width="40" height="40" rx="12" />
+        <path className="ui-art__paper" d="M100 66 91 75l9 12 9-12z" />
+        <circle className="ui-art__line ui-art__paper" cx="40" cy="48" r="11" />
+        <circle className="ui-art__line ui-art__paper" cx="160" cy="62" r="11" />
+        <circle className="ui-art__mid" cx="132" cy="124" r="7" />
+        <circle className="ui-art__tint" cx="60" cy="118" r="5" />
+      </>
+    ),
+  },
+  people: {
+    w: 132, h: 96,
+    body: (
+      <>
+        <circle className="ui-art__solid" cx="66" cy="34" r="15" />
+        <path className="ui-art__solid" d="M38 88c0-17 12-28 28-28s28 11 28 28z" />
+        <circle className="ui-art__tint" cx="26" cy="42" r="11" />
+        <path className="ui-art__tint" d="M6 88c0-13 8-21 20-21 5 0 9 1 12 4-6 5-9 11-9 17z" />
+        <circle className="ui-art__mid" cx="106" cy="42" r="11" />
+        <path className="ui-art__mid" d="M126 88c0-13-8-21-20-21-5 0-9 1-12 4 6 5 9 11 9 17z" />
+      </>
+    ),
+  },
+  page: {
+    w: 128, h: 104,
+    body: (
+      <>
+        <rect className="ui-art__line ui-art__wash ui-art__mid-line" x="16" y="8" width="96" height="88" rx="12" />
+        <rect className="ui-art__tint" x="30" y="22" width="40" height="30" rx="6" />
+        <rect className="ui-art__mid" x="78" y="22" width="22" height="6" rx="3" />
+        <rect className="ui-art__tint" x="78" y="34" width="16" height="6" rx="3" />
+        <rect className="ui-art__tint" x="30" y="62" width="68" height="6" rx="3" />
+        <rect className="ui-art__soft" x="30" y="76" width="44" height="6" rx="3" />
+        <circle className="ui-art__solid" cx="104" cy="82" r="14" />
+        <path className="ui-art__plus" d="M98 82h12M104 76v12" />
+      </>
+    ),
+  },
+  plug: {
+    w: 132, h: 96,
+    body: (
+      <>
+        <rect className="ui-art__line ui-art__soft ui-art__mid-line" x="14" y="30" width="46" height="36" rx="10" />
+        <rect className="ui-art__line ui-art__paper ui-art__mid-line ui-art__dashed" x="72" y="30" width="46" height="36" rx="10" />
+        <path className="ui-art__plus ui-art__mid-line ui-art__dots" d="M60 48h12" />
+        <path className="ui-art__solid" d="M37 40 29 48l8 10 8-10z" />
+        <circle className="ui-art__muted" cx="95" cy="48" r="6" />
+      </>
+    ),
+  },
+  price: {
+    w: 140, h: 100,
+    body: (
+      <>
+        <rect className="ui-art__muted-soft" x="8" y="44" width="124" height="8" rx="4" />
+        <rect className="ui-art__tint" x="26" y="34" width="56" height="28" rx="10" />
+        <rect className="ui-art__solid" x="52" y="28" width="3" height="40" rx="1.5" />
+        <circle className="ui-art__ink" cx="108" cy="48" r="11" />
+        <circle className="ui-art__line ui-art__thin ui-art__paper-line" cx="108" cy="48" r="11" />
+      </>
+    ),
+  },
+};
+
+export interface SpotArtProps {
+  name: SpotArtName;
+  /** Makes the picture an image with this name, for the rare place where it is the only thing that says it. */
+  title?: string;
+  /** The width in px: the height follows. Default: the picture's own size. */
+  width?: number;
+  className?: string;
+}
+
+export function SpotArt({ name, title, width, className }: SpotArtProps) {
+  const art = ART[name];
+  if (!art) return null; // a name that got past the type (plain JS): draw nothing, not a broken box
+  return (
+    <svg className={cx("ui-art", className)} data-art={name} viewBox={`0 0 ${art.w} ${art.h}`} width={width ?? art.w} fill="none"
+      {...(title ? { role: "img", "aria-label": title } : { "aria-hidden": true })}>
+      {art.body}
+    </svg>
+  );
+}