@sincpro/web-framework 0.1.0 → 0.2.0

package/dist/web/record/edit.js

@@ -3,13 +3,43 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { choicesOf } from "@sincpro/criteria";
 import { frameworkCopy } from "../../core/copy.js";
 import { textOf, viewOf } from "../../core/present.js";
-import { Checkbox, DatePicker, Field, NumberInput, ReadValue, Select, TextArea, TextInput, } from "@sincpro/web-ui";
-export function RecordField({ record, name, as, }) {
+import { relationFieldOf } from "../../core/relation.js";
+import { useEntityFor, useFramework } from "../../react/context.js";
+import { EntityPicker } from "./EntityPicker.js";
+import { useRecordOpening } from "./opening.js";
+import { RecordLines } from "./record.js";
+import { RelatedList } from "./RelatedList.js";
+import { Checkbox, DatePicker, Field, NumberInput, ReadValue, RelationValue, Select, TagsField, TextInput, } from "@sincpro/web-ui";
+export function RecordField({ record, name, as, bare = false, }) {
     const { meta, locale, edit } = record;
     const view = viewOf(meta, name, locale);
     const state = edit.state(name);
+    const relation = relationFieldOf(meta, name);
+    const target = useEntityFor(relation?.target);
+    const opening = useRecordOpening();
+    const { metas } = useFramework();
     if (!state.visible)
         return null;
+    // A one2many of a declared entity is that entity's own list, filtered to this record by
+    // the server — never the page the record happened to bring — and a row opens its record.
+    // A one2many of no declared entity (the lines of an invoice): the page the record brought,
+    // with its real total.
+    if (as === undefined && relation?.field.type === "one2many" && target === undefined) {
+        const lines = (_jsx(RecordLines, { record: record.record ?? {}, meta: meta, name: name, locale: locale }));
+        return bare ? lines : _jsx(Field, { label: view.label, children: lines });
+    }
+    if (as === undefined && relation?.field.type === "one2many" && target !== undefined) {
+        const list = (_jsx(RelatedList, { record: record, name: name, entity: target, ...(opening === null
+                ? {}
+                : {
+                    onOpen: (row) => {
+                        const known = metas.get(target.key);
+                        const key = known?.get_id || known?.identity || "id";
+                        opening.open(target.ref(String(row[key])), opening.targets[0] ?? "page");
+                    },
+                }) }));
+        return bare ? list : _jsx(Field, { label: view.label, children: list });
+    }
     const value = edit.values[name];
     const error = edit.errors[name];
     const control = {
@@ -20,9 +50,38 @@ export function RecordField({ record, name, as, }) {
         label: view.label,
     };
     const field = meta?.fields[name];
+    /** A many2one of a declared entity: chosen by the server's literal search, opened where the
+     *  view says. Written by its key; read by the record it points at. */
+    function manyToOne() {
+        if (relation === undefined || target === undefined)
+            return null;
+        const key = edit.values[relation.key];
+        const id = key === null || key === undefined ? "" : String(key);
+        if (state.readonly)
+            return (_jsx(RelationValue, { name: textOf(meta, relation.relation, edit.values[relation.relation], locale) ?? id, ...(opening === null || id === ""
+                    ? {}
+                    : {
+                        onOpenIn: (to) => opening.open(target.ref(id), to),
+                        openTargets: opening.targets,
+                    }) }));
+        const answer = (next) => edit.set(relation.key, next);
+        return (_jsx(EntityPicker, { entity: target, value: id, onChange: answer, 
+            // «Buscar más…» is an option of the picker already: no second button beside it.
+            browse: false, "aria-label": view.label, ...(opening === null
+                ? {}
+                : {
+                    onOpen: (chosen, to) => opening.open(target.ref(chosen), to),
+                    openTargets: opening.targets,
+                    ...(opening.choose === undefined
+                        ? {}
+                        : {
+                            onBrowseAll: (query) => opening.choose?.(target, answer, query),
+                        }),
+                }) }));
+    }
     if (view.type === "boolean" && as === undefined)
         return (_jsx(Checkbox, { checked: value === true, onChange: control.set, label: view.label, disabled: state.readonly }));
-    return (_jsx(Field, { label: view.label, required: state.required && !state.readonly, ...(view.help === undefined ? {} : { hint: view.help }), ...(error === undefined ? {} : { error }), children: as !== undefined ? (as(control)) : state.readonly ? (_jsx(ReadValue, { value: textOf(meta, name, value, locale) ?? "—" })) : (controlFor(control, view.type, field?.exact === true, choicesOf(meta, name, locale))) }));
+    return (_jsx(Field, { label: view.label, required: state.required && !state.readonly, ...(view.help === undefined ? {} : { hint: view.help }), ...(error === undefined ? {} : { error }), children: as !== undefined ? (as(control)) : relation !== undefined && !relation.many && target !== undefined ? (manyToOne()) : state.readonly ? (_jsx(ReadValue, { value: textOf(meta, name, value, locale) ?? "—" })) : (controlFor(control, view.type, field?.exact === true, choicesOf(meta, name, locale))) }));
 }
 function controlFor(control, type, exact, choices) {
     const { value, set } = control;
@@ -36,11 +95,11 @@ function controlFor(control, type, exact, choices) {
                 onChange: (next) => set(next === "" ? null : exact ? String(next) : next) }));
         case "date":
             return (_jsx(DatePicker, { value: typeof value === "string" && value !== "" ? value : null, onChange: set }));
-        case "text[]":
-            return (_jsx(TextArea, { value: Array.isArray(value) ? value.join("\n") : "", onChange: (next) => set(next
-                    .split("\n")
-                    .map((line) => line.trim())
-                    .filter(Boolean)) }));
+        case "text[]": {
+            // A list of words is chips: each word is its own key, and typing a new one adds it.
+            const words = Array.isArray(value) ? value.map(String) : [];
+            return (_jsx(TagsField, { value: words, options: words.map((word) => ({ value: word, label: word })), onChange: set, onCreate: (word) => word }));
+        }
         default:
             return (_jsx(TextInput, { value: value === null || value === undefined ? "" : String(value), onChange: set }));
     }

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

@@ -0,0 +1,26 @@
+import type { Entity, EntityRef } from "../../core/entity.js";
+import type { OpenTarget } from "@sincpro/web-ui";
+import { type ReactNode } from "react";
+/**
+ * How a record shown in a form opens from here — given by whoever holds the form, used by the
+ * fields inside it.
+ *
+ * Context: a form must work outside a workspace (`web/record/` imports no composer), yet a
+ * many2one inside one opens its record in a modal, with «Abrir en…» for the rest. So the form
+ * does not decide: the view that holds it says how to open (`entityView` fills it with the
+ * composer's `openIn` and the places allowed from where the view is), and a field asks. Without
+ * it a related record is a value, not a door.
+ */
+export type RecordOpening = {
+    open: (ref: EntityRef, to: OpenTarget) => void;
+    /** Where it may open from here, the default first. */
+    targets: readonly OpenTarget[];
+    /** «Buscar más…»: the entity's own list opened to choose (in composer, a modal that answers),
+     *  on what was typed. Without it the picker brings its own chooser. */
+    choose?: (entity: Entity, answer: (id: string) => void, query: string) => void;
+};
+export declare function RecordOpeningProvider({ value, children, }: {
+    value: RecordOpening;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useRecordOpening(): RecordOpening | null;

package/dist/web/record/opening.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const Opening = createContext(null);
+export function RecordOpeningProvider({ value, children, }) {
+    return _jsx(Opening.Provider, { value: value, children: children });
+}
+export function useRecordOpening() {
+    return useContext(Opening);
+}

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

@@ -1,6 +1,7 @@
 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";
 /**
@@ -14,10 +15,12 @@ import { type ReactNode } from "react";
  * 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, empty, skin, cache, }: {
+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. */

package/dist/web/workspace/SincproApp.js

@@ -19,7 +19,7 @@ import { useEffect, useMemo, useState } from "react";
  * 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, empty, skin = webUiSkin, cache = {}, }) {
+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") {
@@ -41,5 +41,5 @@ export function SincproApp({ transport, views, start, language = "es", metas, em
         // 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 }), 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 }) }) }) }) }));
+    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

@@ -1,8 +1,9 @@
 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 Entity } from "../../core/entity.js";
+import type { ListDefinition } from "../../core/list.js";
 import type { Transport } from "../../core/transport.js";
-import type { ComponentType } from "react";
+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.
@@ -13,6 +14,10 @@ import type { ComponentType } from "react";
  * `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.
@@ -21,8 +26,10 @@ export type EntityViewOptions = {
     transport: Transport;
     /** How it reads in the palette, a panel's frame and the breadcrumb. */
     name: string;
-    list: ComponentType<ViewProps>;
-    record: ComponentType<ViewProps>;
+    /** 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;
@@ -31,3 +38,18 @@ export type EntityViewOptions = {
     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

@@ -1,12 +1,51 @@
 "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: List, record: One } = options;
+    const List = options.list ?? listOf(entity);
+    const One = options.record ?? recordOf(entity);
     let meta = options.meta ?? null;
     function EntityView(props) {
-        return props.resource.id === undefined ? _jsx(List, { ...props }) : _jsx(One, { ...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,
@@ -35,3 +74,21 @@ export function entityView(entity, options) {
         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

@@ -1,11 +1,2 @@
 import type { ComposerSkin } from "@sincpro/web-composer";
-/**
- * The composer, dressed as web-ui.
- *
- * Context: since 1.0 the composer owns the BEHAVIOUR of the workspace and ships a minimal look
- * of its own so it works alone; the look is the application's, piece by piece (`skin`). This
- * package is married to web-ui, so its workspace should read as web-ui: lucide's icons, web-ui's
- * `Peek` drawer, its `Dialog` for «discard what you typed?», its `Missing` where a view could not
- * be drawn. `<SincproApp>` uses it by default; any piece can still be replaced on top of it.
- */
 export declare const webUiSkin: ComposerSkin;