@sincpro/web-ui 0.2.0 → 1.1.0

package/dist/primitives/table/Table.js

@@ -15,6 +15,9 @@ height, }) {
        medición. */
     _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsx("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: children }) }));
 }
+/** The text of a column header, shared by every table of the family. Ink and semibold, not
+ *  muted: in grey at the cells' weight the names of the columns read as one more row. */
+export const HEADER_TEXT = "text-meta font-semibold whitespace-nowrap text-ink";
 export function THead({ children }) {
     return (
     /* Se pega DEBAJO de lo que ya esté pegado —la barra de la aplicación y la
@@ -43,19 +46,21 @@ export function Th({ children, sortKey, sort, onSort, numeric = false, align, wi
             onSort(null);
     }
     const Icon = dir === "asc" ? ArrowUp : dir === "desc" ? ArrowDown : ChevronsUpDown;
-    return (_jsx("th", { scope: "col", style: width === undefined ? undefined : { width }, "aria-sort": active ? (dir === "asc" ? "ascending" : "descending") : "none", className: `border-b border-line-strong px-3 py-2 text-meta font-medium whitespace-nowrap text-muted ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"}`, children: sortKey === undefined ? (children) : (_jsxs("button", { type: "button", onClick: nextSort, className: `inline-flex items-center gap-1 rounded-control transition-colors duration-(--duration-instant) hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${(align ?? (numeric ? "right" : "left")) === "right" ? "flex-row-reverse" : ""} ${active ? "text-ink" : ""}`, children: [children, _jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${active ? "text-primary" : "text-line-strong"}`, strokeWidth: 2, "aria-hidden": true })] })) }));
+    return (_jsx("th", { scope: "col", style: width === undefined ? undefined : { width }, "aria-sort": active ? (dir === "asc" ? "ascending" : "descending") : "none", className: `border-b border-line-strong px-3 py-2 ${HEADER_TEXT} ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"}`, children: sortKey === undefined ? (children) : (_jsxs("button", { type: "button", onClick: nextSort, className: `inline-flex items-center gap-1 rounded-control transition-colors duration-(--duration-instant) hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${(align ?? (numeric ? "right" : "left")) === "right" ? "flex-row-reverse" : ""} ${active ? "text-ink" : ""}`, children: [children, _jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${active ? "text-primary" : "text-line-strong"}`, strokeWidth: 2, "aria-hidden": true })] })) }));
 }
 /** The wash of a row lives on the cells, not on the `<tr>`. A background on the
  *  row paints edge to edge; on the cells the ends can round and the table's
  *  padding keeps the mark off the card. */
-const RowMark = createContext(false);
+const RowMark = createContext({ selected: false, interactive: false });
 const ROW_WASH = "group-hover/row:bg-ink/4";
 const ROW_ON = "bg-primary/8";
-function rowWash(selected) {
-    return selected ? ROW_ON : ROW_WASH;
+/* The hover wash only where a click does something: on a read-only row it promised a click
+   that did nothing. */
+function rowWash({ selected, interactive }) {
+    return selected ? ROW_ON : interactive ? ROW_WASH : "";
 }
 export function Tr({ children, onClick, selected = false, }) {
-    return (_jsx(RowMark.Provider, { value: selected, children: _jsx("tr", { onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
+    return (_jsx(RowMark.Provider, { value: { selected, interactive: onClick !== undefined }, children: _jsx("tr", { onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
 }
 /**
  * A row that opens its own detail underneath.
@@ -71,7 +76,7 @@ export function Tr({ children, onClick, selected = false, }) {
  */
 export function TrDetail({ children, detail, open, onToggle, columns, label, selected = false, }) {
     const id = useId();
-    return (_jsx(RowMark.Provider, { value: selected, children: _jsxs(_Fragment, { children: [_jsxs("tr", { onClick: onToggle, className: "group/row cursor-pointer", children: [_jsx("td", { className: `border-b border-line py-1.5 pr-0 pl-2.5 align-middle first:rounded-l-control ${rowWash(selected)}`, children: _jsx("button", { type: "button", onClick: (e) => {
+    return (_jsx(RowMark.Provider, { value: { selected, interactive: true }, children: _jsxs(_Fragment, { children: [_jsxs("tr", { onClick: onToggle, className: "group/row cursor-pointer", children: [_jsx("td", { className: `border-b border-line py-1.5 pr-0 pl-2.5 align-middle first:rounded-l-control ${rowWash({ selected, interactive: true })}`, children: _jsx("button", { type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     onToggle();
                                 }, "aria-expanded": open, "aria-controls": id, "aria-label": label, className: "inline-flex size-5 items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2 }) }) }), children] }), _jsx("tr", { id: id, hidden: !open, children: _jsx("td", { colSpan: columns + 1, className: "border-b border-line bg-ground px-3 py-3", children: detail }) })] }) }));
@@ -87,6 +92,10 @@ export const CELL_TONE = {
     bad: "bg-bad/12",
     accent: "bg-accent/20",
 };
+/** The wash of the row a cell sits in: for cells drawn outside `Td`, like the row's actions. */
+export function useRowWash() {
+    return rowWash(useContext(RowMark));
+}
 export function Td({ children, numeric = false, align, 
 /** A CODE — an id, a hash, a key — set in the monospaced face. Off by default: a
  *  number does not need it (a numeric cell gets tabular figures on its own), and a
@@ -100,8 +109,8 @@ mono = false,
  *  something else — and in a table of forty rows by six columns, colored text
  *  gets lost. */
 tone, title, }) {
-    const selected = useContext(RowMark);
-    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums" : ""} ${tone === undefined ? rowWash(selected) : CELL_TONE[tone]}`, children: children }));
+    const mark = useContext(RowMark);
+    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums" : ""} ${tone === undefined ? rowWash(mark) : CELL_TONE[tone]}`, children: children }));
 }
 /** The selection checkbox, with its third state.
  *

package/dist/primitives/tag/Tags.d.ts

@@ -7,6 +7,8 @@ export type TagItem = {
      *  comes from, which symbol a comparison is. It goes muted and inside. */
     note?: string;
     icon?: LucideIcon;
+    /** A person on the chip: its photo, or its initials when `true` — followers, assignees. */
+    avatar?: true | string;
     /** Choose it. Without this the chip is a value and is not pressed. */
     onSelect?: () => void;
     /** Remove it, when removing it means something. It is a separate button

package/dist/primitives/tag/Tags.js

@@ -4,6 +4,7 @@ import { AriaLocale } from "../../foundations/aria.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
 import { cn, focusRing } from "../../foundations/variants.js";
 import { tagTone } from "./Tag.js";
+import { Avatar } from "../value/Person.js";
 import { X } from "lucide-react";
 import { Button as AriaButton, Tag as AriaTag, TagGroup, TagList, } from "react-aria-components";
 export function Tags({ items, surface, label, labelledBy, stack = false, multiple = false, }) {
@@ -95,7 +96,7 @@ function shell({ item, surface, stack, removable, pressable, }) {
 }
 function Inside({ item }) {
     const Icon = item.icon;
-    return (_jsxs(_Fragment, { children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-3 shrink-0 opacity-70", strokeWidth: 2, "aria-hidden": true })), _jsx("span", { className: "min-w-0 truncate", children: item.label }), item.note === undefined ? null : (_jsxs("span", { className: "shrink-0 opacity-60", children: ["\u00B7 ", item.note] }))] }));
+    return (_jsxs(_Fragment, { children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-3 shrink-0 opacity-70", strokeWidth: 2, "aria-hidden": true })), item.avatar === undefined ? null : (_jsx("span", { "aria-hidden": true, className: "-my-0.5 -ml-1.5 flex shrink-0", children: _jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) }) })), _jsx("span", { className: "min-w-0 truncate", children: item.label }), item.note === undefined ? null : (_jsxs("span", { className: "shrink-0 opacity-60", children: ["\u00B7 ", item.note] }))] }));
 }
 /* The × is React Aria's `remove` slot: it removes THIS chip and never presses it, so
    removing a pressable chip does not also choose it. */

package/dist/primitives/tag/TagsField.d.ts

@@ -1,3 +1,4 @@
+import type { OpenTarget } from "../../foundations/types.js";
 import { type FormMode } from "../field/mode.js";
 import { type TagOption } from "./choices.js";
 export type TagsFieldProps = {
@@ -14,6 +15,22 @@ export type TagsFieldProps = {
      * backend (Odoo's `name_create`); the consumer also appends the new option to `options`.
      */
     onCreate?: (label: string) => string | Promise<string>;
+    /**
+     * The options are SEARCHED by whoever gives them — the server's literal search over
+     * thousands of products or people — and this hears what is typed (`""` when it starts over).
+     * With it the field filters nothing itself: `options` is the answer, plus the chosen ones for
+     * their labels; the chosen still never come back as options.
+     */
+    onSearch?: (query: string) => void;
+    /** «Buscar más…» at the end of the list: the tags to add chosen from a table
+     *  (the list that chooses, `List onChoose` with `selection`, in a modal). It gets what was typed. */
+    onBrowseAll?: (query: string) => void;
+    /** Open the record behind a chip — a follower, a product, a category. Pressing the chip (or
+     *  Enter on it) opens it in `openTarget`; its × still only removes. Absent, a chip is a value. */
+    onOpen?: (id: string, to: OpenTarget) => void;
+    /** Where a pressed chip opens. A peek by default: a chip is a glance at one of many — «who is
+     *  this follower?» — not a place to go and work. */
+    openTarget?: OpenTarget;
     /** The input's placeholder while no tag is chosen. Defaults to the copy table's «Add…». */
     placeholder?: string;
     disabled?: boolean;

package/dist/primitives/tag/TagsField.js

@@ -8,9 +8,11 @@ import { useFieldIds } from "../field/context.js";
 import { ReadValue } from "../field/Field.js";
 import { useFormMode } from "../field/mode.js";
 import { Popover } from "../overlay/Popover.js";
+import { MatchedText } from "../picker/MatchedText.js";
 import { tagChoices, withoutTag, withTag, } from "./choices.js";
 import { Tags } from "./Tags.js";
-import { Plus } from "lucide-react";
+import { Avatar } from "../value/Person.js";
+import { Plus, Search } from "lucide-react";
 import { useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox, ListBoxItem, useFilter, useLocale, } from "react-aria-components";
 /* ==================================================================== *
@@ -43,6 +45,15 @@ import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox,
  * ==================================================================== */
 /** The key of the «create» row. Not an id: it cannot collide with one. */
 const CREATE = "\u0000create";
+/** The key of the «Buscar más…» row. */
+const BROWSE = "\u0000browse";
+/** What a chip needs to open its record: the press, and the place it opens named as its title. */
+function useChipOpening(onOpen, to = "peek") {
+    const copy = useUiCopy();
+    return (id) => onOpen === undefined
+        ? {}
+        : { onSelect: () => onOpen(id, to), title: copy.picker.openIn[to] };
+}
 /** The chosen tags as chips, in the order of `value`. An id missing from `options` is still
  *  drawn (as itself): hiding it would hide data the record has. */
 function chosenOptions(options, value) {
@@ -56,6 +67,7 @@ function chosenOptions(options, value) {
  * chips, and its hint and error describe the input. In read mode it is `Tags`.
  */
 export function TagsField({ mode, ...props }) {
+    const opening = useChipOpening(props.onOpen, props.openTarget);
     if (useFormMode(mode) === "read") {
         const chosen = chosenOptions(props.options, props.value);
         if (chosen.length === 0)
@@ -64,23 +76,36 @@ export function TagsField({ mode, ...props }) {
                     id: option.value,
                     label: option.label,
                     ...(option.tone === undefined ? {} : { tone: option.tone }),
+                    ...(option.avatar === undefined ? {} : { avatar: option.avatar }),
+                    ...opening(option.value),
                 })) }) }));
     }
     /* The filter reads the locale from React Aria's context, so the box that provides it has
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
 }
-function EditableTagsField({ value, onChange, options, onCreate, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
+function EditableTagsField({ value, onChange, options, onCreate, onSearch, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
         invalid: ownInvalid,
     });
     const copy = useUiCopy();
+    const opening = useChipOpening(onOpen, openTarget);
     const { contains } = useFilter({ sensitivity: "base" });
     const { locale } = useLocale();
     const collator = useMemo(() => new Intl.Collator(locale, { sensitivity: "base", usage: "search" }), [locale]);
-    const [text, setText] = useState("");
+    const [text, setTextOnly] = useState("");
+    /* What the consumer last heard: an add or a reopen starts the search over, and telling it
+       `""` twice would ask the server twice for the same page. */
+    const heard = useRef("");
+    const setText = (next) => {
+        setTextOnly(next);
+        if (onSearch !== undefined && next !== heard.current) {
+            heard.current = next;
+            onSearch(next);
+        }
+    };
     const boxRef = useRef(null);
     const [width, setWidth] = useState(null);
     const inputRef = useRef(null);
@@ -88,18 +113,26 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
        creating: a tag removed meanwhile must not come back. */
     const latest = useRef(value);
     latest.current = value;
-    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled);
-    const listed = create === null
-        ? available
-        : [
-            ...available,
-            { value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) },
-        ];
+    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled, onSearch !== undefined);
+    const listed = [
+        ...available,
+        ...(create === null
+            ? []
+            : [{ value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) }]),
+        ...(onBrowseAll === undefined || disabled
+            ? []
+            : [{ value: BROWSE, label: copy.picker.browseAll }]),
+    ];
     const commit = (key) => {
         if (key === null)
             return;
         const chosen = String(key);
+        const typed = text;
         setText("");
+        if (chosen === BROWSE) {
+            onBrowseAll?.(typed);
+            return;
+        }
         if (chosen !== CREATE) {
             onChange?.(withTag(latest.current, chosen));
             return;
@@ -120,6 +153,8 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
         id: option.value,
         label: option.label,
         ...(option.tone === undefined ? {} : { tone: option.tone }),
+        ...(option.avatar === undefined ? {} : { avatar: option.avatar }),
+        ...opening(option.value),
         ...(disabled ? {} : { onRemove: () => remove(option.value) }),
     }));
     return (
@@ -149,7 +184,7 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
                                 onChange?.(withoutTag(value, last));
                         }, empty: text === "" }), _jsx(Popover, { triggerRef: boxRef, ...(width === null
                             ? {}
-                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsx("span", { className: "truncate", children: item.label })) })) }) })] })] }));
+                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, dependencies: [text], className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE || item.value === BROWSE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : item.value === BROWSE ? (_jsxs(_Fragment, { children: [_jsx(Search, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsxs(_Fragment, { children: [item.avatar === undefined ? null : (_jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) })), _jsx("span", { className: "truncate", children: _jsx(MatchedText, { text: item.label, query: text, locale: copy.locale }) })] })) })) }) })] })] }));
 }
 /** The input after the chips. It reads the combobox's state to know whether the keyboard
  *  marked an option — Enter with nothing marked takes the first match. */

package/dist/primitives/tag/choices.d.ts

@@ -11,6 +11,8 @@ export interface TagOption {
     label: string;
     /** Neutral by default: «mayorista» classifies, it does not warn. */
     tone?: Tone;
+    /** A person: its face on the chip and in the list — `true` for initials, a URL for a photo. */
+    avatar?: true | string;
 }
 /** How the typed text is compared — the locale's, handed in by the component. */
 export type TagMatch = {
@@ -28,7 +30,10 @@ export type TagMatch = {
  * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
  * ends up with both.
  */
-export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean): {
+export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean, 
+/** The options are already the answer to `text` (searched by the consumer, on a server):
+ *  they are not filtered again — the server may have matched a field no label shows. */
+searched?: boolean): {
     available: TagOption[];
     create: string | null;
 };

package/dist/primitives/tag/choices.js

@@ -7,10 +7,14 @@
  * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
  * ends up with both.
  */
-export function tagChoices(options, value, text, match, creatable) {
+export function tagChoices(options, value, text, match, creatable, 
+/** The options are already the answer to `text` (searched by the consumer, on a server):
+ *  they are not filtered again — the server may have matched a field no label shows. */
+searched = false) {
     const chosen = new Set(value);
     const query = text.trim();
-    const available = options.filter((option) => !chosen.has(option.value) && (query === "" || match.contains(option.label, query)));
+    const available = options.filter((option) => !chosen.has(option.value) &&
+        (searched || query === "" || match.contains(option.label, query)));
     const create = creatable && query !== "" && !options.some((option) => match.same(option.label, query))
         ? query
         : null;

package/dist/primitives/value/Avatar.d.ts

@@ -0,0 +1,16 @@
+export declare const SIZE: {
+    readonly sm: "size-5 text-micro";
+    readonly md: "size-6 text-micro";
+    readonly lg: "size-8 text-meta";
+    readonly xl: "size-12 text-body";
+};
+export declare const OVERLAP: Record<AvatarSize, string>;
+export type AvatarSize = keyof typeof SIZE;
+export declare function Avatar({ name, size, 
+/** The photo, if there is one. Without it the initials go, which is the normal
+ *  case here. */
+src, }: {
+    name: string;
+    size?: AvatarSize;
+    src?: string;
+}): import("react").JSX.Element;

package/dist/primitives/value/Avatar.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSurface } from "../../foundations/surface.js";
+/* ==================================================================== *
+ *  WHO — the person as a datum, not as a string of text.
+ *
+ *  «andres.g@sincpro.com.bo» in a cell is a correct and unreadable datum: twelve
+ *  rows of emails get read letter by letter. An initial in a circle is
+ *  recognized without reading, which is what is needed when the question is «who
+ *  does this belong to?» and not «what is their email?».
+ *
+ *  ── The color comes out of the name and nobody picks it ──────────────
+ *
+ *  A hash of the name against the tone palette. It is deterministic —the same
+ *  person always has the same color, on every screen— and that is why the color
+ *  gets to mean something. If the consumer picked it, the same person would be
+ *  green in one list and blue in another, and recognition without reading is lost
+ *  entirely.
+ *
+ *  The color here is NOT a state: it is identity. That is why it uses the tone
+ *  palette but never `bad` nor `warn` — a person is not «in error».
+ * ==================================================================== */
+const PALETTE = [
+    "bg-info/15 text-info",
+    "bg-good/15 text-good",
+    "bg-accent/25 text-ink",
+    "bg-primary/12 text-primary",
+    "bg-ink/10 text-ink",
+];
+/** The initials: two, and from the first two WORDS. «Ana María Gutiérrez» gives
+ *  `AG` and not `AM` — the surname distinguishes more than the middle name. */
+function initials(name) {
+    const parts = name
+        .trim()
+        .split(/\s+/)
+        .filter((p) => p.length > 0);
+    const first = parts[0]?.[0] ?? "?";
+    const last = parts.length > 1 ? parts[parts.length - 1]?.[0] : undefined;
+    return `${first}${last ?? ""}`.toUpperCase();
+}
+/* The same five identities on the dark chrome. The canvas palette there composed its tints
+   over the navy and left ink letters on a dark disc — 1.61:1, unreadable (measured on the
+   application bar). Same index, so a person keeps their color across the two surfaces. */
+const CHROME_PALETTE = [
+    "bg-chrome-link/20 text-chrome-link",
+    "bg-chrome-good/20 text-chrome-good",
+    "bg-chrome-accent/12 text-chrome-accent",
+    "bg-chrome-link/14 text-chrome-ink",
+    "bg-chrome-ink/14 text-chrome-ink",
+];
+function toneOf(name, surface = "canvas") {
+    let h = 0;
+    for (const ch of name)
+        h = (h * 31 + ch.codePointAt(0)) % 100000;
+    const palette = surface === "chrome" ? CHROME_PALETTE : PALETTE;
+    return palette[h % palette.length];
+}
+/* The text doesn't go below `micro`: two initials at 10 px can't be read, and an
+   unreadable initial is a colored circle — which is exactly what we don't want.
+   What changes between sizes is the circle. */
+export const SIZE = {
+    sm: "size-5 text-micro",
+    md: "size-6 text-micro",
+    lg: "size-8 text-meta",
+    /* The head of a contact card: the face is what the card is about. */
+    xl: "size-12 text-body",
+};
+/* Two initials, so the overlap stays short of the second letter. The ring is
+   1px: a 2px ring of the surface color reads as a gap between people, which
+   is the thing a stack is not. */
+export const OVERLAP = {
+    sm: "-ml-1.5",
+    md: "-ml-2",
+    lg: "-ml-2.5",
+    xl: "-ml-3.5",
+};
+export function Avatar({ name, size = "md", 
+/** The photo, if there is one. Without it the initials go, which is the normal
+ *  case here. */
+src, }) {
+    const surface = useSurface();
+    if (src !== undefined) {
+        return (
+        /* The photo lies over the initials, drawn invisible: an image has no text baseline, so
+           a chip with a photo sat on the image's bottom edge in a row aligned by baseline (a
+           `DataField`), higher than the label next to it. The hidden initials give the photo
+           the same baseline the initials disc has. */
+        _jsxs("span", { title: name, className: `relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill ${SIZE[size]}`, children: [_jsx("span", { "aria-hidden": true, className: "invisible", children: initials(name) }), _jsx("img", { src: src, alt: name, className: "absolute inset-0 size-full object-cover" })] }));
+    }
+    return (_jsx("span", { title: name, "aria-hidden": true, className: `inline-flex shrink-0 items-center justify-center rounded-pill font-medium select-none ${SIZE[size]} ${toneOf(name, surface)}`, children: initials(name) }));
+}

package/dist/primitives/value/Person.d.ts

@@ -1,52 +1,8 @@
+import { type AvatarSize } from "./Avatar.js";
+import type { PersonContact } from "./contact.js";
 import type { ReactNode } from "react";
-declare const SIZE: {
-    readonly sm: "size-5 text-micro";
-    readonly md: "size-6 text-micro";
-    readonly lg: "size-8 text-meta";
-    readonly xl: "size-12 text-body";
-};
-export type AvatarSize = keyof typeof SIZE;
-export declare function Avatar({ name, size, 
-/** The photo, if there is one. Without it the initials go, which is the normal
- *  case here. */
-src, }: {
-    name: string;
-    size?: AvatarSize;
-    src?: string;
-}): import("react").JSX.Element;
-/** The ways to reach a person. Each one that is present becomes a row of the contact card. */
-export type PersonContact = {
-    email?: string;
-    /** As people write it — «+591 7 123-4567». The `tel:` link keeps only the digits and `+`. */
-    phone?: string;
-    /** The WhatsApp number with its country code, written any way; `wa.me` gets the digits. */
-    whatsapp?: string;
-};
-export type ContactCardProps = {
-    name: string;
-    /** The photo. Without it, the initials — in the same color the person has everywhere. */
-    src?: string;
-    /** What the person is here: «Vendedora · Sucursal La Paz». */
-    role?: string;
-    contact?: PersonContact;
-    /** Go to the person's own record — «Ver ficha». Without it the card only reaches them. */
-    onOpen?: () => void;
-};
-/**
- * Who a person is and how to reach them: the face, the name, the role, and one row per way
- * of contact — write, call, WhatsApp — then their record.
- *
- * Context: in an ERP the question after «who is the salesperson of this invoice?» is almost
- * always «how do I reach her?». Copying an email out of another screen to paste it into the
- * mail client is the detour this card removes. Each way of contact is a ROW and not a bare
- * icon: the address and the number are drawn, because often what the person wants is to read
- * the number aloud, not to dial it from the browser. Every row is a real link (`mailto:`,
- * `tel:`, `wa.me`), so middle-click, «copy address» and the phone's own dialer work.
- *
- * It is what opens from a `UserChip` with `contact`, and it is exported on its own for the
- * side panel of a record, where the same person is shown without a chip to open.
- */
-export declare function ContactCard({ name, src, role, contact, onOpen }: ContactCardProps): import("react").JSX.Element;
+export { Avatar, type AvatarSize } from "./Avatar.js";
+export type { PersonContact } from "./contact.js";
 export type UserChipProps = {
     name: string;
     size?: AvatarSize;
@@ -57,7 +13,7 @@ export type UserChipProps = {
     role?: string;
     /** The ways to reach them. Present = the chip opens a contact card. */
     contact?: PersonContact;
-    /** Go to the person's record. Present = the chip opens a card with «Ver ficha». */
+    /** Go to the person's record. Present = the chip opens its card with «Abrir». */
     onOpen?: () => void;
 };
 /**
@@ -65,7 +21,7 @@ export type UserChipProps = {
  * a fact of a record.
  *
  * Context: a chip is a button ONLY when it has somewhere to go. With `contact` or `onOpen` it
- * opens the `ContactCard` (press, Enter or Space — React Aria's `DialogTrigger` through
+ * opens the person's `RelationCard` (press, Enter or Space — React Aria's `DialogTrigger` through
  * `PopoverTrigger`: focus goes into the card, Escape and a click outside close it, and focus
  * comes back to the chip). Without them it stays text: a button that does nothing is a lie a
  * keyboard user pays for with one more Tab stop on every row.
@@ -87,4 +43,3 @@ export declare function UserStack({ names, max, size, }: {
     max?: number;
     size?: AvatarSize;
 }): import("react").JSX.Element;
-export {};