@sincpro/web-ui 0.1.0 → 1.0.0

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/Copyable.d.ts

@@ -34,4 +34,15 @@ export type CopyableProps = {
      *  el valor ya está dibujado. */
     bare?: boolean;
 };
+/**
+ * The button alone, for a value that is only known when it is pressed — what a field shows
+ * at that moment (`Field`'s copy button reads it from the screen). `Copyable` is this
+ * button next to its value.
+ */
+export declare function CopyButton({ value, label, }: {
+    /** The text, or how to get it at the moment of the press. */
+    value: string | (() => string);
+    /** Its name at rest. Defaults to the copy table's «Copiar». */
+    label?: string;
+}): import("react").JSX.Element;
 export declare function Copyable({ value, children, mono, bare }: CopyableProps): import("react").JSX.Element;

package/dist/primitives/value/Copyable.js

@@ -6,7 +6,12 @@ import { useEffect, useRef, useState } from "react";
 /** Cuánto dura el tilde. Dos segundos: alcanza para verlo sin que el botón se
  *  quede en un estado que ya no es cierto. */
 const CONFIRMED_FOR = 2000;
-export function Copyable({ value, children, mono = false, bare = false }) {
+/**
+ * The button alone, for a value that is only known when it is pressed — what a field shows
+ * at that moment (`Field`'s copy button reads it from the screen). `Copyable` is this
+ * button next to its value.
+ */
+export function CopyButton({ value, label, }) {
     const copy = useUiCopy();
     const [state, setState] = useState("idle");
     const timer = useRef(null);
@@ -19,8 +24,15 @@ export function Copyable({ value, children, mono = false, bare = false }) {
     async function run() {
         if (timer.current !== null)
             clearTimeout(timer.current);
+        const text = typeof value === "function" ? value() : value;
+        if (text.trim() === "") {
+            /* Nothing on screen to copy: said, not a check mark over an empty clipboard. */
+            setState("empty");
+            timer.current = setTimeout(() => setState("idle"), CONFIRMED_FOR);
+            return;
+        }
         try {
-            await navigator.clipboard.writeText(value);
+            await navigator.clipboard.writeText(text);
             setState("done");
         }
         catch {
@@ -30,16 +42,25 @@ export function Copyable({ value, children, mono = false, bare = false }) {
         }
         timer.current = setTimeout(() => setState("idle"), CONFIRMED_FOR);
     }
-    const label = state === "done"
+    const said = state === "done"
         ? copy.copyable.done
         : state === "failed"
             ? copy.copyable.failed
-            : copy.copyable.label;
-    const button = (_jsx("button", { type: "button", onClick: run, "aria-label": label, title: label, className: `inline-flex shrink-0 items-center justify-center rounded-control p-0.5 transition-colors duration-(--duration-instant) ${state === "done"
+            : state === "empty"
+                ? copy.copyable.empty
+                : (label ?? copy.copyable.label);
+    return (_jsx("button", { type: "button", onClick: (e) => {
+            /* Inside a row that opens or a link: copying is not opening. */
+            e.stopPropagation();
+            void run();
+        }, "aria-label": said, title: said, className: `inline-flex shrink-0 items-center justify-center rounded-control p-0.5 transition-colors duration-(--duration-instant) ${state === "done"
             ? "text-good"
-            : state === "failed"
+            : state === "failed" || state === "empty"
                 ? "text-bad"
                 : "text-muted hover:bg-ink/6 hover:text-ink"}`, children: state === "done" ? (_jsx(Check, { className: "size-(--size-icon-sm)", strokeWidth: 2.5 })) : (_jsx(Copy, { className: "size-(--size-icon-sm)", strokeWidth: 2 })) }));
+}
+export function Copyable({ value, children, mono = false, bare = false }) {
+    const button = _jsx(CopyButton, { value: value });
     if (bare)
         return button;
     return (

package/dist/primitives/value/Fecha.js

@@ -61,12 +61,21 @@ export function formatDateTime(when) {
     const locale = currentCopyLocale();
     return `${dateFormat(locale).format(when)} ${timeFormat(locale).format(when)}`;
 }
+/** A day written as `YYYY-MM-DD` (what a date field stores) is that day HERE. `new Date()`
+ *  reads it as midnight in UTC, and west of Greenwich that is the evening before: a due date
+ *  of the 15th was drawn as the 14th in La Paz. Anything else goes through `Date` as is. */
+function toDate(when) {
+    const day = typeof when === "string" ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(when) : null;
+    if (day === null)
+        return new Date(when);
+    return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3]));
+}
 export function DateValue({ when, format = "relative", 
 /** So it can be tested: without this, a story with «hace 2 min» changes its
  *  text every minute and no snapshot works as a reference. */
 now, }) {
     const copy = useUiCopy();
-    const d = when instanceof Date ? when : new Date(when);
+    const d = when instanceof Date ? when : toDate(when);
     if (Number.isNaN(d.getTime())) {
         return (_jsx("span", { className: "text-meta text-muted italic", title: copy.time.invalid, children: copy.time.noDate }));
     }

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 {};

package/dist/primitives/value/Person.js

@@ -1,154 +1,15 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useSurface } from "../../foundations/surface.js";
-import { Button } from "../button/Button.js";
 import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
-import { ArrowRight, Mail, MessageCircle, Phone } from "lucide-react";
+import { Avatar, OVERLAP, SIZE, } from "./Avatar.js";
+import { RelationCard } from "./Relation.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».
+ *  WHO — a person as a chip and as a stack. The face itself is `Avatar`; what a person's
+ *  card says (the face, the role, the ways to reach them, «Abrir») is the `RelationCard` of
+ *  that person: a person IS a related record, and one card answers for all of them.
  * ==================================================================== */
-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. */
-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. */
-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) }));
-}
-/** The three contact links, built from what people type. `wa.me` takes digits only — a `+`,
- *  a space or a dash breaks it — and `tel:` takes digits and the leading `+`. */
-function contactRows(contact, copy) {
-    const rows = [];
-    if (contact.email !== undefined && contact.email !== "") {
-        rows.push({
-            key: "email",
-            icon: Mail,
-            label: copy.email,
-            value: contact.email,
-            href: `mailto:${contact.email}`,
-        });
-    }
-    if (contact.phone !== undefined && contact.phone !== "") {
-        rows.push({
-            key: "call",
-            icon: Phone,
-            label: copy.call,
-            value: contact.phone,
-            href: `tel:${contact.phone.replace(/[^\d+]/g, "")}`,
-        });
-    }
-    if (contact.whatsapp !== undefined && contact.whatsapp !== "") {
-        rows.push({
-            key: "whatsapp",
-            icon: MessageCircle,
-            label: copy.whatsapp,
-            value: contact.whatsapp,
-            href: `https://wa.me/${contact.whatsapp.replace(/\D/g, "")}`,
-        });
-    }
-    return rows;
-}
-/**
- * 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 function ContactCard({ name, src, role, contact = {}, onOpen }) {
-    const copy = useUiCopy().person;
-    const rows = contactRows(contact, copy);
-    return (
-    /* React events bubble through the popover's portal to the React parents of the chip —
-       a table row that opens on click among them. A click inside the card is not a click
-       on the row. */
-    _jsxs("div", { className: "flex w-64 max-w-full flex-col gap-3", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: name, size: "xl", ...(src === undefined ? {} : { src }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-lead font-semibold text-ink", title: name, children: name }), role === undefined ? null : (_jsx("span", { className: "line-clamp-2 text-meta text-muted", title: role, children: role }))] })] }), rows.length === 0 ? null : (_jsx("ul", { className: "-mx-1 flex flex-col", children: rows.map(({ key, icon: Icon, label, value, href }) => (_jsx("li", { children: _jsxs("a", { href: href, "data-contact": key, ...(key === "whatsapp" ? { target: "_blank", rel: "noreferrer" } : {}), className: "flex min-w-0 items-center gap-2.5 rounded-control px-1 py-1.5 no-underline outline-primary outline-offset-2 hover:bg-ink/6 focus-visible:outline-2 forced-colors:outline-[Highlight]", children: [_jsx(Icon, { "aria-hidden": true, className: "size-(--size-icon-md) shrink-0 text-primary", strokeWidth: 2 }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "text-meta font-medium text-ink", children: label }), _jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: value })] })] }) }, key))) })), onOpen === undefined ? null : (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(Button, { role: "ghost", size: "sm", icon: ArrowRight, onClick: onOpen, children: copy.open }) }))] }));
-}
+export { Avatar } from "./Avatar.js";
 /** The chip as the opener of its card. A native button that takes what `PopoverTrigger`
  *  hands its trigger — `ref`, the press handlers, `expanded` and `haspopup` — the same
  *  contract the system's buttons keep. */
@@ -164,7 +25,7 @@ function ChipButton({ expanded, haspopup, children, ref, ...native }) {
  * 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.
@@ -180,7 +41,7 @@ export function UserChip({ name, size = "md", src, detail, role, contact, onOpen
     if (!reachable) {
         return _jsx("span", { className: "inline-flex min-w-0 items-center gap-2", children: face });
     }
-    return (_jsx(PopoverTrigger, { label: name, trigger: _jsx(ChipButton, { children: face }), children: (close) => (_jsx(ContactCard, { name: name, ...(src === undefined ? {} : { src }), ...(role === undefined ? {} : { role }), ...(contact === undefined ? {} : { contact }), ...(onOpen === undefined
+    return (_jsx(PopoverTrigger, { label: name, trigger: _jsx(ChipButton, { children: face }), children: (close) => (_jsx(RelationCard, { name: name, media: { person: true, ...(src === undefined ? {} : { src }) }, ...(role === undefined ? {} : { secondary: role }), ...(contact === undefined ? {} : { contact }), ...(onOpen === undefined
                 ? {}
                 : {
                     onOpen: () => {

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

@@ -0,0 +1,31 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export type ProgressBarProps = {
+    /** Where the task is, from `minValue` to `maxValue`. Absent = under way and it cannot say
+     *  how far: the bar sweeps and draws no figure. */
+    value?: number;
+    /** What is running: «Importación de clientes», «Cierre de octubre». Always its accessible
+     *  name; drawn above the bar only with `showLabel`. */
+    label: string;
+    minValue?: number;
+    /** The size of the task — 4000 for an import of 4.000 rows. 100 by default, so a plain
+     *  percentage needs nothing else. */
+    maxValue?: number;
+    /** How the figure is written. Absent: the percentage of the task. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The figure written by hand, when a percentage does not say it: «1.240 de 4.000 filas».
+     *  It is also what a screen reader reads. Indeterminate, it is the only figure drawn —
+     *  «leyendo el archivo…». */
+    valueLabel?: ReactNode;
+    /** Draws the label above the bar: the bar a screen is about (an import, the closing of
+     *  the month). Off in a cell or a row, where the column or the line already says it. */
+    showLabel?: boolean;
+    /** Off when the figure is already beside it — a cell with its column. */
+    showValue?: boolean;
+    /** The width of the track (inline) or of the whole piece (with `showLabel`). A bar in a
+     *  list row is shorter than the bar of an import. */
+    width?: string;
+    /** The state of the task. `brand` — the gradient — is the long bar of a live process. */
+    tone?: Tone | "brand";
+};
+export declare function ProgressBar({ value, label, minValue, maxValue, formatOptions, valueLabel, showLabel, showValue, width, tone, }: ProgressBarProps): import("react").JSX.Element;

package/dist/primitives/value/ProgressBar.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { cn } from "../../foundations/variants.js";
+import { ProgressBar as AriaProgressBar } from "react-aria-components";
+/**
+ * A task under way: the import of 4.000 rows, the closing of the month, a file going up. A
+ * real bar, never a spinner — a spinner says «wait» and does not say how much; a bar says both.
+ *
+ * Context: it looks like `Meter` and it is the opposite thing. A meter is a QUANTITY in a
+ * range that just is — the stock against the warehouse, the credit used — and full is often
+ * the alarm. A progress bar is something HAPPENING, moving toward done, and full is the good
+ * news. That is why their color comes from different places: the meter's is the reading of
+ * its value; this one's is the state of the task, said by whoever runs it — `good` finished,
+ * `warn` is running slow, `bad` failed — and `brand` by default, the blue→gold gradient of
+ * the long bar of a live import. (At 6 px and 62 % in a list row a gradient reads as a
+ * broken bar, so a short bar there asks for a flat tone.)
+ *
+ * ── Determinate and indeterminate ─────────────────────────────────────
+ *
+ * With a `value` it fills to it, and the figure next to it is in tabular figures so a column
+ * of bars keeps its digits aligned. Without one the task is under way and cannot say how far
+ * — the server has not counted the rows yet — and the bar SAYS so instead of inventing a
+ * number: a segment sweeps along the track and no figure is drawn. That sweep is the only
+ * loop of the system (`--animate-progress-sweep`), and it runs behind `motion-safe:`: with
+ * `prefers-reduced-motion` the segment stands still, the whole track faded — «busy» without
+ * movement, and without a fill that could be read as a percentage.
+ *
+ * React Aria writes `role="progressbar"` and the `aria-value*` — no `aria-valuenow` while it
+ * is indeterminate, which is how a screen reader tells the two apart — and formats the figure
+ * in the copy table's locale (`AriaLocale`).
+ *
+ * The track is the system's `--size-track`: at 3 px it was a line that could not be told
+ * from a separator; two bars of different thickness on one screen read as two things.
+ */
+const FILL = {
+    neutral: "bg-muted",
+    info: "bg-info",
+    good: "bg-good",
+    warn: "bg-warn",
+    bad: "bg-bad",
+    accent: "bg-accent",
+};
+export function ProgressBar({ value, label, minValue = 0, maxValue = 100, formatOptions, valueLabel, showLabel = false, showValue = true, width = "w-24", tone = "brand", }) {
+    const fill = tone === "brand" ? "bar-brand" : FILL[tone];
+    return (_jsx(AriaLocale, { children: _jsx(AriaProgressBar, { "aria-label": label, ...(value === undefined ? {} : { value }), isIndeterminate: value === undefined, minValue: minValue, maxValue: maxValue, formatOptions: formatOptions, valueLabel: valueLabel, className: showLabel
+                ? `flex max-w-full flex-col gap-1.5 ${width}`
+                : "flex min-w-0 items-center gap-2", children: ({ percentage, valueText, isIndeterminate }) => {
+                const figure = showValue && valueText !== undefined ? (_jsx("span", { className: "shrink-0 text-meta tabular-nums text-muted", children: valueText })) : null;
+                const track = (_jsx("span", { className: cn("relative block h-(--size-track) overflow-hidden rounded-pill bg-ink/10 forced-colors:outline forced-colors:outline-[ButtonBorder]", showLabel ? "w-full" : width), children: isIndeterminate ? (_jsx("span", { "data-indeterminate": true, className: cn("absolute inset-y-0 left-0 w-2/5 rounded-pill forced-colors:bg-[Highlight]", "motion-safe:animate-progress-sweep motion-reduce:w-full motion-reduce:opacity-40", fill) })) : (_jsx("span", { className: cn("block h-full rounded-pill transition-[width] duration-(--duration-panel) ease-(--ease-out) forced-colors:bg-[Highlight]", fill), style: { width: `${percentage ?? 0}%` } })) }));
+                return showLabel ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "truncate text-meta text-ink", children: label }), figure] }), track] })) : (_jsxs(_Fragment, { children: [track, figure] }));
+            } }) }));
+}

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

@@ -1,5 +1,6 @@
-import type { Tone } from "../../foundations/types.js";
+import type { OpenTarget, Tone } from "../../foundations/types.js";
 import { type FormMode } from "../field/mode.js";
+import { type PersonContact } from "./contact.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
 /** What the floating summary of the related record says. */
@@ -18,16 +19,22 @@ export type RelationSummary = {
         value: ReactNode;
     }[];
 };
+/** The picture of the related record: a photo or an icon on a square tile — or, for a person
+ *  (`person`), the round face: the photo, or the initials in the color that person has
+ *  everywhere. */
 type RelationMedia = {
     src?: string;
     alt?: string;
     icon?: LucideIcon;
+    person?: true;
 };
 export type RelationCardProps = {
     name: string;
     secondary?: ReactNode;
     media?: RelationMedia;
     summary?: RelationSummary;
+    /** How to reach it — a person, a company: one row per way (write, call, WhatsApp). */
+    contact?: PersonContact;
     /** «Abrir»: go to the related record. */
     onOpen?: () => void;
     /** The record's address, when it has one: «Abrir» becomes a real link. */
@@ -39,9 +46,10 @@ export type RelationCardProps = {
  * Context: it answers the question a person has about the customer of an invoice without
  * leaving the invoice — «does it owe us?», «what is its NIT?» — and, when the answer is
  * «I need more», one press takes them to the record. It is what floats from a
- * `RelationValue`, and it is exported on its own for a side panel.
+ * `RelationValue` and what opens from a `UserChip` (a person is a related record too: round
+ * face, role, the ways to reach them), and it is exported on its own for a side panel.
  */
-export declare function RelationCard({ name, secondary, media, summary, onOpen, href, }: RelationCardProps): import("react").JSX.Element;
+export declare function RelationCard({ name, secondary, media, summary, contact, onOpen, href, }: RelationCardProps): import("react").JSX.Element;
 export type RelationValueProps = {
     /** The related record's name. Empty, `null` or absent = no record: said, in muted. */
     name?: string | null;
@@ -51,10 +59,19 @@ export type RelationValueProps = {
     media?: RelationMedia;
     /** Go to the related record. The name becomes a link. */
     onOpen?: () => void;
+    /** Go to it in the place the person chose (`OpenTarget`): the name opens in the first of
+     *  `openTargets` — a modal by default, the form stays behind — and «Abrir en…» beside it offers
+     *  the rest. Takes over from `onOpen`. */
+    onOpenIn?: (to: OpenTarget) => void;
+    openTargets?: readonly OpenTarget[];
     /** The related record's address: the name becomes a real `<a>` (middle-click, copy). */
     href?: string;
-    /** Present = an info button next to the name opens the `RelationCard`. */
+    /** The facts of the related record. Present = its `RelationCard` floats from the name
+     *  (hover, focus, long press); from an info button when the name is not a link. */
     summary?: RelationSummary;
+    /** What floats instead of the `RelationCard` — the product of a line, a consumer's own
+     *  card. `true` floats the card even without `summary`; `false` floats nothing. */
+    preview?: boolean | ReactNode;
     /** The control that EDITS this relation — a `Picker` — drawn instead in edit mode. */
     editor?: ReactNode;
     /** Forces the mode; by default the form's. Only matters with `editor`. */
@@ -65,5 +82,5 @@ export type RelationValueProps = {
  * picture, and its summary one press away. Works in a table cell, a list row, a `Record.Facts`
  * value and a form field (read mode; pass the `Picker` as `editor` for edit mode).
  */
-export declare function RelationValue({ name, secondary, media, onOpen, href, summary, editor, mode, }: RelationValueProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare function RelationValue({ name, secondary, media, onOpen: onOpenOwn, onOpenIn, openTargets, href, summary, preview, editor, mode, }: RelationValueProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 export {};