@sincpro/web-ui 0.2.0 → 1.1.0

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/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,14 +59,18 @@ 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;
-    /** Floats the summary from the NAME on hover, focus or long press, instead of from the
-     *  info button. `true` = the `RelationCard` (with `summary` when given); a node = that
-     *  content instead — the product of a line, a consumer's own card. Needs the name to be a
-     *  link (`href` or `onOpen`); without one the content opens from the info button. */
+    /** 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;
@@ -70,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, 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 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 {};

package/dist/primitives/value/Relation.js

@@ -6,10 +6,13 @@ import { Button, ButtonLink, IconButton } from "../button/Button.js";
 import { CellStack, Thumb } from "../cell/CellStack.js";
 import { FieldIdsContext } from "../field/context.js";
 import { useFormMode } from "../field/mode.js";
+import { Menu } from "../menu/Menu.js";
 import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
 import { Preview } from "../overlay/Preview.js";
 import { Tag } from "../tag/Tag.js";
-import { ArrowRight, Info } from "lucide-react";
+import { Avatar } from "./Avatar.js";
+import { ContactRows } from "./contact.js";
+import { ArrowRight, Ellipsis, Info } from "lucide-react";
 import { useContext } from "react";
 import { Link } from "react-aria-components";
 /**
@@ -18,22 +21,27 @@ import { Link } from "react-aria-components";
  * 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 function RelationCard({ name, secondary, media, summary = {}, onOpen, href, }) {
+export function RelationCard({ name, secondary, media, summary = {}, contact, onOpen, href, }) {
     const copy = useUiCopy();
     const title = summary.title ?? name;
     return (
     /* React events bubble through the popover's portal to the React parents of the link —
        a table row that opens on click among them. A click inside the card stays here. */
-    _jsxs("div", { className: "flex w-72 max-w-full flex-col gap-3", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [media === undefined ? null : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: "text-lead leading-tight font-semibold text-ink", children: title }), secondary === undefined ? null : (_jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: secondary })), summary.tag === undefined ? null : (_jsx("span", { className: "flex", children: _jsx(Tag, { tone: summary.tag.tone ?? "neutral", children: summary.tag.label }) }))] })] }), summary.facts === undefined || summary.facts.length === 0 ? null : (_jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2 border-t border-line pt-3", children: summary.facts.map((fact) => (_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("dt", { className: "truncate text-micro text-muted", children: fact.label }), _jsx("dd", { className: "truncate text-meta tabular-nums text-ink", children: fact.value })] }, fact.label))) })), href !== undefined ? (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(ButtonLink, { href: href, role: "ghost", size: "sm", icon: ArrowRight, ...(onOpen === undefined ? {} : { onClick: onOpen }), children: copy.relation.open }) })) : onOpen !== undefined ? (_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.relation.open }) })) : null] }));
+    _jsxs("div", { className: "flex w-72 max-w-full flex-col gap-3", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [media === undefined ? null : media.person === true ? (
+                    /* The name is written beside it: the photo's `alt` would say it twice. */
+                    _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: name, size: "xl", ...(media.src === undefined ? {} : { src: media.src }) }) })) : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: "text-lead leading-tight font-semibold text-ink", children: title }), secondary === undefined ? null : (_jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: secondary })), summary.tag === undefined ? null : (_jsx("span", { className: "flex", children: _jsx(Tag, { tone: summary.tag.tone ?? "neutral", children: summary.tag.label }) }))] })] }), summary.facts === undefined || summary.facts.length === 0 ? null : (_jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2 border-t border-line pt-3", children: summary.facts.map((fact) => (_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("dt", { className: "truncate text-micro text-muted", children: fact.label }), _jsx("dd", { className: "truncate text-meta tabular-nums text-ink", children: fact.value })] }, fact.label))) })), contact === undefined ? null : _jsx(ContactRows, { contact: contact }), href !== undefined ? (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(ButtonLink, { href: href, role: "ghost", size: "sm", icon: ArrowRight, ...(onOpen === undefined ? {} : { onClick: onOpen }), children: copy.relation.open }) })) : onOpen !== undefined ? (_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.relation.open }) })) : null] }));
 }
 /**
  * A many2one as a value: the related record's name as a link, with its secondary line and
  * 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 function RelationValue({ name, secondary, media, onOpen, href, summary, preview, editor, mode, }) {
+export function RelationValue({ name, secondary, media, onOpen: onOpenOwn, onOpenIn, openTargets = ["modal", "peek", "side", "page"], href, summary, preview, editor, mode, }) {
+    const first = openTargets[0];
+    const onOpen = onOpenIn !== undefined && first !== undefined ? () => onOpenIn(first) : onOpenOwn;
     const copy = useUiCopy();
     const formMode = useFormMode(mode);
     /* Inside a `Field` the value takes the control's height, so a form that goes from
@@ -49,26 +57,29 @@ export function RelationValue({ name, secondary, media, onOpen, href, summary, p
     const summaryLabel = fillCopy(copy.relationCard.summary, { name });
     const card = (open) => (_jsx(RelationCard, { name: name, ...(summary === undefined ? {} : { summary }), ...(secondary === undefined ? {} : { secondary }), ...(media === undefined ? {} : { media }), ...(href === undefined ? {} : { href }), ...(open === undefined ? {} : { onOpen: open }) }));
     /* What floats from the name: the card, or the consumer's own content. */
-    const previewed = preview === undefined || preview === null || preview === false
+    const previewed = preview === false || preview === null
         ? undefined
-        : preview === true
-            ? card(onOpen)
-            : preview;
+        : preview === undefined
+            ? summary === undefined
+                ? undefined
+                : card(onOpen)
+            : preview === true
+                ? card(onOpen)
+                : preview;
     const link = goes ? (_jsx(Link, { ...(href === undefined ? {} : { href }), ...(onOpen === undefined ? {} : { onPress: onOpen }), className: ({ isFocusVisible }) => cn("cursor-pointer rounded-mark text-primary no-underline underline-offset-2 hover:underline", focusRing({ isFocusVisible })), children: name })) : undefined;
     const primary = link === undefined ? (name) : previewed === undefined ? (link) : (_jsx(Preview, { trigger: link, label: summaryLabel, children: previewed }));
-    /* The `i`: the summary when there is no preview on the name; the preview's content when
-       there is no link for it to ride on. */
-    const info = previewed !== undefined
-        ? goes
-            ? undefined
-            : () => previewed
-        : summary === undefined
-            ? undefined
-            : (close) => card(onOpen === undefined
-                ? undefined
-                : () => {
-                    close();
-                    onOpen();
-                });
-    return frame(_jsxs("span", { className: "inline-flex max-w-full min-w-0 items-center gap-1", children: [_jsx(CellStack, { primary: primary, ...(secondary === undefined ? {} : { secondary }), ...(media === undefined ? {} : { media }) }), info === undefined ? null : (_jsx(PopoverTrigger, { label: summaryLabel, trigger: _jsx(IconButton, { icon: Info, label: summaryLabel, size: "sm" }), children: info }))] }));
+    /* The `i` only when the name is not a link: there is nothing for the card to ride on. */
+    const info = previewed === undefined || goes ? undefined : () => previewed;
+    return frame(_jsxs("span", { className: "inline-flex max-w-full min-w-0 items-center gap-1", children: [_jsx(CellStack, { primary: primary, ...(secondary === undefined ? {} : { secondary }), ...(media === undefined
+                    ? {}
+                    : media.person === true
+                        ? { avatar: { name, ...(media.src === undefined ? {} : { src: media.src }) } }
+                        : { media }) }), onOpenIn === undefined || openTargets.length < 2 ? null : (_jsx(Menu, { label: copy.picker.openMore, icon: Ellipsis, iconOnly: true, chevron: false, variant: "text", groups: [
+                    {
+                        options: openTargets.slice(1).map((to) => ({
+                            id: to,
+                            label: copy.picker.openIn[to],
+                        })),
+                    },
+                ], onSelect: (to) => onOpenIn(to) })), info === undefined ? null : (_jsx(PopoverTrigger, { label: summaryLabel, trigger: _jsx(IconButton, { icon: Info, label: summaryLabel, size: "sm" }), children: info }))] }));
 }

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

@@ -0,0 +1,30 @@
+import { useUiCopy } from "../../foundations/copy.js";
+import type { LucideIcon } from "lucide-react";
+/** 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;
+};
+/** 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 `+`. */
+export declare function contactRows(contact: PersonContact, copy: ReturnType<typeof useUiCopy>["person"]): {
+    key: string;
+    icon: LucideIcon;
+    label: string;
+    value: string;
+    href: string;
+}[];
+/**
+ * The ways to reach someone, one ROW each — write, call, WhatsApp — on the card of any record
+ * that is a person or a company. Each way 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. Internal: `RelationCard` draws
+ * it from its `contact`.
+ */
+export declare function ContactRows({ contact }: {
+    contact: PersonContact;
+}): import("react").JSX.Element | null;

package/dist/primitives/value/contact.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Mail, MessageCircle, Phone } from "lucide-react";
+/** 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 `+`. */
+export 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;
+}
+/**
+ * The ways to reach someone, one ROW each — write, call, WhatsApp — on the card of any record
+ * that is a person or a company. Each way 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. Internal: `RelationCard` draws
+ * it from its `contact`.
+ */
+export function ContactRows({ contact }) {
+    const rows = contactRows(contact, useUiCopy().person);
+    if (rows.length === 0)
+        return null;
+    return (_jsx("ul", { className: "-mx-1 flex flex-col border-t border-line pt-2", 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))) }));
+}

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

@@ -2,7 +2,7 @@ export { Copyable, type CopyableProps, CopyButton, } from "./Copyable.js";
 export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
 export { Meter, type MeterLevel, meterLevel, type MeterProps, type MeterThresholds, } from "./Meter.js";
 export { Metric, type MetricProps, Metrics } from "./Metric.js";
-export { Avatar, type AvatarSize, ContactCard, type ContactCardProps, type PersonContact, UserChip, type UserChipProps, UserStack, } from "./Person.js";
+export { Avatar, type AvatarSize, type PersonContact, UserChip, type UserChipProps, UserStack, } from "./Person.js";
 export { ProgressBar, type ProgressBarProps, } from "./ProgressBar.js";
 export { RelationCard, type RelationCardProps, type RelationSummary, RelationValue, type RelationValueProps, } from "./Relation.js";
 export { Totals, type TotalsCredit, type TotalsDeduction, type TotalsFact, type TotalsProps, type TotalsRow, } from "./Totals.js";

package/dist/primitives/value/index.js

@@ -3,7 +3,7 @@ export { Copyable, CopyButton, } from "./Copyable.js";
 export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
 export { Meter, meterLevel, } from "./Meter.js";
 export { Metric, Metrics } from "./Metric.js";
-export { Avatar, ContactCard, UserChip, UserStack, } from "./Person.js";
+export { Avatar, UserChip, UserStack, } from "./Person.js";
 export { ProgressBar, } from "./ProgressBar.js";
 export { RelationCard, RelationValue, } from "./Relation.js";
 export { Totals, } from "./Totals.js";

package/dist/tokens.css

@@ -11,6 +11,13 @@
 @import "@fontsource/ibm-plex-mono/latin-ext-400.css";
 @import "@fontsource/ibm-plex-mono/latin-500.css";
 @import "@fontsource/ibm-plex-mono/latin-ext-500.css";
+/* The record calendar (`RecordCalendar`, FullCalendar v7): its structure and the `forma`
+   theme. The palette that theme reads is defined below, from web-ui's tokens. */
+@import "@fullcalendar/react/skeleton.css";
+@import "@fullcalendar/react/themes/forma/theme.css";
+/* The record Gantt (`RecordGantt`, SVAR): its styles, Willow theme included. Its variables
+   are pointed at web-ui's tokens below. */
+@import "@svar-ui/react-gantt/all.css";
 
 @import "tailwindcss";
 
@@ -491,6 +498,20 @@
      earlier. */
   --container-name: 12rem;
 
+  /* The widest a chip of the search bar gets before it truncates. A filter written by hand
+     («cliente contiene Importadora y Exportadora…») would otherwise take a whole line of the
+     bar and push the rest down; the full text stays in the chip's title. */
+  /* One stage of a board by stages: a card with its name, a tag and a figure, without
+     wrapping the name into three lines. Five stages fit a desk; more scroll sideways. */
+  --container-lane: 18rem;
+  /* The names column of a timeline (an employee with an avatar, a room, a machine): wide enough
+     for «Ammy Shalem Aranibar Zambrana» before it truncates. */
+  --container-timeline-label: 15rem;
+  --container-facet: 16rem;
+  /* The grouping chain is several levels in one chip, so it asks for more before it
+     truncates — at its end, as one sentence, never level by level. */
+  --container-chain: 28rem;
+
   /* The minimum width of a metric. It belongs to the system and not to the
      component: three metrics of different widths read as three different
      things, and what they have to let you compare is precisely the number. */
@@ -511,7 +532,7 @@
 
      `--container-beside` is how wide the record's PAGE has to be for the column to stand
      beside the sheet: the column and a sheet that keeps 54rem — two groups of fields side by
-     side still fit their labels. Narrower (a laptop with a sidebar, a phone, a `Drill`), the
+     side still fit their labels. Narrower (a laptop with a sidebar, a phone, a modal), the
      panel goes BELOW the sheet as a card. Written as a number and not a `calc()` because a container query cannot
      read a variable.
 
@@ -766,6 +787,113 @@
     0 2px 6px -2px rgba(26, 23, 20, 0.18), 0 18px 40px -20px rgba(26, 23, 20, 0.42);
 }
 
+/* ====================================================================
+ *  THE WORKSPACE (@sincpro/web-composer) dressed in these tokens.
+ *
+ *  Context: the composer depends on no design system and paints its frames, tabs, windows
+ *  and modals with `--sc-*` variables. Pointing them at web-ui's tokens here means a composer
+ *  on a web-ui page takes its theme — light, dark, and any brand — with nothing to wire: no
+ *  import, no dependency, only names. They are aliases, so they follow the dark theme on
+ *  their own and carry no contrast of their own to measure.
+ * ==================================================================== */
+:root {
+  --sc-ground: var(--color-ground);
+  --sc-surface: var(--color-surface);
+  --sc-line: var(--color-line);
+  --sc-line-strong: var(--color-line-strong);
+  --sc-ink: var(--color-ink);
+  --sc-muted: var(--color-muted);
+  /* The workspace's accent marks where you are (the active tab, a focused frame): the navy
+     of a link, not the gold of the one primary action. */
+  --sc-accent: var(--color-primary);
+  --sc-danger: var(--color-danger);
+  --sc-on-danger: var(--color-surface);
+  --sc-scrim: var(--color-scrim);
+  --sc-modal-scrim: color-mix(in srgb, var(--color-scrim) 40%, transparent);
+  --sc-shadow: var(--shadow-window);
+  --sc-radius: var(--radius-panel);
+  --sc-radius-control: var(--radius-control);
+  --sc-text: var(--text-meta);
+  --sc-text-small: var(--text-micro);
+  --sc-icon: var(--size-icon-md);
+}
+
+/* ====================================================================
+ *  THE RECORD CALENDAR (FullCalendar v7, `forma` theme) in these tokens.
+ *
+ *  Context: the theme reads a palette of `--fc-forma-*` variables. Pointed at web-ui's tokens it
+ *  takes the theme — light, dark, a brand — with no dark block of its own: the tokens already
+ *  flip. Aliases, so no contrast of their own to measure; the translucent washes are mixed from
+ *  the ink so they read on either theme.
+ * ==================================================================== */
+:root {
+  --fc-forma-primary: var(--color-primary);
+  --fc-forma-primary-over: var(--color-primary-hover);
+  --fc-forma-primary-down: var(--color-primary-hover);
+  --fc-forma-primary-foreground: var(--color-surface);
+  --fc-forma-event: var(--color-primary);
+  --fc-forma-event-contrast: var(--color-surface);
+  --fc-forma-background-event: var(--color-primary);
+  --fc-forma-highlight: color-mix(in srgb, var(--color-primary) 18%, transparent);
+  --fc-forma-background: var(--color-surface);
+  --fc-forma-faint: color-mix(in srgb, var(--color-ink) 3%, transparent);
+  --fc-forma-muted: color-mix(in srgb, var(--color-ink) 7%, transparent);
+  --fc-forma-strong: color-mix(in srgb, var(--color-ink) 12%, transparent);
+  --fc-forma-stronger: color-mix(in srgb, var(--color-ink) 16%, transparent);
+  --fc-forma-strongest: color-mix(in srgb, var(--color-ink) 20%, transparent);
+  --fc-forma-foreground: var(--color-ink);
+  --fc-forma-faint-foreground: var(--color-muted);
+  --fc-forma-muted-foreground: var(--color-muted);
+  --fc-forma-border: var(--color-line);
+  --fc-forma-muted-border: var(--color-line);
+  --fc-forma-strong-border: var(--color-line-strong);
+}
+
+/* ====================================================================
+ *  THE RECORD GANTT (SVAR, Willow theme) in these tokens.
+ *
+ *  Context: Willow declares its `--wx-*` on `.wx-willow-theme`; redeclared on the same class
+ *  here, later, they win. Bars are the navy of the system, a summary the ink, a milestone the
+ *  info tone; the type is the system's. Aliases: they flip with the theme.
+ * ==================================================================== */
+.wx-willow-theme {
+  --wx-color-primary: var(--color-primary);
+  --wx-color-primary-selected: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  --wx-color-primary-font: var(--color-surface);
+  --wx-color-secondary-hover: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  --wx-color-success: var(--color-good);
+  --wx-color-warning: var(--color-warn);
+  --wx-color-info: var(--color-info);
+  --wx-color-danger: var(--color-danger);
+  --wx-color-font: var(--color-ink);
+  --wx-color-font-alt: var(--color-muted);
+  --wx-background: var(--color-surface);
+  --wx-background-alt: var(--color-ground);
+  --wx-background-hover: color-mix(in srgb, var(--color-ink) 5%, transparent);
+  --wx-font-family: inherit;
+  --wx-font-size: var(--text-meta);
+  --wx-font-size-sm: var(--text-micro);
+  --wx-icon-color: var(--color-muted);
+  --wx-border-color: var(--color-line);
+  --wx-border-radius: var(--radius-control);
+  --wx-radius-major: var(--radius-box);
+  --wx-gantt-border-color: var(--color-line);
+  --wx-gantt-task-color: var(--color-primary);
+  --wx-gantt-task-fill-color: var(--color-primary-hover);
+  --wx-gantt-task-border-color: var(--color-primary-hover);
+  --wx-gantt-task-font-color: var(--color-surface);
+  --wx-gantt-summary-color: var(--color-line-strong);
+  --wx-gantt-summary-fill-color: color-mix(in srgb, var(--color-ink) 45%, transparent);
+  --wx-gantt-summary-border-color: var(--color-line-strong);
+  --wx-gantt-summary-font-color: var(--color-ink);
+  --wx-gantt-milestone-color: var(--color-info);
+  --wx-gantt-select-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  --wx-gantt-link-color: var(--color-muted);
+  --wx-gantt-link-color-hovered: var(--color-ink);
+  --wx-gantt-holiday-background: var(--color-ground);
+  --wx-gantt-holiday-color: var(--color-muted);
+}
+
 @layer base {
   /* No forced height anywhere: the document is exactly as tall as its content.
    * The color still has to reach the bottom of the viewport on a short page —
@@ -1060,3 +1188,10 @@
     --size-control-lg: 48px;
   }
 }
+
+/* A label written down a narrow strip: the name of a folded board column, read bottom-up
+   like a book's spine. Tailwind has no writing-mode utility. */
+@utility text-vertical {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}