@sincpro/web-ui 1.6.0 → 1.7.0

package/dist/primitives/table/sorting.js

@@ -0,0 +1,110 @@
+/* ==================================================================== *
+ *  SORTING — an ordered list of criteria, not one column.
+ *
+ *  Context: the order of a set was ONE field and a direction. That answers
+ *  «the newest first», and not the question people actually asked the list:
+ *  «by date, and within the same date by customer, and then by product». The
+ *  second and third fields are tie-breakers — they only decide between rows the
+ *  first one left equal — and the engine's criteria already takes them
+ *  (`order: [{ field, descending }, …]`). What could not say it was the screen.
+ *
+ *  So the order is a LIST, outermost first. Empty is «as they came»: the
+ *  third state of a header, which gives the natural order back.
+ *
+ *  The two doors to it write the same list:
+ *
+ *      header click        this column alone — the quick question
+ *      header Shift+click  this column as one more tie-breaker
+ *      the bar's panel     the whole list: add, flip, reorder, remove
+ *
+ *  Pure, and in the table family because the header (`Th`) is its first user;
+ *  the list's bar reads it from here.
+ * ==================================================================== */
+/** Where a column stands in the order: its place (0 = the primary) and direction. */
+export function sortPosition(sort, key) {
+    const index = sort?.findIndex((one) => one.key === key) ?? -1;
+    if (index === -1 || sort === undefined)
+        return null;
+    return { index, direction: sort[index]?.direction ?? "asc" };
+}
+/**
+ * What a press on a column header does to the order.
+ *
+ * Plain press — the column ALONE:
+ *   - the only criterion: asc → desc → nothing. The third press gives the
+ *     natural order back (see `Table.tsx`).
+ *   - with others around it: the column alone, flipped if it was there, and
+ *     never «nothing» — a press that also wipes the tie-breakers someone built
+ *     in the panel would be a surprise, not a shortcut.
+ *
+ * `additive` (Shift) — one more tie-breaker, the others untouched:
+ *   - absent: appended, ascending.
+ *   - ascending: flipped in its place.
+ *   - descending: taken out.
+ */
+export function pressSort(sort, key, additive) {
+    const at = sortPosition(sort, key);
+    if (additive) {
+        if (at === null)
+            return [...sort, { key, direction: "asc" }];
+        if (at.direction === "asc") {
+            return sort.map((one, i) => (i === at.index ? { key, direction: "desc" } : one));
+        }
+        return sort.filter((_, i) => i !== at.index);
+    }
+    if (at === null)
+        return [{ key, direction: "asc" }];
+    if (sort.length === 1)
+        return at.direction === "asc" ? [{ key, direction: "desc" }] : [];
+    return [{ key, direction: at.direction === "asc" ? "desc" : "asc" }];
+}
+/** The criterion at `index` with its direction flipped. */
+export function flipSort(sort, index) {
+    return sort.map((one, i) => i === index ? { ...one, direction: one.direction === "asc" ? "desc" : "asc" } : one);
+}
+/** The criteria with the ones in `keys` moved to sit before `target` (or after it). The
+ *  shape React Aria's drag-and-drop hands over: a set of dragged keys and a drop target. */
+export function moveSort(sort, keys, target, position) {
+    const moving = sort.filter((one) => keys.has(one.key));
+    const rest = sort.filter((one) => !keys.has(one.key));
+    const at = rest.findIndex((one) => one.key === target);
+    if (at === -1 || moving.length === 0)
+        return [...sort];
+    const cut = position === "before" ? at : at + 1;
+    return [...rest.slice(0, cut), ...moving, ...rest.slice(cut)];
+}
+/**
+ * Compares two rows by every criterion, in order: the second one speaks only when the first
+ * one ties. `read` gives each row's value for a field; `undefined` there means «this field
+ * cannot be sorted here» and the criterion is skipped.
+ *
+ * Missing values go LAST whatever the direction. A blank is not «the smallest»: it is the
+ * absence of an answer, and putting it first when the order is flipped fills the first
+ * screen with the rows that say the least.
+ */
+export function compareBy(sort, read) {
+    const criteria = sort.flatMap((one) => {
+        const value = read(one.key);
+        return value === undefined ? [] : [{ value, sign: one.direction === "asc" ? 1 : -1 }];
+    });
+    return (a, b) => {
+        for (const { value, sign } of criteria) {
+            const left = value(a);
+            const right = value(b);
+            const leftMissing = left === null || left === undefined || left === "";
+            const rightMissing = right === null || right === undefined || right === "";
+            if (leftMissing && rightMissing)
+                continue;
+            if (leftMissing)
+                return 1;
+            if (rightMissing)
+                return -1;
+            const order = typeof left === "number" && typeof right === "number"
+                ? left - right
+                : String(left).localeCompare(String(right));
+            if (order !== 0)
+                return order * sign;
+        }
+        return 0;
+    };
+}

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

@@ -0,0 +1,10 @@
+/** The HTML with everything that runs taken out, or `null` where there is no DOM to do it. */
+export declare function sanitizeRichText(html: string): string | null;
+/** The words of an HTML, without its tags: what is shown where it cannot be cleaned. */
+export declare function richTextPlain(html: string): string;
+/** Nothing written: no text and no image — «<p></p>» from an emptied editor counts as nothing. */
+export declare function isRichTextEmpty(html: string | null | undefined): boolean;
+/** The HTML of a note, read: cleaned, in the system's text style (`rich-text` in tokens.css). */
+export declare function RichTextValue({ value }: {
+    value: string | null | undefined;
+}): import("react").JSX.Element;

package/dist/primitives/value/RichText.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import DOMPurify from "dompurify";
+import { useSyncExternalStore } from "react";
+/* ==================================================================== *
+ *  RICH TEXT, READ — the HTML of a note shown as what it says.
+ *
+ *  Context: this HTML comes from people (a description pasted from an email)
+ *  and from engines (an Odoo `html` field), and either can carry a script, an
+ *  `onerror`, a `javascript:` link. So it is never put on the page as it came:
+ *  DOMPurify keeps the text and its structure (paragraphs, headings, lists,
+ *  links, tables, a mention) and drops everything that runs. A link always
+ *  opens in another tab, without handing that tab our window.
+ *
+ *  ── On the server there is no DOM to clean with ─────────────────────
+ *
+ *  DOMPurify needs a document. Without one (server rendering, a Node test), the
+ *  safe answer is the TEXT, tags removed and escaped by React — never the HTML
+ *  unchecked. The browser then upgrades it to the cleaned HTML; the switch goes
+ *  through `useSyncExternalStore`, so hydration does not see two different trees.
+ * ==================================================================== */
+const ALLOWED_TAGS = [
+    "p",
+    "br",
+    "strong",
+    "b",
+    "em",
+    "i",
+    "u",
+    "s",
+    "strike",
+    "del",
+    "code",
+    "pre",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "ul",
+    "ol",
+    "li",
+    "blockquote",
+    "hr",
+    "a",
+    "span",
+    "table",
+    "thead",
+    "tbody",
+    "tr",
+    "th",
+    "td",
+    "colgroup",
+    "col",
+    "img",
+];
+const ALLOWED_ATTR = [
+    "href",
+    "title",
+    "colspan",
+    "rowspan",
+    "src",
+    "alt",
+    "data-type",
+    "data-id",
+    "data-label",
+];
+let hooked = false;
+/** The HTML with everything that runs taken out, or `null` where there is no DOM to do it. */
+export function sanitizeRichText(html) {
+    if (typeof window === "undefined" || !DOMPurify.isSupported)
+        return null;
+    if (!hooked) {
+        hooked = true;
+        DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+            if (node.tagName === "A") {
+                node.setAttribute("target", "_blank");
+                node.setAttribute("rel", "noopener noreferrer");
+            }
+            if (node.tagName === "IMG") {
+                /* An image whose address was not allowed is a broken box: gone. One without a
+                   description is read as decoration (`alt=""`) instead of as its file name. */
+                if (!node.hasAttribute("src"))
+                    node.remove();
+                else if (!node.hasAttribute("alt"))
+                    node.setAttribute("alt", "");
+            }
+        });
+    }
+    return DOMPurify.sanitize(html, {
+        ALLOWED_TAGS,
+        ALLOWED_ATTR,
+        ALLOWED_URI_REGEXP: /^(?:https?:|mailto:|tel:|data:image\/(?:png|jpeg|gif|webp);)/i,
+    });
+}
+/** The words of an HTML, without its tags: what is shown where it cannot be cleaned. */
+export function richTextPlain(html) {
+    return html
+        .replace(/<(?:br|\/p|\/li|\/h[1-6]|\/tr)\s*\/?>/gi, " ")
+        .replace(/<[^>]*>/g, "")
+        .replace(/&nbsp;/g, " ")
+        .replace(/&amp;/g, "&")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+/** Nothing written: no text and no image — «<p></p>» from an emptied editor counts as nothing. */
+export function isRichTextEmpty(html) {
+    if (html === null || html === undefined)
+        return true;
+    return richTextPlain(html) === "" && !/<(?:img|hr|table)\b/i.test(html);
+}
+const subscribe = () => () => { };
+/** The HTML of a note, read: cleaned, in the system's text style (`rich-text` in tokens.css). */
+export function RichTextValue({ value }) {
+    const unset = useUiCopy().field.unset;
+    const inBrowser = useSyncExternalStore(subscribe, () => true, () => false);
+    if (isRichTextEmpty(value)) {
+        return _jsx("span", { className: "text-meta text-muted italic", children: unset });
+    }
+    const html = value ?? "";
+    const clean = inBrowser ? sanitizeRichText(html) : null;
+    if (clean === null)
+        return _jsx("p", { className: "rich-text", children: richTextPlain(html) });
+    /* Cleaned by DOMPurify just above, with the tags and URLs listed there. */
+    return _jsx("div", { className: "rich-text min-w-0", dangerouslySetInnerHTML: { __html: clean } });
+}

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

@@ -1,3 +1,4 @@
+import { type Rounding } from "./rounding.js";
 import type { ReactNode } from "react";
 export declare const formatCount: (value: number, locale?: string) => string;
 export declare const formatNumber: (value: number, locale?: string) => string;
@@ -7,6 +8,10 @@ export declare function KeyValue({ label, value }: {
     label: string;
     value: ReactNode;
 }): import("react").JSX.Element;
+/** A number written with any `Intl.NumberFormatOptions` — a currency, a percentage, fixed
+ *  decimals — in the session locale. The same options `NumberInput` takes, so a value reads
+ *  the same in its form and in the cell or the figure that shows it elsewhere. */
+export declare const formatWith: (value: number, options: Intl.NumberFormatOptions, locale?: string) => string;
 /**
  * A number with its unit: right aligned, with tabular figures.
  *
@@ -14,11 +19,24 @@ export declare function KeyValue({ label, value }: {
  * the same width, so `32.561` lines up across rows exactly as it did in monospace — without
  * making a business report look like a terminal. The unit stays in the same face so the
  * digits keep their column.
+ *
+ * `format` is a preset or any `Intl.NumberFormatOptions`: `{ style: "currency", currency:
+ * "BOB" }` writes «Bs 1.234,50», `{ style: "percent" }` takes 0–1, `{ minimumFractionDigits:
+ * 2, maximumFractionDigits: 2 }` rounds to two. `align="left"` for a figure that is not in a
+ * column.
  */
-export declare function Numeric({ value, unit, format, }: {
+export declare function Numeric({ value, unit, format, align, rounding, signed, }: {
     value: number;
     unit?: string;
-    format?: "integer" | "decimal" | "distance";
+    format?: "integer" | "decimal" | "distance" | Intl.NumberFormatOptions;
+    align?: "right" | "left";
+    /** Round the VALUE before writing it — to 0,05 for cash, to the unit's precision. See
+     *  `rounding.ts`: the format alone only rounds what is drawn. */
+    rounding?: Rounding;
+    /** A figure whose sign is the point — a balance, a difference, a variation: it carries
+     *  «+» or «−» always, and a negative is drawn in the danger tone (the sign says it too, so
+     *  it never rests on the color alone). */
+    signed?: boolean;
 }): import("react").JSX.Element;
 /**
  * The content of a data cell, with what the system decides and the view does not.

package/dist/primitives/value/Value.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { currentCopyLocale, useUiCopy } from "../../foundations/copy.js";
+import { roundTo } from "./rounding.js";
 /**
  * Context: the mono/sans rule decides everything in here. The label goes in
  * PROPORTIONAL —«orígenes», «mediana» are words, not data— and the value in
@@ -31,6 +32,17 @@ export const formatDistance = (value, locale = currentCopyLocale()) => distanceF
 export function KeyValue({ label, value }) {
     return (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-micro text-muted", children: label }), _jsx("dd", { className: "mt-0.5 truncate text-lead tabular-nums text-ink", children: value })] }));
 }
+/** The three presets, as the options they are — so `signed` and a custom format share one
+ *  path. Kept in step with `integerFormat`, `decimalFormat` and `distanceFormat` above. */
+const PRESET = {
+    integer: { maximumFractionDigits: 0 },
+    decimal: { maximumFractionDigits: 2 },
+    distance: { minimumFractionDigits: 4, maximumFractionDigits: 4 },
+};
+/** A number written with any `Intl.NumberFormatOptions` — a currency, a percentage, fixed
+ *  decimals — in the session locale. The same options `NumberInput` takes, so a value reads
+ *  the same in its form and in the cell or the figure that shows it elsewhere. */
+export const formatWith = (value, options, locale = currentCopyLocale()) => new Intl.NumberFormat(locale, options).format(value);
 /**
  * A number with its unit: right aligned, with tabular figures.
  *
@@ -38,14 +50,21 @@ export function KeyValue({ label, value }) {
  * the same width, so `32.561` lines up across rows exactly as it did in monospace — without
  * making a business report look like a terminal. The unit stays in the same face so the
  * digits keep their column.
+ *
+ * `format` is a preset or any `Intl.NumberFormatOptions`: `{ style: "currency", currency:
+ * "BOB" }` writes «Bs 1.234,50», `{ style: "percent" }` takes 0–1, `{ minimumFractionDigits:
+ * 2, maximumFractionDigits: 2 }` rounds to two. `align="left"` for a figure that is not in a
+ * column.
  */
-export function Numeric({ value, unit, format = "integer", }) {
-    const text = format === "distance"
-        ? formatDistance(value)
-        : format === "decimal"
-            ? formatNumber(value)
-            : formatCount(value);
-    return (_jsxs("span", { className: "block text-right text-body tabular-nums whitespace-nowrap text-ink", children: [_jsx("span", { className: "tabular-nums", children: text }), unit === undefined ? null : _jsx("span", { className: "ml-1 text-muted", children: unit })] }));
+export function Numeric({ value, unit, format = "integer", align = "right", rounding, signed = false, }) {
+    /* The locale of the copy in context, as `NumberInput` reads it — not only the installed
+       one: inside a `UiCopyProvider` the cell and the form next to it write the same digits. */
+    const { locale } = useUiCopy();
+    const shown = rounding === undefined ? value : roundTo(value, rounding.increment, rounding.method);
+    const options = typeof format === "object" ? format : PRESET[format];
+    const text = formatWith(shown, signed ? { ...options, signDisplay: "exceptZero" } : options, locale);
+    const negative = signed && shown < 0;
+    return (_jsxs("span", { className: `${align === "left" ? "inline-block text-left" : "block text-right"} text-body tabular-nums whitespace-nowrap ${negative ? "text-danger" : "text-ink"}`, children: [_jsx("span", { className: "tabular-nums", children: text }), unit === undefined ? null : _jsx("span", { className: "ml-1 text-muted", children: unit })] }));
 }
 /**
  * The content of a data cell, with what the system decides and the view does not.

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

@@ -5,5 +5,7 @@ export { Metric, type MetricProps, Metrics } from "./Metric.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 { isRichTextEmpty, richTextPlain, RichTextValue, sanitizeRichText, } from "./RichText.js";
+export { type Rounding, type RoundingMethod, roundTo, } from "./rounding.js";
 export { Totals, type TotalsCredit, type TotalsDeduction, type TotalsFact, type TotalsProps, type TotalsRow, } from "./Totals.js";
-export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, } from "./Value.js";
+export { Cell, formatCount, formatDistance, formatNumber, formatWith, KeyValue, Numeric, } from "./Value.js";

package/dist/primitives/value/index.js

@@ -6,5 +6,8 @@ export { Metric, Metrics } from "./Metric.js";
 export { Avatar, UserChip, UserStack, } from "./Person.js";
 export { ProgressBar, } from "./ProgressBar.js";
 export { RelationCard, RelationValue, } from "./Relation.js";
+/* The HTML of a note, read — cleaned of anything that runs. */
+export { isRichTextEmpty, richTextPlain, RichTextValue, sanitizeRichText, } from "./RichText.js";
+export { roundTo, } from "./rounding.js";
 export { Totals, } from "./Totals.js";
-export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, } from "./Value.js";
+export { Cell, formatCount, formatDistance, formatNumber, formatWith, KeyValue, Numeric, } from "./Value.js";

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

@@ -0,0 +1,9 @@
+export type RoundingMethod = "half-up" | "half-even" | "up" | "down";
+export type Rounding = {
+    /** The multiple: 0.05 rounds to five cents, 1 to a whole unit, 0.001 to grams. */
+    increment: number;
+    /** `half-up` by default — what a price expects. `up`/`down` are away from/towards zero. */
+    method?: RoundingMethod;
+};
+/** `value` rounded to a multiple of `increment`, by `method`. */
+export declare function roundTo(value: number, increment: number, method?: RoundingMethod): number;

package/dist/primitives/value/rounding.js

@@ -0,0 +1,48 @@
+/* ==================================================================== *
+ *  ROUNDING — to a multiple, and saying how.
+ *
+ *  Context: `maximumFractionDigits` rounds what is DRAWN; the value underneath
+ *  keeps its tail, and a total of drawn values then differs from the drawn
+ *  total by a cent. An ERP rounds the VALUE, and not always to a decimal: cash
+ *  to 0,05 (Bolivia has no 1-centavo coin in circulation), a unit of measure to
+ *  its precision (a box is 1, a kilo 0,001), a price to 0,10. And the method
+ *  is part of the rule: half up for a price, half even for statistics, up for
+ *  what is charged per started hour, down for what is paid.
+ *
+ *  Pure, in the display tier so a value that shows (`Numeric`) and a control
+ *  that asks (`NumberInput`) round with the same function.
+ * ==================================================================== */
+/** How many decimals a number is written with: 0.05 → 2. Used to cut the binary tail that
+ *  `0.1 + 0.2` leaves, so 1.15 rounded to 0.05 is 1.15 and not 1.1500000000000001. */
+function decimalsOf(value) {
+    const text = String(value);
+    if (text.includes("e-"))
+        return Number(text.split("e-")[1]);
+    return text.includes(".") ? (text.split(".")[1]?.length ?? 0) : 0;
+}
+/** `value` rounded to a multiple of `increment`, by `method`. */
+export function roundTo(value, increment, method = "half-up") {
+    if (!Number.isFinite(value) || !(increment > 0))
+        return value;
+    const decimals = decimalsOf(increment);
+    /* The quotient, cleaned of the float tail before deciding: 1.15 / 0.05 is 22.999999… */
+    const steps = Number((Math.abs(value) / increment).toFixed(9));
+    const whole = Math.floor(steps);
+    const fraction = Number((steps - whole).toFixed(9));
+    let rounded;
+    switch (method) {
+        case "up":
+            rounded = fraction > 0 ? whole + 1 : whole;
+            break;
+        case "down":
+            rounded = whole;
+            break;
+        case "half-even":
+            rounded = fraction > 0.5 || (fraction === 0.5 && whole % 2 === 1) ? whole + 1 : whole;
+            break;
+        default:
+            rounded = fraction >= 0.5 ? whole + 1 : whole;
+    }
+    const result = Number((rounded * increment).toFixed(decimals));
+    return value < 0 ? -result : result;
+}

package/dist/tokens.css

@@ -1237,3 +1237,106 @@
   writing-mode: vertical-rl;
   transform: rotate(180deg);
 }
+
+/* ==================================================================== *
+ *  RICH TEXT — the HTML of a note, a description, an email body.
+ *
+ *  The SAME rules for the editor (`RichTextInput`, Tiptap) and for reading it
+ *  (`RichTextValue`): what is written is what is read, to the line. HTML that
+ *  arrives from an engine (Odoo `html` fields) has no classes, so the look is
+ *  given by the element — and only with tokens, so it follows the theme.
+ * ==================================================================== */
+@utility rich-text {
+  font-size: var(--text-meta);
+  line-height: var(--text-meta--line-height);
+  color: var(--color-ink);
+  overflow-wrap: anywhere;
+  & > * + * {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  & h2 {
+    font-size: var(--text-lead);
+    line-height: var(--text-lead--line-height);
+    font-weight: 600;
+  }
+  & h3 {
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+    font-weight: 600;
+  }
+  & ul {
+    list-style: disc;
+    padding-left: calc(var(--spacing) * 5);
+  }
+  & ol {
+    list-style: decimal;
+    padding-left: calc(var(--spacing) * 5);
+  }
+  & li > p {
+    margin: 0;
+  }
+  & blockquote {
+    border-left: calc(var(--spacing) * 0.5) solid var(--color-line-strong);
+    padding-left: calc(var(--spacing) * 3);
+    color: var(--color-muted);
+  }
+  & a {
+    color: var(--color-primary);
+    text-decoration: underline;
+    text-underline-offset: calc(var(--spacing) * 0.5);
+  }
+  & code {
+    font-family: var(--font-mono);
+    background: color-mix(in oklab, var(--color-ink) 6%, transparent);
+    border-radius: var(--radius-mark);
+    padding: 0 calc(var(--spacing) * 1);
+  }
+  & pre {
+    font-family: var(--font-mono);
+    background: color-mix(in oklab, var(--color-ink) 6%, transparent);
+    border-radius: var(--radius-control);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    overflow-x: auto;
+  }
+  & pre code {
+    background: none;
+    padding: 0;
+  }
+  & hr {
+    border: none;
+    border-top: calc(var(--spacing) * 0.25) solid var(--color-line);
+  }
+  & table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+  & th,
+  & td {
+    border: calc(var(--spacing) * 0.25) solid var(--color-line-strong);
+    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+    text-align: left;
+    vertical-align: top;
+  }
+  & th {
+    font-weight: 600;
+    background: var(--color-ground);
+  }
+  /* A person named in the text: the same tint as a link, so it reads as «someone», and a
+     box so it is one thing that is deleted at once. */
+  & [data-type="mention"] {
+    color: var(--color-primary);
+    background: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    border-radius: var(--radius-mark);
+    padding: 0 calc(var(--spacing) * 0.5);
+  }
+  & p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--color-muted);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+  & .selectedCell {
+    background: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  }
+}

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

@@ -5,7 +5,7 @@ import type { ViewIcon } from "../../components/listing/ViewSwitcher.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 { SortState } from "../../primitives/table/sorting.js";
 import { type CardWays, type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
 import type { ReactNode } from "react";
 type BarProps = {
@@ -97,9 +97,10 @@ export type ListProps<T extends object> = {
             onSelect: () => void;
         };
     };
-    /** El orden, que también es del conjunto. */
-    sort?: SortState | null;
-    onSortChange?: (next: SortState | null) => void;
+    /** El orden, que también es del conjunto: una lista de criterios, el primero manda y los
+     *  demás desempatan. Vacío es «como llegaron». */
+    sort?: readonly SortState[];
+    onSortChange?: (next: SortState[]) => void;
     /** Por qué campos se puede ordenar en las caras que NO tienen encabezados
      *  donde hacer clic. */
     sortable?: readonly SortField<T>[];

package/dist/views/list/ListView.js

@@ -147,7 +147,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
     const sortMenu = sortable === undefined ||
         sortable.length === 0 ||
         declaredReport ||
-        present === "pivot" ? null : (_jsx(SortMenu, { fields: sortable, sort: sort ?? null, onSortChange: (next) => onSortChange?.(next), ...(surface === undefined ? {} : { surface }) }));
+        present === "pivot" ? null : (_jsx(SortMenu, { fields: sortable, sort: sort ?? [], onSortChange: (next) => onSortChange?.(next), ...(surface === undefined ? {} : { surface }) }));
     const rightViews = views ?? switcher;
     const viewsSlot = columnsMenu === null && sortMenu === null && rightViews === undefined ? undefined : (_jsxs(_Fragment, { children: [sortMenu, columnsMenu, rightViews] }));
     /* Embedded, the line is drawn only if it has something to OFFER: a count alone repeats
@@ -202,7 +202,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
        veces no rompe nada, pero es trabajo al pedo sobre cada render. */
     const ordered = useMemo(() => present === "table" || sortable === undefined
         ? items
-        : sortItems(items, sortable, sort ?? null), [items, present, sortable, sort]);
+        : sortItems(items, sortable, sort), [items, present, sortable, sort]);
     /**
      * La grilla que hay que dibujar: la que le pasaron plegada, o la que se arma
      * con las filas en la mano.

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

@@ -14,7 +14,7 @@ import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTab
 import type { ReportColumn, ReportRow } from "../../primitives/table/ReportTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SheetColumn } from "../../primitives/table/SheetTable.js";
-import type { SortState } from "../../primitives/table/Table.js";
+import type { SortState } from "../../primitives/table/sorting.js";
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
 /**
@@ -276,11 +276,11 @@ export type ListViewProps<T extends object> = {
      *  Owned by the view when omitted — catalog filters must not reset them. */
     visibleColumnIds?: readonly string[];
     onVisibleColumnIdsChange?: (ids: readonly string[]) => void;
-    /** The sorting of the table. It lives outside because it belongs to the SET
-     *  and not to the presentation: switching from table to rows has no reason to
-     *  lose it. */
-    sort?: SortState | null;
-    onSortChange?: (next: SortState | null) => void;
+    /** The order of the set, outermost first: «by date, then by customer». It lives outside
+     *  because it belongs to the SET and not to the presentation: switching from table to
+     *  rows has no reason to lose it. Empty or absent is «as they came». */
+    sort?: readonly SortState[];
+    onSortChange?: (next: SortState[]) => void;
     /**
      * Por qué campos se puede ordenar, para las presentaciones que NO tienen
      * encabezados donde hacer clic.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,7 +56,15 @@
     "@fullcalendar/react": "7.1.3",
     "@internationalized/date": "^3.12.4",
     "@svar-ui/react-gantt": "2.8.2",
+    "@tiptap/extension-mention": "^3.32.2",
+    "@tiptap/extension-table": "^3.32.2",
+    "@tiptap/extensions": "^3.32.2",
+    "@tiptap/pm": "^3.32.2",
+    "@tiptap/react": "^3.32.2",
+    "@tiptap/starter-kit": "^3.32.2",
+    "@tiptap/suggestion": "^3.32.2",
     "@uiw/react-codemirror": "^4.25.11",
+    "dompurify": "^3.4.17",
     "lucide-react": "^1.45.0",
     "react-aria": "^3.53.1",
     "react-aria-components": "^1.22.1",