@viliha/vui-ui 1.15.0 → 1.16.0

package/AGENT.md

@@ -348,6 +348,8 @@ Never hand-build an HTML table; always use `RecordView`. Configure columns throu
 
 Long cell text never wraps: cells truncate to one line at `maxCellChars` (view prop; defaults to `NEXT_PUBLIC_MAX_CELL_CHARS` or 25) with an ellipsis + hover tooltip. Override a column with the field's `maxChars` (`0` = never truncate). Don't add your own `truncate`/`title` on cells — it's built in.
 
+A choice field (`options`) shows the option's **label** in the cell (e.g. `SYSTEM` → "System") while staying editable — don't use `render` just to map an enum to a friendly label. To customize the full-page form's breadcrumb, pass a `crumbs` array to `RecordForm` (each `{ label, onClick? }`, last = current page) — e.g. to add an "Access" parent or rename "Create new role" → "New Role".
+
 Sorting follows column visibility by default; use `sortable` to decouple them — `sortable: true` sorts a field with no column (e.g. a `hideInTable` name shown via `getPrimary`), `sortable: false` locks a visible column. Set the flag; don't rewire the Sort dropdown or headers.
 
 Form controls come from the field: `options` → `Select`, `input: "combobox"` → a searchable `Combobox` (`@viliha/vui-ui/combobox`, use for long lists), `input: "number" | "date"` → native inputs. For anything the built-ins don't cover (checkbox, radio group, slider, custom widget), set `renderInput({ value, onChange, field, invalid })` on the field — it drops any component into the Add/Edit form while the field keeps its label, required mark, and Save validation. Don't hand-build a `<form>`.

package/CHANGELOG.md

@@ -7,6 +7,27 @@ backward-compatible features, **major** for breaking changes.
 
 To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
 
+## 1.16.0 — 2026-07-27
+
+### Added
+
+- **Configurable page-form breadcrumb.** `RecordForm` (page layout) takes a
+  `crumbs` prop that fully replaces the default `Home › {title} › Create/Update
+  {singular}` trail — add parents (e.g. an "Access" section), rename the last
+  crumb ("New Role"), or reshape it per route. Each crumb is `{ label, onClick? }`;
+  the last is the current page. The `Crumb` type is re-exported from
+  `@viliha/vui-ui/record-view` (also in `@viliha/vui-ui/breadcrumbs`).
+
+### Changed
+
+- **Choice-field cells show the option label, not the raw value.** A field with
+  `options` now renders its matching label in the table (e.g. `SYSTEM` →
+  "System") while staying editable — no need for a read-only `render` just to map
+  an enum to a friendly label. Falls back to the raw value when unmatched.
+
+  **For agents:** use `options` labels for enum columns (not `render`), and pass
+  `crumbs` to `RecordForm` to shape a route's breadcrumb. Docs: `/docs/data-table`.
+
 ## 1.15.0 — 2026-07-27
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/src/record-view.tsx

@@ -34,6 +34,7 @@ import {
 
 import { cn } from "./utils";
 import { Breadcrumbs, type Crumb } from "./breadcrumbs";
+export type { Crumb } from "./breadcrumbs";
 import { Button } from "./button";
 import { Checkbox } from "./checkbox";
 import { Input } from "./input";
@@ -1170,7 +1171,12 @@ export function RecordView<T extends { id: RowId }>({
       );
     }
     const value = String(row[field.key] ?? "");
-    const clip = clipCell(value, field.maxChars ?? maxCellChars);
+    // For a choice field, show the option's friendly label (e.g. SYSTEM →
+    // "System") while the cell stays editable — no `render`, no read-only.
+    const display = Array.isArray(field.options)
+      ? (field.options.find((o) => o.value === value)?.label ?? value)
+      : value;
+    const clip = clipCell(display, field.maxChars ?? maxCellChars);
     const cellKey = `${row.id}:${field.key}`;
     const hoverActions =
       (field.editable || (field.copyable && value)) ? (
@@ -2074,6 +2080,11 @@ interface DetailPanelProps<T extends { id: RowId }> {
   /** Persist the in-progress draft under this key (e.g. the route), so a
    *  half-filled form survives leaving and returning via the open-tabs strip. */
   persistKey?: string;
+  /** Page-form breadcrumb override (fully configurable). When set, these crumbs
+   *  replace the default `Home › {title} › Create/Update {singular}` — so you can
+   *  add parents ("Access") or rename the last crumb ("New Role"). Build each
+   *  crumb as `{ label, onClick? }`; the last one is the current page. */
+  crumbs?: Crumb[];
 }
 
 function RecordDetailPanel<T extends { id: RowId }>({
@@ -2093,6 +2104,7 @@ function RecordDetailPanel<T extends { id: RowId }>({
   onHome,
   formDescription,
   persistKey,
+  crumbs,
 }: DetailPanelProps<T>) {
   const draftKey = persistKey ? `${persistKey}::draft` : undefined;
   const [draft, setDraft] = usePersistentState<T>(draftKey, row);
@@ -2364,11 +2376,14 @@ function RecordDetailPanel<T extends { id: RowId }>({
         <div className="flex h-12 shrink-0 items-center border-b border-border px-4">
           <Breadcrumbs
             onBack={onCancel}
-            crumbs={[
-              ...(onHome ? [{ label: "Home", onClick: onHome }] : []),
-              { label: title ?? singular, onClick: onCancel },
-              { label: crumb },
-            ] as Crumb[]}
+            crumbs={
+              crumbs ??
+              ([
+                ...(onHome ? [{ label: "Home", onClick: onHome }] : []),
+                { label: title ?? singular, onClick: onCancel },
+                { label: crumb },
+              ] as Crumb[])
+            }
           />
         </div>
         {/* Content — form card (left) + optional documentation panel (right). */}