@tristan2828/ui-foundation 4.18.3 → 4.18.4

package/conventions/docs/cell-patterns.md

@@ -887,7 +887,9 @@ Checklist is the reference (`checklist` in `widgetEdits`). It's built on
   on the item (not its box, not a link in it) or its pencil ("Edit item
   2") turns it into the form's row (`renderItem`, the same fields as the
   form's `ListEditor` row), an editable value like any above: Enter or
-  leaving saves, Esc gives up, one open at a time.
+  leaving saves, Esc gives up, one open at a time. The row lays its parts
+  out side by side as `ListEditor`'s does, so a fragment (the box, then
+  the text's `Field`) needs no wrapper of its own.
 - **Add at the end.** "Add item" opens a new row; Enter saves it and
   opens the next, the caret already in it, so a run of items goes in from
   the keyboard. Esc on an empty one closes it; nothing is sent.

package/dist/components/app/edit-in-place.d.ts

@@ -124,6 +124,8 @@ export type EditInPlaceListOptions<TItem> = {
     /**
      * The item's own fields while it's edited: the form's row (what its
      * ListEditor's `renderItem` shows), as controls over `props.value`.
+     * Laid out in a row as ListEditor's is: a fragment's parts sit side by
+     * side, and a single element fills the row.
      */
     renderItem: (props: EditListItemProps<TItem>) => ReactNode;
     /** How the item reads when it isn't being edited. Its own controls (a done box) keep working. */

package/dist/components/app/editable-list.js

@@ -35,6 +35,13 @@ function locate(current, item, index) {
     const found = current.findIndex((other) => sameItem(other, item));
     return found === -1 ? index : found;
 }
+// The form's row, in place too: ListEditor lays `renderItem` out in a
+// row, so its parts (a done box, then the text box) sit side by side
+// there and here alike. One element (an app's own row) fills it, as it
+// filled the field's column before.
+function ItemRow({ children }) {
+    return _jsx("span", { className: "flex min-w-0 items-start gap-2 [&>:only-child]:flex-1", children: children });
+}
 // The list's schema, run on the list this draft would make. A message
 // about this item comes first, then one about the list as a whole (too
 // many items).
@@ -110,7 +117,7 @@ export function EditableList({ label, edit, emptyLabel }) {
     const itemEdit = (index) => ({
         kind: 'text',
         value: items[index],
-        control: (props) => edit.renderItem({ ...props, index, isNew: false }),
+        control: (props) => _jsx(ItemRow, { children: edit.renderItem({ ...props, index, isNew: false }) }),
         schema: { safeParse: (draft) => checkItem(edit, items, index, draft) },
         save: (item) => edit.save((current) => {
             const at = locate(current, items[index], index);
@@ -121,7 +128,7 @@ export function EditableList({ label, edit, emptyLabel }) {
     const addEdit = {
         kind: 'text',
         value: edit.newItem(),
-        control: (props) => edit.renderItem({ ...props, index: items.length, isNew: true }),
+        control: (props) => _jsx(ItemRow, { children: edit.renderItem({ ...props, index: items.length, isNew: true }) }),
         schema: { safeParse: (draft) => checkItem(edit, items, items.length, draft) },
         save: (item) => edit.save((current) => [...current, item]),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.18.3",
+  "version": "4.18.4",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {