@sincpro/web-framework 0.0.0-stage → 0.2.0

package/dist/web/record/record.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describeRows } from "@sincpro/criteria";
+import { frameworkCopy } from "../../core/copy.js";
+import { textOf, viewOf } from "../../core/present.js";
+import { relatedOf } from "../../core/related.js";
+import { columnsOf } from "../list/columns.js";
+import { List } from "@sincpro/web-ui";
+/**
+ * The parts of ONE record, from the model.
+ *
+ * Context: `Record.*` in web-ui is a tree of slots — `Record.Facts` must be written as a child
+ * of `Record.Paper`, not hidden inside a component of ours, or the record does not find it.
+ * So these are not components that wrap `Record`: they are the PROPS of its slots, built from
+ * the model, and the screen keeps writing the tree:
+ *
+ *     <Record.Paper>
+ *       <Record.Facts fields={factsOf(record, meta, ["number", "customer", "due"])} />
+ *       <Record.Pages>
+ *         <Record.Page id="lines" label={labelOf(meta, "lines")} count={countOf(record, "lines")}>
+ *           <RecordLines record={record} meta={meta} name="lines" />
+ *         </Record.Page>
+ *       </Record.Pages>
+ *     </Record.Paper>
+ */
+const EMPTY = "—";
+export function factsOf(record, meta, names, options = {}) {
+    return names.map((name) => {
+        const view = viewOf(meta, name, options.locale);
+        const own = options.cells?.[name];
+        return {
+            label: view.label,
+            value: own ? own(record) : (textOf(meta, name, record[name], options.locale) ?? EMPTY),
+            ...(view.help === undefined ? {} : { hint: view.help }),
+            ...(name === meta?.identity ? { mono: true } : {}),
+        };
+    });
+}
+/** How many records a relation of this record holds — the TOTAL, not the page it brought. */
+export function countOf(record, name) {
+    return relatedOf(record[name]).count.value;
+}
+/**
+ * A one2many / many2many of the record, as an embedded list.
+ *
+ * Its columns come from the relation's own definition when the server expanded it, and are
+ * read off the rows otherwise. When the record brought only one page of them, it says so —
+ * «se muestran 50 de 1000» — instead of drawing 50 as if they were all.
+ */
+export function RecordLines({ record, meta, name, columns, cells, locale, onOpen, }) {
+    const related = relatedOf(record[name]);
+    const definition = meta?.fields[name]?.definition ?? describeRows(related.items);
+    const identity = definition.identity || "id";
+    const copy = frameworkCopy();
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(List, { embedded: true, items: related.items, keyOf: (row) => String(row[identity]), present: "table", empty: { sentence: copy.list.empty }, ...(onOpen === undefined ? {} : { onOpen }), children: _jsx(List.Table, { columns: columnsOf(definition, columns, { locale, ...(cells ? { cells } : {}) }) }) }), related.partial ? (_jsx("p", { className: "text-meta text-muted", children: copy.record.partial(related.items.length, related.count.value) })) : null] }));
+}

package/dist/web/record/summary.d.ts

@@ -0,0 +1,22 @@
+import type { RecordSummary } from "../../core/summary.js";
+import { type RecordCard, type RelationValueProps } from "@sincpro/web-ui";
+import type { ComponentProps } from "react";
+/**
+ * A record's summary as the props of web-ui's pieces that draw one record at a size: the card
+ * of a board and the link (with the card that floats from it) of a many2one.
+ *
+ * Context: PROPS, not wrapper components — the same reason as `factsOf`/`columnsOf`: web-ui
+ * finds its pieces by type inside a list or a board, and a component of ours around one is not
+ * found. The screen keeps writing `<RecordCard {...cardOf(s)} onOpen={…} />`, and adds or
+ * overrides whatever it wants. What the record does not have is left out, never drawn empty.
+ */
+type CardProps = ComponentProps<typeof RecordCard>;
+type RelationProps = Pick<RelationValueProps, "name" | "secondary" | "media" | "summary">;
+/** The board's card: the state above, the name, what it is, its description, its last change. */
+export declare function cardOf(summary: RecordSummary): CardProps;
+/**
+ * A many2one read: the name, what it is beside it, its face, and the card that floats from the
+ * name with its state and when it was made and last changed.
+ */
+export declare function relationOf(summary: RecordSummary): RelationProps;
+export {};

package/dist/web/record/summary.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { frameworkCopy } from "../../core/copy.js";
+import { Tag } from "@sincpro/web-ui";
+function lastChange(summary) {
+    const copy = frameworkCopy().summary;
+    const { created, updated } = summary;
+    if (updated.at !== null)
+        return copy.updatedLine(updated.at, updated.by);
+    return created.at === null ? null : copy.createdLine(created.at, created.by);
+}
+/** The board's card: the state above, the name, what it is, its description, its last change. */
+export function cardOf(summary) {
+    const footer = lastChange(summary);
+    return {
+        title: summary.name,
+        ...(summary.type === null ? {} : { subtitle: summary.type }),
+        ...(summary.state === null ? {} : { tags: _jsx(Tag, { tone: "neutral", children: summary.state }) }),
+        ...(summary.description === null ? {} : { meta: summary.description }),
+        ...(summary.image === null ? {} : { media: { src: summary.image, alt: summary.name } }),
+        ...(footer === null
+            ? {}
+            : { footer: _jsx("span", { className: "text-micro text-muted", children: footer }) }),
+    };
+}
+/**
+ * A many2one read: the name, what it is beside it, its face, and the card that floats from the
+ * name with its state and when it was made and last changed.
+ */
+export function relationOf(summary) {
+    const copy = frameworkCopy().summary;
+    const facts = [
+        ...(summary.created.at === null
+            ? []
+            : [{ label: copy.created, value: copy.when(summary.created.at, summary.created.by) }]),
+        ...(summary.updated.at === null
+            ? []
+            : [{ label: copy.updated, value: copy.when(summary.updated.at, summary.updated.by) }]),
+    ];
+    const media = summary.person
+        ? { person: true, ...(summary.image === null ? {} : { src: summary.image }) }
+        : summary.image === null
+            ? undefined
+            : { src: summary.image, alt: summary.name };
+    const secondary = summary.type ?? (summary.id === summary.name ? null : summary.id);
+    const card = {
+        ...(summary.state === null ? {} : { tag: { label: summary.state } }),
+        ...(facts.length === 0 ? {} : { facts }),
+    };
+    return {
+        name: summary.name,
+        ...(secondary === null ? {} : { secondary }),
+        ...(media === undefined ? {} : { media }),
+        ...(Object.keys(card).length === 0 ? {} : { summary: card }),
+    };
+}

package/dist/web/workspace/SincproApp.d.ts

@@ -0,0 +1,40 @@
+import type { Meta } from "@sincpro/criteria";
+import { type ComposerSkin, type ResourceRef, type ViewSpec } from "@sincpro/web-composer";
+import { type CacheOptions } from "../../core/cache.js";
+import type { Entity } from "../../core/entity.js";
+import type { Transport } from "../../core/transport.js";
+import { type ReactNode } from "react";
+/**
+ * The application context in one place: who answers (the transport), in which language, which
+ * model definitions are already known, the toasts, and the workspace with its views, ⌘K and
+ * shortcuts.
+ *
+ * Context: forge's `main.tsx` + `console.tsx` installed three copy tables, a toast provider, a
+ * context of its own and a composer by hand. This is that, once. It is a convenience, not the
+ * only door: everything it mounts is exported, and an app with its own shell mounts them itself.
+ * What it does NOT own: the session (the app builds the transport with its headers) and the
+ * application bar (the app draws its own, around this or beside it).
+ */
+export declare function SincproApp({ transport, views, start, language, metas, entities, empty, skin, cache, }: {
+    transport: Transport;
+    /** The entities as composer views — `entityView(…)` — and any other view of the app. */
+    views: readonly ViewSpec[];
+    /** The application's entities: a form draws a many2one of any of them without being told. */
+    entities?: readonly Entity[];
+    /** What opens first: a list, usually — `invoices.ref()`. */
+    start?: ResourceRef;
+    /** The interface's language: web-ui's, the composer's and the framework's words. */
+    language?: "es" | "en";
+    /** Definitions known before any request, by entity key. */
+    metas?: Readonly<Record<string, Meta>>;
+    /** Drawn when nothing is open. */
+    empty?: ReactNode;
+    /** How the workspace looks. web-ui's by default (`webUiSkin`); any piece can be replaced. */
+    skin?: ComposerSkin;
+    /**
+     * Repeated reads served from memory — the list gone back to, the record reopened — and
+     * forgotten the moment a write touches their entity (`cachedTransport`). 30 s by default;
+     * `false` asks the server every time.
+     */
+    cache?: CacheOptions | false;
+}): import("react").JSX.Element;

package/dist/web/workspace/SincproApp.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Composer, installComposerCopy, SPANISH_COMPOSER_COPY, useWorkspace, } from "@sincpro/web-composer";
+import { createRegistry } from "@sincpro/web-composer/domain";
+import { cachedTransport } from "../../core/cache.js";
+import { installFrameworkCopy, SPANISH_FRAMEWORK_COPY, } from "../../core/copy.js";
+import { FrameworkProvider } from "../../react/context.js";
+import { webUiSkin } from "./skin.js";
+import { installCopy, SPANISH_COPY, ToastProvider } from "@sincpro/web-ui";
+import { useEffect, useMemo, useState } from "react";
+/**
+ * The application context in one place: who answers (the transport), in which language, which
+ * model definitions are already known, the toasts, and the workspace with its views, ⌘K and
+ * shortcuts.
+ *
+ * Context: forge's `main.tsx` + `console.tsx` installed three copy tables, a toast provider, a
+ * context of its own and a composer by hand. This is that, once. It is a convenience, not the
+ * only door: everything it mounts is exported, and an app with its own shell mounts them itself.
+ * What it does NOT own: the session (the app builds the transport with its headers) and the
+ * application bar (the app draws its own, around this or beside it).
+ */
+export function SincproApp({ transport, views, start, language = "es", metas, entities, empty, skin = webUiSkin, cache = {}, }) {
+    // Installed once, before anything draws: the three tables are module state of their packages.
+    useState(() => {
+        if (language === "es") {
+            installCopy(SPANISH_COPY);
+            installComposerCopy(SPANISH_COMPOSER_COPY);
+            installFrameworkCopy(SPANISH_FRAMEWORK_COPY);
+        }
+        return null;
+    });
+    const cached = useMemo(() => (cache === false ? transport : cachedTransport(transport, cache)), 
+    // The options are read once: a cache that changes shape mid-session forgets everything.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [transport]);
+    const workspace = useWorkspace();
+    const registry = useMemo(() => createRegistry(views), [views]);
+    useEffect(() => {
+        if (start !== undefined)
+            workspace.push(start);
+        // The first screen only: a re-render must not push it again.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [workspace]);
+    return (_jsx(FrameworkProvider, { transport: cached, locale: language, ...(metas === undefined ? {} : { metas }), ...(entities === undefined ? {} : { entities }), children: _jsx(ToastProvider, { children: _jsx("div", { className: "flex h-dvh min-h-0 flex-col bg-ground", children: _jsx(Composer, { workspace: workspace, registry: registry, skin: skin, ...(empty === undefined ? {} : { empty }) }) }) }) }));
+}

package/dist/web/workspace/composer.d.ts

@@ -0,0 +1,55 @@
+import { type AnyRecord, type Meta } from "@sincpro/criteria";
+import type { ViewProps, ViewSpec } from "@sincpro/web-composer";
+import { type Entity } from "../../core/entity.js";
+import type { ListDefinition } from "../../core/list.js";
+import type { Transport } from "../../core/transport.js";
+import { type ComponentType } from "react";
+/**
+ * An entity as the composer's view: one `ViewSpec` for its list (a reference without an id)
+ * and its record (with one), searchable from ⌘K.
+ *
+ * Context: the composer opens references and never imports a domain — a domain DECLARES itself
+ * with a `ViewSpec`. The entity already knows its key (`domain:kind`), its routes and how a
+ * text finds one of its records (the framework's `LiteralSearch`: `meta.search` filled by
+ * `matching`), so its spec is written here once instead of by hand per kind (forge wrote
+ * eight). The screens stay the application's: `list` and `record` are its components.
+ *
+ * A reference with no id is the list — opened to choose one when it carries `pick` — and one
+ * with `new` is the record's own view with no id: the form of a record that does not exist yet
+ * (`entity.newRef()`), which `useRecord(entity, "")` fills with the model's defaults.
+ *
+ * ⌘K asks the server with `matching` — 8 records, identity and display — the same question a
+ * many2one asks. The model definition is asked for once, on the first search, unless `meta`
+ * is handed over.
+ */
+export type EntityViewOptions = {
+    transport: Transport;
+    /** How it reads in the palette, a panel's frame and the breadcrumb. */
+    name: string;
+    /** Its list. Without it, `EntityList` over the entity: search bar, pages, «Nuevo». */
+    list?: ComponentType<ViewProps>;
+    /** Its record. Without it, `EntityRecord`: the form the model describes. */
+    record?: ComponentType<ViewProps>;
+    icon?: ViewSpec["icon"];
+    /** Listed under «Go to» in ⌘K. On by default. */
+    goto?: boolean;
+    /** Known before any search: no request asks for it. */
+    meta?: Meta;
+    actions?: ViewSpec["actions"];
+};
+export declare function entityView<T extends AnyRecord>(entity: Entity<T>, options: EntityViewOptions): ViewSpec;
+/**
+ * A named list as a view of its own: «Por cobrar» in ⌘K's «Go to», its own breadcrumb, the
+ * list the definition declares. Its rows open the ENTITY's record — the view `entityView`
+ * registered — so a list view needs no record screen of its own.
+ *
+ *     views: [entityView(facturas, …), listView(porCobrar), listView(borradores)]
+ */
+export type ListViewOptions = {
+    /** The screen; without it, `EntityList` over the definition, as it declares. */
+    list?: ComponentType<ViewProps>;
+    icon?: ViewSpec["icon"];
+    /** Listed under «Go to» in ⌘K. On by default. */
+    goto?: boolean;
+};
+export declare function listView<T extends AnyRecord>(list: ListDefinition<T>, options?: ListViewOptions): ViewSpec;

package/dist/web/workspace/composer.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { matching } from "@sincpro/criteria";
+import { NEW_PARAM } from "../../core/entity.js";
+import { lookupOf } from "../../core/lookup.js";
+import { useListing } from "../../react/useListing.js";
+import { EntityList } from "../list/EntityList.js";
+import { RecordOpeningProvider, } from "../record/opening.js";
+import { openIn, RECORD_SIZE, targetsFor } from "./open.js";
+import { EntityRecord } from "./record.js";
+import { useMemo } from "react";
+/**
+ * The fields of a view open their records in the workspace: a modal over this surface by
+ * default, beside it from inside a modal, and «Buscar más…» as the entity's list that answers.
+ */
+function InWorkspace({ api, children }) {
+    const targets = targetsFor(api);
+    const opening = useMemo(() => ({
+        open: (ref, to) => openIn(api, ref, to),
+        targets,
+        choose: (entity, answer, query) => api.pick(entity.chooserRef(query), (ref) => ref.id === undefined || answer(ref.id), {
+            // Never a modal over a modal: from inside one, the chooser docks beside it.
+            ...(targets[0] === "modal"
+                ? { to: "modal", size: RECORD_SIZE }
+                : { to: "side" }),
+        }),
+    }), [api, targets]);
+    return _jsx(RecordOpeningProvider, { value: opening, children: children });
+}
+/** The entity's list when the application writes none. */
+function listOf(entity) {
+    return function DefaultList({ api }) {
+        return _jsx(EntityList, { listing: useListing(entity), api: api });
+    };
+}
+/** The entity's record when the application writes none. */
+function recordOf(entity) {
+    return function DefaultRecord(props) {
+        return _jsx(EntityRecord, { ...props, entity: entity });
+    };
+}
+export function entityView(entity, options) {
+    const List = options.list ?? listOf(entity);
+    const One = options.record ?? recordOf(entity);
+    let meta = options.meta ?? null;
+    function EntityView(props) {
+        const record = props.resource.id !== undefined || props.resource.params?.[NEW_PARAM] !== undefined;
+        return (_jsx(InWorkspace, { api: props.api, children: record ? _jsx(One, { ...props }) : _jsx(List, { ...props }) }));
+    }
+    return {
+        domain: entity.domain,
+        kind: entity.kind,
+        title: (ref) => ref.id ?? options.name,
+        goto: options.goto ?? true,
+        ...(options.icon === undefined ? {} : { icon: options.icon }),
+        ...(options.actions === undefined ? {} : { actions: options.actions }),
+        search: async (query) => {
+            if (query.trim() === "")
+                return [];
+            if (meta === null)
+                meta = (await options.transport.list(entity.list, { pagination: { limit: 1 } })).meta;
+            if (meta?.search == null)
+                return [];
+            const page = await options.transport.list(entity.list, {
+                ...matching(meta, query),
+                meta: false,
+            });
+            return lookupOf(meta, page.rows).map((one) => ({
+                ref: entity.ref(one.id),
+                label: one.label,
+                ...(one.detail === undefined ? {} : { detail: one.detail }),
+            }));
+        },
+        load: async () => EntityView,
+    };
+}
+export function listView(list, options = {}) {
+    const Screen = options.list ?? definedList(list);
+    return {
+        domain: list.entity.domain,
+        kind: list.ref().kind,
+        title: () => list.title,
+        goto: options.goto ?? true,
+        ...(options.icon === undefined ? {} : { icon: options.icon }),
+        load: async () => Screen,
+    };
+}
+function definedList(list) {
+    function DefinedList({ api }) {
+        return _jsx(EntityList, { listing: useListing(list), api: api });
+    }
+    DefinedList.displayName = `List(${list.key})`;
+    return DefinedList;
+}

package/dist/web/workspace/open.d.ts

@@ -0,0 +1,61 @@
+import type { AnyRecord, Meta } from "@sincpro/criteria";
+import type { OpenOptions, ResourceRef, WorkspaceApi } from "@sincpro/web-composer";
+import type { Entity } from "../../core/entity.js";
+import { type OpenTarget } from "@sincpro/web-ui";
+import type { ReactNode } from "react";
+/**
+ * Where a record opens, in the words of web-ui (`OpenTarget`) and the workspace of composer.
+ *
+ * Context: web-ui only SAYS where the person asked to open something — the name of a many2one
+ * opens in the first of its `openTargets`, «Abrir en…» offers the rest — and composer decides
+ * what each place is. This is the one translation between them, so every screen agrees:
+ *
+ * - a related record opens in a MODAL over the surface that asked: the person was doing
+ *   something here, and comes back to exactly where they were;
+ * - from INSIDE a modal it opens beside or as a preview, never a modal over a modal (a second
+ *   one would replace the first, and what was typed in it is lost) — composer says where a
+ *   view is (`api.over`), so no screen has to;
+ * - a modal is the size of a record unless the caller says otherwise.
+ *
+ * The phone is composer's: a modal becomes a sheet, a side panel the page. No view asks.
+ */
+/** A record's form fits; a short task (register a payment) passes its own size. */
+export declare const RECORD_SIZE: {
+    readonly w: 760;
+    readonly h: 560;
+};
+/** Where a related record may open from this view, the default first. */
+export declare function targetsFor(api: Pick<WorkspaceApi, "over">): readonly OpenTarget[];
+/** web-ui's target as composer's options. Destinations share their names, so only the size is
+ *  added — to the two that have one. */
+export declare function openOptions(to: OpenTarget, size?: {
+    w: number;
+    h: number;
+}): OpenOptions;
+/**
+ * Open a record where it was asked, or where it belongs from here.
+ *
+ *     <RelationValue onOpenIn={(to) => openIn(api, clientes.ref(id), to)} />
+ *     openIn(api, pagoRef, "modal", { w: 640, h: 460 })   // a short task, at its own size
+ */
+export declare function openIn(api: Pick<WorkspaceApi, "open" | "over">, ref: ResourceRef, to?: OpenTarget, size?: {
+    w: number;
+    h: number;
+}): void;
+/**
+ * A record this one points at — the customer of an invoice — read and opened: its name as a
+ * link, its face and what it is, the summary that floats from the name, and «Abrir en…».
+ *
+ * `value` is what the server sent for the many2one: the record it points at (expanded), or its
+ * key alone. Its model is the one this application knows for `entity`, unless given.
+ *
+ *     <RelatedRecord api={api} entity={clientes} value={factura.record.customer} />
+ */
+export declare function RelatedRecord<T extends AnyRecord>({ api, entity, value, meta, editor, }: {
+    api: WorkspaceApi;
+    entity: Entity<T>;
+    value: AnyRecord | string | null | undefined;
+    meta?: Meta | null;
+    /** The control that edits the relation — an `EntityPicker` — drawn in a form's edit mode. */
+    editor?: ReactNode;
+}): import("react").JSX.Element;

package/dist/web/workspace/open.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSummaryOf } from "../../react/useSummary.js";
+import { relationOf } from "../record/summary.js";
+import { RelationValue } from "@sincpro/web-ui";
+/**
+ * Where a record opens, in the words of web-ui (`OpenTarget`) and the workspace of composer.
+ *
+ * Context: web-ui only SAYS where the person asked to open something — the name of a many2one
+ * opens in the first of its `openTargets`, «Abrir en…» offers the rest — and composer decides
+ * what each place is. This is the one translation between them, so every screen agrees:
+ *
+ * - a related record opens in a MODAL over the surface that asked: the person was doing
+ *   something here, and comes back to exactly where they were;
+ * - from INSIDE a modal it opens beside or as a preview, never a modal over a modal (a second
+ *   one would replace the first, and what was typed in it is lost) — composer says where a
+ *   view is (`api.over`), so no screen has to;
+ * - a modal is the size of a record unless the caller says otherwise.
+ *
+ * The phone is composer's: a modal becomes a sheet, a side panel the page. No view asks.
+ */
+/** A record's form fits; a short task (register a payment) passes its own size. */
+export const RECORD_SIZE = { w: 760, h: 560 };
+const IN_PLACE = ["modal", "peek", "side", "page"];
+const FROM_A_MODAL = ["side", "peek", "page"];
+/** Where a related record may open from this view, the default first. */
+export function targetsFor(api) {
+    return api.over === null ? IN_PLACE : FROM_A_MODAL;
+}
+/** web-ui's target as composer's options. Destinations share their names, so only the size is
+ *  added — to the two that have one. */
+export function openOptions(to, size = RECORD_SIZE) {
+    return to === "modal" || to === "window" ? { to, size } : { to };
+}
+/**
+ * Open a record where it was asked, or where it belongs from here.
+ *
+ *     <RelationValue onOpenIn={(to) => openIn(api, clientes.ref(id), to)} />
+ *     openIn(api, pagoRef, "modal", { w: 640, h: 460 })   // a short task, at its own size
+ */
+export function openIn(api, ref, to, size) {
+    const targets = targetsFor(api);
+    const where = to === undefined || !targets.includes(to) ? targets[0] : to;
+    api.open(ref, openOptions(where ?? "page", size));
+}
+/**
+ * A record this one points at — the customer of an invoice — read and opened: its name as a
+ * link, its face and what it is, the summary that floats from the name, and «Abrir en…».
+ *
+ * `value` is what the server sent for the many2one: the record it points at (expanded), or its
+ * key alone. Its model is the one this application knows for `entity`, unless given.
+ *
+ *     <RelatedRecord api={api} entity={clientes} value={factura.record.customer} />
+ */
+export function RelatedRecord({ api, entity, value, meta, editor, }) {
+    const summarize = useSummaryOf(entity);
+    const extra = editor === undefined ? {} : { editor };
+    if (value === null || value === undefined || value === "")
+        return _jsx(RelationValue, { name: null, ...extra });
+    const summary = summarize(typeof value === "string" ? { id: value } : value, meta);
+    return (_jsx(RelationValue, { ...relationOf(summary), onOpenIn: (to) => openIn(api, entity.ref(summary.id), to), openTargets: targetsFor(api), ...extra }));
+}

package/dist/web/workspace/record.d.ts

@@ -0,0 +1,30 @@
+import type { AnyRecord } from "@sincpro/criteria";
+import { type ViewProps } from "@sincpro/web-composer";
+import { type Entity } from "../../core/entity.js";
+import { type RecordReading } from "../../react/useRecord.js";
+import { type ReactNode } from "react";
+/**
+ * The record of an entity, drawn from its model — the screen `entityView` opens when the
+ * application writes none: in the page, a modal, the preview or a panel, the same.
+ *
+ * Context: every Sincpro record screen was the same hundred lines: read it, tell the workspace
+ * its name and its unsaved work, draw its name and state on top, its fields, its lines, the
+ * conflict and the restored draft, who made it, its history. Here once, from what the model and
+ * the entity already say (`formOf`, `summaryOf`): a new entity has a useful screen before anyone
+ * writes it. It is a default, not a cage — `fields`/`pages` choose and order, `actions` puts the
+ * record's commands, and any screen can drop this and keep `useRecord` + `RecordField`.
+ *
+ *     entityView(invoices, { transport, name: "Facturas" })          // this screen
+ *     entityView(invoices, { …, record: (props) =>
+ *       <EntityRecord {...props} entity={invoices} fields={["customer_id", "due_date"]}
+ *         actions={(invoice) => <CommandButton entity={invoices} command="post" … />} /> })
+ */
+export declare function EntityRecord<T extends AnyRecord>({ api, resource, entity, fields, pages, actions, }: ViewProps & {
+    entity: Entity<T>;
+    /** The fields, in this order. Without it, the model's (`formOf`). */
+    fields?: readonly string[];
+    /** The one2many shown as pages, in this order. Without it, every one the model has. */
+    pages?: readonly string[];
+    /** The record's own commands, beside «save / discard». */
+    actions?: (record: RecordReading<T>) => ReactNode;
+}): import("react").JSX.Element;

package/dist/web/workspace/record.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { labelOf, nameOf } from "@sincpro/criteria";
+import { useCrumbs } from "@sincpro/web-composer";
+import { frameworkCopy } from "../../core/copy.js";
+import { TRAIL_PARAM } from "../../core/entity.js";
+import { formOf } from "../../core/form.js";
+import { placeOf, stepIn } from "../../core/trail.js";
+import { useFramework } from "../../react/context.js";
+import { useHistory } from "../../react/useHistory.js";
+import { useRecord } from "../../react/useRecord.js";
+import { useSummaryOf } from "../../react/useSummary.js";
+import { dirtyOf, RecordField } from "../record/edit.js";
+import { Refused } from "../Refused.js";
+import { useRecordInWorkspace } from "./workspace.js";
+import { Button, Callout, Record, Skeleton } from "@sincpro/web-ui";
+import { useState } from "react";
+/**
+ * The record of an entity, drawn from its model — the screen `entityView` opens when the
+ * application writes none: in the page, a modal, the preview or a panel, the same.
+ *
+ * Context: every Sincpro record screen was the same hundred lines: read it, tell the workspace
+ * its name and its unsaved work, draw its name and state on top, its fields, its lines, the
+ * conflict and the restored draft, who made it, its history. Here once, from what the model and
+ * the entity already say (`formOf`, `summaryOf`): a new entity has a useful screen before anyone
+ * writes it. It is a default, not a cage — `fields`/`pages` choose and order, `actions` puts the
+ * record's commands, and any screen can drop this and keep `useRecord` + `RecordField`.
+ *
+ *     entityView(invoices, { transport, name: "Facturas" })          // this screen
+ *     entityView(invoices, { …, record: (props) =>
+ *       <EntityRecord {...props} entity={invoices} fields={["customer_id", "due_date"]}
+ *         actions={(invoice) => <CommandButton entity={invoices} command="post" … />} /> })
+ */
+export function EntityRecord({ api, resource, entity, fields, pages, actions, }) {
+    const reading = useRecord(entity, resource.id ?? "");
+    const crumbs = useCrumbs(api);
+    useRecordInWorkspace(api, reading);
+    const history = useHistory(entity, reading.isNew ? "" : reading.id, [reading.record]);
+    const summarize = useSummaryOf(entity);
+    const [page, setPage] = useState(undefined);
+    const copy = frameworkCopy().record;
+    // Opened from a list: where it stands in it, and its neighbours (`Trail`).
+    const { trails, transport } = useFramework();
+    const trailKey = resource.params?.[TRAIL_PARAM];
+    const trail = trailKey === undefined ? undefined : trails.get(trailKey);
+    const go = (step) => () => {
+        if (trail === undefined || trailKey === undefined)
+            return;
+        void stepIn(transport, trail, reading.id, step).then((moved) => {
+            if (moved === null)
+                return;
+            trails.set(trailKey, moved.trail);
+            const ref = entity.ref(moved.id);
+            // In place, as Odoo's pager: the neighbour is not a step deeper, no crumb leads back.
+            api.replace({ ...ref, params: { ...ref.params, [TRAIL_PARAM]: trailKey } });
+        });
+    };
+    if (reading.status === "loading")
+        return _jsx(Skeleton, { rows: 6, label: copy.loading });
+    if (reading.status === "failed")
+        return _jsx(Refused, { error: reading.error, onRetry: reading.reload });
+    const { meta, locale, edit } = reading;
+    const layout = formOf(meta, entity.summary);
+    const shown = fields ?? layout.fields;
+    const tabs = pages ?? layout.pages;
+    const summary = reading.isNew ? undefined : summarize(reading.record, meta);
+    const dirty = dirtyOf(reading);
+    const created = summary?.created;
+    const updated = summary?.updated;
+    const stamp = (one) => one?.at == null ? undefined : { at: one.at, by: one.by ?? "—" };
+    const createdStamp = stamp(created);
+    const updatedStamp = stamp(updated);
+    // Moving away with something typed would lose it: «save / discard» comes first.
+    const place = trail === undefined || reading.isNew || edit.dirty ? null : placeOf(trail, reading.id);
+    return (_jsxs(Record, { identity: {
+            title: summary?.name ?? copy.creating(nameOf(meta, locale) || ""),
+            ...(summary?.type == null ? {} : { subtitle: summary.type }),
+            ...(summary?.state == null ? {} : { tag: { label: summary.state } }),
+        }, ...(dirty === undefined ? {} : { dirty }), ...(edit.failure === null ? {} : { error: String(edit.failure.message) }), children: [_jsxs(Record.Rail, { children: [crumbs.length === 0 ? null : _jsx(Record.Crumbs, { crumbs: crumbs }), place === null ? null : (_jsx(Record.Pager, { index: place.index, total: place.total, onPrev: go(-1), onNext: go(1) })), _jsx(Record.Actions, { children: actions?.(reading) ?? null })] }), _jsxs(Record.Paper, { layout: "horizontal", children: [_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [edit.conflict ? (_jsx(Callout, { tone: "warn", title: copy.conflict, children: _jsx(Button, { size: "sm", role: "secondary", onClick: reading.reload, children: copy.reload }) })) : null, edit.restored ? (_jsx(Callout, { tone: "info", title: copy.restored, children: null })) : null, shown.map((name) => (_jsx(RecordField, { record: reading, name: name }, name))), edit.advice.map((one) => (_jsx(Callout, { tone: "info", title: one.text, children: null }, one.text)))] }), tabs.length === 0 || reading.isNew ? null : (_jsx(Record.Pages, { current: page ?? tabs[0], onChange: setPage, children: tabs.map((name) => (_jsx(Record.Page, { id: name, label: labelOf(meta, name, locale), children: _jsx(RecordField, { record: reading, name: name, bare: true }) }, name))) })), createdStamp === undefined && updatedStamp === undefined ? null : (_jsx(Record.Audit, { ...(createdStamp === undefined ? {} : { created: createdStamp }), ...(updatedStamp === undefined ? {} : { updated: updatedStamp }) }))] }), history === undefined ? null : _jsx(Record.Activity, { events: history })] }));
+}

package/dist/web/workspace/skin.d.ts

@@ -0,0 +1,2 @@
+import type { ComposerSkin } from "@sincpro/web-composer";
+export declare const webUiSkin: ComposerSkin;