@sincpro/web-ui 0.1.0 → 1.0.0

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

@@ -1,6 +1,6 @@
 import { type Pile } from "../../foundations/grouping.js";
 import { type DataColumn } from "../../primitives/table/DataTable.js";
-import type { ReportRow } from "../../primitives/table/ReportTable.js";
+import type { ReportColumn, ReportRow } from "../../primitives/table/ReportTable.js";
 import type { SheetColumn } from "../../primitives/table/SheetTable.js";
 import type { ListGroup, ListSheet, RowOf } from "./types.js";
 /**
@@ -74,3 +74,14 @@ export declare function sheetRowsOf<T extends object>(piles: readonly Pile<T>[]
  * no digan totales distintos del mismo conjunto.
  */
 export declare function reportRowsOf<T extends object>(piles: readonly Pile<T>[] | null, columns: readonly DataColumn<T>[] | undefined, row: (item: T) => RowOf): readonly ReportRow[];
+/**
+ * The columns of a report built from the piles, written like the list's own columns.
+ *
+ * `reportRowsOf` puts in position `i` the aggregate of the `i`-th column that declared one,
+ * so `report.columns[i]` is THAT column's: a report column without its own `format` takes
+ * the one the list column declared — otherwise the report wrote «Bs. 78.752,90» in the
+ * table's footer and «78.752,90» in its own total line. A format declared on the report
+ * column wins: it is the more specific declaration. A `count` column keeps the report's own
+ * number format — a count of rows is not an amount.
+ */
+export declare function reportColumnsOf<T extends object>(reportColumns: readonly ReportColumn[], columns: readonly DataColumn<T>[] | undefined): readonly ReportColumn[];

package/dist/views/list/derive.js

@@ -1,5 +1,5 @@
 import { levelKey, pathKey, pileItems, pileLabel, } from "../../foundations/grouping.js";
-import { aggregateOf } from "../../primitives/table/DataTable.js";
+import { aggregateFormat, aggregateOf, aggregateText, } from "../../primitives/table/DataTable.js";
 /**
  * Context: what a list DERIVES from its set, as pure functions — the table's group levels,
  * the sheet drawn from the declared columns, the sheet's flattened band/row sequence and
@@ -114,10 +114,14 @@ export function sheetRowsOf(piles, isOpen, columns) {
                        las `columns` de la lista —las mismas que suma el pie de la
                        tabla— para que la planilla y la tabla no digan números distintos
                        del mismo montón. La planilla declara SUS columnas aparte, así que
-                       se busca por id. */
+                       se busca por id. Y se ESCRIBE como el pie: con el `format` de la
+                       columna, para que el montón no diga «78752,9» debajo de «Bs.». */
                     total: (column) => {
                         const declared = columns?.find((one) => one.id === column.id);
-                        return declared === undefined ? null : aggregateOf(declared, inside);
+                        const value = declared === undefined ? null : aggregateOf(declared, inside);
+                        return declared === undefined || value === null
+                            ? null
+                            : aggregateText(declared, value);
                     },
                 },
             });
@@ -179,3 +183,25 @@ export function reportRowsOf(piles, columns, row) {
     };
     return piles.map(line);
 }
+/**
+ * The columns of a report built from the piles, written like the list's own columns.
+ *
+ * `reportRowsOf` puts in position `i` the aggregate of the `i`-th column that declared one,
+ * so `report.columns[i]` is THAT column's: a report column without its own `format` takes
+ * the one the list column declared — otherwise the report wrote «Bs. 78.752,90» in the
+ * table's footer and «78.752,90» in its own total line. A format declared on the report
+ * column wins: it is the more specific declaration. A `count` column keeps the report's own
+ * number format — a count of rows is not an amount.
+ */
+export function reportColumnsOf(reportColumns, columns) {
+    if (columns === undefined)
+        return reportColumns;
+    const numeric = columns.filter((column) => column.aggregate !== undefined);
+    return reportColumns.map((column, index) => {
+        const declared = numeric[index];
+        const format = declared === undefined ? undefined : aggregateFormat(declared);
+        return column.format !== undefined || format === undefined
+            ? column
+            : { ...column, format };
+    });
+}

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

@@ -15,11 +15,14 @@ type TableProps<T extends object> = {
     levels: NonNullable<Parameters<typeof DataTable<T>>[0]["levels"]>;
     group?: ListGroup<T>;
     totals: boolean;
-} & Pick<ListViewProps<T>, "sort" | "onSortChange" | "selection" | "rowActions" | "onPeek" | "onOpen">;
+} & Pick<ListViewProps<T>, "sort" | "onSortChange" | "selection" | "rowActions" | "create" | "onPeek" | "onOpen"> & {
+    rowClick?: "peek" | "open";
+    onChoose?: (item: T) => void;
+};
 /** The table receives EVERYTHING that belongs to the set —sorting, selection, grouping,
  *  which columns are on screen— and not a trimmed down version: that was exactly the trap
  *  this archetype exists to avoid, that switching presentation loses capabilities. */
-export declare function TablePresentation<T extends object>({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, onPeek, onOpen, }: TableProps<T>): import("react").JSX.Element;
+export declare function TablePresentation<T extends object>({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, create, onPeek, onOpen, rowClick, onChoose, }: TableProps<T>): import("react").JSX.Element;
 type SheetProps<T extends object> = {
     spec: ListSheet<T>;
     /** The flattened bands and rows when the set is grouped; `null` when it is not. */

package/dist/views/list/presentations.js

@@ -3,10 +3,40 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
 import { DataTable } from "../../primitives/table/DataTable.js";
 import { SheetTable } from "../../primitives/table/SheetTable.js";
+import { Eye, SquareArrowOutUpRight } from "lucide-react";
 /** The table receives EVERYTHING that belongs to the set —sorting, selection, grouping,
  *  which columns are on screen— and not a trimmed down version: that was exactly the trap
  *  this archetype exists to avoid, that switching presentation loses capabilities. */
-export function TablePresentation({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, onPeek, onOpen, }) {
+export function TablePresentation({ items, columns, keyOf, levels, group, totals, sort, onSortChange, selection, rowActions, create, onPeek, onOpen, rowClick = "peek", onChoose, }) {
+    const copy = useUiCopy();
+    const press = onChoose ?? (rowClick === "open" ? (onOpen ?? onPeek) : (onPeek ?? onOpen));
+    /* The row's ways in go FIRST among its actions, so they are always the inline ones and
+       always in the same place; the domain's actions follow (and fold into ⋯ past two). */
+    const withOpeners = onPeek === undefined && onOpen === undefined
+        ? rowActions
+        : (item) => [
+            ...(onPeek === undefined
+                ? []
+                : [
+                    {
+                        id: "peek",
+                        label: copy.list.peek,
+                        icon: Eye,
+                        onSelect: () => onPeek(item),
+                    },
+                ]),
+            ...(onOpen === undefined
+                ? []
+                : [
+                    {
+                        id: "open",
+                        label: copy.list.open,
+                        icon: SquareArrowOutUpRight,
+                        onSelect: () => onOpen(item),
+                    },
+                ]),
+            ...(rowActions?.(item) ?? []),
+        ];
     return (_jsx(DataTable, { data: items, columns: columns, getRowId: keyOf, ...(sort === undefined ? {} : { sort }), ...(onSortChange === undefined ? {} : { onSortChange }), ...(levels.length === 0 ? {} : { levels: levels }), ...(group?.collapsed === undefined ? {} : { collapsed: group.collapsed }), ...(group?.onToggle === undefined ? {} : { onGroupToggle: group.onToggle }), ...(selection === undefined
             ? {}
             : {
@@ -22,7 +52,7 @@ export function TablePresentation({ items, columns, keyOf, levels, group, totals
                             selection.toggle(id);
                     }
                 },
-            }), ...(totals ? { totals: true } : {}), ...(rowActions === undefined ? {} : { rowActions }), ...((onPeek ?? onOpen) === undefined ? {} : { onRowClick: onPeek ?? onOpen }) }));
+            }), ...(totals ? { totals: true } : {}), ...(withOpeners === undefined ? {} : { rowActions: withOpeners }), ...(create === undefined ? {} : { create }), ...(press === undefined ? {} : { onRowClick: press }) }));
 }
 /** The sheet receives the set by INDEX and not a ready-made matrix: `SheetTable` is
  *  virtualized precisely so as not to materialize a million rows, and handing it copies
@@ -99,5 +129,7 @@ export function SheetPresentation({ spec, entries, ordered, group, }) {
                         ? false
                         : (spec.editable?.(item, column, columnIndex) ?? false);
                 },
-            }) }));
+            }), ...(spec.onAddRow === undefined || entries !== null
+            ? {}
+            : { onAddRow: spec.onAddRow }) }));
 }

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

@@ -1,10 +1,15 @@
+import type { RecordCalendarProps } from "../../components/calendar/RecordCalendar.js";
+import type { RecordGanttProps } from "../../components/gantt/RecordGantt.js";
+import type { BoardStages } from "../../components/listing/BoardColumns.js";
 import type { ListIdentity } from "../../components/listing/ListingBar.js";
 import type { ListPresent } from "../../components/listing/set.js";
 import type { SortField } from "../../components/listing/SortMenu.js";
+import type { RecordTimelineProps } from "../../components/timeline/RecordTimeline.js";
+import type { GroupableField } from "../../foundations/grouping.js";
 import type { Grouping, GroupLevel } from "../../foundations/grouping.js";
 import type { Pivot, PivotKey, PivotSpec } from "../../foundations/pivot.js";
 import type { Surface, Tone } from "../../foundations/types.js";
-import type { DataColumn } from "../../primitives/table/DataTable.js";
+import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 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";
@@ -23,6 +28,11 @@ export type { ListPresent };
 /** What an item looks like when the presentation is rows. */
 export type RowOf = {
     icon?: LucideIcon;
+    /** A person or a company: its face in the icon's place — the photo or the initials. */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
     name: string;
     tags?: ReactNode;
     meta?: string;
@@ -87,6 +97,9 @@ export type ListSheet<T> = {
      *  convertirlo al tipo de la columna es del dominio, no de acá. */
     onCommit?: (item: T, column: SheetColumn, columnIndex: number, next: string) => void;
     editable?: (item: T, column: SheetColumn, columnIndex: number) => boolean;
+    /** Present = the sheet adds rows: «add a row» under it, and `Enter` on the last row.
+     *  The consumer appends the item; the sheet lands on it. Not while grouped. */
+    onAddRow?: () => void;
 };
 /**
  * El INFORME de una lista: los períodos y la jerarquía que termina en totales.
@@ -150,6 +163,12 @@ export type ListPivot<T> = {
     /** Qué pasa al tocar un cruce: abrir las filas que cayeron ahí. */
     onCell?: (row: PivotKey, column: PivotKey) => void;
     height?: number | string;
+    /** The fields the person may pivot by. With them (and `spec`) the pivot is EXPLORED — axes,
+     *  measures and download on the grid (`PivotExplorer`) — and its rows follow the search
+     *  bar's grouping while there is one; `spec.rows` / `spec.columns` are where it starts. */
+    fields?: readonly GroupableField[];
+    /** Which of `spec.measures` start on. The first one by default. */
+    defaultMeasures?: readonly string[];
 };
 export type ListViewProps<T extends object> = {
     items: readonly T[];
@@ -160,6 +179,11 @@ export type ListViewProps<T extends object> = {
     /** The metrics that also NARROW: «2 por confirmar», «41 por entregar». They go
      *  below the bar and above the rows — they belong to the set, not to the frame. */
     metrics?: ReactNode;
+    /** The list is a FIELD of a record (a one2many / many2many) and not a screen: the bar
+     *  is one line — search, count, sort, columns, switcher, actions —, it does not stick
+     *  and it does not move into the frame's header. Identity and crumbs are not drawn: the
+     *  record around it already says them. See `ListingBar`'s header. */
+    embedded?: boolean;
     /** Which surface the BAR sits on. `canvas` (the default) is a light control bar;
      *  `chrome` turns it into a dark band — an explicit choice, since the application bar
      *  is the screen's one dark band (same as the rail of a record). */
@@ -212,8 +236,20 @@ export type ListViewProps<T extends object> = {
     /** What gets done to ONE row without entering it, in the table presentation.
      *  They are drawn hidden and appear on the row being pointed at. */
     rowActions?: (item: T) => readonly RowAction[];
+    /** Write a new record as a row of the table presentation — Odoo's editable list. The
+     *  columns that declare `input` get a control in that row. See `DataTable`'s header.
+     *  While a record is being written the table shows even if the set is empty. */
+    create?: DataTableCreate<T>;
     /** The board presentation. */
     card?: (item: T) => ReactNode;
+    /** The board by stages: one column each, cards moved between them. */
+    boardStages?: BoardStages<T>;
+    /** The calendar presentation: when each record happens. */
+    calendar?: ListCalendar<T>;
+    /** The Gantt presentation: each record as a span on a timeline. */
+    gantt?: ListGantt<T>;
+    /** The planning presentation: records grouped in rows across time (Odoo's Gantt). */
+    timeline?: ListTimeline<T>;
     /**
      * La PLANILLA. Con esto, `present="sheet"` dibuja un `SheetTable`.
      *
@@ -254,10 +290,24 @@ export type ListViewProps<T extends object> = {
         count: number;
         clear: () => void;
         actions?: ReactNode;
+        /** Every record that matches, not just the page: «Elegir los 187 que coinciden». The total
+         *  is the server's; `onSelect` makes the selection mean «all of them». */
+        matching?: {
+            total: number;
+            onSelect: () => void;
+        };
     };
     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;
     /** The three states, in a single place. Every view used to re-assemble them
      *  with three nested ternaries, and that is why «empty because of a filter»
      *  and «really empty» got mixed up in half the screens. */
@@ -270,3 +320,9 @@ export type ListViewProps<T extends object> = {
     /** The escape hatch. */
     children?: ReactNode;
 };
+/** `List.Calendar`: the calendar's own props; the records, their key and «open» are the list's. */
+export type ListCalendar<T> = Omit<RecordCalendarProps<T>, "items" | "keyOf" | "onOpen">;
+/** `List.Gantt`: the chart's own props; the records, their key and «open» are the list's. */
+export type ListGantt<T> = Omit<RecordGanttProps<T>, "items" | "keyOf" | "onOpen">;
+/** `List.Timeline`: the planning's own props; the records, their key and «open» are the list's. */
+export type ListTimeline<T> = Omit<RecordTimelineProps<T>, "items" | "keyOf" | "onOpen">;

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

@@ -9,9 +9,19 @@ import { type RefObject } from "react";
  *
  * Attach `frame` to the list's root element; `offered` is what the switcher may show and
  * `present` what to draw (a wide one that was asked for falls back to rows).
+ *
+ * Measured BEFORE paint: waiting for the observer's first report drew the table and swapped it
+ * for rows a frame later, so a click on a row of a list in a panel landed on a detached `<tr>`.
  */
 export declare function useNarrowList(presents: readonly ListPresent[] | undefined, requested: ListPresent): {
     frame: RefObject<HTMLDivElement | null>;
     offered: readonly ListPresent[];
     present: ListPresent;
 };
+/** What a list offers and draws at its width. Only a list that HAS rows folds into them: one
+ *  that declares just a table fell back to rows it had no `row` for, and drew empty lines — a
+ *  table that scrolls sideways says more. */
+export declare function narrowed(presents: readonly ListPresent[] | undefined, requested: ListPresent, narrow: boolean): {
+    offered: readonly ListPresent[];
+    present: ListPresent;
+};

package/dist/views/list/useNarrowList.js

@@ -1,7 +1,7 @@
 "use client";
 import { HANDHELD_WIDTH } from "../../foundations/layout.js";
 import { WIDE_PRESENTS } from "./columns.js";
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 /**
  * A narrow LIST — a phone, a drawer, a panel among four — does not offer the presentations
  * that need width: a seven-column table at 360 px is a horizontal scroll nobody reads.
@@ -11,13 +11,19 @@ import { useEffect, useRef, useState } from "react";
  *
  * Attach `frame` to the list's root element; `offered` is what the switcher may show and
  * `present` what to draw (a wide one that was asked for falls back to rows).
+ *
+ * Measured BEFORE paint: waiting for the observer's first report drew the table and swapped it
+ * for rows a frame later, so a click on a row of a list in a panel landed on a detached `<tr>`.
  */
 export function useNarrowList(presents, requested) {
     const frame = useRef(null);
     const [narrow, setNarrow] = useState(false);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const el = frame.current;
-        if (el === null || typeof ResizeObserver === "undefined")
+        if (el === null)
+            return;
+        setNarrow(el.getBoundingClientRect().width < HANDHELD_WIDTH);
+        if (typeof ResizeObserver === "undefined")
             return;
         const watch = new ResizeObserver(([entry]) => {
             if (entry !== undefined)
@@ -26,7 +32,15 @@ export function useNarrowList(presents, requested) {
         watch.observe(el);
         return () => watch.disconnect();
     }, []);
-    const offered = (presents ?? []).filter((p) => !narrow || !WIDE_PRESENTS.includes(p));
-    const present = narrow && WIDE_PRESENTS.includes(requested) ? "rows" : requested;
-    return { frame, offered, present };
+    return { frame, ...narrowed(presents, requested, narrow) };
+}
+/** What a list offers and draws at its width. Only a list that HAS rows folds into them: one
+ *  that declares just a table fell back to rows it had no `row` for, and drew empty lines — a
+ *  table that scrolls sideways says more. */
+export function narrowed(presents, requested, narrow) {
+    const folds = narrow && (presents === undefined || presents.includes("rows"));
+    return {
+        offered: (presents ?? []).filter((p) => !folds || !WIDE_PRESENTS.includes(p)),
+        present: folds && WIDE_PRESENTS.includes(requested) ? "rows" : requested,
+    };
 }

package/dist/views/record/Record.d.ts

@@ -1,12 +1,15 @@
+import { type ActivityProps } from "../../components/activity/Activity.js";
 import { type SheetField, type SheetLayout } from "../../components/form/Sheet.js";
 import type { Crumb } from "../../components/record/Breadcrumb.js";
 import type { DirtyState } from "../../components/record/DirtyActions.js";
+import { type RecordStamp } from "../../components/record/RecordAudit.js";
+import { type RecordNoticeSpec } from "../../components/record/RecordNotices.js";
 import { RecordSkeleton } from "../../components/record/RecordSkeleton.js";
 import { type Stage } from "../../components/record/StatusBar.js";
 import type { Surface, Tone } from "../../foundations/types.js";
 import { type TabNotice } from "../../primitives/tabs/Tabs.js";
 import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type RecordIdentity = {
     icon?: LucideIcon;
     title: ReactNode;
@@ -42,6 +45,9 @@ export type RecordPager = {
     onNext?: () => void;
 };
 export type { SheetField };
+/** A notice of the record: the props of `Record.Notice` (a `Callout` without its × label,
+ *  which the record writes from the copy table). */
+export type RecordNotice = RecordNoticeSpec;
 type RailProps = {
     children?: ReactNode;
     /** The rail's surface. `canvas` (the default) is a light control bar; `chrome` is the dark
@@ -63,6 +69,8 @@ type StatusProps = {
     /** Cuál de las etapas es la de ahora. Sin esto, la primera. */
     current?: string;
     failed?: boolean;
+    /** The stages can be chosen: pressing one moves the record there (a CRM's pipeline). */
+    onSelect?: (id: string) => void;
     /** La escotilla del estado, para lo que no es ninguna de las dos. */
     children?: ReactNode;
 };
@@ -71,6 +79,9 @@ type PaperProps = {
      *  valor, que es la forma de Odoo. */
     layout?: SheetLayout;
     columns?: 1 | 2 | 3 | 4;
+    /** `reading` (default): the sheet stops at a reading width, centred, with the rail lined
+     *  up to it. `full`: the whole page, for a record whose body is mostly a wide table. */
+    width?: "reading" | "full";
     children?: ReactNode;
 };
 type FactsProps = {
@@ -95,9 +106,27 @@ type PageProps = {
     notice?: TabNotice;
     children?: ReactNode;
 };
+/** The record's ACTIVITY panel, as DATA: its conversation, its history, its composer.
+ *  The record draws the `Activity` itself and gives it what only the record has — its
+ *  notices (the ones that are not blocking), and the indicator in the rail that opens the
+ *  panel on them.
+ *
+ *  Context: it was `<Record.Chatter><Chatter open onToggle …/></Record.Chatter>`, a node
+ *  the record could only place. Written as data — like `Record.Status` — the record owns
+ *  the panel's open state (`defaultOpen`, or `open` + `onOpenChange` to control it), so
+ *  «⚠ 2 avisos» in the rail can open it and move the focus to its notices. */
+export type RecordActivityProps = Omit<ActivityProps, "open" | "onToggle" | "alerts" | "alertsId"> & {
+    /** Starts OPEN unless this says otherwise: on a big screen you see what the record has. */
+    defaultOpen?: boolean;
+    /** Controls the panel: then `onOpenChange` must follow it. Remembering it between
+     *  records is the app's — the system only reports. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
 export type RecordProps = {
     identity: RecordIdentity;
-    /** Lo que falló al operar sobre el registro. Va arriba del papel, adentro. */
+    /** Lo que falló al operar sobre el registro. Va con los avisos que bloquean, primero:
+     *  entre el riel y el papel, siempre a la vista (ver `Record.Notice`). */
     error?: string | null;
     /** Hay cambios sin guardar. Su presencia REEMPLAZA los botones de acción por
      *  guardar y descartar — ver la nota en `RecordHeader`. */
@@ -114,13 +143,17 @@ export declare namespace Record {
     var Actions: ((props: ActionsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"actions">;
     var Status: ((props: StatusProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"status">;
     var Paper: ((props: PaperProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"paper">;
-    var Chatter: ((props: {
-        children?: ReactNode;
-        /** `page` lo pone SIEMPRE debajo y a todo el ancho, como una hoja propia. Sin
-         *  esto va al costado cuando hay ancho, que es la forma angosta. */
-        layout?: "aside" | "page";
-    }) => ReactNode) & import("../../foundations/slots.js").Slotted<"chatter">;
+    var Activity: ((props: RecordActivityProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"activity">;
     var Facts: ((props: FactsProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"facts">;
     var Pages: ((props: PagesProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"pages">;
     var Page: ((props: PageProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"page">;
+    var Notice: ((props: RecordNoticeSpec) => ReactNode) & import("../../foundations/slots.js").Slotted<"notice">;
+    var Ribbon: ((props: {
+        label: string;
+        tone?: Tone;
+    }) => ReactNode) & import("../../foundations/slots.js").Slotted<"ribbon">;
+    var Audit: ((props: {
+        created?: RecordStamp;
+        updated?: RecordStamp;
+    }) => ReactNode) & import("../../foundations/slots.js").Slotted<"audit">;
 }