@sincpro/web-ui 0.2.0 → 1.0.0

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);
+}

package/dist/views/list/List.d.ts

@@ -1,10 +1,11 @@
+import type { BoardStages } from "../../components/listing/BoardColumns.js";
 import type { ListIdentity } from "../../components/listing/ListingBar.js";
 import type { SortField } from "../../components/listing/SortMenu.js";
 import type { Surface } from "../../foundations/types.js";
 import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SortState } from "../../primitives/table/Table.js";
-import { type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSheet, type RowOf } from "./types.js";
+import { type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
 import type { ReactNode } from "react";
 type BarProps = {
     children?: ReactNode;
@@ -50,6 +51,8 @@ type TableProps<T extends object> = {
  *  se puede ver como tablero. */
 type BoardProps<T> = {
     card?: (item: T) => ReactNode;
+    /** One column per stage, with drag (and Alt + ← / →) to move a card between them. */
+    stages?: BoardStages<T>;
 };
 /** La planilla. Sin columnas propias, sale de las que declaró `List.Table` — la
  *  de datos CRUDOS sí las trae, porque ahí salen del archivo y el código no sabe
@@ -75,6 +78,11 @@ export type ListProps<T extends object> = {
         count: number;
         clear: () => void;
         actions?: ReactNode;
+        /** Every record that matches, not just the page — see `ListViewProps`. */
+        matching?: {
+            total: number;
+            onSelect: () => void;
+        };
     };
     /** El orden, que también es del conjunto. */
     sort?: SortState | null;
@@ -88,6 +96,18 @@ export type ListProps<T extends object> = {
     onOpen?: (item: T) => void;
     onPeek?: (item: T) => void;
     isPeeked?: (item: T) => boolean;
+    /** What a press on the row's body does when both ways in exist. `peek` (the default) looks
+     *  without leaving the list; `open` goes to the record — a workspace whose rule is «a row
+     *  opens the page» (the composer's) says `open`, and 👁 stays for the look. */
+    rowClick?: "peek" | "open";
+    /** The list CHOOSES instead of opening — a «Buscar más…», a chooser a workspace asked for:
+     *  a press on a row (its body, its name, a card) calls this, and the row offers no 👁 / ↗.
+     *  For several at once, give `selection` too and toggle it here. */
+    onChoose?: (item: T) => void;
+    /** Nothing in it can be acted on: no opening, peeking, selecting, creating nor row
+     *  actions — a list to read, like the lines of a record in view mode. One switch, so whoever
+     *  passes the handlers generically does not have to strip them one by one. */
+    readOnly?: boolean;
     /** Los tres estados, en un solo lugar. */
     state?: {
         loading?: boolean;
@@ -99,7 +119,7 @@ export type ListProps<T extends object> = {
     empty?: ListEmpty;
     children?: ReactNode;
 };
-export declare function List<T extends object>({ items, keyOf, embedded, surface, group, selection, sort, onSortChange, sortable, present, onPresentChange, onOpen, onPeek, isPeeked, state, filtered, empty, children, }: ListProps<T>): import("react").JSX.Element;
+export declare function List<T extends object>({ items, keyOf, embedded, surface, group, selection: selectWith, sort, onSortChange, sortable, present, onPresentChange, onOpen: openWith, onPeek: peekWith, isPeeked, readOnly, rowClick, onChoose, state, filtered, empty, children, }: ListProps<T>): import("react").JSX.Element;
 export declare namespace List {
     var Bar: ((props: BarProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"bar">;
     var Crumbs: ((props: CrumbsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"crumbs">;
@@ -115,5 +135,8 @@ export declare namespace List {
     var Sheet: <T>(props: SheetProps<T>) => ReactNode;
     var Report: ((props: ListReport) => ReactNode) & import("../../foundations/slots.js").Slotted<"report">;
     var Pivot: <T>(props: ListPivot<T>) => ReactNode;
+    var Calendar: <T>(props: ListCalendar<T>) => ReactNode;
+    var Gantt: <T>(props: ListGantt<T>) => ReactNode;
+    var Timeline: <T>(props: ListTimeline<T>) => ReactNode;
 }
 export {};

package/dist/views/list/List.js

@@ -40,10 +40,32 @@ const PRESENT_OF = {
     sheet: "sheet",
     report: "report",
     pivot: "pivot",
+    calendar: "calendar",
+    gantt: "gantt",
+    timeline: "timeline",
 };
-const FACES = ["rows", "table", "board", "sheet", "report", "pivot"];
-export function List({ items, keyOf, embedded, surface, group, selection, sort, onSortChange, sortable, present, onPresentChange, onOpen, onPeek, isPeeked, state, filtered, empty, children, }) {
+const FACES = [
+    "rows",
+    "table",
+    "board",
+    "sheet",
+    "report",
+    "pivot",
+    "calendar",
+    "gantt",
+    "timeline",
+];
+/** Records grouped in rows across time, N per row — a planning (`RecordTimeline`). */
+const TimelineSlot = slot("timeline", (_props) => null);
+/** When each record happens, on a month, a week, a day or an agenda (`RecordCalendar`). */
+const CalendarSlot = slot("calendar", (_props) => null);
+/** Each record as a span on a timeline, with its dependencies (`RecordGantt`). */
+const GanttSlot = slot("gantt", (_props) => null);
+export function List({ items, keyOf, embedded, surface, group, selection: selectWith, sort, onSortChange, sortable, present, onPresentChange, onOpen: openWith, onPeek: peekWith, isPeeked, readOnly = false, rowClick, onChoose, state, filtered, empty, children, }) {
     const top = flatten(children);
+    const onOpen = readOnly ? undefined : openWith;
+    const onPeek = readOnly ? undefined : peekWith;
+    const selection = readOnly ? undefined : selectWith;
     const bar = flatten(propsOf(pick(top, "bar"))?.children);
     const crumbs = propsOf(pick(bar, "crumbs"))?.crumbs;
     const identity = propsOf(pick(bar, "identity"));
@@ -58,6 +80,9 @@ export function List({ items, keyOf, embedded, surface, group, selection, sort,
     const sheet = propsOf(pick(top, "sheet"));
     const report = propsOf(pick(top, "report"));
     const pivot = propsOf(pick(top, "pivot"));
+    const calendar = propsOf(pick(top, "calendar"));
+    const gantt = propsOf(pick(top, "gantt"));
+    const timeline = propsOf(pick(top, "timeline"));
     /* Las caras que hay son las que están escritas, EN ESE ORDEN. El conmutador
        no puede ofrecer una que no se pueda dibujar, porque la que se dibuja y la
        que se ofrece son el mismo nodo. */
@@ -68,22 +93,34 @@ export function List({ items, keyOf, embedded, surface, group, selection, sort,
     /* La escotilla: lo que el arquetipo no previó se dibuja igual, debajo. Que
        aparezca algo acá es la señal de que al arquetipo le falta una pieza. */
     const rest = loose(top, ["bar", "metrics", ...FACES]);
-    return (_jsx(ListView, { items: items, keyOf: keyOf, row: rows?.row ?? (() => ({ name: "" })), ...(rows?.header === undefined ? {} : { rowHeader: rows.header }), ...(identity === undefined ? {} : { identity }), ...(crumbs === undefined ? {} : { crumbs }), ...(embedded === undefined ? {} : { embedded }), ...(surface === undefined ? {} : { surface }), ...(search === undefined ? {} : { search }), ...(actions === undefined ? {} : { actions }), ...(pagination === undefined ? {} : { pagination }), ...(views === undefined ? {} : { views }), ...(metrics === undefined ? {} : { metrics }), ...(table === undefined
+    return (_jsx(ListView, { items: items, keyOf: keyOf, row: rows === undefined
+            ? () => ({ name: "" })
+            : readOnly
+                ? (item) => {
+                    const { actions: _actions, ...rest } = rows.row(item);
+                    return rest;
+                }
+                : rows.row, ...(rows?.header === undefined ? {} : { rowHeader: rows.header }), ...(identity === undefined ? {} : { identity }), ...(crumbs === undefined ? {} : { crumbs }), ...(embedded === undefined ? {} : { embedded }), ...(surface === undefined ? {} : { surface }), ...(search === undefined ? {} : { search }), ...(actions === undefined ? {} : { actions }), ...(pagination === undefined ? {} : { pagination }), ...(views === undefined ? {} : { views }), ...(metrics === undefined ? {} : { metrics }), ...(table === undefined
             ? {}
             : {
-                columns: table.columns,
+                /* Read-only: a cell that opens an editor is an action too. */
+                columns: readOnly
+                    ? table.columns.map(({ edit: _edit, ...c }) => c)
+                    : table.columns,
                 ...(table.totals === undefined ? {} : { totals: table.totals }),
-                ...(table.rowActions === undefined ? {} : { rowActions: table.rowActions }),
-                ...(table.create === undefined ? {} : { create: table.create }),
+                ...(table.rowActions === undefined || readOnly
+                    ? {}
+                    : { rowActions: table.rowActions }),
+                ...(table.create === undefined || readOnly ? {} : { create: table.create }),
                 ...(table.visibleColumnIds === undefined
                     ? {}
                     : { visibleColumnIds: table.visibleColumnIds }),
                 ...(table.onVisibleColumnIdsChange === undefined
                     ? {}
                     : { onVisibleColumnIdsChange: table.onVisibleColumnIdsChange }),
-            }), ...(board?.card === undefined ? {} : { card: board.card }), ...(sheet?.columns === undefined || sheet.cell === undefined
+            }), ...(board?.card === undefined ? {} : { card: board.card }), ...(board?.stages === undefined ? {} : { boardStages: board.stages }), ...(sheet?.columns === undefined || sheet.cell === undefined
             ? {}
-            : { sheet: sheet }), ...(report === undefined ? {} : { report }), ...(pivot === undefined ? {} : { pivot }), ...(presents.length === 0 ? {} : { presents }), ...(present === undefined ? {} : { present }), ...(onPresentChange === undefined ? {} : { onPresentChange }), ...(group === undefined ? {} : { group }), ...(selection === undefined ? {} : { selection }), ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(sortable === undefined ? {} : { sortable }), ...(onOpen === undefined ? {} : { onOpen }), ...(onPeek === undefined ? {} : { onPeek }), ...(isPeeked === undefined ? {} : { isPeeked }), ...(state === undefined ? {} : { state }), ...(filtered === undefined ? {} : { filtered }), ...(empty === undefined ? {} : { empty }), children: rest.length === 0 ? undefined : rest }));
+            : { sheet: sheet }), ...(report === undefined ? {} : { report }), ...(pivot === undefined ? {} : { pivot }), ...(calendar === undefined ? {} : { calendar }), ...(gantt === undefined ? {} : { gantt }), ...(timeline === undefined ? {} : { timeline }), ...(presents.length === 0 ? {} : { presents }), ...(present === undefined ? {} : { present }), ...(onPresentChange === undefined ? {} : { onPresentChange }), ...(group === undefined ? {} : { group }), ...(selection === undefined ? {} : { selection }), ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(sortable === undefined ? {} : { sortable }), ...(onOpen === undefined ? {} : { onOpen }), ...(onPeek === undefined ? {} : { onPeek }), ...(isPeeked === undefined ? {} : { isPeeked }), ...(rowClick === undefined ? {} : { rowClick }), ...(onChoose === undefined || readOnly ? {} : { onChoose }), ...(state === undefined ? {} : { state }), ...(filtered === undefined ? {} : { filtered }), ...(empty === undefined ? {} : { empty }), children: rest.length === 0 ? undefined : rest }));
 }
 List.Bar = Bar;
 List.Crumbs = Crumbs;
@@ -99,3 +136,6 @@ List.Board = Board;
 List.Sheet = SheetSlot;
 List.Report = Report;
 List.Pivot = Pivot;
+List.Calendar = CalendarSlot;
+List.Gantt = GanttSlot;
+List.Timeline = TimelineSlot;

package/dist/views/list/ListView.d.ts

@@ -1,5 +1,5 @@
 import type { ListViewProps } from "./types.js";
-export declare function ListView<T extends object>({ items, keyOf, identity, crumbs, embedded, surface: requestedSurface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, sheet, report, pivot, present: requested, presents, onPresentChange, sort, onSortChange, sortable, totals, rowActions, create, group, selection, onOpen, onPeek, state, filtered, empty, children, }: ListViewProps<T>): import("react").JSX.Element;
+export declare function ListView<T extends object>({ items, keyOf, identity, crumbs, embedded, surface: requestedSurface, metrics, search, pagination, views, actions, row, rowHeader, columns, visibleColumnIds, onVisibleColumnIdsChange, card, boardStages, calendar, gantt, timeline, sheet, report, pivot, present: requested, presents, onPresentChange, sort, onSortChange, sortable, totals, rowActions, create, group, selection, onOpen, onPeek, rowClick, onChoose, state, filtered, empty, children, }: ListViewProps<T>): import("react").JSX.Element;
 /** What a list offers when it fails and can be retried. */
 export declare function RetryAction({ onRetry }: {
     onRetry: () => void;