@tristan2828/ui-foundation 3.25.0 → 3.26.0

package/conventions/docs/add-an-entity.md

@@ -61,6 +61,18 @@ is a filled-in example while the Widgets demo is still here).
   written before the view existed has neither: ask the developer whether
   to add them before step 1. The reference files build the table *with* a
   view, where Edit and Delete live, so the table has no row actions.
+- **`Screens: list, edited in the row`** is a small entity with no view
+  and no form: build the contract, gateway, mocks and table as below, but
+  no view, form or `/new`, `/:id`, `/:id/edit` routes. Its table follows
+  cell pattern 18, "In a table's rows": each field's cell an
+  `EditableValue` over the shared control from `<entity>-fields.tsx` and
+  `useEdit<Entity>Field`, `InlineCreate` in the toolbar for create, a
+  delete row action with its confirm dialog, and `width="content"` if the
+  plan's List screen says so. There's no reference file in the template
+  for this shape; the pattern's code is the reference. Its specs: each
+  cell kind saves, a refusal stays in its cell, one cell at a time, the
+  leave prompt, create (Enter, a blank name, a taken one), delete, and
+  the in-place a11y states for a cell open and refused, in both themes.
 
 1. **Add `<Entity>` to `openapi.yaml`** — schema, list, get, create, update,
    delete — exactly as the plan specifies: its fields, types, required
@@ -490,6 +502,8 @@ is a filled-in example while the Widgets demo is still here).
   the in-place a11y block unless the plan has an `Edit in place` line,
   and then only for the fields it names.
 
+- `width="content"` on `DataTable` unless the plan's List screen says
+  `Width: content` (the Widgets table is wide and leaves it out).
 - The saved-views row in `widgets-table.tsx` (`VIEWS`, the "Saved views"
   button group and `visibleColumns`) unless the plan's List screen lists
   saved views. When it does, copy it: `useTableUrlState`'s third argument

package/conventions/docs/cell-patterns.md

@@ -819,6 +819,88 @@ The row's fields are one component shared with the form
 (`WidgetChecklistItemFields` in `widget-fields.tsx`), each field named by
 position ("Item 2 text") as the row buttons name the item.
 
+### In a table's rows
+
+For a **small entity edited in its table** (a name and a few fields,
+with no view page and no form: the plan's `Screens: list, edited in the
+row`), every editable cell is an editable value, exactly as on a view.
+`DataTable` runs it: one cell open at a time, the leave-page prompt while
+one is open, "Saving…" and a refusal in the cell. There's no pencil
+column and no edit route.
+
+- **A cell** is `<EditableValue label="<Column> of <name>" layout="inline"
+  edit={editInPlace({ ... })}>`, its shown value the cell as it always
+  was. The label names the column and the row, so its pencil reads "Edit
+  Colour of Work" and its control "Colour of Work". The kinds are the
+  same: `text` (Enter saves), `choice` (the list opens with it, non-modal,
+  a pick saves), `multi`.
+- **A cell is a component** (`<Entity><Field>Cell`) that calls
+  `useEdit<Entity>Field(row.id)` for its save, the view's single-field
+  save. A hook can't be called inside a column definition.
+- **Stable columns and row ids.** Make the column definitions once
+  (at module level, or `useMemo`) and give
+  `DataTable` a `getRowId`: new definitions every render, or rows keyed
+  by position, remount an open cell and lose what's typed.
+- **Create is `InlineCreate`** in the toolbar: the new record's name, Enter
+  or Add. It's created with every other field at its default (say which in
+  the plan) and appears as a row, edited like the others; the box empties
+  and keeps the caret for the next one. The name's rule is the form's
+  (`schema`), and a refusal (a taken name's 422) shows under the box.
+- **Delete** stays a row action: a trash button in a pinned last column
+  (`pinLastColumn`), with its confirm dialog.
+- **Few short columns?** `width="content"` (below) keeps the row's cells
+  and its delete together on a wide screen.
+
+```tsx
+// A cell is its own component, so it can call the record's save hook.
+function CategoryColourCell({ category }: { category: Category }) {
+  const editField = useEditCategoryField(category.id)       // optimistic: false, toastOnError: false
+  return (
+    <EditableValue label={`Colour of ${category.name}`} layout="inline"
+      edit={editInPlace({
+        kind: 'choice',
+        value: category.colour,
+        schema: categoryFormSchema.shape.colour,
+        save: (colour) => editField.mutateAsync({ colour }),
+        control: (props) => (
+          <CategoryColourSelect id={props.id} value={props.value} onChange={(colour) => props.commit(colour)}
+            readOnly={props.disabled} defaultOpen modal={false} onOpenChange={(open) => !open && props.cancel()}
+            aria-label={props.label} aria-describedby={props.describedBy} />
+        ),
+      })}>
+      <ColourSwatch colour={category.colour} />
+    </EditableValue>
+  )
+}
+
+// Made once: the cells read the row they're given.
+const CATEGORY_COLUMNS: LegacyColumnDef<Category, unknown>[] = [
+  { id: 'name', header: 'Name', cell: ({ row }) => <CategoryNameCell category={row.original} /> },
+  { id: 'colour', header: 'Colour', cell: ({ row }) => <CategoryColourCell category={row.original} /> },
+  { id: 'actions', header: () => <span className="sr-only">Actions</span>, cell: ({ row }) => <DeleteCategoryAction category={row.original} /> },
+]
+
+<DataTable columns={CATEGORY_COLUMNS} getRowId={(row) => String(row.id)} width="content" pinFirstColumn pinLastColumn
+  toolbar={<InlineCreate label="New category's name" schema={categoryFormSchema.shape.name}
+    create={(name) => createCategory.mutateAsync({ name, colour: 'blue', icon: 'house' })} />} … />
+```
+
+The worked example is the package's Storybook story `app/DataTable`
+"Edit in the rows" (`data-table.stories.tsx`); the template has no small
+entity yet.
+
+### A table of a few short columns: `width="content"`
+
+On a wide screen a table of three to five short columns (a name, a
+colour, a count, its delete) spreads them across the page, and the
+row's actions end up far from its name. `width="content"` sizes such a
+table to its columns once its area is 80rem or wider, never under 36rem,
+with the toolbar and pagination at the same width. Below 80rem, and on a
+phone, it's the full width as always. While it's loading, empty or
+failed after a load, it keeps the width it last had, so paging and
+filtering don't move it; only the first load can. A table that grows
+wide (many columns) has no reason to opt in.
+
 ## 19. Stage circle for an ordered status
 
 A status that's an ordered lifecycle (each record moves through the same

package/conventions/docs/entity-plan-template.md

@@ -111,6 +111,9 @@ per list; delete the section if there are none.
 | All tasks | none | dueDate asc | |
 | Bugs | kind = bug | dueDate asc | title, severity, assignee, dueDate |
 
+- Width (optional): `content` for a table of a few short columns, so on a
+  wide screen it takes the width they need rather than the whole page
+  (cell pattern 18, "`width="content"`"). Leave it out for the full width.
 - Anything else the table must show or do:
 
 ## View screen
@@ -176,7 +179,12 @@ except the quick actions, if any.
 ## Screens and access
 
 - Screens: list, view, create, edit, delete (the shape the playbook
-  builds).
+  builds). Or, for a small entity (a name and a few fields, no page of
+  its own): `list, edited in the row`, with no View screen section. Every
+  field the table shows is edited in its cell, a new record is created
+  from its name in the table's toolbar (say what every other field
+  starts as), and delete is a row action (cell pattern 18, "In a table's
+  rows").
 - Ownership: **shared** (every signed-in user sees every record) or
   **per-user** (each user sees only their own).
 

package/dist/components/app/data-table.d.ts

@@ -60,5 +60,16 @@ export type DataTableProps<TData extends Record<string, unknown>> = {
      * view is active, which can leave out a column only one view shows.
      */
     visibleColumns?: readonly string[];
+    /**
+     * `full` (the default): the table, its toolbar and its pagination take
+     * the whole width. `content`, for a table of a few short columns: on a
+     * wide screen (a table area of 80rem or more) they take the width the
+     * columns need, never under 36rem, with the row actions right after the
+     * last column. Below that, as `full`. While loading, empty or failed
+     * after a load, it keeps the width it last had, so paging and filtering
+     * don't move it (only the first load can).
+     */
+    width?: DataTableWidth;
 };
-export declare function DataTable<TData extends Record<string, unknown>>({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, }: DataTableProps<TData>): import("react").JSX.Element;
+export type DataTableWidth = 'full' | 'content';
+export declare function DataTable<TData extends Record<string, unknown>>({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, width, }: DataTableProps<TData>): import("react").JSX.Element;

package/dist/components/app/data-table.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // pagination tree-shakeable and independently swappable, which buys nothing
 // here: every row model is manual (the server sorts and pages), so this
 // table never uses TanStack's own sorted/paginated row models at all.
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { flexRender } from '@tanstack/react-table';
 import { cn } from 'cn';
 import { getCoreRowModel, useLegacyTable } from '@tanstack/react-table/legacy';
@@ -19,6 +19,9 @@ import { ErrorState } from './error-state.js';
 import { Button } from '../ui/button.js';
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '../ui/empty.js';
 import { Skeleton } from '../ui/skeleton.js';
+import { EditInPlaceContext } from './edit-in-place.js';
+import { EditInPlaceStore } from './edit-in-place-store.js';
+import { LeaveGuard } from './editable-value.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../ui/table.js';
 // A column def's id as TanStack resolves it (constructColumn): `id`, then
 // `accessorKey` with dots as underscores, then a string header. Group
@@ -71,6 +74,12 @@ const PINNED_FIRST_CONTENT_CLASS = 'max-md:max-w-[45cqw] max-md:whitespace-norma
 // background so it reads identically on striped and unstriped rows, and it
 // stays on screen when the table is scrolled right.
 const ROW_GROUP_CLASS = 'group/row hover:bg-transparent';
+// `width="content"`: from a table area 80rem wide, as wide as the columns
+// need (`w-fit` over the table's own `w-full`), at least 36rem, or the
+// width it last had loaded while it shows another state
+// (--data-table-last-width), at most the area. Narrower, no change.
+const CONTENT_WIDTH_CLASS = '@7xl/data-table:w-fit @7xl/data-table:max-w-full ' +
+    '@7xl/data-table:min-w-[max(36rem,var(--data-table-last-width,0px))]';
 // A second horizontal scrollbar, stuck to the viewport's bottom edge. The
 // real one sits directly under the last row, which on a full page is
 // off-screen until you have already scrolled past every row. Only rendered
@@ -133,7 +142,13 @@ function useBottomScrollbar(containerRef, isSuccessView) {
     }, [containerRef, isSuccessView, isOverflowing]);
     return { barRef, isOverflowing, scrollWidth };
 }
-export function DataTable({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, }) {
+export function DataTable({ columns, data, total, page, pageSize, onPageChange, sorting, onSortingChange, isLoading, error, onRetry, emptyTitle, emptyDescription, emptyAction, toolbar, getRowId, pinFirstColumn, pinLastColumn, enableSortingRemoval, visibleColumns, width = 'full', }) {
+    // Editing in place in the rows (cell pattern 18, "In a table's rows"):
+    // a cell that renders an <EditableValue> edits where it's shown, one at
+    // a time, with the leave-page prompt while one is open, the same rules
+    // as a record's view.
+    const [store] = useState(() => new EditInPlaceStore());
+    const openField = useSyncExternalStore(store.subscribe, () => store.open, () => store.open);
     const pageCount = Math.max(1, Math.ceil(total / pageSize));
     // TanStack treats a column missing from this map as visible, so every
     // column gets an entry once a list is given.
@@ -171,15 +186,34 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
     }, [isPastLastPage, pageCount, onPageChange]);
     const isEmpty = !isLoading && !error && data.length === 0 && !isPastLastPage;
     const isSuccessView = !error && !isLoading && !isPastLastPage && !isEmpty;
+    // `width="content"`: the width the table last had loaded, kept while it
+    // shows another state.
+    const root = useRef(null);
+    const [lastWidth, setLastWidth] = useState(null);
+    useLayoutEffect(() => {
+        const element = root.current;
+        if (width !== 'content' || !isSuccessView || !element)
+            return;
+        const observer = new ResizeObserver(() => setLastWidth(Math.round(element.getBoundingClientRect().width)));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [width, isSuccessView]);
     const containerRef = useRef(null);
     const { barRef, isOverflowing, scrollWidth } = useBottomScrollbar(containerRef, Boolean(pinFirstColumn) && isSuccessView);
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [toolbar, error ? (_jsx(ErrorState, { error: error, onRetry: onRetry })) : isLoading || isPastLastPage ? (_jsx(TableSkeleton, { columnCount: table.getVisibleLeafColumns().length })) : isEmpty ? (_jsxs(Empty, { "data-state": "empty", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: emptyTitle }), emptyDescription && _jsx(EmptyDescription, { children: emptyDescription })] }), emptyAction] })) : (_jsxs(_Fragment, { children: [_jsxs(Table, { "data-state": "success", containerRef: containerRef, 
+    const content = (_jsxs("div", { ref: root, className: cn('flex flex-col gap-4', width === 'content' && CONTENT_WIDTH_CLASS), "data-width": width, style: width === 'content' && !isSuccessView && lastWidth !== null
+            ? { '--data-table-last-width': `${lastWidth}px` }
+            : undefined, children: [toolbar, error ? (_jsx(ErrorState, { error: error, onRetry: onRetry })) : isLoading || isPastLastPage ? (_jsx(TableSkeleton, { columnCount: table.getVisibleLeafColumns().length })) : isEmpty ? (_jsxs(Empty, { "data-state": "empty", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: emptyTitle }), emptyDescription && _jsx(EmptyDescription, { children: emptyDescription })] }), emptyAction] })) : (_jsxs(_Fragment, { children: [_jsxs(Table, { "data-state": "success", containerRef: containerRef, 
                         // With the sticky bar below as the visible scrollbar, hide the
                         // container's own. It stays overflow-x-auto and fully
                         // scrollable (wheel, trackpad, drag, and the sync effect); it
                         // just no longer draws a bar directly under the last row.
                         containerClassName: cn(pinFirstColumn &&
-                            '@container [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'), children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header, index) => {
+                            '@container [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', 
+                        // A size container has no width of its own to give, so
+                        // `width="content"` couldn't fit the table. Its query only
+                        // serves a phone-width rule, and an 80rem table area never
+                        // is one.
+                        width === 'content' && '@7xl/data-table:[container-type:normal]'), children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header, index) => {
                                         const canSort = header.column.getCanSort();
                                         const sortDirection = header.column.getIsSorted();
                                         const content = header.isPlaceholder ? null : canSort ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center'), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), sortDirection === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.5 text-muted-foreground" })) : sortDirection === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ArrowUpDownIcon, { className: "size-3.5 text-muted-foreground/50" }))] })) : (flexRender(header.column.columnDef.header, header.getContext()));
@@ -195,4 +229,5 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                                     }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { className: cn(pinFirstColumn && ROW_GROUP_CLASS), children: row.getVisibleCells().map((cell, index) => (_jsx(TableCell, { className: cn(pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn &&
                                             index === row.getVisibleCells().length - 1 &&
                                             PINNED_LAST_COLUMN_CLASS, cell.column.columnDef.meta?.align === 'center' && 'text-center'), children: pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }, row.id))) })] }), pinFirstColumn && isOverflowing && (_jsx("div", { ref: barRef, "aria-hidden": "true", tabIndex: -1, "data-slot": "bottom-scrollbar", className: "sticky bottom-0 z-20 h-4 overflow-x-auto border-t border-border bg-background", children: _jsx("div", { style: { width: scrollWidth, height: 1 } }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "type-body text-muted-foreground", children: [total === 0 ? 0 : (page - 1) * pageSize + 1, '–', Math.min(page * pageSize, total), " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Previous page", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "type-body text-muted-foreground", children: ["Page ", page, " of ", pageCount] }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Next page", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRightIcon, {}) })] })] })] }))] }));
+    return (_jsxs(EditInPlaceContext.Provider, { value: store, children: [openField !== null && _jsx(LeaveGuard, { store: store }), width === 'content' ? _jsx("div", { className: "@container/data-table", children: content }) : content] }));
 }

package/dist/components/app/inline-create.d.ts

@@ -0,0 +1,30 @@
+type SafeParse = (value: unknown) => {
+    success: true;
+    data: unknown;
+} | {
+    success: false;
+    error: {
+        issues: readonly {
+            message: string;
+        }[];
+    };
+};
+export type InlineCreateProps = {
+    /** What the box is for, e.g. "New category's name": its accessible name and placeholder. */
+    label: string;
+    /** The button's text. Defaults to "Add". */
+    addLabel?: string;
+    /** The form's rule for the field (`<entity>FormSchema.shape.name`). Its output is what `create` gets. */
+    schema?: {
+        safeParse: SafeParse;
+    };
+    /**
+     * Creates the record from the name: the entity's create mutation's
+     * `mutateAsync`, with the other fields at their defaults. Rejects with the
+     * AppError; a 422's field error shows under the box.
+     */
+    create: (value: string) => Promise<unknown>;
+    className?: string;
+};
+export declare function InlineCreate({ label, addLabel, schema, create, className }: InlineCreateProps): import("react").JSX.Element;
+export {};

package/dist/components/app/inline-create.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Creates a record from its name, in a table's toolbar: the way in for a
+// small entity edited in its rows (cell pattern 18, "In a table's rows").
+// The rest of the new record's fields start at their defaults and are
+// edited in its row like any other.
+//
+// - Enter or Add creates it. While it saves the box is read-only and Add
+//   shows a spinner; then the box empties and keeps the caret, so a run of
+//   records goes in from the keyboard, and a status line says what was added.
+// - A name the form's schema refuses is never sent; a refusal from the
+//   server (a 422's field error, word for word) shows under the box with
+//   what was typed kept.
+import { PlusIcon } from 'lucide-react';
+import { useId, useRef, useState } from 'react';
+import { cn } from 'cn';
+import { Button } from '../ui/button.js';
+import { Field, FieldError } from '../ui/field.js';
+import { Input } from '../ui/input.js';
+import { Spinner } from '../ui/spinner.js';
+import { messageOf } from './edit-in-place-store.js';
+export function InlineCreate({ label, addLabel = 'Add', schema, create, className }) {
+    const id = useId();
+    const input = useRef(null);
+    const [value, setValue] = useState('');
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [added, setAdded] = useState('');
+    const submit = async (event) => {
+        event.preventDefault();
+        if (saving)
+            return;
+        const parsed = schema ? schema.safeParse(value) : { success: true, data: value.trim() };
+        if (!parsed.success) {
+            setError(parsed.error.issues[0]?.message ?? 'Check this value.');
+            return;
+        }
+        const name = String(parsed.data);
+        setSaving(true);
+        setError(null);
+        try {
+            await create(name);
+            setValue('');
+            setAdded(`Added ${name}`);
+        }
+        catch (refusal) {
+            setError(messageOf(refusal));
+        }
+        finally {
+            setSaving(false);
+            input.current?.focus();
+        }
+    };
+    return (_jsxs("form", { onSubmit: submit, noValidate: true, className: cn('flex items-start gap-2', className), "data-slot": "inline-create", children: [_jsxs(Field, { "data-invalid": error !== null, className: "w-72 max-w-full", children: [_jsx(Input, { ref: input, value: value, readOnly: saving, placeholder: label, "aria-label": label, "aria-invalid": error !== null, "aria-describedby": error !== null ? `${id}-error` : undefined, onChange: (event) => setValue(event.target.value) }), error !== null && (_jsx(FieldError, { id: `${id}-error`, className: "type-caption", children: error }))] }), _jsxs(Button, { type: "submit", variant: "outline", disabled: saving, children: [saving ? _jsx(Spinner, { "aria-hidden": "true", className: "size-4" }) : _jsx(PlusIcon, {}), addLabel] }), _jsx("span", { role: "status", className: "sr-only", children: saving ? 'Adding…' : added })] }));
+}

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 export { AppShell, type AppShellProps, type NavItem } from './components/app/app-shell.js';
 export { CountLink, type CountLinkProps } from './components/app/count-link.js';
-export { DataTable, type DataTableProps, type SortingState } from './components/app/data-table.js';
+export { DataTable, type DataTableProps, type DataTableWidth, type SortingState } from './components/app/data-table.js';
 export { EntityForm, type EntityFormProps } from './components/app/entity-form.js';
 export { EntityView, type EntityViewField, type EntityViewLayout, type EntityViewPlacement, type EntityViewProps, type EntityViewSection, } from './components/app/entity-view.js';
 export { editInPlace, type EditControlProps, type EditInPlace, type EditInPlaceList, type EditInPlaceListOptions, type EditInPlaceOptions, type EditKind, type EditListItemProps, } from './components/app/edit-in-place.js';
 export { DataEnvironmentBanner } from './components/app/data-environment-banner.js';
 export { EditableValue, type EditableValueProps } from './components/app/editable-value.js';
 export { ErrorState } from './components/app/error-state.js';
+export { InlineCreate, type InlineCreateProps } from './components/app/inline-create.js';
 export { FoundationProviders } from './components/app/foundation-providers.js';
 export { Markdown, type MarkdownProps } from './components/app/markdown.js';
 export { MockModeBanner } from './components/app/mock-mode-banner.js';

package/dist/index.js

@@ -12,6 +12,7 @@ export { editInPlace, } from './components/app/edit-in-place.js';
 export { DataEnvironmentBanner } from './components/app/data-environment-banner.js';
 export { EditableValue } from './components/app/editable-value.js';
 export { ErrorState } from './components/app/error-state.js';
+export { InlineCreate } from './components/app/inline-create.js';
 export { FoundationProviders } from './components/app/foundation-providers.js';
 export { Markdown } from './components/app/markdown.js';
 export { MockModeBanner } from './components/app/mock-mode-banner.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "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": {