@entifix/react-controls 0.1.0-0

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.d.ts

@@ -0,0 +1,43 @@
+import type { EntityDetailGridProps } from './entity-detail-grid.types.js';
+/**
+ * The rows a record **owns**, edited in place.
+ *
+ * A `composition` — an order and its lines — where the rows have no life outside
+ * the master and go out in the same write
+ * ([ADR 0034](../../../../../../../docs/adr/0034-composition-metadata.md)). Not
+ * a `linkCollection`, which is association to records that exist on their own
+ * and save separately; that editor is still #26.
+ *
+ * ## Why this is not `EntityTable`
+ *
+ * `EntityTable` is a *server* listing: pages, RSQL filtering and sorting,
+ * column personalization, a selection model and a bulk bar. A detail grid has
+ * none of those and cannot have them — its rows are local, unsaved, and
+ * unqueryable by construction, since a collection member is never `filterable`.
+ * Sharing the organism would mean every one of those features growing a
+ * "detail" branch. It shares the `Table` **atoms** instead, which is the level
+ * the two actually have in common.
+ *
+ * ## Inline cells, and why Enter is free
+ *
+ * Each cell is a {@link FieldControl}, the same descriptor→input map the form
+ * uses, so a child's `enum` gets a select and its `date` a date input with no
+ * code here. `Tab` walks the row natively and crosses into the next; `Enter` on
+ * the last row appends and focuses the new row's first cell.
+ *
+ * That last binding is available only because `EntityForm` renders a `<Card>`
+ * with a `<button onClick>` Save rather than a `<form>` — inside a real form,
+ * `Enter` in a text input submits, and appending a row would fight the browser
+ * for it. Wrapping the form in a `<form>` element later would break this, which
+ * is the one thing worth knowing before doing it.
+ *
+ * ## Errors
+ *
+ * A cell carries `aria-invalid` and points at its own message; the grid carries
+ * **one** summary above it, which is the only `role="alert"` in the component.
+ * A live region per cell would announce the whole grid on every keystroke, and
+ * a message rendered only in the cell is unreachable when the failing row is
+ * scrolled out — which is the case #110 names.
+ */
+export declare function EntityDetailGrid({ descriptor, rows, onRowsChange, errors, editing, isLoading, skeleton, footer, className, }: EntityDetailGridProps): import("react").JSX.Element;
+//# sourceMappingURL=entity-detail-grid.d.ts.map

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-detail-grid.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/entity-detail-grid/entity-detail-grid.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAK3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,OAAe,EACf,SAAiB,EACjB,QAAe,EACf,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,+BAyMvB"}

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.js

@@ -0,0 +1,281 @@
+'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describeChildColumns, editableChildColumns, newRowKey, parseRowFieldPath, ROW_KEY, rowFieldPath } from '@entifix/core';
+import { useId, useMemo } from 'react';
+import { useLocalizedDescriptors, useT } from '../../../i18n/index.js';
+import { Button } from '../../atoms/button/index.js';
+import { FieldControl } from '../../atoms/field-control/index.js';
+import { Skeleton } from '../../atoms/skeleton/index.js';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableMessageRow, TableRow } from '../../atoms/table/index.js';
+import { Stack } from '../../molecules/stack/index.js';
+import { cn } from '../../utils/cn.js';
+/** Rows the placeholder stands in for. Enough to read as a grid, not a page. */ const SKELETON_ROW_COUNT = 3;
+/**
+ * The rows a record **owns**, edited in place.
+ *
+ * A `composition` — an order and its lines — where the rows have no life outside
+ * the master and go out in the same write
+ * ([ADR 0034](../../../../../../../docs/adr/0034-composition-metadata.md)). Not
+ * a `linkCollection`, which is association to records that exist on their own
+ * and save separately; that editor is still #26.
+ *
+ * ## Why this is not `EntityTable`
+ *
+ * `EntityTable` is a *server* listing: pages, RSQL filtering and sorting,
+ * column personalization, a selection model and a bulk bar. A detail grid has
+ * none of those and cannot have them — its rows are local, unsaved, and
+ * unqueryable by construction, since a collection member is never `filterable`.
+ * Sharing the organism would mean every one of those features growing a
+ * "detail" branch. It shares the `Table` **atoms** instead, which is the level
+ * the two actually have in common.
+ *
+ * ## Inline cells, and why Enter is free
+ *
+ * Each cell is a {@link FieldControl}, the same descriptor→input map the form
+ * uses, so a child's `enum` gets a select and its `date` a date input with no
+ * code here. `Tab` walks the row natively and crosses into the next; `Enter` on
+ * the last row appends and focuses the new row's first cell.
+ *
+ * That last binding is available only because `EntityForm` renders a `<Card>`
+ * with a `<button onClick>` Save rather than a `<form>` — inside a real form,
+ * `Enter` in a text input submits, and appending a row would fight the browser
+ * for it. Wrapping the form in a `<form>` element later would break this, which
+ * is the one thing worth knowing before doing it.
+ *
+ * ## Errors
+ *
+ * A cell carries `aria-invalid` and points at its own message; the grid carries
+ * **one** summary above it, which is the only `role="alert"` in the component.
+ * A live region per cell would announce the whole grid on every keystroke, and
+ * a message rendered only in the cell is unreachable when the failing row is
+ * scrolled out — which is the case #110 names.
+ */ export function EntityDetailGrid({ descriptor, rows, onRowsChange, errors, editing = false, isLoading = false, skeleton = true, footer, className }) {
+    var _columns_;
+    const t = useT();
+    const gridId = useId();
+    const described = useMemo(()=>descriptor.childType === undefined ? [] : editableChildColumns(describeChildColumns(descriptor.childType)), [
+        descriptor.childType
+    ]);
+    const columns = useLocalizedDescriptors(described);
+    // Only the messages that name *this* member. The form hands over its whole
+    // error map so a record with two owned collections needs no bookkeeping at
+    // the call site, and a grid that filtered nothing would show the other's.
+    const rowErrors = useMemo(()=>readRowErrors(descriptor.name, errors), [
+        descriptor.name,
+        errors
+    ]);
+    const showSkeleton = isLoading && skeleton !== false;
+    const customSkeleton = typeof skeleton === 'boolean' ? undefined : skeleton;
+    // One more than the columns: every row carries its remove control.
+    const columnCount = columns.length + (editing ? 1 : 0);
+    const setRow = (index, member, value)=>{
+        onRowsChange(rows.map((row, position)=>position === index ? _extends({}, row, {
+                [member]: value
+            }) : row));
+    };
+    const firstColumn = (_columns_ = columns[0]) == null ? void 0 : _columns_.name;
+    const appendRow = ()=>{
+        onRowsChange([
+            ...rows,
+            seedEmptyRow(columns)
+        ]);
+        focusCell(gridId, rows.length, firstColumn);
+    };
+    const removeRow = (index)=>{
+        onRowsChange(rows.filter((_row, position)=>position !== index));
+        // Focus the row that slid into this position, or the one above it when the
+        // removed row was last — never nothing, which drops the user to the page.
+        focusCell(gridId, Math.min(index, rows.length - 2), firstColumn);
+    };
+    /**
+   * `Enter` anywhere in the **last row** appends the next one.
+   *
+   * Bound to the row rather than to its final cell, which is what it looked
+   * like it should be: the last *column* is whatever the child declared last,
+   * and a read-only member there renders a disabled input that never receives a
+   * key at all — so the binding would exist and be unreachable, on exactly the
+   * entities that have a computed column. The row is the unit the user is
+   * finishing anyway.
+   *
+   * Only from a text input: a `<select>` opens on Enter and a checkbox toggles
+   * on Space, so taking the key from those would break a control's own
+   * behaviour to add a row the user did not ask for. A read-only column needs
+   * no test of its own — its input is `disabled`, so it never takes focus and
+   * never raises a key here at all.
+   */ const onLastRowKeyDown = (event)=>{
+        if (event.key !== 'Enter') return;
+        if (!(event.target instanceof HTMLInputElement)) return;
+        event.preventDefault();
+        appendRow();
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: "2xs",
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between gap-s",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-step-sm font-medium text-content-muted",
+                        children: descriptor.label
+                    }),
+                    editing && /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "secondary",
+                        size: "sm",
+                        onClick: appendRow,
+                        disabled: isLoading,
+                        children: t('detail.addRow')
+                    })
+                ]
+            }),
+            editing && rowErrors.size > 0 && /*#__PURE__*/ _jsx("div", {
+                role: "alert",
+                className: "text-step-sm text-danger",
+                children: t('detail.errorSummary', {
+                    count: rowErrors.size
+                })
+            }),
+            /*#__PURE__*/ _jsxs(Table, {
+                "aria-label": descriptor.label,
+                "aria-busy": isLoading || undefined,
+                "aria-rowcount": rows.length,
+                children: [
+                    /*#__PURE__*/ _jsx(TableHead, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                columns.map((column)=>/*#__PURE__*/ _jsx(TableHeaderCell, {
+                                        id: `${gridId}-${column.name}`,
+                                        children: column.label
+                                    }, column.name)),
+                                editing && /*#__PURE__*/ _jsx(TableHeaderCell, {
+                                    align: "end",
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        className: "sr-only",
+                                        children: t('detail.rowActions')
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(TableBody, {
+                        children: [
+                            showSkeleton ? customSkeleton != null ? customSkeleton : /*#__PURE__*/ _jsx(SkeletonRows, {
+                                columns: columns.length,
+                                extra: editing ? 1 : 0
+                            }) : rows.map((row, index)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                    onKeyDown: editing && index === rows.length - 1 ? onLastRowKeyDown : undefined,
+                                    children: [
+                                        columns.map((column)=>{
+                                            var _row_column_name, _row_column_name1;
+                                            const error = rowErrors.get(rowFieldPath(descriptor.name, index, column.name));
+                                            const cellId = `${gridId}-${index}-${column.name}`;
+                                            return /*#__PURE__*/ _jsxs(TableCell, {
+                                                children: [
+                                                    editing ? /*#__PURE__*/ _jsx(FieldControl, {
+                                                        descriptor: column,
+                                                        value: (_row_column_name = row[column.name]) != null ? _row_column_name : '',
+                                                        id: cellId,
+                                                        "aria-labelledby": `${gridId}-${column.name}`,
+                                                        "aria-invalid": error !== undefined || undefined,
+                                                        "aria-describedby": error === undefined ? undefined : `${cellId}-error`,
+                                                        onChange: (next)=>setRow(index, column.name, next)
+                                                    }) : /*#__PURE__*/ _jsx("span", {
+                                                        children: (_row_column_name1 = row[column.name]) != null ? _row_column_name1 : ''
+                                                    }),
+                                                    editing && error !== undefined && /*#__PURE__*/ _jsx("span", {
+                                                        id: `${cellId}-error`,
+                                                        className: "mt-3xs block text-step-sm text-danger",
+                                                        children: error
+                                                    })
+                                                ]
+                                            }, column.name);
+                                        }),
+                                        editing && /*#__PURE__*/ _jsx(TableCell, {
+                                            align: "end",
+                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                type: "button",
+                                                variant: "ghost",
+                                                size: "sm",
+                                                onClick: ()=>removeRow(index),
+                                                children: t('detail.removeRow', {
+                                                    row: index + 1
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }, row[ROW_KEY])),
+                            !showSkeleton && rows.length === 0 && /*#__PURE__*/ _jsx(TableMessageRow, {
+                                colSpan: Math.max(columnCount, 1),
+                                children: t('detail.empty')
+                            })
+                        ]
+                    })
+                ]
+            }),
+            footer !== undefined && !showSkeleton && /*#__PURE__*/ _jsx("div", {
+                className: cn('flex justify-end text-step-sm text-content'),
+                children: footer(rows)
+            })
+        ]
+    });
+}
+/** The placeholder, shaped like the grid it stands in for. */ function SkeletonRows({ columns, extra }) {
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: Array.from({
+            length: SKELETON_ROW_COUNT
+        }, (_row, index)=>/*#__PURE__*/ _jsx(TableRow, {
+                children: Array.from({
+                    length: columns + extra
+                }, (_cell, cellIndex)=>/*#__PURE__*/ _jsx(TableCell, {
+                        children: /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-8 w-full"
+                        })
+                    }, cellIndex))
+            }, index))
+    });
+}
+/**
+ * A blank row, seeded with every column the grid edits.
+ *
+ * Every member is present and empty rather than absent, for the reason a form's
+ * seed carries every key: a control handed `undefined` flips from controlled to
+ * uncontrolled the moment the user types into it.
+ */ function seedEmptyRow(columns) {
+    const row = {
+        [ROW_KEY]: newRowKey()
+    };
+    for (const column of columns)row[column.name] = '';
+    return row;
+}
+/**
+ * Moves focus into a cell after the list changed.
+ *
+ * By element id rather than through a ref into the `<tbody>`, because the row
+ * being focused does not exist yet when this is called — it is the row the
+ * caller has just asked React to render. Deferring to a microtask lets that
+ * render commit first; `getElementById` then finds the input the same way the
+ * cell's own `aria-describedby` does.
+ *
+ * A row index that names nothing simply focuses nothing, which is the right
+ * outcome for removing the only row: there is no cell to land in, and stealing
+ * focus somewhere arbitrary is worse than leaving it where the user put it.
+ */ function focusCell(gridId, index, column) {
+    if (column === undefined || index < 0) return;
+    queueMicrotask(()=>{
+        var _document_getElementById;
+        (_document_getElementById = document.getElementById(`${gridId}-${index}-${column}`)) == null ? void 0 : _document_getElementById.focus();
+    });
+}
+/** The messages naming a row of `member`, keyed by their full path. */ function readRowErrors(member, errors) {
+    const found = new Map();
+    if (errors === undefined) return found;
+    for (const [path, message] of Object.entries(errors)){
+        var _parseRowFieldPath;
+        if (((_parseRowFieldPath = parseRowFieldPath(path)) == null ? void 0 : _parseRowFieldPath.member) === member) found.set(path, message);
+    }
+    return found;
+}
+
+//# sourceMappingURL=entity-detail-grid.js.map

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/organisms/entity-detail-grid/entity-detail-grid.tsx"],"sourcesContent":["'use client';\n\nimport {\n  describeChildColumns,\n  editableChildColumns,\n  type EntityFieldDescriptor,\n  type EntityRowDraft,\n  newRowKey,\n  parseRowFieldPath,\n  ROW_KEY,\n  rowFieldPath,\n} from '@entifix/core';\nimport { type KeyboardEvent, useId, useMemo } from 'react';\n\nimport { useLocalizedDescriptors, useT } from '../../../i18n/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { FieldControl } from '../../atoms/field-control/index.js';\nimport { Skeleton } from '../../atoms/skeleton/index.js';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableMessageRow,\n  TableRow,\n} from '../../atoms/table/index.js';\nimport { Stack } from '../../molecules/stack/index.js';\nimport { cn } from '../../utils/cn.js';\nimport type { EntityDetailGridProps } from './entity-detail-grid.types.js';\n\n/** Rows the placeholder stands in for. Enough to read as a grid, not a page. */\nconst SKELETON_ROW_COUNT = 3;\n\n/**\n * The rows a record **owns**, edited in place.\n *\n * A `composition` — an order and its lines — where the rows have no life outside\n * the master and go out in the same write\n * ([ADR 0034](../../../../../../../docs/adr/0034-composition-metadata.md)). Not\n * a `linkCollection`, which is association to records that exist on their own\n * and save separately; that editor is still #26.\n *\n * ## Why this is not `EntityTable`\n *\n * `EntityTable` is a *server* listing: pages, RSQL filtering and sorting,\n * column personalization, a selection model and a bulk bar. A detail grid has\n * none of those and cannot have them — its rows are local, unsaved, and\n * unqueryable by construction, since a collection member is never `filterable`.\n * Sharing the organism would mean every one of those features growing a\n * \"detail\" branch. It shares the `Table` **atoms** instead, which is the level\n * the two actually have in common.\n *\n * ## Inline cells, and why Enter is free\n *\n * Each cell is a {@link FieldControl}, the same descriptor→input map the form\n * uses, so a child's `enum` gets a select and its `date` a date input with no\n * code here. `Tab` walks the row natively and crosses into the next; `Enter` on\n * the last row appends and focuses the new row's first cell.\n *\n * That last binding is available only because `EntityForm` renders a `<Card>`\n * with a `<button onClick>` Save rather than a `<form>` — inside a real form,\n * `Enter` in a text input submits, and appending a row would fight the browser\n * for it. Wrapping the form in a `<form>` element later would break this, which\n * is the one thing worth knowing before doing it.\n *\n * ## Errors\n *\n * A cell carries `aria-invalid` and points at its own message; the grid carries\n * **one** summary above it, which is the only `role=\"alert\"` in the component.\n * A live region per cell would announce the whole grid on every keystroke, and\n * a message rendered only in the cell is unreachable when the failing row is\n * scrolled out — which is the case #110 names.\n */\nexport function EntityDetailGrid({\n  descriptor,\n  rows,\n  onRowsChange,\n  errors,\n  editing = false,\n  isLoading = false,\n  skeleton = true,\n  footer,\n  className,\n}: EntityDetailGridProps) {\n  const t = useT();\n  const gridId = useId();\n\n  const described = useMemo(\n    () =>\n      descriptor.childType === undefined\n        ? []\n        : editableChildColumns(describeChildColumns(descriptor.childType)),\n    [descriptor.childType],\n  );\n  const columns = useLocalizedDescriptors(described);\n\n  // Only the messages that name *this* member. The form hands over its whole\n  // error map so a record with two owned collections needs no bookkeeping at\n  // the call site, and a grid that filtered nothing would show the other's.\n  const rowErrors = useMemo(\n    () => readRowErrors(descriptor.name, errors),\n    [descriptor.name, errors],\n  );\n\n  const showSkeleton = isLoading && skeleton !== false;\n  const customSkeleton = typeof skeleton === 'boolean' ? undefined : skeleton;\n  // One more than the columns: every row carries its remove control.\n  const columnCount = columns.length + (editing ? 1 : 0);\n\n  const setRow = (index: number, member: string, value: string) => {\n    onRowsChange(\n      rows.map((row, position) =>\n        position === index ? { ...row, [member]: value } : row,\n      ),\n    );\n  };\n\n  const firstColumn = columns[0]?.name;\n\n  const appendRow = () => {\n    onRowsChange([...rows, seedEmptyRow(columns)]);\n    focusCell(gridId, rows.length, firstColumn);\n  };\n\n  const removeRow = (index: number) => {\n    onRowsChange(rows.filter((_row, position) => position !== index));\n    // Focus the row that slid into this position, or the one above it when the\n    // removed row was last — never nothing, which drops the user to the page.\n    focusCell(gridId, Math.min(index, rows.length - 2), firstColumn);\n  };\n\n  /**\n   * `Enter` anywhere in the **last row** appends the next one.\n   *\n   * Bound to the row rather than to its final cell, which is what it looked\n   * like it should be: the last *column* is whatever the child declared last,\n   * and a read-only member there renders a disabled input that never receives a\n   * key at all — so the binding would exist and be unreachable, on exactly the\n   * entities that have a computed column. The row is the unit the user is\n   * finishing anyway.\n   *\n   * Only from a text input: a `<select>` opens on Enter and a checkbox toggles\n   * on Space, so taking the key from those would break a control's own\n   * behaviour to add a row the user did not ask for. A read-only column needs\n   * no test of its own — its input is `disabled`, so it never takes focus and\n   * never raises a key here at all.\n   */\n  const onLastRowKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key !== 'Enter') return;\n    if (!(event.target instanceof HTMLInputElement)) return;\n    event.preventDefault();\n    appendRow();\n  };\n\n  return (\n    <Stack gap=\"2xs\" className={className}>\n      <div className=\"flex items-center justify-between gap-s\">\n        <span className=\"text-step-sm font-medium text-content-muted\">\n          {descriptor.label}\n        </span>\n        {editing && (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"sm\"\n            onClick={appendRow}\n            disabled={isLoading}\n          >\n            {t('detail.addRow')}\n          </Button>\n        )}\n      </div>\n\n      {editing && rowErrors.size > 0 && (\n        <div role=\"alert\" className=\"text-step-sm text-danger\">\n          {t('detail.errorSummary', { count: rowErrors.size })}\n        </div>\n      )}\n\n      <Table\n        aria-label={descriptor.label}\n        aria-busy={isLoading || undefined}\n        aria-rowcount={rows.length}\n      >\n        <TableHead>\n          <TableRow>\n            {columns.map(column => (\n              <TableHeaderCell\n                key={column.name}\n                id={`${gridId}-${column.name}`}\n              >\n                {column.label}\n              </TableHeaderCell>\n            ))}\n            {editing && (\n              <TableHeaderCell align=\"end\">\n                <span className=\"sr-only\">{t('detail.rowActions')}</span>\n              </TableHeaderCell>\n            )}\n          </TableRow>\n        </TableHead>\n\n        <TableBody>\n          {showSkeleton\n            ? (customSkeleton ?? (\n                <SkeletonRows\n                  columns={columns.length}\n                  extra={editing ? 1 : 0}\n                />\n              ))\n            : rows.map((row, index) => (\n                <TableRow\n                  key={row[ROW_KEY]}\n                  onKeyDown={\n                    editing && index === rows.length - 1\n                      ? onLastRowKeyDown\n                      : undefined\n                  }\n                >\n                  {columns.map(column => {\n                    const error = rowErrors.get(\n                      rowFieldPath(descriptor.name, index, column.name),\n                    );\n                    const cellId = `${gridId}-${index}-${column.name}`;\n                    return (\n                      <TableCell key={column.name}>\n                        {editing ? (\n                          <FieldControl\n                            descriptor={column}\n                            value={row[column.name] ?? ''}\n                            id={cellId}\n                            aria-labelledby={`${gridId}-${column.name}`}\n                            aria-invalid={error !== undefined || undefined}\n                            aria-describedby={\n                              error === undefined\n                                ? undefined\n                                : `${cellId}-error`\n                            }\n                            onChange={next => setRow(index, column.name, next)}\n                          />\n                        ) : (\n                          <span>{row[column.name] ?? ''}</span>\n                        )}\n                        {editing && error !== undefined && (\n                          <span\n                            id={`${cellId}-error`}\n                            className=\"mt-3xs block text-step-sm text-danger\"\n                          >\n                            {error}\n                          </span>\n                        )}\n                      </TableCell>\n                    );\n                  })}\n                  {editing && (\n                    <TableCell align=\"end\">\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={() => removeRow(index)}\n                      >\n                        {t('detail.removeRow', { row: index + 1 })}\n                      </Button>\n                    </TableCell>\n                  )}\n                </TableRow>\n              ))}\n\n          {!showSkeleton && rows.length === 0 && (\n            <TableMessageRow colSpan={Math.max(columnCount, 1)}>\n              {t('detail.empty')}\n            </TableMessageRow>\n          )}\n        </TableBody>\n      </Table>\n\n      {footer !== undefined && !showSkeleton && (\n        <div className={cn('flex justify-end text-step-sm text-content')}>\n          {footer(rows)}\n        </div>\n      )}\n    </Stack>\n  );\n}\n\n/** The placeholder, shaped like the grid it stands in for. */\nfunction SkeletonRows({ columns, extra }: { columns: number; extra: number }) {\n  return (\n    <>\n      {Array.from({ length: SKELETON_ROW_COUNT }, (_row, index) => (\n        <TableRow key={index}>\n          {Array.from({ length: columns + extra }, (_cell, cellIndex) => (\n            <TableCell key={cellIndex}>\n              <Skeleton className=\"h-8 w-full\" />\n            </TableCell>\n          ))}\n        </TableRow>\n      ))}\n    </>\n  );\n}\n\n/**\n * A blank row, seeded with every column the grid edits.\n *\n * Every member is present and empty rather than absent, for the reason a form's\n * seed carries every key: a control handed `undefined` flips from controlled to\n * uncontrolled the moment the user types into it.\n */\nfunction seedEmptyRow(\n  columns: readonly EntityFieldDescriptor[],\n): EntityRowDraft {\n  const row: EntityRowDraft = { [ROW_KEY]: newRowKey() };\n  for (const column of columns) row[column.name] = '';\n  return row;\n}\n\n/**\n * Moves focus into a cell after the list changed.\n *\n * By element id rather than through a ref into the `<tbody>`, because the row\n * being focused does not exist yet when this is called — it is the row the\n * caller has just asked React to render. Deferring to a microtask lets that\n * render commit first; `getElementById` then finds the input the same way the\n * cell's own `aria-describedby` does.\n *\n * A row index that names nothing simply focuses nothing, which is the right\n * outcome for removing the only row: there is no cell to land in, and stealing\n * focus somewhere arbitrary is worse than leaving it where the user put it.\n */\nfunction focusCell(gridId: string, index: number, column?: string): void {\n  if (column === undefined || index < 0) return;\n\n  queueMicrotask(() => {\n    document.getElementById(`${gridId}-${index}-${column}`)?.focus();\n  });\n}\n\n/** The messages naming a row of `member`, keyed by their full path. */\nfunction readRowErrors(\n  member: string,\n  errors: Record<string, string> | undefined,\n): Map<string, string> {\n  const found = new Map<string, string>();\n  if (errors === undefined) return found;\n\n  for (const [path, message] of Object.entries(errors)) {\n    if (parseRowFieldPath(path)?.member === member) found.set(path, message);\n  }\n  return found;\n}\n"],"names":["describeChildColumns","editableChildColumns","newRowKey","parseRowFieldPath","ROW_KEY","rowFieldPath","useId","useMemo","useLocalizedDescriptors","useT","Button","FieldControl","Skeleton","Table","TableBody","TableCell","TableHead","TableHeaderCell","TableMessageRow","TableRow","Stack","cn","SKELETON_ROW_COUNT","EntityDetailGrid","descriptor","rows","onRowsChange","errors","editing","isLoading","skeleton","footer","className","columns","t","gridId","described","childType","undefined","rowErrors","readRowErrors","name","showSkeleton","customSkeleton","columnCount","length","setRow","index","member","value","map","row","position","firstColumn","appendRow","seedEmptyRow","focusCell","removeRow","filter","_row","Math","min","onLastRowKeyDown","event","key","target","HTMLInputElement","preventDefault","gap","div","span","label","type","variant","size","onClick","disabled","role","count","aria-label","aria-busy","aria-rowcount","column","id","align","SkeletonRows","extra","onKeyDown","error","get","cellId","aria-labelledby","aria-invalid","aria-describedby","onChange","next","colSpan","max","Array","from","_cell","cellIndex","queueMicrotask","document","getElementById","focus","found","Map","path","message","Object","entries","set"],"mappings":"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"}

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.types.d.ts

@@ -0,0 +1,49 @@
+import type { EntityFieldDescriptor, EntityRowDraft } from '@entifix/core';
+import type { ReactNode } from 'react';
+export interface EntityDetailGridProps {
+    /**
+     * The owning member's descriptor. Its `childType` supplies the columns and
+     * its `label` names the grid, so an entity that declares an owned collection
+     * needs no per-entity component.
+     */
+    descriptor: EntityFieldDescriptor;
+    /** The rows, as the master's draft holds them. */
+    rows: readonly EntityRowDraft[];
+    /**
+     * The whole list changed. One callback rather than add/remove/change,
+     * because the master's draft holds the rows as a single `JsonValue` and the
+     * grid is controlled from above exactly as `EntityForm` is — the form owns
+     * the draft, the grid renders it.
+     */
+    onRowsChange: (rows: readonly EntityRowDraft[]) => void;
+    /**
+     * Per-cell messages, keyed by `rowFieldPath` — `items[2].quantity`.
+     *
+     * The same map `EntityForm` is handed, unfiltered: the grid picks out the
+     * keys that name its own member rather than the caller splitting them, so a
+     * form with two owned collections needs no bookkeeping.
+     */
+    errors?: Record<string, string>;
+    /** Read mode shows values; edit mode shows inputs. */
+    editing?: boolean;
+    isLoading?: boolean;
+    /**
+     * What holds the grid's shape while the record is in flight.
+     *
+     * `true` (the default) renders the built-in placeholder, derived from the
+     * grid's own resolved column count so the swap to real rows shifts nothing. A
+     * node replaces that default; `false` renders no placeholder at all.
+     */
+    skeleton?: boolean | ReactNode;
+    /**
+     * A derived row under the grid — an order's total, a count.
+     *
+     * A **slot**, because an aggregate cannot come from metadata: summing
+     * `OrderItem.amount` is wrong (minor units, and several currencies once a
+     * basket spans vendors) and summing `quantity` across offerings means
+     * nothing. The control renders what it is given and invents no arithmetic.
+     */
+    footer?: (rows: readonly EntityRowDraft[]) => ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=entity-detail-grid.types.d.ts.map

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-detail-grid.types.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/entity-detail-grid/entity-detail-grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,UAAU,EAAE,qBAAqB,CAAC;IAClC,kDAAkD;IAClD,IAAI,EAAE,SAAS,cAAc,EAAE,CAAC;IAChC;;;;;OAKG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,cAAc,EAAE,KAAK,IAAI,CAAC;IAExD;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEhC,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE/B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,cAAc,EAAE,KAAK,SAAS,CAAC;IAExD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=entity-detail-grid.types.js.map

package/dist/ui/organisms/entity-detail-grid/entity-detail-grid.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/organisms/entity-detail-grid/entity-detail-grid.types.ts"],"sourcesContent":["import type { EntityFieldDescriptor, EntityRowDraft } from '@entifix/core';\nimport type { ReactNode } from 'react';\n\nexport interface EntityDetailGridProps {\n  /**\n   * The owning member's descriptor. Its `childType` supplies the columns and\n   * its `label` names the grid, so an entity that declares an owned collection\n   * needs no per-entity component.\n   */\n  descriptor: EntityFieldDescriptor;\n  /** The rows, as the master's draft holds them. */\n  rows: readonly EntityRowDraft[];\n  /**\n   * The whole list changed. One callback rather than add/remove/change,\n   * because the master's draft holds the rows as a single `JsonValue` and the\n   * grid is controlled from above exactly as `EntityForm` is — the form owns\n   * the draft, the grid renders it.\n   */\n  onRowsChange: (rows: readonly EntityRowDraft[]) => void;\n\n  /**\n   * Per-cell messages, keyed by `rowFieldPath` — `items[2].quantity`.\n   *\n   * The same map `EntityForm` is handed, unfiltered: the grid picks out the\n   * keys that name its own member rather than the caller splitting them, so a\n   * form with two owned collections needs no bookkeeping.\n   */\n  errors?: Record<string, string>;\n\n  /** Read mode shows values; edit mode shows inputs. */\n  editing?: boolean;\n\n  isLoading?: boolean;\n  /**\n   * What holds the grid's shape while the record is in flight.\n   *\n   * `true` (the default) renders the built-in placeholder, derived from the\n   * grid's own resolved column count so the swap to real rows shifts nothing. A\n   * node replaces that default; `false` renders no placeholder at all.\n   */\n  skeleton?: boolean | ReactNode;\n\n  /**\n   * A derived row under the grid — an order's total, a count.\n   *\n   * A **slot**, because an aggregate cannot come from metadata: summing\n   * `OrderItem.amount` is wrong (minor units, and several currencies once a\n   * basket spans vendors) and summing `quantity` across offerings means\n   * nothing. The control renders what it is given and invents no arithmetic.\n   */\n  footer?: (rows: readonly EntityRowDraft[]) => ReactNode;\n\n  className?: string;\n}\n"],"names":[],"mappings":"AAGA,WAkDC"}

package/dist/ui/organisms/entity-detail-grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from './entity-detail-grid.js';
+export * from './entity-detail-grid.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/organisms/entity-detail-grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/entity-detail-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC"}

package/dist/ui/organisms/entity-detail-grid/index.js

@@ -0,0 +1,4 @@
+export * from './entity-detail-grid.js';
+export * from './entity-detail-grid.types.js';
+
+//# sourceMappingURL=index.js.map

package/dist/ui/organisms/entity-detail-grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/organisms/entity-detail-grid/index.ts"],"sourcesContent":["export * from './entity-detail-grid.js';\nexport * from './entity-detail-grid.types.js';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,gCAAgC"}

package/dist/ui/organisms/entity-form/entity-form-slots.d.ts

@@ -0,0 +1,53 @@
+import type { Entity } from '@entifix/core';
+import { type ReactNode } from 'react';
+import type { EntityFieldRenderContext } from './entity-form.types.js';
+/**
+ * The declarative customization API, mirroring `entity-table`'s slots: an
+ * `<EntityField>` is configuration expressed as JSX. It never renders itself —
+ * `EntityForm` reads its props and decides where the override applies — so a
+ * simple form stays a single self-closing tag while a complex one overrides one
+ * field's control (e.g. an entity-link picker) without an options object.
+ */
+export interface EntityFieldSlotProps<TEntity extends Entity = Entity> {
+    /** Accessor name. An unknown name adds a computed, entity-less field. */
+    field: string;
+    label?: string;
+    order?: number;
+    /** Drop this field from the form entirely. */
+    hidden?: boolean;
+    /** Custom edit control. */
+    render?: (context: EntityFieldRenderContext) => ReactNode;
+    /** Custom read display. */
+    readRender?: (entity: TEntity | undefined) => ReactNode;
+}
+/** Overrides one metadata-derived field, or adds a computed one. */
+export declare function EntityField<TEntity extends Entity = Entity>(_props: EntityFieldSlotProps<TEntity>): ReactNode;
+export interface EntityActionsSlotProps {
+    /** Where the nodes go: beside the title, or beside Save. */
+    placement?: 'header' | 'footer';
+    children?: ReactNode;
+}
+/**
+ * The genuinely bespoke action, so a page never has to render outside the card.
+ *
+ * Everything metadata can describe should be a `@useCase()` — that is what
+ * makes it permission-filtered, translatable and reachable from the command
+ * palette. This slot is for what metadata cannot: an action wired to something
+ * only this page knows, a link into another product, a one-off. It renders
+ * *after* the declared verbs so the derived actions keep a stable position.
+ */
+export declare function EntityActions(_props: EntityActionsSlotProps): ReactNode;
+export interface EntityFormSlots<TEntity extends Entity> {
+    fields: Array<EntityFieldSlotProps<TEntity>>;
+    /** Bespoke actions, by placement. */
+    headerActions: ReactNode[];
+    footerActions: ReactNode[];
+    /** Children that matched no slot — rendered below the fields untouched. */
+    rest: ReactNode[];
+}
+/**
+ * Sorts children into slots by component identity (survives minification and
+ * cannot collide with an unrelated component of the same name).
+ */
+export declare function readEntityFormFields<TEntity extends Entity>(children: ReactNode): EntityFormSlots<TEntity>;
+//# sourceMappingURL=entity-form-slots.d.ts.map

package/dist/ui/organisms/entity-form/entity-form-slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-form-slots.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/entity-form/entity-form-slots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM;IACnE,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAC1D,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,KAAK,SAAS,CAAC;CACzD;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM,EACzD,MAAM,EAAE,oBAAoB,CAAC,OAAO,CAAC,GACpC,SAAS,CAEX;AAED,MAAM,WAAW,sBAAsB;IACrC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,sBAAsB,GAAG,SAAS,CAEvE;AAED,MAAM,WAAW,eAAe,CAAC,OAAO,SAAS,MAAM;IACrD,MAAM,EAAE,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,qCAAqC;IACrC,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,2EAA2E;IAC3E,IAAI,EAAE,SAAS,EAAE,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,SAAS,MAAM,EACzD,QAAQ,EAAE,SAAS,GAClB,eAAe,CAAC,OAAO,CAAC,CA6B1B"}

package/dist/ui/organisms/entity-form/entity-form-slots.js

@@ -0,0 +1,44 @@
+import { Children, isValidElement } from 'react';
+/** Overrides one metadata-derived field, or adds a computed one. */ export function EntityField(_props) {
+    return null;
+}
+/**
+ * The genuinely bespoke action, so a page never has to render outside the card.
+ *
+ * Everything metadata can describe should be a `@useCase()` — that is what
+ * makes it permission-filtered, translatable and reachable from the command
+ * palette. This slot is for what metadata cannot: an action wired to something
+ * only this page knows, a link into another product, a one-off. It renders
+ * *after* the declared verbs so the derived actions keep a stable position.
+ */ export function EntityActions(_props) {
+    return null;
+}
+/**
+ * Sorts children into slots by component identity (survives minification and
+ * cannot collide with an unrelated component of the same name).
+ */ export function readEntityFormFields(children) {
+    const slots = {
+        fields: [],
+        headerActions: [],
+        footerActions: [],
+        rest: []
+    };
+    Children.toArray(children).forEach((child)=>{
+        if (!/*#__PURE__*/ isValidElement(child)) {
+            slots.rest.push(child);
+            return;
+        }
+        if (child.type === EntityField) {
+            slots.fields.push(child.props);
+        } else if (child.type === EntityActions) {
+            const props = child.props;
+            const target = props.placement === 'header' ? slots.headerActions : slots.footerActions;
+            target.push(props.children);
+        } else {
+            slots.rest.push(child);
+        }
+    });
+    return slots;
+}
+
+//# sourceMappingURL=entity-form-slots.js.map

package/dist/ui/organisms/entity-form/entity-form-slots.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/organisms/entity-form/entity-form-slots.tsx"],"sourcesContent":["import type { Entity } from '@entifix/core';\nimport { Children, isValidElement, type ReactNode } from 'react';\n\nimport type { EntityFieldRenderContext } from './entity-form.types.js';\n\n/**\n * The declarative customization API, mirroring `entity-table`'s slots: an\n * `<EntityField>` is configuration expressed as JSX. It never renders itself —\n * `EntityForm` reads its props and decides where the override applies — so a\n * simple form stays a single self-closing tag while a complex one overrides one\n * field's control (e.g. an entity-link picker) without an options object.\n */\nexport interface EntityFieldSlotProps<TEntity extends Entity = Entity> {\n  /** Accessor name. An unknown name adds a computed, entity-less field. */\n  field: string;\n  label?: string;\n  order?: number;\n  /** Drop this field from the form entirely. */\n  hidden?: boolean;\n  /** Custom edit control. */\n  render?: (context: EntityFieldRenderContext) => ReactNode;\n  /** Custom read display. */\n  readRender?: (entity: TEntity | undefined) => ReactNode;\n}\n\n/** Overrides one metadata-derived field, or adds a computed one. */\nexport function EntityField<TEntity extends Entity = Entity>(\n  _props: EntityFieldSlotProps<TEntity>,\n): ReactNode {\n  return null;\n}\n\nexport interface EntityActionsSlotProps {\n  /** Where the nodes go: beside the title, or beside Save. */\n  placement?: 'header' | 'footer';\n  children?: ReactNode;\n}\n\n/**\n * The genuinely bespoke action, so a page never has to render outside the card.\n *\n * Everything metadata can describe should be a `@useCase()` — that is what\n * makes it permission-filtered, translatable and reachable from the command\n * palette. This slot is for what metadata cannot: an action wired to something\n * only this page knows, a link into another product, a one-off. It renders\n * *after* the declared verbs so the derived actions keep a stable position.\n */\nexport function EntityActions(_props: EntityActionsSlotProps): ReactNode {\n  return null;\n}\n\nexport interface EntityFormSlots<TEntity extends Entity> {\n  fields: Array<EntityFieldSlotProps<TEntity>>;\n  /** Bespoke actions, by placement. */\n  headerActions: ReactNode[];\n  footerActions: ReactNode[];\n  /** Children that matched no slot — rendered below the fields untouched. */\n  rest: ReactNode[];\n}\n\n/**\n * Sorts children into slots by component identity (survives minification and\n * cannot collide with an unrelated component of the same name).\n */\nexport function readEntityFormFields<TEntity extends Entity>(\n  children: ReactNode,\n): EntityFormSlots<TEntity> {\n  const slots: EntityFormSlots<TEntity> = {\n    fields: [],\n    headerActions: [],\n    footerActions: [],\n    rest: [],\n  };\n\n  Children.toArray(children).forEach(child => {\n    if (!isValidElement(child)) {\n      slots.rest.push(child);\n      return;\n    }\n\n    if (child.type === EntityField) {\n      slots.fields.push(child.props as EntityFieldSlotProps<TEntity>);\n    } else if (child.type === EntityActions) {\n      const props = child.props as EntityActionsSlotProps;\n      const target =\n        props.placement === 'header'\n          ? slots.headerActions\n          : slots.footerActions;\n      target.push(props.children);\n    } else {\n      slots.rest.push(child);\n    }\n  });\n\n  return slots;\n}\n"],"names":["Children","isValidElement","EntityField","_props","EntityActions","readEntityFormFields","children","slots","fields","headerActions","footerActions","rest","toArray","forEach","child","push","type","props","target","placement"],"mappings":"AACA,SAASA,QAAQ,EAAEC,cAAc,QAAwB,QAAQ;AAwBjE,kEAAkE,GAClE,OAAO,SAASC,YACdC,MAAqC;IAErC,OAAO;AACT;AAQA;;;;;;;;CAQC,GACD,OAAO,SAASC,cAAcD,MAA8B;IAC1D,OAAO;AACT;AAWA;;;CAGC,GACD,OAAO,SAASE,qBACdC,QAAmB;IAEnB,MAAMC,QAAkC;QACtCC,QAAQ,EAAE;QACVC,eAAe,EAAE;QACjBC,eAAe,EAAE;QACjBC,MAAM,EAAE;IACV;IAEAX,SAASY,OAAO,CAACN,UAAUO,OAAO,CAACC,CAAAA;QACjC,IAAI,eAACb,eAAea,QAAQ;YAC1BP,MAAMI,IAAI,CAACI,IAAI,CAACD;YAChB;QACF;QAEA,IAAIA,MAAME,IAAI,KAAKd,aAAa;YAC9BK,MAAMC,MAAM,CAACO,IAAI,CAACD,MAAMG,KAAK;QAC/B,OAAO,IAAIH,MAAME,IAAI,KAAKZ,eAAe;YACvC,MAAMa,QAAQH,MAAMG,KAAK;YACzB,MAAMC,SACJD,MAAME,SAAS,KAAK,WAChBZ,MAAME,aAAa,GACnBF,MAAMG,aAAa;YACzBQ,OAAOH,IAAI,CAACE,MAAMX,QAAQ;QAC5B,OAAO;YACLC,MAAMI,IAAI,CAACI,IAAI,CAACD;QAClB;IACF;IAEA,OAAOP;AACT"}

package/dist/ui/organisms/entity-form/entity-form.d.ts

@@ -0,0 +1,4 @@
+import { type Entity } from '@entifix/core';
+import type { EntityFormProps } from './entity-form.types.js';
+export declare function EntityForm<TEntity extends Entity>({ entityConstructor, entity, values, onFieldChange, linkSources, onLinkChange, mode: modeProp, defaultMode, onModeChange, errors, formError, onSubmit, onDelete, embedded, isLoading, skeleton, isSaving, isDeleting, error, backHref, title, metadata, isMetadataLoading, onUseCase, onClone, children, }: EntityFormProps<TEntity>): import("react").JSX.Element;
+//# sourceMappingURL=entity-form.d.ts.map

package/dist/ui/organisms/entity-form/entity-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-form.d.ts","sourceRoot":"","sources":["../../../../src/ui/organisms/entity-form/entity-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,MAAM,EASZ,MAAM,eAAe,CAAC;AAsBvB,OAAO,KAAK,EAGV,eAAe,EAChB,MAAM,wBAAwB,CAAC;AA6DhC,wBAAgB,UAAU,CAAC,OAAO,SAAS,MAAM,EAAE,EACjD,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,WAAW,EACX,YAAY,EACZ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,QAAe,EACf,QAAgB,EAChB,UAAkB,EAClB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,iBAAyB,EACzB,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE,eAAe,CAAC,OAAO,CAAC,+BAuW1B"}