prime-ui-kit 0.13.1 → 0.15.0

package/README.md

@@ -6,7 +6,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 
 **A calm, precise React 19 UI kit for product interfaces** — admin panels, dashboards, settings, forms
-and data tables. 79 components on one design contract, one API vocabulary and one set of tokens, so
+and data tables. 80 components on one design contract, one API vocabulary and one set of tokens, so
 every screen you build looks like it was drawn by the same hand.
 
 - **Graphite design language.** Depth from fill, not lines — a surface ladder where every nested
@@ -117,7 +117,7 @@ components.
 ## Quick start
 
 ```tsx
-import { AppShell, Button, Input, PageContent, Sidebar } from "prime-ui-kit";
+import { AppHeader, AppShell, Button, Input, PageContent, Sidebar } from "prime-ui-kit";
 
 export function App() {
   return (
@@ -130,11 +130,15 @@ export function App() {
           </Sidebar.Content>
         </Sidebar.Root>
       }
+      header={
+        <AppHeader.Root>
+          <AppHeader.Start>
+            <AppHeader.Title>New client</AppHeader.Title>
+          </AppHeader.Start>
+        </AppHeader.Root>
+      }
     >
-      <PageContent.Section>
-        <PageContent.Header>
-          <PageContent.Title>New client</PageContent.Title>
-        </PageContent.Header>
+      <PageContent.Page>
         <PageContent.Body>
           <Input.Root label="Email" required hint="We will send an invitation">
             <Input.Wrapper>
@@ -143,7 +147,7 @@ export function App() {
           </Input.Root>
           <Button.Root>Invite</Button.Root>
         </PageContent.Body>
-      </PageContent.Section>
+      </PageContent.Page>
     </AppShell.Template>
   );
 }
@@ -171,7 +175,7 @@ Short rules that keep code correct — for people and for AI coding assistants:
 |---|---|
 | Tokens only | Components read semantic variables `--prime-*` (`--prime-space-4`, `--prime-color-text-secondary`, `--prime-control-m-height`). Your own CSS uses the same tokens. |
 | Fill, not lines | Surfaces stand on one ladder: the page and four nested layers, one OKLab lightness step apart, computed at build time. Light: gray page, white card, deeper layers alternate. Dark: a near-black page, every layer a step lighter. A field, chip or neutral button is one step off the layer it sits on, so nothing merges; controls have no visible outline. |
-| Proximity | label → field 4–8 · field → field 20 · group → group 32 · section → section 40–48. |
+| Proximity | label → field 4–8 · tile → tile 16 · field → field 20 · block → block 24 · group → group 32 · section → section 40–48. |
 | One size axis | `size` is `xs · s · m · l · xl` (28 · 32 · 36 · 40 · 48), default `m`. |
 | Semantic vs decorative color | `tone` carries meaning (`danger` for destructive), `color` is a palette hue for badges, tags and avatars. |
 
@@ -201,6 +205,7 @@ accessibility, examples and common mistakes.
 | [**Label**](https://github.com/esurkov1/prime-ui/blob/main/src/components/label/COMPONENT.md) | Field label (native `<label>`) with required and optional markers. |
 | [**Hint**](https://github.com/esurkov1/prime-ui/blob/main/src/components/hint/COMPONENT.md) | Help text or a validation error under a field. |
 | [**Fieldset**](https://github.com/esurkov1/prime-ui/blob/main/src/components/fieldset/COMPONENT.md) | A frameless group of form fields: a `title-s` legend, the form rhythm and one `disabled` for all of them. |
+| [**FieldList**](https://github.com/esurkov1/prime-ui/blob/main/src/components/field-list/COMPONENT.md) | An editable list of records of one shape: one row of fields per record, the column headings once, add, remove, reorder and pinned rows. |
 
 ### Selection (`selection`)
 
@@ -227,7 +232,7 @@ accessibility, examples and common mistakes.
 | [**Badge**](https://github.com/esurkov1/prime-ui/blob/main/src/components/badge/COMPONENT.md) | The kit's one chip: a status, category or count label, a removable value or applied filter, and a pressable toggle with a hover action, in a palette color. |
 | [**Avatar**](https://github.com/esurkov1/prime-ui/blob/main/src/components/avatar/COMPONENT.md) | A round photo of a person or entity with an initials or icon fallback, presence dot and overlapping groups. |
 | [**Thumbnail**](https://github.com/esurkov1/prime-ui/blob/main/src/components/thumbnail/COMPONENT.md) | A preview of an object — product, vehicle, file, cover — at a fixed aspect ratio, with a colored icon fallback. |
-| [**Sparkline**](https://github.com/esurkov1/prime-ui/blob/main/src/components/sparkline/COMPONENT.md) | A small line or bar chart with its headline — the value at rest, its change against the point before and its date — where any point can be scrubbed. |
+| [**Sparkline**](https://github.com/esurkov1/prime-ui/blob/main/src/components/sparkline/COMPONENT.md) | A small chart — a smooth line over a fading area, a bare line or bars — with its headline: the value at rest, its change and its date; any point can be scrubbed. |
 | [**ChartFrame**](https://github.com/esurkov1/prime-ui/blob/main/src/components/chart-frame/COMPONENT.md) | A dashboard panel around any chart (Recharts, ECharts, visx, Chart.js or a hand-drawn SVG): title, headline value, a measured plot area, a series legend, a tooltip body and a data table for screen readers. |
 | [**Kbd**](https://github.com/esurkov1/prime-ui/blob/main/src/components/kbd/COMPONENT.md) | A key cap for a keyboard key or a shortcut, rendered as a native `<kbd>`. |
 | [**Card**](https://github.com/esurkov1/prime-ui/blob/main/src/components/card/COMPONENT.md) | A filled surface block with structural templates for metrics, charts, lists, calls to action and covers. |
@@ -296,11 +301,12 @@ accessibility, examples and common mistakes.
 | Component | What it is for |
 |---|---|
 | [**AppShell**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/app-shell/COMPONENT.md) | The app frame: a content panel that is the page itself and a navigation rail one layer above it. |
-| [**AppHeader**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/app-header/COMPONENT.md) | The bar at the top of the app: where you are, ⌘K search, a few actions and the phone menu button; it may carry the page title and tools. |
-| [**PageContent**](https://github.com/esurkov1/prime-ui/blob/main/src/components/page-content/COMPONENT.md) | Page structure inside the main column: title, description, page actions and content sections; full-height pages and list + detail. |
+| [**AppHeader**](https://github.com/esurkov1/prime-ui/blob/main/src/layout/app-header/COMPONENT.md) | The page's bar at the top of the app: the page title with a line of data, the page's own buttons and tools, the phone menu button. |
+| [**PageContent**](https://github.com/esurkov1/prime-ui/blob/main/src/components/page-content/COMPONENT.md) | Page structure inside the main column: title, page actions, titled sections and a bento tile grid; full-height pages and list + detail. |
 | [**PageToolbar**](https://github.com/esurkov1/prime-ui/blob/main/src/components/page-toolbar/COMPONENT.md) | The panel at the top of a page — search and filter, sections, view options and the primary action — one row when wide, stacked rows when narrow. |
 | [**Divider**](https://github.com/esurkov1/prime-ui/blob/main/src/components/divider/COMPONENT.md) | A hairline separator, horizontal or vertical, with or without a label. |
 | [**ScrollContainer**](https://github.com/esurkov1/prime-ui/blob/main/src/components/scroll-container/COMPONENT.md) | A scroll region with the kit's thin scrollbar that shrinks correctly inside flex and grid parents; a chat pinned to its end, edge events for loading more. |
+| [**LoginForm**](https://github.com/esurkov1/prime-ui/blob/main/src/components/login-form/COMPONENT.md) | A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation. |
 
 ### Interaction (`interaction`)
 
@@ -308,12 +314,6 @@ accessibility, examples and common mistakes.
 |---|---|
 | [**Dnd**](https://github.com/esurkov1/prime-ui/blob/main/src/components/dnd/COMPONENT.md) | Pointer-driven drag and drop: reorderable lists, draggable items and drop zones, with touch and keyboard support. |
 
-### Composition (`composition`)
-
-| Component | What it is for |
-|---|---|
-| [**LoginForm**](https://github.com/esurkov1/prime-ui/blob/main/src/components/login-form/COMPONENT.md) | A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation. |
-
 ### Foundations (`foundations`)
 
 | Component | What it is for |
@@ -368,9 +368,9 @@ with the kit the way its author would: the screen-building process, the design r
 the API cheat sheet, how to choose between similar components, what to do when a component is missing,
 page recipes (dashboard, list with table, settings, forms, detail page, screen states, messenger, auth), anti-patterns
 and a review checklist. The package ships it built as one self-contained folder,
-`node_modules/prime-ui-kit/dist/skill/`: `SKILL.md`, the guides, the screen `patterns/`, and every
-component's `COMPONENT.md` and `examples/` under `reference/`, so it always matches the installed
-version.
+`node_modules/prime-ui-kit/dist/skill/`: `SKILL.md`, the guides, and every component's `COMPONENT.md`
+and `examples/` under `reference/` (whole screens included, as `examples/screen.tsx`), so it always
+matches the installed version.
 
 ### Install the skill
 

package/dist/chunks/{chunk-XNOJEX55.js → chunk-2IKH55MI.js}

@@ -17,7 +17,7 @@ import {
   useControllableState,
   useFieldFrame,
   useInheritedDisabled
-} from "./chunk-PK2GC77E.js";
+} from "./chunk-XJAVS6FH.js";
 import {
   cx
 } from "./chunk-Q3BFRQHZ.js";