@sincpro/web-framework 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,18 @@
+import type { AnyRecord } from "@sincpro/criteria";
+import type { Entity } from "../../core/entity.js";
+import type { RecordReading } from "../../react/useRecord.js";
+import { type EntityListProps } from "../list/EntityList.js";
+/**
+ * A relation of a record as a list inside it — searched, ordered and paged by the server.
+ *
+ * Context: the same `EntityList` a screen uses, `embedded` so it reads as a field of the record
+ * (a one-line bar that does not stick), over `useRelated`. Its search box fills the RELATED
+ * entity's own search template: the lines of an order are searched by product, the invoices of
+ * a customer by number. Use `RecordLines` when the page the record brought is all there is.
+ */
+export declare function RelatedList<P extends AnyRecord, T extends AnyRecord>({ record, name, entity, pageSize, ...list }: {
+    record: RecordReading<P>;
+    name: string;
+    entity: Entity<T>;
+    pageSize?: number;
+} & Omit<EntityListProps<T>, "listing" | "embedded">): import("react").JSX.Element;

package/dist/web/record/RelatedList.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRelated } from "../../react/useRelated.js";
+import { EntityList } from "../list/EntityList.js";
+/**
+ * A relation of a record as a list inside it — searched, ordered and paged by the server.
+ *
+ * Context: the same `EntityList` a screen uses, `embedded` so it reads as a field of the record
+ * (a one-line bar that does not stick), over `useRelated`. Its search box fills the RELATED
+ * entity's own search template: the lines of an order are searched by product, the invoices of
+ * a customer by number. Use `RecordLines` when the page the record brought is all there is.
+ */
+export function RelatedList({ record, name, entity, pageSize, ...list }) {
+    const listing = useRelated(record, name, entity, pageSize === undefined ? {} : { pageSize });
+    return _jsx(EntityList, { listing: listing, embedded: true, search: "box", ...list });
+}

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

@@ -0,0 +1,35 @@
+import type { RecordReading } from "../../react/useRecord.js";
+import { type DirtyState } from "@sincpro/web-ui";
+import type { ReactNode } from "react";
+/**
+ * One field of a record being edited, from the model: its word, whether it is required or
+ * read-only now (the hints, evaluated over what is on screen), the server's error for it, and a
+ * control chosen by its type.
+ *
+ * Context: forge's forms wrote `<Field label="Nombre" required><TextInput … /></Field>` once per
+ * field, with the label, the «required» and the value plumbing by hand, while the server already
+ * said all three. Here a field is a NAME. The control by type is a default, never the only way:
+ * `as` draws any control — a many2one with `EntityPicker`, a rich text, a domain widget — and
+ * still receives the value, the setter and the state.
+ *
+ *     <RecordField record={invoice} name="due_date" />
+ *     <RecordField record={invoice} name="customer_id"
+ *       as={({ value, set }) => <EntityPicker entity={customers} value={String(value)} onChange={set} />} />
+ */
+export type FieldControl = {
+    value: unknown;
+    set: (value: unknown) => void;
+    readonly: boolean;
+    invalid: boolean;
+    label: string;
+};
+export declare function RecordField<T extends Record<string, unknown>>({ record, name, as, }: {
+    record: RecordReading<T>;
+    name: string;
+    as?: (control: FieldControl) => ReactNode;
+}): import("react").JSX.Element | null;
+/**
+ * The record's «save / discard», for `<Record dirty={…}>`: present only while something changed,
+ * off while saving, and off with the reason while a required field is empty.
+ */
+export declare function dirtyOf<T extends Record<string, unknown>>(record: RecordReading<T>): DirtyState | undefined;

package/dist/web/record/edit.js

@@ -0,0 +1,63 @@
+"use client";
+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, }) {
+    const { meta, locale, edit } = record;
+    const view = viewOf(meta, name, locale);
+    const state = edit.state(name);
+    if (!state.visible)
+        return null;
+    const value = edit.values[name];
+    const error = edit.errors[name];
+    const control = {
+        value,
+        set: (next) => edit.set(name, next),
+        readonly: state.readonly,
+        invalid: error !== undefined,
+        label: view.label,
+    };
+    const field = meta?.fields[name];
+    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))) }));
+}
+function controlFor(control, type, exact, choices) {
+    const { value, set } = control;
+    if (choices.length > 0)
+        return (_jsx(Select, { value: value === null || value === undefined ? "" : String(value), options: choices.map((one) => ({ value: String(one.value), label: one.label })), onChange: set }));
+    switch (type) {
+        case "integer":
+        case "number":
+            return (_jsx(NumberInput, { value: value === null || value === undefined || value === "" ? "" : Number(value), 
+                // A decimal travels as text so no digit is lost; the server reads it that way back.
+                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)) }));
+        default:
+            return (_jsx(TextInput, { value: value === null || value === undefined ? "" : String(value), onChange: set }));
+    }
+}
+/**
+ * The record's «save / discard», for `<Record dirty={…}>`: present only while something changed,
+ * off while saving, and off with the reason while a required field is empty.
+ */
+export function dirtyOf(record) {
+    const { edit, meta, locale } = record;
+    if (!edit.dirty)
+        return undefined;
+    const missing = edit.missing.map((name) => viewOf(meta, name, locale).label);
+    return {
+        onSave: () => void edit.save(),
+        onDiscard: edit.discard,
+        saving: edit.saving,
+        ...(missing.length === 0 ? {} : { blocked: frameworkCopy().record.missing(missing) }),
+    };
+}

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

@@ -0,0 +1,25 @@
+import { type AnyRecord, type Meta } from "@sincpro/criteria";
+import { type SheetField } from "@sincpro/web-ui";
+import type { ReactNode } from "react";
+export declare function factsOf<T extends AnyRecord>(record: T, meta: Meta | null | undefined, names: readonly string[], options?: {
+    locale?: string | undefined;
+    cells?: Readonly<Partial<Record<string, (record: T) => ReactNode>>>;
+}): SheetField[];
+/** How many records a relation of this record holds — the TOTAL, not the page it brought. */
+export declare function countOf(record: AnyRecord, name: string): number;
+/**
+ * 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 declare function RecordLines<T extends AnyRecord>({ record, meta, name, columns, cells, locale, onOpen, }: {
+    record: AnyRecord;
+    meta: Meta | null | undefined;
+    name: string;
+    columns?: readonly string[];
+    cells?: Readonly<Partial<Record<string, (row: T) => ReactNode>>>;
+    locale?: string | undefined;
+    onOpen?: (row: T) => void;
+}): import("react").JSX.Element;

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/workspace/SincproApp.d.ts

@@ -0,0 +1,37 @@
+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 { 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, empty, skin, cache, }: {
+    transport: Transport;
+    /** The entities as composer views — `entityView(…)` — and any other view of the app. */
+    views: readonly ViewSpec[];
+    /** 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, 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 }), 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,33 @@
+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 { 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.
+ *
+ * ⌘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;
+    list: ComponentType<ViewProps>;
+    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;

package/dist/web/workspace/composer.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { matching } from "@sincpro/criteria";
+import { lookupOf } from "../../core/lookup.js";
+export function entityView(entity, options) {
+    const { list: List, record: One } = options;
+    let meta = options.meta ?? null;
+    function EntityView(props) {
+        return props.resource.id === undefined ? _jsx(List, { ...props }) : _jsx(One, { ...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,
+    };
+}

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

@@ -0,0 +1,11 @@
+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;

package/dist/web/workspace/skin.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, Missing, Peek } from "@sincpro/web-ui";
+import { AppWindow, ArrowLeft, Ellipsis, Eye, Maximize2, Minimize2, Minus, PanelBottom, PanelLeft, PanelRight, Search, SquareArrowOutUpRight, X, } from "lucide-react";
+/**
+ * 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 const webUiSkin = {
+    icons: {
+        more: Ellipsis,
+        expand: SquareArrowOutUpRight,
+        minimize: Minus,
+        maximize: Maximize2,
+        restore: Minimize2,
+        close: X,
+        left: PanelLeft,
+        right: PanelRight,
+        bottom: PanelBottom,
+        window: AppWindow,
+        back: ArrowLeft,
+        search: Search,
+        peek: Eye,
+    },
+    Peek: ({ title, onClose, actions, children }) => (_jsx(Peek, { open: true, title: title, onClose: onClose, actions: actions, children: children })),
+    Confirm: ({ open, title, detail, keep, discard, onAnswer }) => (_jsx(Dialog, { open: open, title: title, onClose: () => onAnswer(false), footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", role: "secondary", onClick: () => onAnswer(true), children: discard }), _jsx(Button, { size: "sm", role: "primary", onClick: () => onAnswer(false), children: keep })] }), children: _jsx("p", { className: "text-ink", children: detail }) })),
+    Notice: ({ heading, detail, bad }) => (_jsx(Missing, { heading: heading, detail: detail, tone: bad ? "bad" : "warn" })),
+};

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

@@ -0,0 +1,16 @@
+import type { AnyRecord } from "@sincpro/criteria";
+import type { WorkspaceApi } from "@sincpro/web-composer";
+import type { RecordReading } from "../../react/useRecord.js";
+/**
+ * A record told to the workspace it is open in: its real name and whether it holds unsaved work.
+ *
+ * Context: the composer 1.0 lets a view say both (`setTitle`, `setDirty`). The name replaces the
+ * reference in the breadcrumb, the panel frame and ⌘K once the record is read — «Globex Bolivia»
+ * instead of «C-004». «Dirty» makes a crumb, a close or the browser's Back ask before throwing
+ * away what was typed. The record already knows both (its `display`, its `edit.dirty`), so the
+ * screen only has to connect them — one line.
+ *
+ *     const invoice = useRecord(invoices, resource.id);
+ *     useRecordInWorkspace(api, invoice);
+ */
+export declare function useRecordInWorkspace<T extends AnyRecord>(api: WorkspaceApi, record: RecordReading<T>): void;

package/dist/web/workspace/workspace.js

@@ -0,0 +1,29 @@
+"use client";
+import { textOf } from "../../core/present.js";
+import { useEffect } from "react";
+/**
+ * A record told to the workspace it is open in: its real name and whether it holds unsaved work.
+ *
+ * Context: the composer 1.0 lets a view say both (`setTitle`, `setDirty`). The name replaces the
+ * reference in the breadcrumb, the panel frame and ⌘K once the record is read — «Globex Bolivia»
+ * instead of «C-004». «Dirty» makes a crumb, a close or the browser's Back ask before throwing
+ * away what was typed. The record already knows both (its `display`, its `edit.dirty`), so the
+ * screen only has to connect them — one line.
+ *
+ *     const invoice = useRecord(invoices, resource.id);
+ *     useRecordInWorkspace(api, invoice);
+ */
+export function useRecordInWorkspace(api, record) {
+    const display = record.meta?.display || record.meta?.identity || "";
+    const title = record.status === "ready" && display !== ""
+        ? textOf(record.meta, display, record.record[display], record.locale)
+        : null;
+    const dirty = record.edit.dirty;
+    useEffect(() => {
+        api.setTitle(title);
+    }, [api, title]);
+    useEffect(() => {
+        api.setDirty(dirty);
+        return () => api.setDirty(false);
+    }, [api, dirty]);
+}

package/package.json

@@ -1,6 +1,88 @@
 {
   "name": "@sincpro/web-framework",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The web client of sincpro_framework: entities, lists and records bound to the metadata the server publishes, drawn with @sincpro/web-ui and arranged with @sincpro/web-composer.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "prettier": {
+    "printWidth": 94
+  },
+  "peerDependencies": {
+    "@sincpro/criteria": "^0.3.0",
+    "@sincpro/criteria-react": "^0.3.0",
+    "@sincpro/web-composer": "^1.0.0",
+    "@sincpro/web-ui": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@sincpro/criteria": "^0.3.0",
+    "@sincpro/criteria-react": "^0.3.0",
+    "@sincpro/web-composer": "^1.0.0",
+    "@sincpro/web-ui": "^0.2.0",
+    "@storybook/addon-a11y": "10.6.5",
+    "@storybook/addon-docs": "10.6.5",
+    "@storybook/addon-mcp": "10.6.5",
+    "@storybook/addon-vitest": "10.6.5",
+    "@storybook/react-vite": "10.6.5",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/react-table": "^9.3.1",
+    "@tanstack/react-virtual": "^3.14.24",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "@vitest/browser-playwright": "5.0.5",
+    "eslint": "^10.14.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
+    "playwright": "1.64.1",
+    "prettier": "^3.9.10",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "storybook": "10.6.5",
+    "tailwindcss": "4.3.3",
+    "tsc-alias": "^1.9.9",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.72.1",
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
+  },
+  "keywords": [
+    "sincpro",
+    "sincpro-framework",
+    "react",
+    "metadata",
+    "criteria",
+    "erp"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sincpro-SRL/sincpro_web_framework.git"
+  },
+  "author": "Gutierrez, Andres <andres.gutierrez@sincpro.com.bo>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=26"
+  },
+  "dependencies": {
+    "lucide-react": "^1.45.0"
+  }
+}