@tristan2828/ui-foundation 4.12.0 → 4.14.0

package/conventions/docs/cell-patterns.md

@@ -934,15 +934,26 @@ row`), every editable cell is an editable value, exactly as on a view.
 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 one of the package's three row-edit cells**, or an
+  `<EditableValue label="<Column> of <name>" layout="inline"
+  edit={editInPlace({ ... })}>` for anything else. The label names the
+  column and the row, so its pencil reads "Edit Colour of Work" and its
+  control "Colour of Work".
+  - **`NameCell`**: one line; Enter saves, the form's rule (`schema`)
+    runs first, a taken name's 422 shows in the cell. `children` is how
+    the name shows at rest (an icon beside it).
+  - **`ChoiceCell<T>`** (`options`, `render`): the list opens with the
+    cell, non-modal; a pick saves, closing it with no pick gives up.
+    `render` draws a value at rest, on the trigger and in the list.
+  - **`LinkCell`** (`linkText`, `emptyLabel`, `save(link | null)`): a
+    link opening in a new tab (said to screen readers), or the not-set
+    label; edited as one line. A bare `example.com` gains `https://`,
+    another scheme (`javascript:`) is refused in the cell, and a blank
+    box saves `null`. Clicking the link follows it; the pencil edits.
 - **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.
+  save, and renders the package's cell with it. 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
@@ -958,24 +969,29 @@ column and no edit route.
   and its delete together on a wide screen.
 
 ```tsx
-// A cell is its own component, so it can call the record's save hook.
+import { ChoiceCell, InlineCreate, LinkCell, NameCell } from '@tristan2828/ui-foundation'
+
+// Each 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>
+    <ChoiceCell label={`Colour of ${category.name}`} value={category.colour} options={CATEGORY_COLOURS}
+      render={(colour) => <ColourSwatch colour={colour} />}
+      save={(colour) => editField.mutateAsync({ colour })} />
+  )
+}
+function CategoryNameCell({ category }: { category: Category }) {
+  const editField = useEditCategoryField(category.id)
+  return (
+    <NameCell label={`Name of ${category.name}`} value={category.name} schema={categoryFormSchema.shape.name}
+      save={(name) => editField.mutateAsync({ name })} />
+  )
+}
+function CategoryWebsiteCell({ category }: { category: Category }) {
+  const editField = useEditCategoryField(category.id)
+  return (
+    <LinkCell label={`Website of ${category.name}`} value={category.website} emptyLabel="No website"
+      save={(website) => editField.mutateAsync({ website })} />
   )
 }
 
@@ -983,6 +999,7 @@ function CategoryColourCell({ category }: { category: Category }) {
 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: 'website', header: 'Website', cell: ({ row }) => <CategoryWebsiteCell category={row.original} /> },
   { id: 'actions', header: () => <span className="sr-only">Actions</span>, cell: ({ row }) => <DeleteCategoryAction category={row.original} /> },
 ]
 

package/dist/components/app/app-shell-nav.d.ts

@@ -11,6 +11,15 @@ export type NavItem = {
 export type NavSection = {
     label: string;
     items: readonly NavItem[];
+    /**
+     * The label folds the section away: a button with a chevron. Whether
+     * it's open is remembered per browser, by the section's label. The
+     * section holding the page you're on is always open, and the icon rail
+     * shows every section's items whatever their state.
+     */
+    collapsible?: boolean;
+    /** Whether a collapsible section starts open for someone who has never folded it. Defaults to true. */
+    defaultOpen?: boolean;
 };
 /** One entry of `AppShell`'s `nav`: a page, or a labelled section of pages. */
 export type NavEntry = NavItem | NavSection;
@@ -19,6 +28,9 @@ export declare function isNavSection(entry: NavEntry): entry is NavSection;
 export type NavGroup = {
     label?: string;
     items: readonly NavItem[];
+    /** From its section: the label folds it (NavSection's `collapsible`). */
+    collapsible?: boolean;
+    defaultOpen?: boolean;
 };
 /**
  * The sidebar groups for a nav, in order. A flat nav (no sections) is the

package/dist/components/app/app-shell-nav.js

@@ -16,7 +16,11 @@ export function navGroups(nav) {
             if (run.length)
                 groups.push({ items: run });
             run = [];
-            groups.push({ label: entry.label, items: entry.items });
+            groups.push({
+                label: entry.label,
+                items: entry.items,
+                ...(entry.collapsible && { collapsible: true, defaultOpen: entry.defaultOpen ?? true }),
+            });
         }
         else {
             run.push(entry);

package/dist/components/app/app-shell.d.ts

@@ -11,7 +11,10 @@ export type AppShellProps = {
      * pages (`{ label, items }`, one per module, say). A nav with no sections
      * is the single "Navigation" group. One entry is marked active: the most
      * specific whose route matches, so '/tasks' and '/tasks/categories' can
-     * both be listed.
+     * both be listed. A section marked `collapsible` folds under its label,
+     * remembered per browser (`defaultOpen` for the first visit); the one
+     * holding the current page stays open, and the icon rail shows every
+     * section's items.
      */
     nav: readonly NavEntry[];
     /**

package/dist/components/app/app-shell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogOutIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { ChevronRightIcon, LogOutIcon, MoonIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { Link, Navigate, Outlet, useLocation } from 'react-router';
 import { useAuth } from '../../auth/use-auth.js';
 import { activeNavTo, navGroups } from './app-shell-nav.js';
@@ -9,6 +9,7 @@ import { versionHref, versionLabel } from './app-shell-version.js';
 import { ErrorState } from './error-state.js';
 import { useErrorReporter } from '../../error-reporting/error-reporting-context.js';
 import { ReportRoutePattern } from '../../error-reporting/error-reporting-provider.js';
+import { cn } from 'cn';
 import { Button } from '../ui/button.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
@@ -47,6 +48,64 @@ function VersionEntry({ version }) {
     const className = 'block truncate px-2 type-caption text-sidebar-foreground/70 group-data-[collapsible=icon]:hidden';
     return href ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: `${className} hover:underline`, children: label })) : (_jsx("span", { className: className, children: label }));
 }
+// One group's entries. A plain Link, not NavLink: NavLink marks every
+// matching entry current, and only the most specific one should be
+// (activeNavTo).
+function NavMenu({ items, activeTo }) {
+    return (_jsx(SidebarMenu, { children: items.map(({ to, label, icon: Icon }) => {
+            const isActive = to === activeTo;
+            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActive, tooltip: label, render: _jsx(Link, { to: to, "aria-current": isActive ? 'page' : undefined }), children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }, to));
+        }) }));
+}
+// Whether a collapsible section is open, remembered per browser by its
+// label. Storage can be missing or refuse (a private window): then it's
+// remembered for the page's life only.
+const SECTION_KEY = (label) => `ui-foundation:nav-section:${label}`;
+function storedSectionOpen(label) {
+    try {
+        const stored = window.localStorage.getItem(SECTION_KEY(label));
+        return stored === null ? null : stored === 'open';
+    }
+    catch {
+        return null;
+    }
+}
+function storeSectionOpen(label, open) {
+    try {
+        window.localStorage.setItem(SECTION_KEY(label), open ? 'open' : 'closed');
+    }
+    catch {
+        // Not remembered; the state still holds until the page reloads.
+    }
+}
+// A section whose label folds it (#152). On the icon rail (the collapsed
+// sidebar on a wide screen) its items always show and its label stays the
+// rail's hidden one, so no page is out of reach and no hidden button
+// takes a tab stop. The section holding the current page is always open:
+// arriving in a closed one opens it and remembers that.
+function CollapsibleNavGroup({ group, activeTo }) {
+    const { state, isMobile } = useSidebar();
+    const contentId = useId();
+    const [stored, setStored] = useState(() => storedSectionOpen(group.label));
+    const holdsCurrent = group.items.some((item) => item.to === activeTo);
+    // Arriving in a folded section unfolds it, and it stays unfolded after.
+    if (holdsCurrent && stored !== true)
+        setStored(true);
+    useEffect(() => {
+        if (holdsCurrent)
+            storeSectionOpen(group.label, true);
+    }, [holdsCurrent, group.label]);
+    if (state === 'collapsed' && !isMobile) {
+        return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(NavMenu, { items: group.items, activeTo: activeTo }) })] }));
+    }
+    const open = holdsCurrent || (stored ?? group.defaultOpen ?? true);
+    return (_jsxs(SidebarGroup, { "data-collapsible-section": open ? 'open' : 'closed', children: [_jsxs(SidebarGroupLabel, { render: _jsx("button", { type: "button", "aria-expanded": open, "aria-controls": contentId, "aria-disabled": holdsCurrent || undefined, onClick: () => {
+                        if (holdsCurrent)
+                            return;
+                        setStored(!open);
+                        storeSectionOpen(group.label, !open);
+                    } }), className: "w-full justify-between text-left hover:bg-sidebar-accent hover:text-sidebar-accent-foreground aria-disabled:hover:bg-transparent aria-disabled:hover:text-sidebar-foreground/70", children: [group.label, _jsx(ChevronRightIcon, { "aria-hidden": "true", className: cn('transition-transform', open && 'rotate-90') })] }), _jsx(SidebarGroupContent, { id: contentId, hidden: !open, children: _jsx(NavMenu, { items: group.items, activeTo: activeTo }) })] }));
+}
 function AppShellSkeleton() {
     return (_jsxs("div", { className: "flex h-screen w-full gap-4 p-4", "data-state": "loading", children: [_jsx(Skeleton, { className: "h-full w-56 shrink-0" }), _jsxs("div", { className: "flex-1 space-y-4 pt-2", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsx(Skeleton, { className: "h-40 w-full" })] })] }));
 }
@@ -79,13 +138,7 @@ export function AppShell({ title, nav, sidebarExtra, defaultSidebarOpen = true,
         return _jsx(Navigate, { to: "/login", replace: true, state: isLoggingOut ? undefined : { from } });
     }
     const activeTo = activeNavTo(nav, location.pathname);
-    return (_jsxs(TooltipProvider, { children: [reporter && _jsx(ReportRoutePattern, { reporter: reporter }), _jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx(CloseMobileSidebarOnNavigate, {}), _jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [navGroups(nav).map((group, groupIndex) => (_jsxs(SidebarGroup, { children: [group.label !== undefined && _jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: group.items.map(({ to, label, icon: Icon }) => {
-                                                            // A plain Link, not NavLink: NavLink marks every
-                                                            // matching entry current, and only the most specific
-                                                            // one should be (activeNavTo).
-                                                            const isActive = to === activeTo;
-                                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActive, tooltip: label, render: _jsx(Link, { to: to, "aria-current": isActive ? 'page' : undefined }), children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }, to));
-                                                        }) }) })] }, `${groupIndex}:${group.label ?? ''}`))), sidebarExtra] }), _jsxs(SidebarFooter, { children: [version && _jsx(VersionEntry, { version: version }), _jsxs("div", { className: "flex items-center justify-between gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0", children: [_jsx("span", { className: "truncate type-caption text-sidebar-foreground/70 group-data-[collapsible=icon]:hidden", children: user.name }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Log out", onClick: () => {
+    return (_jsxs(TooltipProvider, { children: [reporter && _jsx(ReportRoutePattern, { reporter: reporter }), _jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx(CloseMobileSidebarOnNavigate, {}), _jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [navGroups(nav).map((group, groupIndex) => group.collapsible && group.label !== undefined ? (_jsx(CollapsibleNavGroup, { group: { ...group, label: group.label }, activeTo: activeTo }, `${groupIndex}:${group.label}`)) : (_jsxs(SidebarGroup, { children: [group.label !== undefined && _jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(NavMenu, { items: group.items, activeTo: activeTo }) })] }, `${groupIndex}:${group.label ?? ''}`))), sidebarExtra] }), _jsxs(SidebarFooter, { children: [version && _jsx(VersionEntry, { version: version }), _jsxs("div", { className: "flex items-center justify-between gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0", children: [_jsx("span", { className: "truncate type-caption text-sidebar-foreground/70 group-data-[collapsible=icon]:hidden", children: user.name }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Log out", onClick: () => {
                                                         setIsLoggingOut(true);
                                                         // A failed request still ends the session on screen
                                                         // (AuthProvider), so this stays a deliberate logout: a

package/dist/components/app/row-edit-cells.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { type EditInPlaceOptions } from './edit-in-place.js';
+type Schema<TValue> = EditInPlaceOptions<unknown, TValue>['schema'];
+export type NameCellProps = {
+    /** The cell's name, column and row: "Name of Home". */
+    label: string;
+    /** The saved name. */
+    value: string;
+    /** Saves the new name (already checked by `schema`). Rejects with the AppError. */
+    save: (name: string) => Promise<unknown>;
+    /** The form's rule for the name (`schema.shape.name`): checked before anything is sent. */
+    schema?: Schema<string>;
+    /** How the name shows at rest (an icon beside it). Defaults to the name. */
+    children?: ReactNode;
+    /** The input's width class. Defaults to `w-48`. */
+    inputClassName?: string;
+};
+/** A name in one line: Enter saves, the form's rule runs first, a taken name's 422 shows in the cell. */
+export declare function NameCell({ label, value, save, schema, children, inputClassName }: NameCellProps): import("react").JSX.Element;
+export type ChoiceCellProps<T extends string> = {
+    /** The cell's name, column and row: "Colour of Home". */
+    label: string;
+    /** The saved value. */
+    value: T;
+    /** Every value, in the order the list shows them. */
+    options: readonly T[];
+    /** How a value shows: at rest, on the open trigger and in the list (a swatch and its word). */
+    render: (value: T) => ReactNode;
+    /** Saves the picked value. Rejects with the AppError. */
+    save: (value: T) => Promise<unknown>;
+    /** The trigger's width class. Defaults to `w-40`. */
+    triggerClassName?: string;
+};
+/** A single choice: its list opens with the cell, a pick saves, closing it with no pick gives up. */
+export declare function ChoiceCell<T extends string>({ label, value, options, render, save, triggerClassName, }: ChoiceCellProps<T>): import("react").JSX.Element;
+export type LinkCellProps = {
+    /** The cell's name, column and row: "Website of Home". */
+    label: string;
+    /** The saved address, or null when there's none. */
+    value: string | null;
+    /** Saves the address, or null to clear it (the box left blank). Rejects with the AppError. */
+    save: (link: string | null) => Promise<unknown>;
+    /** The link's text at rest. Defaults to the address without its scheme. */
+    linkText?: string | ((href: string) => ReactNode);
+    /** What the cell says with no address. Defaults to "Not set". */
+    emptyLabel?: string;
+    /** The input's width class. Defaults to `w-64`. */
+    inputClassName?: string;
+};
+/** An optional link: shown as a link out (or the not-set label), edited as one line; blank clears it. */
+export declare function LinkCell({ label, value, save, linkText, emptyLabel, inputClassName }: LinkCellProps): import("react").JSX.Element;
+export {};

package/dist/components/app/row-edit-cells.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon } from 'lucide-react';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+import { linkHref } from '../../lib/link-href.js';
+import { editInPlace } from './edit-in-place.js';
+import { EditableValue } from './editable-value.js';
+/** A name in one line: Enter saves, the form's rule runs first, a taken name's 422 shows in the cell. */
+export function NameCell({ label, value, save, schema, children, inputClassName = 'w-48' }) {
+    return (_jsx(EditableValue, { label: label, layout: "inline", edit: editInPlace({
+            kind: 'text',
+            value,
+            schema,
+            save,
+            control: (props) => (_jsx(Input, { id: props.id, className: inputClassName, value: props.value, readOnly: props.disabled, "aria-invalid": props.invalid || undefined, "aria-label": props.label, "aria-describedby": props.describedBy, onChange: (event) => props.onChange(event.target.value) })),
+        }), children: children ?? value }));
+}
+/** A single choice: its list opens with the cell, a pick saves, closing it with no pick gives up. */
+export function ChoiceCell({ label, value, options, render, save, triggerClassName = 'w-40', }) {
+    return (_jsx(EditableValue, { label: label, layout: "inline", edit: editInPlace({
+            kind: 'choice',
+            value,
+            save,
+            control: (props) => (_jsxs(Select, { value: props.value, onValueChange: (next) => {
+                    if (next)
+                        props.commit(next);
+                }, disabled: props.disabled, defaultOpen: true, modal: false, onOpenChange: (open) => {
+                    if (!open)
+                        props.cancel();
+                }, children: [_jsx(SelectTrigger, { id: props.id, className: triggerClassName, "aria-invalid": props.invalid || undefined, "aria-label": props.label, "aria-describedby": props.describedBy, children: _jsx(SelectValue, { children: (shown) => render(shown) }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option, children: render(option) }, option))) })] })),
+        }), children: render(value) }));
+}
+// A web or email address (`example.com` gains https://), blank for none.
+// Another scheme (`javascript:`) is refused before anything is sent.
+const LINK_RULE = {
+    safeParse: (value) => {
+        const href = linkHref(String(value ?? ''));
+        if (href === '')
+            return { success: true, data: null };
+        if (href === null) {
+            return { success: false, error: { issues: [{ message: 'Use a web or email address' }] } };
+        }
+        return { success: true, data: href };
+    },
+};
+function shownLinkText(href, linkText) {
+    if (typeof linkText === 'function')
+        return linkText(href);
+    return linkText ?? href.replace(/^(https?:\/\/|mailto:)/i, '').replace(/\/$/, '');
+}
+/** An optional link: shown as a link out (or the not-set label), edited as one line; blank clears it. */
+export function LinkCell({ label, value, save, linkText, emptyLabel = 'Not set', inputClassName = 'w-64' }) {
+    // Only an address the editor would have saved is shown as a link: a
+    // stored `javascript:` reads as text, never as something to click.
+    const href = value ? linkHref(value) : null;
+    return (_jsx(EditableValue, { label: label, layout: "inline", edit: editInPlace({
+            kind: 'text',
+            value: value ?? '',
+            schema: LINK_RULE,
+            save,
+            control: (props) => (_jsx(Input, { id: props.id, type: "url", inputMode: "url", className: inputClassName, value: props.value, placeholder: "https://", readOnly: props.disabled, "aria-invalid": props.invalid || undefined, "aria-label": props.label, "aria-describedby": props.describedBy, onChange: (event) => props.onChange(event.target.value) })),
+        }), children: !value ? (_jsx("span", { className: "text-muted-foreground", children: emptyLabel })) : href ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", className: "rounded-sm text-link underline underline-offset-4 outline-none focus-visible:ring-3 focus-visible:ring-ring/50", children: [shownLinkText(href, linkText), _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "ml-0.5 inline size-3 align-baseline" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })) : (value) }));
+}

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { StepBar, type StepBarProps } from './components/app/step-bar.js';
 export { RatingStar, type RatingStarProps, type RatingStarValue } from './components/app/rating-star.js';
 export { DateField, type DateFieldProps } from './components/app/date-field.js';
 export { formatPlainDate, type PlainDate } from './lib/plain-date.js';
+export { ChoiceCell, LinkCell, NameCell, type ChoiceCellProps, type LinkCellProps, type NameCellProps, } from './components/app/row-edit-cells.js';
 export { WidgetCard, WidgetList, WidgetListItem, type WidgetCardProps, type WidgetListItemProps, } from './components/app/widget-card.js';
 export { ThemeProvider } from './components/theme-provider.js';
 export { LoginRoute, type LoginRouteProps } from './routes/login.js';

package/dist/index.js

@@ -34,6 +34,7 @@ export { StepBar } from './components/app/step-bar.js';
 export { RatingStar } from './components/app/rating-star.js';
 export { DateField } from './components/app/date-field.js';
 export { formatPlainDate } from './lib/plain-date.js';
+export { ChoiceCell, LinkCell, NameCell, } from './components/app/row-edit-cells.js';
 export { WidgetCard, WidgetList, WidgetListItem, } from './components/app/widget-card.js';
 export { ThemeProvider } from './components/theme-provider.js';
 // Screens outside the app shell

package/package.json

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