@viliha/vui-ui 1.1.2 → 1.1.4

package/AGENT.md

@@ -1,10 +1,17 @@
 # Using VUI in your project (AI agent guide)
 
 > **Audience:** developers — and their AI agents — **consuming** `@viliha/vui-ui`
-> in a downstream app. This file ships with the npm package; point your agent at
-> `node_modules/@viliha/vui-ui/AGENT.md` (or copy it into your repo, e.g. rename
-> to `AGENTS.md` so agent tools auto-load it). To *contribute to* the theme
-> itself, see [CONTRIBUTING.md](https://github.com/myviliha/vui-starter/blob/main/CONTRIBUTING.md)
+> in a downstream app. This file ships with the npm package. To auto-load these
+> rules, copy the ready-made pointer to your project root — it `@`-imports this
+> file, so you never duplicate the rules:
+>
+> ```bash
+> cp node_modules/@viliha/vui-ui/CLAUDE.template.md ./CLAUDE.md   # Claude Code
+> # or ./AGENTS.md for other agent tools
+> ```
+>
+> To *contribute to* the theme itself, see
+> [CONTRIBUTING.md](https://github.com/myviliha/vui-starter/blob/main/CONTRIBUTING.md)
 > and [AGENTS.md](https://github.com/myviliha/vui-starter/blob/main/AGENTS.md).
 
 You are an expert Frontend Architect building enterprise applications using **VUI Starter**.
@@ -15,10 +22,14 @@ Do not reinvent the framework. Build with it.
 
 > **What you get from the package vs. what to copy.** `@viliha/vui-ui` ships the
 > component primitives (`Button`, `Input`, `Select`, `Dialog`, `Menu`,
-> `RecordView`, `ChartContainer`, `theme.css`, …). App-shell patterns referenced
-> below — `SetPageTitle`, `Breadcrumbs`, the sidebar/`nav-config`, and the
-> `AuthCard*` auth screens — are **reference-app patterns**, not package exports.
-> Copy them from the [backoffice demo](https://github.com/myviliha/vui-starter/tree/main/apps/backoffice)
+> `RecordView`, `ChartContainer`, `Breadcrumbs`, `theme.css`, …). App-shell
+> patterns referenced below — `SetPageTitle`, the sidebar, and the `AuthCard*`
+> auth screens — are **reference-app patterns**, not package exports.
+> The breadcrumb *trail-building logic* (`crumbsFor` + `nav-config` +
+> `route-meta`) is also a reference-app pattern: the package exports the
+> presentational `Breadcrumbs` component; the app derives the trail from the
+> route and feeds it in. Copy the patterns from the
+> [backoffice demo](https://github.com/myviliha/vui-starter/tree/main/apps/backoffice)
 > and adapt.
 
 ---
@@ -179,6 +190,23 @@ Always use:
 
 Do not build custom navigation systems unless the project explicitly requires it.
 
+## Breadcrumbs
+
+One trail, **derived from the route — never hand-written per page.**
+
+- Render with the shared `Breadcrumbs` component (`@viliha/vui-ui/breadcrumbs`):
+  last crumb is the current page (bold, non-interactive), earlier crumbs are
+  links, chevron separators.
+- Build the trail from the URL against a single nav config (copy `crumbsFor` +
+  `nav-config` + `route-meta` from the reference app). Root it at **Home**
+  (your dashboard route). A section/group parent has no page of its own, so its
+  crumb links to its **first child** — clicking a section lands on that
+  section's first page.
+- Ship **one** landing page, labeled "Home". Don't split "Home" and "Dashboard"
+  into two routes.
+
+To reorder or rename, edit the nav config; the trail follows automatically.
+
 ---
 
 # Forms

package/CLAUDE.template.md

@@ -0,0 +1,15 @@
+<!--
+  VUI — AI agent rules for apps that consume @viliha/vui-ui.
+
+  Copy this file to your PROJECT ROOT as CLAUDE.md (Claude Code) and/or
+  AGENTS.md (other agent tools):
+
+      cp node_modules/@viliha/vui-ui/CLAUDE.template.md ./CLAUDE.md
+
+  The line below loads the agent guide that ships inside the package, so
+  AGENT.md stays the single source of truth — you never copy the rules
+  themselves, only this pointer. If your agent tool doesn't resolve `@`
+  imports, open node_modules/@viliha/vui-ui/AGENT.md and paste it here.
+-->
+
+@node_modules/@viliha/vui-ui/AGENT.md

package/README.md

@@ -61,17 +61,26 @@ export function Example() {
 
 This package ships an **AI-agent usage guide** at
 `node_modules/@viliha/vui-ui/AGENT.md` — the standards to follow when generating
-UI with VUI (token discipline, reuse-first, page layout, RecordView, a11y, dark
-mode). Point your agent at it, or copy it into your repo as `AGENTS.md` so tools
-auto-load it.
+UI with VUI (token discipline, reuse-first, page layout, RecordView, forms,
+a11y, dark mode). The quickest way to load it is the shipped
+`CLAUDE.template.md`:
+
+```bash
+cp node_modules/@viliha/vui-ui/CLAUDE.template.md ./CLAUDE.md   # Claude Code
+# or ./AGENTS.md for Cursor / Copilot
+```
+
+It's a one-line `@import` of `AGENT.md`, so the rules stay in one place. Prefer a
+verbatim copy? `cp node_modules/@viliha/vui-ui/AGENT.md AGENTS.md`.
 
 ## Components
 
-`avatar` · `badge` · `button` · `card` · `chart` (themed Recharts wrapper) ·
-`checkbox` · `command-palette` (⌘K launcher) · `dialog` · `confirm-dialog` ·
-`dropdown-menu` · `input` · `kbd` (key caps + `Shortcut`) · `menu` ·
-`required-mark` · `select` · `table` · `record-view` (the full datatable) · plus
-the `utils` (`cn`) helper and the `theme.css` design tokens.
+`avatar` · `badge` · `breadcrumbs` · `button` · `card` · `chart` (themed Recharts
+wrapper) · `checkbox` · `command-palette` (⌘K launcher) · `dialog` ·
+`confirm-dialog` · `dropdown-menu` · `input` · `kbd` (key caps + `Shortcut`) ·
+`menu` · `required-mark` · `select` · `table` · `record-view` (the full datatable
++ `RecordForm`) · plus the `utils` (`cn`) helper and the `theme.css` design
+tokens.
 
 ## Theming
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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",
@@ -33,7 +33,8 @@
     "src",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
-    "AGENT.md"
+    "AGENT.md",
+    "CLAUDE.template.md"
   ],
   "exports": {
     "./theme.css": "./src/theme.css",

package/src/record-view.tsx

@@ -334,6 +334,12 @@ export function RecordView<T extends { id: RowId }>({
   const tableFields = fields.filter((f) => !f.hideInTable);
   const visibleFields = tableFields.filter((f) => !hidden.has(f.key));
 
+  // The primary "Name" column renders the record's name field, which is hidden
+  // as a regular column (hideInTable) because it shows here. Mirror its
+  // required mark so a mandatory name shows `*` like every other column.
+  // ponytail: name field = a required hideInTable field (the app convention).
+  const nameRequired = fields.some((f) => f.hideInTable && f.required);
+
   const nameWidth = colWidths[NAME_COL] ?? NAME_DEFAULT_W;
   const totalWidth =
     CHECKBOX_W +
@@ -1057,6 +1063,7 @@ export function RecordView<T extends { id: RowId }>({
                     <DEFAULT_FIELD_ICON className="size-3.5 shrink-0 text-foreground" />
                   )}
                   Name
+                  {nameRequired && <RequiredMark />}
                 </span>
                 {resizeHandle(NAME_COL, "Name")}
               </TableHead>
@@ -1468,11 +1475,14 @@ function RecordDetailPanel<T extends { id: RowId }>({
         </h3>
         <dl className="divide-y divide-border">
           {groupFields.map((f) => (
+            // Label, icon, required mark and control share one baseline —
+            // vertically centered. ponytail: a wrapped textarea grows down and
+            // the label centers against it; acceptable for the single-line norm.
             <div
               key={f.key}
-              className="flex items-start gap-3 px-3 py-3 leading-relaxed"
+              className="flex items-center gap-3 px-3 py-3 leading-relaxed"
             >
-              <dt className="flex w-28 shrink-0 items-center gap-1.5 pt-1.5 text-muted-foreground">
+              <dt className="flex w-28 shrink-0 items-center gap-1.5 text-muted-foreground">
                 {f.icon && (
                   <f.icon className="size-3.5 text-[var(--button-primary)]" />
                 )}
@@ -1481,7 +1491,7 @@ function RecordDetailPanel<T extends { id: RowId }>({
               </dt>
               <dd className="min-w-0 flex-1">
                 {f.render ? (
-                  <div className="pt-0.5">{f.render(draft)}</div>
+                  <div>{f.render(draft)}</div>
                 ) : !readOnly && f.editable ? (
                   <textarea
                     value={String(draft[f.key as keyof T] ?? "")}
@@ -1499,7 +1509,7 @@ function RecordDetailPanel<T extends { id: RowId }>({
                     )}
                   />
                 ) : (
-                  <span className="block whitespace-pre-wrap break-words px-2 pt-1.5">
+                  <span className="block whitespace-pre-wrap break-words px-2 py-1.5">
                     {String(draft[f.key as keyof T] ?? "") || (
                       <span className="text-muted-foreground">—</span>
                     )}