@gemboss/ui 0.41.0 → 0.43.0

package/src/portal.tsx

@@ -93,13 +93,15 @@ export type LeaderRow = {
 
 const MEDALS = ["🥇", "🥈", "🥉"];
 const PODIUM_SLOT = ["gb-podium-slot--1", "gb-podium-slot--2", "gb-podium-slot--3"];
+/** What screen readers hear before a name ("Rank 1"); pass `rankLabel` in the page's language ("Hạng 1", "第 1 名"). */
+const RANK_LABEL = (rank: number) => `Rank ${rank}`;
 
 /**
  * A ranked list of people. Rows are links when they carry `href`; `unit` is read after the count by
  * screen readers ("163 votes") and can be shown with `showUnit`. Empty → nothing (a "top" list of
  * zeros looks dead; GemCommunity hides it the same way).
  */
-export function Leaderboard({ title, label, caption, rows, unit, showUnit = false, viewAll, as: L = "a", className, headingLevel = 2, id, currentLabel = "you" }: {
+export function Leaderboard({ title, label, caption, rows, unit, showUnit = false, viewAll, as: L = "a", className, headingLevel = 2, id, currentLabel = "you", rankLabel = RANK_LABEL }: {
   /** The visible heading. Leave it out on a page whose own <h1> already names the board; give `label`. */
   title?: React.ReactNode; label?: string; caption?: React.ReactNode; rows: LeaderRow[]; unit?: string; showUnit?: boolean;
   viewAll?: { href: string; label: React.ReactNode }; as?: LinkLike; className?: string; headingLevel?: 2 | 3;
@@ -107,6 +109,8 @@ export function Leaderboard({ title, label, caption, rows, unit, showUnit = fals
   id?: string;
   /** Read by screen readers after the viewer's own name ("Minh, you"). "" when the name already says it on screen. */
   currentLabel?: string;
+  /** Read by screen readers before each name: `(n) => "Rank " + n` unless given. */
+  rankLabel?: (rank: number) => string;
 }) {
   if (!rows.length) return null;
   const H = `h${headingLevel}` as "h2" | "h3";
@@ -125,7 +129,7 @@ export function Leaderboard({ title, label, caption, rows, unit, showUnit = fals
           const inner = (
             <>
               <span className={cx("gb-leaderboard-rank", !MEDALS[i] && "is-number")}>
-                <span aria-hidden="true">{MEDALS[i] ?? i + 1}</span><span className="gb-sr-only">Rank {i + 1}: </span>
+                <span aria-hidden="true">{MEDALS[i] ?? i + 1}</span><span className="gb-sr-only">{rankLabel(i + 1)}: </span>
               </span>
               <Avatar name={r.name} src={r.avatar} />
               <span className="gb-leaderboard-name">{r.name}{r.current && currentLabel ? <span className="gb-sr-only">, {currentLabel}</span> : null}</span>
@@ -147,17 +151,19 @@ export function Leaderboard({ title, label, caption, rows, unit, showUnit = fals
   );
 }
 
-/** The first three as a podium, drawn second · first · third. */
-export function Podium({ rows, unit, as: L = "a", className }: { rows: LeaderRow[]; unit?: string; as?: LinkLike; className?: string }) {
+/** The first three as a podium, drawn second · first · third. `label` names the list for screen readers ("Top three"). */
+export function Podium({ rows, unit, as: L = "a", className, label = "Top three", rankLabel = RANK_LABEL }: {
+  rows: LeaderRow[]; unit?: string; as?: LinkLike; className?: string; label?: string; rankLabel?: (rank: number) => string;
+}) {
   if (!rows.length) return null;
   return (
-    <ol className={cx("gb-podium", className)} aria-label="Top three">
+    <ol className={cx("gb-podium", className)} aria-label={label}>
       {[1, 0, 2].map((idx) => {
         const r = rows[idx];
         if (!r) return <li key={idx} className="gb-podium-slot is-empty" aria-hidden="true" />;
         const body = (
           <>
-            <span className="gb-podium-medal"><span aria-hidden="true">{MEDALS[idx]}</span><span className="gb-sr-only">Rank {idx + 1}: </span></span>
+            <span className="gb-podium-medal"><span aria-hidden="true">{MEDALS[idx]}</span><span className="gb-sr-only">{rankLabel(idx + 1)}: </span></span>
             <Avatar name={r.name} src={r.avatar} size={56} />
             <span className="gb-podium-name">{r.name}</span>
             <span className="gb-podium-value">{r.value}{unit ? <span className="gb-podium-unit"> {unit}</span> : null}</span>

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-data.ts

@@ -23,6 +23,19 @@ const KEYS = new Map<string, string>(REACTION_GROUPS.flatMap(([, items]) => item
 /** The quick pair shown on hover next to "Add reaction" (GemCare's 👍 Like and ✅ Done). */
 export const QUICK_REACTIONS: readonly string[] = ["👍", "✅"];
 
+/** The picker's "Frequently used" row holds this many. */
+export const FREQUENT_MAX = 9;
+/** What fills "Frequently used" until this browser has used that many (Chris 20/10/2026: GemCare's row always held nine, and a
+ *  row of one or two for a new person read as empty). The quick pair first, then the reactions a team reaches for most. */
+export const SUGGESTED_REACTIONS: readonly string[] = ["👍", "✅", "🙏", "🎉", "😂", "❤️", "👀", "🙌", "🔥"];
+
+/** "Frequently used": what this browser used, most recent first, then the suggestions it has not used, up to FREQUENT_MAX. */
+export function frequentReactions(recent: readonly string[]): string[] {
+  const out: string[] = [];
+  for (const e of [...recent, ...SUGGESTED_REACTIONS]) if (isReactionEmoji(e) && !out.includes(e) && out.length < FREQUENT_MAX) out.push(e);
+  return out;
+}
+
 export function isReactionEmoji(e: unknown): e is string {
   return typeof e === "string" && KEYS.has(e);
 }

package/src/reactions.tsx

@@ -10,9 +10,11 @@
  *   count does not), the viewer's own outlined and filled (not only coloured: two chips that differ only in hue look the
  *   same to a colour-blind reader). No chips, no row.
  * - "Add reaction": opens the picker IN FLOW under the row (not floating: a layer in a scrolling column has to fight the
- *   bottom edge; a row in flow is scrolled to by the browser). Frequently used first (this browser's, else the quick
- *   pair), then the groups; search by words; arrows move in the grid, Enter in the search picks the first, Escape closes
+ *   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.
@@ -20,7 +22,7 @@
 import "./reactions.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
 import React, { useEffect, useId, useRef, useState } from "react";
 import { Icon } from "./icons";
-import { QUICK_REACTIONS, REACTION_GROUPS, reactionLabel, reactionWords, searchReactions, type Reaction } from "./reactions-data";
+import { frequentReactions, REACTION_GROUPS, reactionLabel, reactionWords, searchReactions, type Reaction } from "./reactions-data";
 
 const RECENT_KEY = "gemboss-ui:reactions-recent";
 const RECENT_MAX = 9;
@@ -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[]>(QUICK_REACTIONS);
+  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(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>
+  );
+}