@gemboss/ui 0.47.0 → 0.50.0

package/src/stage.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+/**
+ * Stage (0.49, 22/10/2026): the ONE way the app draws a picture, taken from gemboss.ai's mega menu, where each panel has one
+ * visual: a night-blue stage lit with iris from one corner, a faint dot grid fading out, and on it either glass tiles (one
+ * picked, white and glowing) or white windows lifted off the stage showing a real page. Chris (22/10): pictures clean, colours
+ * in harmony, easy to read, the website's look; the design language lets an illustration light itself, and this is that
+ * light, named once here instead of a hex per picture.
+ *
+ *   <Stage>                            the lit panel (aria-hidden: a picture says nothing a reader needs)
+ *     <StageWindow title="…" image />  a white window with its three dots, a title and a real screenshot (or bare lines)
+ *     <StageTile on>…</StageTile>      a glass tile; `on` is the one picked
+ *     <StageBubble me>…</StageBubble>  a line of chat: the assistant's in glass, the person's in white
+ */
+import "./stage.css";
+import type { CSSProperties, ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+
+/** `decorative={false}`: the stage holds words a reader needs (a panel beside a question), so it is not hidden from them. */
+export function Stage({ children, className, style, decorative = true }: {
+  children?: ReactNode; className?: string; style?: CSSProperties; decorative?: boolean;
+}) {
+  return <div className={cx("ui-stage", className)} style={style} aria-hidden={decorative ? "true" : undefined}>{children}</div>;
+}
+
+/** A white window lifted off the stage: three dots, an optional title, then a real screenshot or two lines of text. */
+export function StageWindow({ title, image, alt = "", children, className, style }: {
+  title?: string; image?: string; /** For a stage that is not decorative: what the screenshot shows. */ alt?: string;
+  children?: ReactNode; className?: string; style?: CSSProperties;
+}) {
+  return (
+    <div className={cx("ui-stage__win", className)} style={style}>
+      <div className="ui-stage__bar"><i /><i /><i />{title ? <b>{title}</b> : null}</div>
+      {image ? <img className="ui-stage__shot" src={image} alt={alt} loading="lazy" /> : null}
+      {children ? <div className="ui-stage__body">{children}</div> : null}
+    </div>
+  );
+}
+
+export function StageTile({ on, children }: { on?: boolean; children?: ReactNode }) {
+  return <div className={cx("ui-stage__tile", on && "ui-stage__tile--on")}>{children}</div>;
+}
+
+export function StageBubble({ me, children }: { me?: boolean; children?: ReactNode }) {
+  return <div className={cx("ui-stage__bubble", me && "ui-stage__bubble--me")}>{children}</div>;
+}
+
+/** A line of placeholder text inside a window (`short` is half as long). */
+export function StageLine({ short, strong }: { short?: boolean; strong?: boolean }) {
+  return <span className={cx("ui-stage__line", short && "ui-stage__line--short", strong && "ui-stage__line--strong")} />;
+}

package/src/starting-point.css

@@ -0,0 +1 @@
+.ui-start{display:flex;flex-direction:column;gap:20px}.ui-start__head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.ui-start__title{margin:0;font-size:var(--gemboss-fs-h2, 20px);font-weight:600;color:var(--ui-text)}.ui-start__sub{margin:0;font-size:var(--gemboss-fs-body, 14px);color:var(--ui-text-muted)}.ui-start__doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}.ui-start__door{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--ui-border);border-radius:var(--gemboss-radius-xl, 16px);background:var(--ui-surface)}.ui-start__name{margin:4px 0 0;font-size:var(--gemboss-fs-h3, 16px);font-weight:600;color:var(--ui-text)}.ui-start__line{margin:0;flex:1 1 auto;font-size:var(--gemboss-fs-body, 14px);line-height:1.5;color:var(--ui-text-muted)}.ui-start__go{align-self:stretch;margin-top:8px}.ui-start__stage{box-sizing:border-box;height:152px}.ui-start__stage--fan{justify-content:flex-end;align-items:center;padding-bottom:0}.ui-start__stage .ui-start__win{position:absolute;top:24px;bottom:-12px;width:58%}.ui-start__stage .ui-start__win--front{left:28%}.ui-start__stage .ui-start__win--back{left:12%;transform:rotate(-6deg);transform-origin:50% 100%;opacity:.85}.ui-start__stage .ui-start__win .ui-stage__shot{flex:1 1 auto;min-height:0;object-fit:cover;object-position:50% 0}.ui-start__slot{display:block;margin:8px;padding:8px;text-align:center;border:1px dashed var(--gemboss-divider, #e5e7ea);border-radius:var(--gemboss-radius-sm, 6px);font-size:var(--gemboss-fs-micro, 11px);color:var(--gemboss-text-muted, #686b71)}

package/src/starting-point.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+/**
+ * StartingPoint (0.49, 22/10/2026): "Choose your starting point". The same three doors wherever something new is made: ask the
+ * assistant, start from a template, start blank. Learned from Replo, where Plans, Tasks, Skills and reports all open this way, each
+ * door with a small picture of what happens behind it (the chat door shows a two-line exchange). One shape everywhere teaches the
+ * person once.
+ *
+ * At most three doors (Chris's rule for any choice). Each picture is a Stage (stage.tsx): the website's mega-menu visual, a lit
+ * night-blue panel with glass and white windows. A door may pass real screenshots (`images`): the template door fans two of them,
+ * the chat door shows the page it is about to draw.
+ */
+import "./starting-point.css";
+import type { ReactNode } from "react";
+import { Stage, StageBubble, StageLine, StageTile, StageWindow } from "./stage";
+
+export type StartingArt = "chat" | "template" | "blank";
+
+export interface StartingDoor {
+  key: string;
+  art: StartingArt;
+  title: string;
+  /** One line on what happens behind the door. */
+  line: string;
+  /** The button's words ("Ask Gem", "Browse templates", "Start blank"). */
+  action: string;
+  onClick: () => void;
+  /** The chat door's picture: `ask` is the first line, `answer` the second. By default Gem asks and the person answers (a door
+   *  Gem builds behind); `from: "me"` when the person asks and Gem answers. `step` is the tile under both, what happens next
+   *  (default "Drafting"). */
+  chat?: { ask: string; answer: string; from?: "gem" | "me"; step?: string };
+  /** Real screenshots for the picture (the template door shows two, the chat door one). Without them, windows draw lines. */
+  images?: readonly string[];
+  busy?: boolean;
+  disabled?: boolean;
+}
+
+function Art({ door }: { door: StartingDoor }) {
+  const [first, second] = door.images ?? [];
+  if (door.art === "chat") {
+    return (
+      <Stage className="ui-start__stage">
+        <StageBubble me={door.chat?.from === "me"}>{door.chat?.ask ?? "What are we making?"}</StageBubble>
+        <StageBubble me={door.chat?.from !== "me"}>{door.chat?.answer ?? "…"}</StageBubble>
+        <StageTile on><em>01</em>{door.chat?.step ?? (first ? "Drafting your page" : "Drafting")}</StageTile>
+      </Stage>
+    );
+  }
+  if (door.art === "template") {
+    return (
+      <Stage className="ui-start__stage ui-start__stage--fan">
+        <StageWindow className="ui-start__win ui-start__win--back" image={second}>{second ? null : <><StageLine strong /><StageLine /><StageLine short /></>}</StageWindow>
+        <StageWindow className="ui-start__win ui-start__win--front" image={first}>{first ? null : <><StageLine strong /><StageLine /><StageLine short /></>}</StageWindow>
+      </Stage>
+    );
+  }
+  return (
+    <Stage className="ui-start__stage ui-start__stage--fan">
+      <StageWindow className="ui-start__win ui-start__win--front" title="Untitled page">
+        <span className="ui-start__slot">+ Add a section</span>
+      </StageWindow>
+    </Stage>
+  );
+}
+
+export function StartingPoint({ title = "Choose your starting point", sub, doors }: {
+  title?: ReactNode;
+  sub?: ReactNode;
+  /** One to three doors, in the order a person should consider them. */
+  doors: readonly StartingDoor[];
+}) {
+  return (
+    <section className="ui-start">
+      <div className="ui-start__head">
+        <h2 className="ui-start__title">{title}</h2>
+        {sub ? <p className="ui-start__sub">{sub}</p> : null}
+      </div>
+      <div className="ui-start__doors">
+        {doors.slice(0, 3).map((door) => (
+          <div key={door.key} className="ui-start__door">
+            <Art door={door} />
+            <h3 className="ui-start__name">{door.title}</h3>
+            <p className="ui-start__line">{door.line}</p>
+            <button type="button" className="ui-btn ui-btn--primary ui-start__go" onClick={door.onClick}
+              disabled={door.disabled || door.busy} aria-busy={door.busy || undefined}>
+              {door.action}
+            </button>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/status-list.css

@@ -0,0 +1 @@
+.ui-statuslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--ui-space-2) var(--ui-space-4);margin:0;padding:0;list-style:none}.ui-statuslist__item{display:flex;align-items:baseline;gap:var(--ui-space-2);min-width:0;font-size:var(--ui-fs-caption);line-height:20px;color:var(--ui-text-muted)}.ui-statuslist__dot{flex:none;align-self:center;width:8px;height:8px;box-sizing:border-box;border:1.5px solid;border-radius:50%}:is(.ui-statuslist__item--ok,.ui-statuslist__item--warning,.ui-statuslist__item--critical)>.ui-statuslist__dot{background:currentColor}.ui-statuslist__item--ok>.ui-statuslist__dot{color:var(--gemboss-success)}.ui-statuslist__item--warning>.ui-statuslist__dot{color:var(--gemboss-warning)}.ui-statuslist__item--critical>.ui-statuslist__dot{color:var(--gemboss-danger)}.ui-statuslist__label{flex:none;font-weight:650;color:var(--ui-text-strong)}.ui-statuslist__item--muted>.ui-statuslist__label{color:var(--ui-text-muted)}.ui-statuslist__text{min-width:0;overflow-wrap:anywhere}.ui-statuslist__text>a{color:inherit;text-underline-offset:2px}.ui-statuslist__text>a:hover{color:var(--ui-text-strong)}

package/src/status-list.tsx

@@ -0,0 +1,65 @@
+/**
+ * Status list — @gemboss/ui, unreleased (after 0.49.0). A quiet strip of system health: GemPress's project home (redesign approved
+ * by Chris 23/10/2026) ends with "Backups: nightly · last 22 Oct", "Site rebuild: on publish", "Webhooks: delivering", one line
+ * each. GemPress drew it with its own CSS (`gp-sys`); every service has the same few things to say about itself (backups, hooks,
+ * keys, the assistant), so the strip lives here.
+ *
+ * The contract it draws, which every surface keeps: QUIET WHEN FINE. Each item is a dot, a name and one muted sentence; the dot is
+ * green, amber or red (`ok`, `warning`, `critical`) or an empty ring (`muted`: off, not applicable), and the sentence says what the
+ * colour means, so colour never stands alone. An item with `href` makes its sentence a link to where it is fixed. A banner is for
+ * when a person must act: something that needs a person today goes in a `ui-banner` above the page, not in this strip.
+ *
+ * Presentational and server-renderable: no state, no effect; the tones are the kit's success / warning / danger tokens, so the
+ * dark palette follows. `status-list.css` is its own entry; a plain-HTML surface links `@gemboss/ui/status-list.css` and writes
+ * the classes listed at the top of that file.
+ */
+import "./status-list.css";
+import React, { type ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+
+export type StatusListTone = "ok" | "warning" | "critical" | "muted";
+/** Each tone's class, written whole (never built from the tone), so a search for a class finds where it is drawn. */
+const ITEM_CLASS: Readonly<Record<StatusListTone, string>> = {
+  ok: "ui-statuslist__item ui-statuslist__item--ok",
+  warning: "ui-statuslist__item ui-statuslist__item--warning",
+  critical: "ui-statuslist__item ui-statuslist__item--critical",
+  muted: "ui-statuslist__item ui-statuslist__item--muted",
+};
+
+export interface StatusListItem {
+  key: string;
+  /** The thing: "Backups". */
+  label: ReactNode;
+  /** One sentence about it: "nightly · last 22 Oct". */
+  text: ReactNode;
+  tone: StatusListTone;
+  /** Where it is fixed or read: the sentence becomes a link. */
+  href?: string;
+}
+
+export interface StatusListProps {
+  items: readonly StatusListItem[];
+  /** The list's name for a screen reader, when no heading names it ("System"). */
+  label?: string;
+  className?: string;
+}
+
+export function StatusList({ items, label, className }: StatusListProps) {
+  if (!items.length) return null;
+  return (
+    <ul className={cx("ui-statuslist", className)} aria-label={label}>
+      {items.map((it) => {
+        // A tone that is not one of the four (plain JS, a typo) is muted: never a colour the sentence does not explain.
+        const itemClass = Object.prototype.hasOwnProperty.call(ITEM_CLASS, it.tone) ? ITEM_CLASS[it.tone] : ITEM_CLASS.muted;
+        return (
+          <li key={it.key} className={itemClass}>
+            <span className="ui-statuslist__dot" aria-hidden="true" />
+            <b className="ui-statuslist__label">{it.label}</b>
+            <span className="ui-statuslist__text">{it.href ? <a href={it.href}>{it.text}</a> : it.text}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/status-matrix.css

@@ -0,0 +1 @@
+.ui-matrix__caption{caption-side:bottom;padding:var(--ui-space-2) var(--ui-space-3);border-top:1px solid var(--ui-border);text-align:left;font-size:var(--ui-fs-caption);line-height:16px;color:var(--ui-text-muted)}.ui-matrix th.ui-matrix__row{font-weight:550;color:var(--ui-text-strong);white-space:normal;overflow-wrap:anywhere}.ui-matrix__row>a{display:inline-flex;align-items:center;min-height:24px;color:inherit;text-underline-offset:2px}.ui-matrix__cell{color:var(--ui-text-muted)}.ui-matrix__live{font-weight:650;color:var(--ui-text-strong)}.ui-matrix__cell--live .ui-matrix__live{color:var(--gemboss-success-strong)}.ui-matrix__cell--draft .ui-matrix__live{color:var(--gemboss-warning)}.ui-matrix__sub{display:block;margin-top:2px;font-size:var(--ui-fs-caption);line-height:16px}

package/src/status-matrix.tsx

@@ -0,0 +1,131 @@
+/**
+ * Status matrix — @gemboss/ui, unreleased (after 0.49.0). Rows × columns of status cells: GemPress's language map (redesign approved
+ * by Chris 23/10/2026), one row per collection, one column per language, each cell "how many are live of how many there are, and
+ * what waits". GemPress drew it with its own classes (`gp-cov`); GemNews and GemCommunity translations will want the same map, and
+ * nothing in it is about languages: any "N things × M targets, each partly done" fits (stores × channels, pages × locales).
+ *
+ * The contract it draws, which every surface keeps:
+ * - a cell says "**live** / total", and under it what waits: "5 draft · 2 changed" (and "N missing" when the surface counts them);
+ * - its tone is ALL LIVE (green number) or HAS DRAFTS (amber number), nothing else: a cell part live with nothing waiting is plain.
+ *   Colour never stands alone, there is always the number and the words (`statusMatrixTone` is the rule, pure, for a plain page);
+ * - a cell with nothing to count (`null`, absent, or a row whose `total` is 0) is "—", never "0 / 0";
+ * - each row's name is its header (`th scope="row"`), a link when it has `href`; the column heads are the surface's words.
+ *
+ * Built on the kit table (`ui-table-wrap` + `ui-table`, `is-num` for the numbers, all in the core): this entry only adds the cells,
+ * the row header and the caption. Presentational and server-renderable: no state, no effect; the colours are tokens, so the dark
+ * palette follows. `status-matrix.css` is its own entry; a plain-HTML surface links `@gemboss/ui/status-matrix.css` and writes the
+ * classes listed at the top of that file.
+ */
+import "./status-matrix.css";
+import React, { type ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+const whole = (n: unknown) => (typeof n === "number" && Number.isFinite(n) ? Math.max(Math.round(n), 0) : 0);
+
+/** One cell: how many are live, and what waits. */
+export interface StatusMatrixCell {
+  live: number;
+  draft: number;
+  /** Live, but its source changed since (it needs another look). */
+  changed?: number;
+  /** Not started. Printed only when the surface counts it. */
+  missing?: number;
+}
+
+export interface StatusMatrixColumn {
+  key: string;
+  label: ReactNode;
+}
+
+export interface StatusMatrixRow {
+  key: string;
+  label: ReactNode;
+  href?: string;
+  /** How many there are in the row; every cell counts against it. */
+  total: number;
+  /** By column key. `null` or absent: nothing to count in that column ("—"). */
+  cells: Readonly<Record<string, StatusMatrixCell | null | undefined>>;
+}
+
+export interface StatusMatrixLabels {
+  draft?: (n: string) => string;
+  changed?: (n: string) => string;
+  missing?: (n: string) => string;
+  /** A cell with nothing to count (default "—"). */
+  none?: ReactNode;
+}
+
+export interface StatusMatrixProps {
+  columns: readonly StatusMatrixColumn[];
+  rows: readonly StatusMatrixRow[];
+  /** What the numbers mean, under the table: "Live / published. Nothing goes live until a person approves it." */
+  caption?: ReactNode;
+  /** The heading over the rows' names ("Collection"). */
+  rowHeading?: ReactNode;
+  /** When set, a column after the names with each row's total under this heading ("EN": the source has them all). */
+  totalHeading?: ReactNode;
+  /** A number as the surface writes it ("1,204"). Default `String`. */
+  format?: (n: number) => string;
+  labels?: StatusMatrixLabels;
+  className?: string;
+}
+
+export type StatusMatrixTone = "live" | "draft" | null;
+
+/** A cell's tone: every one live, or something waiting (drafts or changed), or neither. Nothing to count has no tone. */
+export function statusMatrixTone(cell: StatusMatrixCell | null | undefined, total: number): StatusMatrixTone {
+  const t = whole(total);
+  if (!cell || !t) return null;
+  if (whole(cell.live) >= t) return "live";
+  return whole(cell.draft) + whole(cell.changed) > 0 ? "draft" : null;
+}
+
+export function StatusMatrix({ columns, rows, caption, rowHeading, totalHeading, format = String, labels, className }: StatusMatrixProps) {
+  if (!rows.length) return null; // the surface says why the map is empty; an empty grid of headers says nothing
+  const words = {
+    draft: labels?.draft ?? ((n: string) => `${n} draft`),
+    changed: labels?.changed ?? ((n: string) => `${n} changed`),
+    missing: labels?.missing ?? ((n: string) => `${n} missing`),
+  };
+  const none = labels?.none ?? "—";
+  const cell = (row: StatusMatrixRow, col: StatusMatrixColumn) => {
+    const c = row.cells[col.key];
+    const total = whole(row.total);
+    if (!c || !total) return <td key={col.key} className="is-num ui-matrix__cell">{none}</td>;
+    const tone = statusMatrixTone(c, total);
+    const waits = [
+      whole(c.draft) ? words.draft(format(whole(c.draft))) : "",
+      whole(c.changed) ? words.changed(format(whole(c.changed))) : "",
+      whole(c.missing) ? words.missing(format(whole(c.missing))) : "",
+    ].filter(Boolean);
+    return (
+      <td key={col.key} className={cx("is-num ui-matrix__cell", tone === "live" && "ui-matrix__cell--live", tone === "draft" && "ui-matrix__cell--draft")}>
+        <b className="ui-matrix__live">{format(Math.min(whole(c.live), total))}</b>{` / ${format(total)}`}
+        {waits.length ? <span className="ui-matrix__sub">{waits.join(" · ")}</span> : null}
+      </td>
+    );
+  };
+  return (
+    <div className="ui-table-wrap">
+      <table className={cx("ui-table ui-matrix", className)}>
+        {caption ? <caption className="ui-matrix__caption">{caption}</caption> : null}
+        <thead>
+          <tr>
+            <th scope="col">{rowHeading}</th>
+            {totalHeading ? <th scope="col" className="is-num">{totalHeading}</th> : null}
+            {columns.map((c) => <th scope="col" className="is-num" key={c.key}>{c.label}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.key}>
+              <th scope="row" className="ui-matrix__row">{r.href ? <a href={r.href}>{r.label}</a> : r.label}</th>
+              {totalHeading ? <td className="is-num">{format(whole(r.total))}</td> : null}
+              {columns.map((c) => cell(r, c))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/team-chat.css

@@ -1 +1 @@
-.gb-tc{container:gb-tc / inline-size;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);height:100%;min-height:0;overflow:hidden;box-sizing:border-box;background:var(--gemboss-surface);color:var(--gemboss-text);font-size:var(--gemboss-fs-body)}.gb-tc>.gb-tc-rail{grid-column:1;grid-row:1}.gb-tc>.gb-tc-main{grid-column:2;grid-row:1}.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people{grid-column:3;grid-row:1;height:auto}.gb-tc-main,.gb-tc-rail,.gb-tc-thread,.gb-tc-people{display:flex;flex-direction:column;min-width:0;min-height:0}.gb-tc-main{position:relative}.gb-tc-main>*,.gb-tc-rail>*,.gb-tc-thread>*,.gb-tc-people>*{flex:none}.gb-tc-main>.gb-tc-body,.gb-tc-thread>.gb-tc-body,.gb-tc-rail>.gb-tc-rail__scroll,.gb-tc-people>.gb-tc-people__body{flex:1 1 0;min-height:0}.gb-tc-body,.gb-tc-composer,.gb-tc-rail__list,.gb-tc-people__list{grid-template-columns:minmax(0,1fr)}.gb-tc-scrim{display:none}.gb-tc :is(.gb-tc-thread,.gb-tc-people,.gb-tc-scrim,.gb-tc-replying,.gb-tc-jump,.gb-tc-composer__files,.gb-tc-composer__picker)[hidden]{display:none}.gb-tc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gb-tc-rail{width:var(--gb-tc-rail-w, 240px);box-sizing:border-box;border-right:1px solid var(--gemboss-divider);background:var(--gemboss-rail-bg)}.gb-tc-rail__head,.gb-tc-head,.gb-tc-panel-head{display:flex;align-items:center;gap:8px;min-height:56px;min-width:0;box-sizing:border-box;border-bottom:1px solid var(--gemboss-divider)}.gb-tc-rail__head{justify-content:space-between;padding:8px 8px 8px 16px}.gb-tc-rail__title,.gb-tc-panel-head__title{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-h3);font-weight:650;line-height:1.3;color:var(--gemboss-text-strong)}.gb-tc-rail__actions,.gb-tc-head__actions,.gb-tc-panel-head__actions{flex:none;display:flex;align-items:center;gap:4px}.gb-tc-rail__scroll{overflow-y:auto;overscroll-behavior:contain;padding:8px 8px 16px}.gb-tc-rail__section+.gb-tc-rail__section{margin-top:16px}.gb-tc-rail__heading,.gb-tc-people__heading{margin:0 8px 4px;font-size:var(--gemboss-fs-caption);font-weight:650;line-height:20px;color:var(--gemboss-text-muted)}.gb-tc-rail__list,.gb-tc-people__list{list-style:none;margin:0;padding:0;display:grid;gap:1px}.gb-tc-channel{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:32px;padding:0 8px;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-md);background:none;cursor:pointer;text-align:left;text-decoration:none;font:inherit;font-size:var(--gemboss-fs-body);color:var(--gemboss-text-muted)}.gb-tc-channel:hover{background:var(--gemboss-hover);color:var(--gemboss-text-strong)}.gb-tc-channel:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-channel--unread{color:var(--gemboss-text-strong);font-weight:650}.gb-tc-channel[aria-current]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong);font-weight:650}.gb-tc-channel__glyph{position:relative;flex:none;display:inline-grid;place-items:center;width:20px;height:20px}.gb-tc-channel__glyph>.gb-tc-presence{right:-3px;bottom:-2px;width:7px;height:7px;border-color:var(--gemboss-rail-bg)}.gb-avatar.gb-tc-channel__av{width:20px;height:20px;font-size:8px}.gb-tc-channel__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-badge{flex:none;min-width:20px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:var(--gemboss-radius-full);background:var(--gemboss-accent);color:var(--gemboss-on-primary);font-size:var(--gemboss-fs-micro);font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}.gb-tc-badge--mention{background:var(--gemboss-warning-soft);color:var(--gemboss-warning);box-shadow:inset 0 0 0 1px var(--gemboss-warning-border)}.gb-tc-head{padding:8px 12px 8px 16px}.gb-tc .gb-tc-head__back{display:none}.gb-tc-head__text,.gb-tc-panel-head__text{flex:1 1 auto;min-width:0}.gb-tc-head__title{margin:0;display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--gemboss-fs-h3);font-weight:650;line-height:1.3;color:var(--gemboss-text-strong)}.gb-tc-head__glyph{flex:none;display:inline-flex;color:var(--gemboss-text-muted)}.gb-avatar.gb-tc-head__av{flex:none;margin-right:2px}.gb-tc-head__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-head__sub,.gb-tc-panel-head__sub{margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-caption);line-height:16px;color:var(--gemboss-text-muted)}.gb-tc .gb-tc-head__members{gap:6px;padding:0 8px}.gb-tc .gb-tc-head__members[aria-expanded=true]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}.gb-tc-head__count{font-variant-numeric:tabular-nums}.gb-tc-body{position:relative;display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0}.gb-tc-log{container:gb-tc-log / inline-size;min-height:0;overflow-y:auto;overscroll-behavior:contain}.gb-tc-log:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-list{list-style:none;margin:0;padding:8px 0 16px;display:flex;flex-direction:column}.gb-tc-list>*{flex-shrink:0}.gb-tc-older,.gb-tc-empty,.gb-tc-status{display:flex;justify-content:center;padding:8px 16px;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption)}.gb-tc-empty{padding-block:32px;font-size:var(--gemboss-fs-body)}.gb-tc-status{justify-content:flex-start;padding-left:60px}.gb-tc-day{position:sticky;top:0;z-index:1;display:flex;justify-content:center;margin:4px 0 0;padding:4px 0;background:var(--gemboss-surface);pointer-events:none}.gb-tc-day__label{padding:1px 12px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-full);background:var(--gemboss-surface);box-shadow:var(--gemboss-shadow-resting);font-size:var(--gemboss-fs-caption);font-weight:600;line-height:20px;color:var(--gemboss-text)}.gb-tc-new{display:flex;align-items:center;gap:8px;margin:6px 16px;color:var(--gemboss-accent)}.gb-tc-new:before,.gb-tc-new:after{content:"";flex:1;height:1px;background:currentColor}.gb-tc-new__label{font-size:var(--gemboss-fs-caption);font-weight:650;line-height:16px}.gb-tc-msg{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;align-items:start;padding:8px 16px 4px}.gb-tc-msg:focus{outline:none}.gb-tc-msg:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-msg--grouped{padding-block:2px}.gb-tc-msg>.gb-avatar,.gb-tc-msg>.gb-tc-msg__hover-time{grid-column:1;grid-row:1}.gb-tc-msg>.gb-tc-msg__main{grid-column:2;grid-row:1;min-width:0}.gb-avatar.gb-tc-msg__av{width:36px;height:36px;font-size:13px;margin-top:2px}.gb-tc-msg:hover,.gb-tc-msg--active,.gb-tc-msg--editing{background:var(--gemboss-divider-soft)}.gb-tc-msg:has(:focus-visible){background:var(--gemboss-divider-soft)}.gb-tc-msg__hover-time{justify-self:end;opacity:0;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:var(--gemboss-fs-micro);line-height:20px;color:var(--gemboss-text-muted)}.gb-tc-msg:hover>.gb-tc-msg__hover-time,.gb-tc-msg:focus-within>.gb-tc-msg__hover-time{opacity:1}.gb-tc-msg__who{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0;line-height:20px}.gb-tc-msg__name{font-weight:650;color:var(--gemboss-text-strong);overflow-wrap:anywhere}.gb-tc-msg__time{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);font-variant-numeric:tabular-nums}.gb-tc-msg__body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:20px;color:var(--gemboss-text)}.gb-tc-msg__edited{margin-left:4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);white-space:nowrap}.gb-tc-msg__status{margin:2px 0 0;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-msg--failed .gb-tc-msg__status{color:var(--gemboss-danger)}.gb-tc-msg--sending>.gb-tc-msg__main{opacity:.6}.gb-tc-msg__files,.gb-tc-msg__extra{margin-top:4px;min-width:0}.gb-tc-msg__editor{display:grid;gap:6px;margin-top:2px}.gb-tc-msg--mention{box-shadow:inset 2px 0 0 var(--gemboss-warning)}.gb-tc-msg--highlight{background:var(--gemboss-accent-soft)}.gb-tc-quote{display:flex;align-items:baseline;gap:6px;max-width:100%;min-height:28px;margin:0 0 4px;padding:4px 8px;box-sizing:border-box;border:0;border-left:2px solid var(--gemboss-divider);border-radius:0 var(--gemboss-radius-sm) var(--gemboss-radius-sm) 0;background:none;cursor:pointer;text-align:left;font:inherit;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-quote:hover{background:var(--gemboss-hover)}.gb-tc-quote:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:1px}.gb-tc-quote[aria-busy=true]{opacity:.55;cursor:progress}.gb-tc-quote__who{flex:none;font-weight:650;color:var(--gemboss-text)}.gb-tc-quote__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-msg .ui-reactions{margin-top:2px}.gb-tc-msg .ui-reaction-picker{margin:4px 0;max-width:calc(100cqi - 64px)}.gb-tc-threadprev{display:flex;align-items:center;gap:8px;max-width:100%;min-height:32px;margin-top:4px;padding:4px 8px 4px 4px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--gemboss-radius-md);background:none;cursor:pointer;text-align:left;font:inherit;font-size:var(--gemboss-fs-caption)}.gb-tc-threadprev:hover{border-color:var(--gemboss-divider);background:var(--gemboss-surface)}.gb-tc-threadprev:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:1px}.gb-tc-threadprev__faces{flex:none;display:flex;gap:2px}.gb-tc-threadprev__faces>.gb-avatar{width:22px;height:22px;font-size:9px;border-radius:var(--gemboss-radius-xs)}.gb-tc-threadprev__count{flex:none;font-weight:650;color:var(--gemboss-accent-strong)}.gb-tc-threadprev__last{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gemboss-text-muted)}.gb-tc-receipt{display:inline-flex;margin-left:6px;vertical-align:-2px;color:var(--gemboss-text-muted)}.gb-tc-receipt--all{color:var(--gemboss-success)}.gb-tc-receipt__tick{stroke:var(--gemboss-surface)}.gb-tc-acts{position:absolute;top:-14px;right:16px;z-index:2;display:flex;align-items:center;gap:0;padding:2px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-md);background:var(--gemboss-surface);box-shadow:var(--gemboss-shadow-raised);white-space:nowrap;opacity:0;pointer-events:none}.gb-tc-list>.gb-tc-msg:first-child>.gb-tc-acts{top:2px}.gb-tc-msg:hover>.gb-tc-acts,.gb-tc-msg--active>.gb-tc-acts,.gb-tc-acts:focus-within{opacity:1;pointer-events:auto}.gb-tc-act{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-sm);background:transparent;cursor:pointer;font:inherit;font-size:16px;line-height:1;color:var(--gemboss-text-muted)}.gb-tc-act:hover{background:var(--gemboss-hover);color:var(--gemboss-text-strong)}.gb-tc-act:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-act[aria-pressed=true],.gb-tc-act[aria-expanded=true]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}@container gb-tc-log (max-width: 560px){.gb-tc-act--quick{display:none}.gb-tc-acts{right:8px}.gb-tc-msg{padding-inline:12px}.gb-tc-status{padding-left:56px}}@media (hover: none){.gb-tc-msg:focus-within{background:var(--gemboss-divider-soft)}.gb-tc-msg:focus-within>.gb-tc-acts{opacity:1;pointer-events:auto}.gb-tc-act--quick{display:none}.gb-tc-acts{top:-22px}}.gb-tc-jump{position:absolute;right:16px;bottom:16px;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--gemboss-divider);border-radius:50%;background:var(--gemboss-surface);color:var(--gemboss-text-strong);box-shadow:var(--gemboss-shadow-raised);cursor:pointer}.gb-tc-jump[hidden]{display:none}.gb-tc-jump:hover{background:var(--gemboss-hover)}.gb-tc-jump:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:2px}.gb-tc-jump__n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 4px;box-sizing:border-box;border-radius:var(--gemboss-radius-full);background:var(--gemboss-accent);color:var(--gemboss-on-primary);font-size:var(--gemboss-fs-micro);font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}.gb-tc-composer{display:grid;gap:6px;min-width:0;padding:8px 16px 16px}.gb-tc-composer__box{position:relative;display:flex;align-items:flex-end;gap:4px;min-width:0;padding:4px;box-sizing:border-box;border:1px solid var(--gemboss-field-line);border-radius:var(--gemboss-radius-lg);background:var(--gemboss-field-bg)}.gb-tc-composer__box:hover{border-color:var(--gemboss-field-line-hover)}.gb-tc-composer__box:focus-within{border-color:var(--gemboss-field-line-active);box-shadow:0 0 0 1px var(--gemboss-field-line-active)}.gb-tc-composer__input{flex:1 1 auto;min-width:0;min-height:32px;max-height:40vh;margin:0;padding:6px 4px;box-sizing:border-box;border:0;background:transparent;resize:none;outline:none;field-sizing:content;font:inherit;font-size:var(--gemboss-fs-body);line-height:20px;color:var(--gemboss-field-ink)}.gb-tc-composer__input::placeholder{color:var(--gemboss-field-placeholder)}.gb-tc-composer__input:disabled{cursor:not-allowed}.gb-tc-composer__box>.ui-btn--icon{width:32px;height:32px}.gb-tc .gb-tc-composer__attach,.gb-tc .gb-tc-composer__emoji,.gb-tc .gb-tc-composer__send,.gb-tc .gb-tc-panel-head__close,.gb-tc .gb-tc-people__toggle{flex:none}.gb-tc .gb-tc-composer__send:disabled{opacity:.35}.gb-tc .gb-tc-composer__emoji[aria-expanded=true]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}.gb-tc-composer__emoji-pop{position:absolute;right:0;bottom:calc(100% + 6px);z-index:4}.gb-tc-composer__emoji-pop .ui-reaction-picker__body{max-height:min(300px,40vh)}.gb-tc-replying{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 2px 2px 8px;box-sizing:border-box;border-left:2px solid var(--gemboss-accent);border-radius:var(--gemboss-radius-sm);background:var(--gemboss-accent-soft)}.gb-tc-replying__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text)}.gb-tc-composer__files,.gb-tc-composer__picker{min-width:0}.gb-tc-composer__picker{max-height:240px;overflow-y:auto;overscroll-behavior:contain}.gb-tc-composer__also{justify-self:start}.gb-tc-composer__error{margin:0;font-size:var(--gemboss-fs-caption);color:var(--gemboss-danger)}.gb-tc-thread,.gb-tc-people{height:100%;box-sizing:border-box;border-left:1px solid var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text)}.gb-tc-thread:focus,.gb-tc-people:focus{outline:none}.gb-tc-panel-head{padding:8px 8px 8px 16px}.gb-tc-thread{width:var(--gb-tc-thread-w, 380px)}.gb-tc-thread__note{margin:8px 16px 0;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-thread__note--error{color:var(--gemboss-danger-strong, var(--gemboss-danger))}.gb-tc-thread__count{display:flex;align-items:center;gap:8px;margin:8px 16px 4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-thread__count:after{content:"";flex:1;border-top:1px solid var(--gemboss-divider)}.gb-tc-people{width:var(--gb-tc-people-w, 260px)}.gb-tc-people__body{overflow-y:auto;overscroll-behavior:contain;padding:8px 8px 16px}.gb-tc-people__section+.gb-tc-people__section{margin-top:16px}.gb-tc-person{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:40px;padding:4px 8px;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-md);background:none;text-align:left;text-decoration:none;font:inherit;color:inherit}:is(a,button).gb-tc-person{cursor:pointer}:is(a,button).gb-tc-person:hover{background:var(--gemboss-hover)}.gb-tc-person:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-person__av{position:relative;flex:none;display:inline-flex}.gb-tc-person__text{flex:1 1 auto;min-width:0;display:grid}.gb-tc-person__name,.gb-tc-person__sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-person__name{font-weight:550;line-height:20px;color:var(--gemboss-text-strong)}.gb-tc-person__sub{font-size:var(--gemboss-fs-caption);line-height:16px;color:var(--gemboss-text-muted)}.gb-tc-person__role{flex:none;padding:0 6px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-full);font-size:var(--gemboss-fs-micro);font-weight:650;line-height:18px;color:var(--gemboss-text-muted)}.gb-tc-person--offline .gb-tc-person__name{color:var(--gemboss-text-muted)}.gb-tc-person--offline .gb-avatar{opacity:.55}.gb-tc-presence{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--gemboss-surface);background:var(--gemboss-success)}.gb-tc-presence--away{background:var(--gemboss-warning)}.gb-tc-presence--offline{background:var(--gemboss-surface);box-shadow:inset 0 0 0 1.5px var(--gemboss-text-muted)}.gb-tc-presence--online{background:var(--gemboss-success)}.gb-tc-people[data-collapsed]{width:56px}.gb-tc-people[data-collapsed] .gb-tc-panel-head{justify-content:center;padding:8px 0}.gb-tc-people[data-collapsed] .gb-tc-panel-head__actions{display:none}.gb-tc-people[data-collapsed] :is(.gb-tc-panel-head__text,.gb-tc-people__heading,.gb-tc-person__text,.gb-tc-person__role){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.gb-tc-people[data-collapsed] .gb-tc-people__body{padding:8px 4px}.gb-tc-people[data-collapsed] .gb-tc-people__section+.gb-tc-people__section{margin-top:8px;padding-top:8px;border-top:1px solid var(--gemboss-divider)}.gb-tc-people[data-collapsed] .gb-tc-person{justify-content:center;padding:4px 0}@media (pointer: coarse),(max-width: 47.9975em){.gb-tc-channel,.gb-tc-person,.gb-tc-quote,.gb-tc-threadprev{min-height:44px}.gb-tc-act{min-width:44px;height:44px}.gb-tc-jump{width:48px;height:48px}.gb-tc-composer__input{font-size:16px;min-height:44px;padding-block:12px}.gb-tc-composer__box>.ui-btn--icon{width:44px;height:44px}}@container gb-tc (max-width: 1100px){.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people,.gb-tc>.gb-tc-scrim{grid-area:1 / 1 / -1 / -1}.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people{position:absolute;top:0;right:0;bottom:0;z-index:5;width:min(var(--gb-tc-thread-w, 380px),100%);box-shadow:var(--gemboss-shadow-overlay)}.gb-tc>.gb-tc-people{width:min(var(--gb-tc-people-w, 260px) + 40px,100%)}.gb-tc>.gb-tc-people[data-collapsed]{display:none}.gb-tc>.gb-tc-scrim{display:block;position:absolute;inset:0;z-index:4;background:color-mix(in srgb,var(--gemboss-dark-bg) 32%,transparent)}}@container gb-tc (max-width: 760px){.gb-tc>.gb-tc-rail{grid-column:1 / -1;width:auto;border-right:0}.gb-tc>.gb-tc-main{grid-column:1 / -1}.gb-tc:not([data-view=list])>.gb-tc-rail,.gb-tc[data-view=list]>:is(.gb-tc-main,.gb-tc-scrim,.gb-tc-thread,.gb-tc-people){display:none}.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people{left:0;width:auto;border-left:0;box-shadow:none}.gb-tc>.gb-tc-scrim{display:none}.gb-tc .gb-tc-head__back{display:inline-flex;margin-left:-8px}.gb-tc-head{padding-left:12px}.gb-tc-composer{padding:8px 12px 12px}}@container gb-tc (max-width: 359px){.gb-tc-composer__box{gap:0}}@media (prefers-reduced-motion: no-preference){.gb-tc-msg{transition:background-color .15s linear}.gb-tc-acts{transition:opacity .1s linear}}
+.gb-tc{container:gb-tc / inline-size;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);height:100%;min-height:0;overflow:hidden;box-sizing:border-box;background:var(--gemboss-surface);color:var(--gemboss-text);font-size:var(--gemboss-fs-body)}.gb-tc>.gb-tc-rail{grid-column:1;grid-row:1}.gb-tc>.gb-tc-main{grid-column:2;grid-row:1}.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people{grid-column:3;grid-row:1;height:auto}.gb-tc-main,.gb-tc-rail,.gb-tc-thread,.gb-tc-people{display:flex;flex-direction:column;min-width:0;min-height:0}.gb-tc-main{position:relative}.gb-tc-main>*,.gb-tc-rail>*,.gb-tc-thread>*,.gb-tc-people>*{flex:none}.gb-tc-main>.gb-tc-body,.gb-tc-thread>.gb-tc-body,.gb-tc-rail>.gb-tc-rail__scroll,.gb-tc-people>.gb-tc-people__body{flex:1 1 0;min-height:0}.gb-tc-body,.gb-tc-composer,.gb-tc-rail__list,.gb-tc-people__list{grid-template-columns:minmax(0,1fr)}.gb-tc-scrim{display:none}.gb-tc :is(.gb-tc-thread,.gb-tc-people,.gb-tc-scrim,.gb-tc-replying,.gb-tc-jump,.gb-tc-composer__files,.gb-tc-composer__picker)[hidden]{display:none}.gb-tc-sr{position:absolute;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gb-tc-rail{width:var(--gb-tc-rail-w, 240px);box-sizing:border-box;border-right:1px solid var(--gemboss-divider);background:var(--gemboss-rail-bg)}.gb-tc-rail__head,.gb-tc-head,.gb-tc-panel-head{display:flex;align-items:center;gap:8px;min-height:56px;min-width:0;box-sizing:border-box;border-bottom:1px solid var(--gemboss-divider)}.gb-tc-rail__head{justify-content:space-between;padding:8px 8px 8px 16px}.gb-tc-rail__title,.gb-tc-panel-head__title{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-h3);font-weight:650;line-height:1.3;color:var(--gemboss-text-strong)}.gb-tc-rail__actions,.gb-tc-head__actions,.gb-tc-panel-head__actions{flex:none;display:flex;align-items:center;gap:4px}.gb-tc-rail__scroll{overflow-y:auto;overscroll-behavior:contain;padding:8px 8px 16px}.gb-tc-rail__section+.gb-tc-rail__section{margin-top:16px}.gb-tc-rail__heading,.gb-tc-people__heading{margin:0 8px 4px;font-size:var(--gemboss-fs-caption);font-weight:650;line-height:20px;color:var(--gemboss-text-muted)}.gb-tc-rail__list,.gb-tc-people__list{list-style:none;margin:0;padding:0;display:grid;gap:1px}.gb-tc-channel{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:32px;padding:0 8px;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-md);background:none;cursor:pointer;text-align:left;text-decoration:none;font:inherit;font-size:var(--gemboss-fs-body);color:var(--gemboss-text-muted)}.gb-tc-channel:hover{background:var(--gemboss-hover);color:var(--gemboss-text-strong)}.gb-tc-channel:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-channel--unread{color:var(--gemboss-text-strong);font-weight:650}.gb-tc-channel[aria-current]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong);font-weight:650}.gb-tc-channel__glyph{position:relative;flex:none;display:inline-grid;place-items:center;width:20px;height:20px}.gb-tc-channel__glyph>.gb-tc-presence{right:-3px;bottom:-2px;width:7px;height:7px;border-color:var(--gemboss-rail-bg)}.gb-avatar.gb-tc-channel__av{width:20px;height:20px;font-size:8px}.gb-tc-channel__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-badge{flex:none;min-width:20px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:var(--gemboss-radius-full);background:var(--gemboss-accent);color:var(--gemboss-on-primary);font-size:var(--gemboss-fs-micro);font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}.gb-tc-badge--mention{background:var(--gemboss-warning-soft);color:var(--gemboss-warning);box-shadow:inset 0 0 0 1px var(--gemboss-warning-border)}.gb-tc-head{padding:8px 12px 8px 16px}.gb-tc .gb-tc-head__back{display:none}.gb-tc-head__text,.gb-tc-panel-head__text{flex:1 1 auto;min-width:0}.gb-tc-head__title{margin:0;display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--gemboss-fs-h3);font-weight:650;line-height:1.3;color:var(--gemboss-text-strong)}.gb-tc-head__glyph{flex:none;display:inline-flex;color:var(--gemboss-text-muted)}.gb-avatar.gb-tc-head__av{flex:none;margin-right:2px}.gb-tc-head__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-head__sub,.gb-tc-panel-head__sub{margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-caption);line-height:16px;color:var(--gemboss-text-muted)}.gb-tc .gb-tc-head__members{gap:6px;padding:0 8px}.gb-tc .gb-tc-head__members[aria-expanded=true]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}.gb-tc-head__count{font-variant-numeric:tabular-nums}.gb-tc-body{position:relative;display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0}.gb-tc-log{container:gb-tc-log / inline-size;min-height:0;overflow-y:auto;overscroll-behavior:contain}.gb-tc-log:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-list{list-style:none;margin:0;padding:8px 0 16px;display:flex;flex-direction:column}.gb-tc-list>*{flex-shrink:0}.gb-tc-older,.gb-tc-empty,.gb-tc-status{display:flex;justify-content:center;padding:8px 16px;color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-caption)}.gb-tc-empty{padding-block:32px;font-size:var(--gemboss-fs-body)}.gb-tc-status{justify-content:flex-start;padding-left:60px}.gb-tc-day{position:sticky;top:0;z-index:1;display:flex;justify-content:center;margin:4px 0 0;padding:4px 0;background:var(--gemboss-surface);pointer-events:none}.gb-tc-day__label{padding:1px 12px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-full);background:var(--gemboss-surface);box-shadow:var(--gemboss-shadow-resting);font-size:var(--gemboss-fs-caption);font-weight:600;line-height:20px;color:var(--gemboss-text)}.gb-tc-new{display:flex;align-items:center;gap:8px;margin:6px 16px;color:var(--gemboss-accent)}.gb-tc-new:before,.gb-tc-new:after{content:"";flex:1;height:1px;background:currentColor}.gb-tc-new__label{font-size:var(--gemboss-fs-caption);font-weight:650;line-height:16px}.gb-tc-msg{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;align-items:start;padding:8px 16px 4px}.gb-tc-msg:focus{outline:none}.gb-tc-msg:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-msg--grouped{padding-block:2px}.gb-tc-msg>.gb-avatar,.gb-tc-msg>.gb-tc-msg__hover-time{grid-column:1;grid-row:1}.gb-tc-msg>.gb-tc-msg__main{grid-column:2;grid-row:1;min-width:0}.gb-avatar.gb-tc-msg__av{width:36px;height:36px;font-size:13px;margin-top:2px}.gb-tc-msg:hover,.gb-tc-msg--active,.gb-tc-msg--editing{background:var(--gemboss-divider-soft)}.gb-tc-msg:has(:focus-visible){background:var(--gemboss-divider-soft)}.gb-tc-msg__hover-time{justify-self:end;opacity:0;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:var(--gemboss-fs-micro);line-height:20px;color:var(--gemboss-text-muted)}.gb-tc-msg:hover>.gb-tc-msg__hover-time,.gb-tc-msg:focus-within>.gb-tc-msg__hover-time{opacity:1}.gb-tc-msg__who{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0;line-height:20px}.gb-tc-msg__name{font-weight:650;color:var(--gemboss-text-strong);overflow-wrap:anywhere}.gb-tc-msg__time{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);font-variant-numeric:tabular-nums}.gb-tc-msg__body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:20px;color:var(--gemboss-text)}.gb-tc-msg__edited{margin-left:4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);white-space:nowrap}.gb-tc-msg__status{margin:2px 0 0;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-msg--failed .gb-tc-msg__status{color:var(--gemboss-danger)}.gb-tc-msg--sending>.gb-tc-msg__main{opacity:.6}.gb-tc-msg__files,.gb-tc-msg__extra{margin-top:4px;min-width:0}.gb-tc-msg__editor{display:grid;gap:6px;margin-top:2px}.gb-tc-msg--mention{box-shadow:inset 2px 0 0 var(--gemboss-warning)}.gb-tc-msg--highlight{background:var(--gemboss-accent-soft)}.gb-tc-quote{display:flex;align-items:baseline;gap:6px;max-width:100%;min-height:28px;margin:0 0 4px;padding:4px 8px;box-sizing:border-box;border:0;border-left:2px solid var(--gemboss-divider);border-radius:0 var(--gemboss-radius-sm) var(--gemboss-radius-sm) 0;background:none;cursor:pointer;text-align:left;font:inherit;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-quote:hover{background:var(--gemboss-hover)}.gb-tc-quote:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:1px}.gb-tc-quote[aria-busy=true]{opacity:.55;cursor:progress}.gb-tc-quote__who{flex:none;font-weight:650;color:var(--gemboss-text)}.gb-tc-quote__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-msg .ui-reactions{margin-top:2px}.gb-tc-msg .ui-reaction-picker{margin:4px 0;max-width:calc(100cqi - 64px)}.gb-tc-threadprev{display:flex;align-items:center;gap:8px;max-width:100%;min-height:32px;margin-top:4px;padding:4px 8px 4px 4px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--gemboss-radius-md);background:none;cursor:pointer;text-align:left;font:inherit;font-size:var(--gemboss-fs-caption)}.gb-tc-threadprev:hover{border-color:var(--gemboss-divider);background:var(--gemboss-surface)}.gb-tc-threadprev:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:1px}.gb-tc-threadprev__faces{flex:none;display:flex;gap:2px}.gb-tc-threadprev__faces>.gb-avatar{width:22px;height:22px;font-size:9px;border-radius:var(--gemboss-radius-xs)}.gb-tc-threadprev__count{flex:none;font-weight:650;color:var(--gemboss-accent-strong)}.gb-tc-threadprev__last{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gemboss-text-muted)}.gb-tc-receipt{display:inline-flex;margin-left:6px;vertical-align:-2px;color:var(--gemboss-text-muted)}.gb-tc-receipt--all{color:var(--gemboss-success)}.gb-tc-receipt__tick{stroke:var(--gemboss-surface)}.gb-tc-acts{position:absolute;top:-14px;right:16px;z-index:2;display:flex;align-items:center;gap:0;padding:2px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-md);background:var(--gemboss-surface);box-shadow:var(--gemboss-shadow-raised);white-space:nowrap;opacity:0;pointer-events:none}.gb-tc-list>.gb-tc-msg:first-child>.gb-tc-acts{top:2px}.gb-tc-msg:hover>.gb-tc-acts,.gb-tc-msg--active>.gb-tc-acts,.gb-tc-acts:focus-within{opacity:1;pointer-events:auto}.gb-tc-act{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-sm);background:transparent;cursor:pointer;font:inherit;font-size:16px;line-height:1;color:var(--gemboss-text-muted)}.gb-tc-act:hover{background:var(--gemboss-hover);color:var(--gemboss-text-strong)}.gb-tc-act:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-act[aria-pressed=true],.gb-tc-act[aria-expanded=true]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}@container gb-tc-log (max-width: 560px){.gb-tc-act--quick{display:none}.gb-tc-acts{right:8px}.gb-tc-msg{padding-inline:12px}.gb-tc-status{padding-left:56px}}@media (hover: none){.gb-tc-msg:focus-within{background:var(--gemboss-divider-soft)}.gb-tc-msg:focus-within>.gb-tc-acts{opacity:1;pointer-events:auto}.gb-tc-act--quick{display:none}.gb-tc-acts{top:-22px}}.gb-tc-jump{position:absolute;right:16px;bottom:16px;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--gemboss-divider);border-radius:50%;background:var(--gemboss-surface);color:var(--gemboss-text-strong);box-shadow:var(--gemboss-shadow-raised);cursor:pointer}.gb-tc-jump[hidden]{display:none}.gb-tc-jump:hover{background:var(--gemboss-hover)}.gb-tc-jump:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:2px}.gb-tc-jump__n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 4px;box-sizing:border-box;border-radius:var(--gemboss-radius-full);background:var(--gemboss-accent);color:var(--gemboss-on-primary);font-size:var(--gemboss-fs-micro);font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}.gb-tc-composer{display:grid;gap:6px;min-width:0;padding:8px 16px 16px}.gb-tc-composer__box{position:relative;display:flex;align-items:flex-end;gap:4px;min-width:0;padding:4px;box-sizing:border-box;border:1px solid var(--gemboss-field-line);border-radius:var(--gemboss-radius-lg);background:var(--gemboss-field-bg)}.gb-tc-composer__box:hover{border-color:var(--gemboss-field-line-hover)}.gb-tc-composer__box:focus-within{border-color:var(--gemboss-field-line-active);box-shadow:0 0 0 1px var(--gemboss-field-line-active)}.gb-tc-composer__input{flex:1 1 auto;min-width:0;min-height:32px;max-height:40vh;margin:0;padding:6px 4px;box-sizing:border-box;border:0;background:transparent;resize:none;outline:none;field-sizing:content;font:inherit;font-size:var(--gemboss-fs-body);line-height:20px;color:var(--gemboss-field-ink)}.gb-tc-composer__input::placeholder{color:var(--gemboss-field-placeholder)}.gb-tc-composer__input:disabled{cursor:not-allowed}.gb-tc-composer__box>.ui-btn--icon{width:32px;height:32px}.gb-tc .gb-tc-composer__attach,.gb-tc .gb-tc-composer__emoji,.gb-tc .gb-tc-composer__send,.gb-tc .gb-tc-panel-head__close,.gb-tc .gb-tc-people__toggle{flex:none}.gb-tc .gb-tc-composer__send:disabled{opacity:.35}.gb-tc .gb-tc-composer__emoji[aria-expanded=true]{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}.gb-tc-composer__emoji-pop{position:absolute;right:0;bottom:calc(100% + 6px);z-index:4}.gb-tc-composer__emoji-pop .ui-reaction-picker__body{max-height:min(300px,40vh)}.gb-tc-replying{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 2px 2px 8px;box-sizing:border-box;border-left:2px solid var(--gemboss-accent);border-radius:var(--gemboss-radius-sm);background:var(--gemboss-accent-soft)}.gb-tc-replying__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text)}.gb-tc-composer__files,.gb-tc-composer__picker{min-width:0}.gb-tc-composer__picker{max-height:240px;overflow-y:auto;overscroll-behavior:contain}.gb-tc-composer__also{justify-self:start}.gb-tc-composer__error{margin:0;font-size:var(--gemboss-fs-caption);color:var(--gemboss-danger)}.gb-tc-thread,.gb-tc-people{height:100%;box-sizing:border-box;border-left:1px solid var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text)}.gb-tc-thread:focus,.gb-tc-people:focus{outline:none}.gb-tc-panel-head{padding:8px 8px 8px 16px}.gb-tc-thread{width:var(--gb-tc-thread-w, 380px)}.gb-tc-thread__note{margin:8px 16px 0;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-thread__note--error{color:var(--gemboss-danger-strong, var(--gemboss-danger))}.gb-tc-thread__count{display:flex;align-items:center;gap:8px;margin:8px 16px 4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted)}.gb-tc-thread__count:after{content:"";flex:1;border-top:1px solid var(--gemboss-divider)}.gb-tc-people{width:var(--gb-tc-people-w, 260px)}.gb-tc-people__body{overflow-y:auto;overscroll-behavior:contain;padding:8px 8px 16px}.gb-tc-people__section+.gb-tc-people__section{margin-top:16px}.gb-tc-person{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:40px;padding:4px 8px;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-md);background:none;text-align:left;text-decoration:none;font:inherit;color:inherit}:is(a,button).gb-tc-person{cursor:pointer}:is(a,button).gb-tc-person:hover{background:var(--gemboss-hover)}.gb-tc-person:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-tc-person__av{position:relative;flex:none;display:inline-flex}.gb-tc-person__text{flex:1 1 auto;min-width:0;display:grid}.gb-tc-person__name,.gb-tc-person__sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-tc-person__name{font-weight:550;line-height:20px;color:var(--gemboss-text-strong)}.gb-tc-person__sub{font-size:var(--gemboss-fs-caption);line-height:16px;color:var(--gemboss-text-muted)}.gb-tc-person__role{flex:none;padding:0 6px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-full);font-size:var(--gemboss-fs-micro);font-weight:650;line-height:18px;color:var(--gemboss-text-muted)}.gb-tc-person--offline .gb-tc-person__name{color:var(--gemboss-text-muted)}.gb-tc-person--offline .gb-avatar{opacity:.55}.gb-tc-presence{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--gemboss-surface);background:var(--gemboss-success)}.gb-tc-presence--away{background:var(--gemboss-warning)}.gb-tc-presence--offline{background:var(--gemboss-surface);box-shadow:inset 0 0 0 1.5px var(--gemboss-text-muted)}.gb-tc-presence--online{background:var(--gemboss-success)}.gb-tc-people[data-collapsed]{width:56px}.gb-tc-people[data-collapsed] .gb-tc-panel-head{justify-content:center;padding:8px 0}.gb-tc-people[data-collapsed] .gb-tc-panel-head__actions{display:none}.gb-tc-people[data-collapsed] :is(.gb-tc-panel-head__text,.gb-tc-people__heading,.gb-tc-person__text,.gb-tc-person__role){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.gb-tc-people[data-collapsed] .gb-tc-people__body{padding:8px 4px}.gb-tc-people[data-collapsed] .gb-tc-people__section+.gb-tc-people__section{margin-top:8px;padding-top:8px;border-top:1px solid var(--gemboss-divider)}.gb-tc-people[data-collapsed] .gb-tc-person{justify-content:center;padding:4px 0}@media (pointer: coarse),(max-width: 47.9975em){.gb-tc-channel,.gb-tc-person,.gb-tc-quote,.gb-tc-threadprev{min-height:44px}.gb-tc-act{min-width:44px;height:44px}.gb-tc-jump{width:48px;height:48px}.gb-tc-composer__input{font-size:16px;min-height:44px;padding-block:12px}.gb-tc-composer__box>.ui-btn--icon{width:44px;height:44px}}@container gb-tc (max-width: 1100px){.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people,.gb-tc>.gb-tc-scrim{grid-area:1 / 1 / -1 / -1}.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people{position:absolute;top:0;right:0;bottom:0;z-index:5;width:min(var(--gb-tc-thread-w, 380px),100%);box-shadow:var(--gemboss-shadow-overlay)}.gb-tc>.gb-tc-people{width:min(var(--gb-tc-people-w, 260px) + 40px,100%)}.gb-tc>.gb-tc-people[data-collapsed]{display:none}.gb-tc>.gb-tc-scrim{display:block;position:absolute;inset:0;z-index:4;background:color-mix(in srgb,var(--gemboss-dark-bg) 32%,transparent)}}@container gb-tc (max-width: 760px){.gb-tc>.gb-tc-rail{grid-column:1 / -1;width:auto;border-right:0}.gb-tc>.gb-tc-main{grid-column:1 / -1}.gb-tc:not([data-view=list])>.gb-tc-rail,.gb-tc[data-view=list]>:is(.gb-tc-main,.gb-tc-scrim,.gb-tc-thread,.gb-tc-people){display:none}.gb-tc>.gb-tc-thread,.gb-tc>.gb-tc-people{left:0;width:auto;border-left:0;box-shadow:none}.gb-tc>.gb-tc-scrim{display:none}.gb-tc .gb-tc-head__back{display:inline-flex;margin-left:-8px}.gb-tc-head{padding-left:12px}.gb-tc-composer{padding:8px 12px 12px}}@container gb-tc (max-width: 359px){.gb-tc-composer__box{gap:0}}@media (prefers-reduced-motion: no-preference){.gb-tc-msg{transition:background-color .15s linear}.gb-tc-acts{transition:opacity .1s linear}}

package/src/topnav-fold.css

@@ -0,0 +1 @@
+.gb-topnav-fold{min-width:0}.gb-topnav-fold>summary{flex-shrink:1;min-width:0}.gb-topnav-fold-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.gb-topnav-foot{margin-top:4px;padding:8px 6px 2px;border-top:1px solid var(--gemboss-divider, #e5e7ea)}@media (max-width: 600px){.gb-topnav-unfolded{display:none}}@media (max-width: 760px){.gb-topnav.gb-topnav--fold-760{overflow:visible}.gb-topnav--fold-760>.gb-topnav-row,.gemboss-platform-topbar:has(.gb-topnav--fold-760) .gb-topnav-unfolded{display:none}.gb-topnav--fold-760>.gb-topnav-fold{display:flex}}

package/src/translation-row.css

@@ -0,0 +1 @@
+.ui-translation{container-type:inline-size;display:grid;gap:var(--ui-space-2);padding:var(--ui-space-3);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface)}.ui-translation--current{border-color:var(--gemboss-primary);box-shadow:inset 3px 0 0 var(--gemboss-primary)}.ui-translation:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.ui-translation--current:focus{outline:none}.ui-translation__head,.ui-translation__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2);font-size:var(--ui-fs-caption);line-height:16px;color:var(--ui-text-muted)}.ui-translation__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--ui-fs-caption);color:var(--ui-text-strong);overflow-wrap:anywhere}.ui-translation__state{flex:none}.ui-translation__by{min-width:0;overflow-wrap:anywhere}.ui-translation__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ui-space-2) var(--ui-space-4)}.ui-translation__source{margin:0;padding-top:6px;font-size:var(--ui-fs-body);line-height:20px;color:var(--ui-text-muted);white-space:pre-wrap;overflow-wrap:anywhere}.ui-translation__target{display:grid;min-width:0}.ui-translation__checks{min-width:0;overflow-wrap:anywhere}.ui-translation__checks--ok{color:var(--gemboss-success-strong)}.ui-translation__checks--warn{font-weight:600;color:var(--gemboss-warning)}.ui-translation__action{display:inline-flex;gap:var(--ui-space-2);margin-left:auto}@media (max-width: 900px){.ui-translation__body{grid-template-columns:minmax(0,1fr)}}@container (max-width: 600px){.ui-translation__body{grid-template-columns:minmax(0,1fr)}}

package/src/translation-row.tsx

@@ -0,0 +1,113 @@
+/**
+ * Translation row — @gemboss/ui, unreleased (after 0.49.0). One translatable string under review: GemPress's review screen
+ * (redesign approved by Chris 23/10/2026) shows a page's strings one under the other, the source beside its translation, and a
+ * person walks them with J / K, fixes what the checks flag and approves. GemPress drew it with its own CSS (`gp-str`); GemNews and
+ * GemCommunity translations will review strings the same way, so the row lives here.
+ *
+ * The contract it draws, which every surface keeps:
+ * - a head: the string's key (code), its state as a badge (`draft` "To review", `approved`, `stale` "Source changed", `missing`
+ *   "Not translated"; the words are the surface's with `stateLabel`), and who wrote it (`by`: the model, or "edited by a person");
+ * - the source and the target SIDE BY SIDE, read across like a translation tool; one column under 900px, or when the row itself
+ *   is narrower than 600px (beside a pinned panel);
+ * - a foot: what the checks found on the left (green "✓ Numbers and tags match", or the problems in amber words; colour never
+ *   alone), the surface's `action` on the right (Approve, Save and approve);
+ * - `current`: an ink border and a 3px ink bar on the left, the row the keys act on (`aria-current`). The row is focusable
+ *   (`tabIndex={-1}`, never a Tab stop) so a keyboard-driven list can move focus to it; pass `id` to find it.
+ *
+ * Presentational and server-renderable: no state, no effect. The editable control is the SURFACE's (it owns the value, the save,
+ * the keys): pass it as `target`, a node, or a function that gets the ids of the source and the checks so the control can say
+ * `aria-describedby` (a screen reader then hears the source and the problems with the field). Other attributes (`onFocus`,
+ * `data-*`) go on the row. `translation-row.css` is its own entry; a plain-HTML surface links `@gemboss/ui/translation-row.css`
+ * and writes the classes listed at the top of that file.
+ */
+import "./translation-row.css";
+import React, { type HTMLAttributes, type ReactNode } from "react";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+
+export type TranslationState = "draft" | "approved" | "stale" | "missing";
+
+/** The badge's words by default (GemPress's). */
+export const TRANSLATION_STATE_LABELS: Readonly<Record<TranslationState, string>> = {
+  draft: "To review",
+  approved: "Approved",
+  stale: "Source changed",
+  missing: "Not translated",
+};
+/** The kit badge tone for each state (kit-plain.css). Not translated is the plain badge: nothing to review yet. */
+const TONE: Readonly<Record<TranslationState, string | null>> = {
+  draft: "ui-badge--info",
+  approved: "ui-badge--success",
+  stale: "ui-badge--warning",
+  missing: null,
+};
+
+/** The ids a `target` function gets: the key, the source and the checks line, for `aria-describedby`. */
+export interface TranslationRowIds {
+  key: string;
+  source: string;
+  checks: string;
+}
+
+export interface TranslationRowProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "className" | "id" | "tabIndex"> {
+  /** The string's key: "hero.title". */
+  keyName: string;
+  state: TranslationState;
+  source: ReactNode;
+  /** The source's language (`lang` on it), so it is read in the right voice. */
+  sourceLang?: string;
+  /** The editable control, owned by the surface: a node, or a function given the ids it can point `aria-describedby` at. */
+  target: ReactNode | ((ids: TranslationRowIds) => ReactNode);
+  /** What the checks found: `ok` with what matched, or not with the problems. Absent: no line (an approved string). */
+  checks?: { ok: boolean; text: ReactNode } | null;
+  /** Who wrote it: the model's name, or "edited by a person". */
+  by?: ReactNode;
+  /** The surface's button(s), at the end of the foot. */
+  action?: ReactNode;
+  /** The row the keys act on. */
+  current?: boolean;
+  /** The badge's words, when the surface's are not the defaults (another language). */
+  stateLabel?: ReactNode;
+  /** The row's id, and the base of the ids inside it. Default from `keyName`; pass one when a key shows twice on a page. */
+  id?: string;
+  /** `li` inside the surface's `<ol>` (default `div`). */
+  as?: "div" | "li";
+  className?: string;
+}
+
+/** The base of a row's ids when the surface gives none: "hero.title" → "ui-tr-hero-title". */
+export function translationRowId(keyName: string): string {
+  return `ui-tr-${keyName.replace(/[^\w-]+/g, "-").replace(/^-+|-+$/g, "") || "row"}`;
+}
+
+export function TranslationRow({
+  keyName, state, source, sourceLang, target, checks, by, action, current, stateLabel, id, as = "div", className, ...rest
+}: TranslationRowProps) {
+  const base = id ?? translationRowId(keyName);
+  const ids: TranslationRowIds = { key: `${base}-key`, source: `${base}-src`, checks: `${base}-checks` };
+  const Tag = as;
+  return (
+    <Tag {...rest} id={id} className={cx("ui-translation", current && "ui-translation--current", className)} data-state={state} tabIndex={-1}
+      aria-current={current ? "true" : undefined}>
+      <div className="ui-translation__head">
+        <code className="ui-translation__key" id={ids.key}>{keyName}</code>
+        <span className={cx("ui-badge", TONE[state], "ui-translation__state")}>{stateLabel ?? TRANSLATION_STATE_LABELS[state] ?? state}</span>
+        {by ? <span className="ui-translation__by">{by}</span> : null}
+      </div>
+      <div className="ui-translation__body">
+        <p className="ui-translation__source" id={ids.source} lang={sourceLang}>{source}</p>
+        <div className="ui-translation__target">{typeof target === "function" ? target(ids) : target}</div>
+      </div>
+      {checks || action ? (
+        <div className="ui-translation__foot">
+          {checks ? (
+            <span className={cx("ui-translation__checks", checks.ok ? "ui-translation__checks--ok" : "ui-translation__checks--warn")} id={ids.checks}>
+              {checks.ok ? <span aria-hidden="true">✓ </span> : null}{checks.text}
+            </span>
+          ) : null}
+          {action ? <span className="ui-translation__action">{action}</span> : null}
+        </div>
+      ) : null}
+    </Tag>
+  );
+}