@cloudraker/reki 2.6.1 → 2.7.0

package/ai/component-registry.md

@@ -2,6 +2,106 @@
 
 > Auto-generated component metadata for AI/agent consumption.
 
+---
+
+### ActorDisplay
+
+Renders an `actor` / created-by / owned-by value as an avatar followed by a name. Use for record authorship and assignee cells.
+
+**Type:** component
+
+**Import:** `import { ActorDisplay } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `name`: string (required)
+  Display name of the actor (workspace member, system, or API).
+- `avatarUrl`: string | null
+  Avatar image URL. Falls back to the name's initial when absent.
+- `avatarSize`: enum
+  Avatar size.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`text-reki-default`
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <ActorDisplay name="Jane Doe" />
+    </TooltipProvider>
+```
+
+```tsx
+<TooltipProvider>
+      <ActorDisplay name="Jane Doe" avatarUrl="https://i.pravatar.cc/40?img=5" />
+    </TooltipProvider>
+```
+
+
+---
+
+### AddressInput
+
+A structured address editor (street, city, state, postcode, country) for the `address` field type. Presentational only — geocoding / autocomplete, if needed, is layered on by the host app.
+
+**Type:** component
+
+**Import:** `import { AddressInput } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `value`: AddressValue (required)
+  Current address value.
+- `disabled`: boolean
+  Disables all fields.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<AddressInput value={value} onChange={setValue} />
+```
+
+
+---
+
+### ArrayDisplay
+
+Renders an array field's values as a collapsible list of chips. Pre-normalize the field value to a `string[]` in your field-cell layer.
+
+**Type:** component
+
+**Import:** `import { ArrayDisplay } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `values`: string[] (required)
+  String values to render as chips.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-48">
+        <ArrayDisplay values={["alpha", "beta", "gamma", "delta"]} max={2} />
+      </div>
+    </TooltipProvider>
+```
+
+
 ---
 
 ### Autocomplete
@@ -258,6 +358,103 @@ Collection sub-component (wraps AutocompleteBase)
 ```
 
 
+---
+
+### Avatar
+
+Image-or-initials glyph for a user or entity. Falls back to initials on a neutral fill when no image is provided. Use for assignees, participants, and record owners.
+
+**Type:** component
+
+**Import:** `import { Avatar } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `initials`: string
+  Up to ~2 characters shown when there is no image.
+- `alt`: string
+  Accessible name / image alt text.
+- `size`: enum [default: base]
+  - `"xs"`: Extra small
+  - `"sm"`: Small
+  - `"base"`: Default
+  - `"lg"`: Large
+  - `"xl"`: Extra large
+- `shape`: enum [default: circle]
+  - `"circle"`: Round avatar
+  - `"square"`: Rounded square avatar
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-fill`
+
+**Examples:**
+
+```tsx
+<div className="flex items-center gap-2">
+      <Avatar initials="XS" size="xs" />
+      <Avatar initials="SM" size="sm" />
+      <Avatar initials="MD" size="base" />
+      <Avatar initials="LG" size="lg" />
+      <Avatar initials="XL" size="xl" />
+    </div>
+```
+
+```tsx
+<div className="flex items-center gap-2">
+      <Avatar initials="JD" shape="circle" />
+      <Avatar initials="JD" shape="square" />
+    </div>
+```
+
+```tsx
+<Avatar
+      src="https://i.pravatar.cc/80?img=12"
+      alt="Jane Doe"
+      size="lg"
+    />
+```
+
+
+---
+
+### AvatarGroup
+
+Overlapping stack of avatars for assignees / participants. Shows up to `max` avatars and a `+N` counter for the remainder.
+
+**Type:** component
+
+**Import:** `import { AvatarGroup } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `avatars`: ReactNode[] (required)
+  Avatar nodes to stack (typically reki `Avatar` elements).
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-fill`, `ring-reki-base`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<AvatarGroup
+      max={4}
+      avatars={members.map((initials) => (
+        <Avatar key={initials} initials={initials} size="sm" />
+      ))}
+    />
+```
+
+
 ---
 
 ### Badge
@@ -901,6 +1098,126 @@ Props:
 ```
 
 
+---
+
+### Chip
+
+Compact reference token for a record or entity (a relation value, a tag with an avatar, a removable selection). Presentational only — wire `onClick` / `rightComponent` to your data layer. For a navigable chip, use {@link LinkChip}.
+
+**Type:** component
+
+**Import:** `import { Chip } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `label`: string (required)
+  Text label (truncated with a tooltip on overflow).
+- `tooltipLabel`: string
+  Tooltip content shown when the label overflows. Defaults to `label`.
+- `variant`: enum [default: regular]
+  Visual variant.
+- `size`: enum [default: small]
+  Size of the chip.
+- `accent`: enum [default: primary]
+  Text emphasis. `"secondary"` renders muted, medium-weight text.
+- `isBold`: boolean
+  Renders the label in a medium font weight.
+- `leftComponent`: ReactNode
+  Node rendered before the label (e.g. an avatar or icon).
+- `rightComponent`: ReactNode
+  Node rendered after the label (e.g. a remove button or count).
+- `disabled`: boolean
+  Disables the chip and dims it.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-base`, `bg-reki-fill`, `ring-reki-hairline`, `text-reki-default`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      <Chip label="Regular" variant="regular" />
+      <Chip label="Highlighted" variant="highlighted" />
+      <Chip label="Transparent" variant="transparent" />
+      <Chip label="Static" variant="static" />
+    </div>
+```
+
+```tsx
+<div className="flex items-center gap-2">
+      <Chip label="Small" size="small" />
+      <Chip label="Large" size="large" />
+    </div>
+```
+
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      <Chip
+        label="Acme Inc."
+        leftComponent={<BuildingsIcon className="size-3.5" />}
+      />
+      <Chip
+        label="Removable"
+        rightComponent={<XIcon className="size-3" />}
+        onClick={() => {}}
+      />
+    </div>
+```
+
+```tsx
+<Chip label="Disabled" onClick={() => {}} disabled />
+```
+
+```tsx
+<TooltipProvider>
+      <div className="w-32">
+        <Chip label="A very long related record name that truncates" />
+      </div>
+    </TooltipProvider>
+```
+
+
+---
+
+### CircularProgressBar
+
+A determinate circular progress ring — for record completeness, quota usage, and similar single-value metrics. For a linear bar use `Meter`; for an indeterminate spinner use `Loader`.
+
+**Type:** component
+
+**Import:** `import { CircularProgressBar } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `value`: number (required)
+  Progress as a percentage (0–100).
+- `size`: number
+  Diameter in pixels.
+- `barWidth`: number
+  Stroke width in pixels.
+- `label`: string
+  Accessible label.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<div className="flex items-center gap-4">
+      <CircularProgressBar value={25} />
+      <CircularProgressBar value={60} />
+      <CircularProgressBar value={100} />
+    </div>
+```
+
+
 ---
 
 ### ClipboardText
@@ -1611,6 +1928,63 @@ Props:
 ```
 
 
+---
+
+### ColorSample
+
+A color swatch for color pickers and tag-color selection. Uses the same `reki-tag-*` palette as {@link Tag} so the swatch always matches the tag it represents, in both light and dark mode.
+
+**Type:** component
+
+**Import:** `import { ColorSample } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `colorName`: enum (required)
+  Named CRM tag color to display.
+- `variant`: enum [default: default]
+  - `"default"`: Rounded square (default)
+  - `"circle"`: Circle
+  - `"pipeline"`: Wide pipeline bar
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`ring-reki-hairline`
+
+**Examples:**
+
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      {TAG_COLOR_NAMES.map((color) => (
+        <ColorSample key={color} colorName={color} />
+      ))}
+    </div>
+```
+
+```tsx
+<div className="flex items-center gap-3">
+      <ColorSample colorName="blue" variant="default" />
+      <ColorSample colorName="blue" variant="circle" />
+      <ColorSample colorName="blue" variant="pipeline" />
+    </div>
+```
+
+```tsx
+<div className="flex w-48 flex-col gap-1">
+      {(["green", "orange", "red"] as const).map((color) => (
+        <div key={color} className="flex items-center gap-2">
+          <ColorSample colorName={color} variant="circle" />
+          <span className="text-sm capitalize text-reki-default">{color}</span>
+        </div>
+      ))}
+    </div>
+```
+
+
 ---
 
 ### Combobox
@@ -2420,6 +2794,57 @@ CommandPalette — accessible command palette / spotlight search overlay.
 ```
 
 
+---
+
+### DataGrid
+
+DataGrid component
+
+**Type:** component
+
+**Import:** `import { DataGrid } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `kind`: enum (required)
+- `initialValue`: unknown (required)
+- `initialKey`: string
+- `align`: enum (required)
+
+**Colors (reki tokens used):**
+
+`bg-reki-base`, `bg-reki-canvas`, `bg-reki-fill`, `border-reki-hairline`, `outline-reki-brand`, `outline-reki-hairline`, `text-reki-default`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-[720px]">
+        <DataGrid
+          data={rows}
+          columns={columns}
+          getRowId={(r) => r.id}
+          height={360}
+          enableRowSelection
+          selectedRowIds={selected}
+          onSelectedRowIdsChange={setSelected}
+          onCommitCell={({ rowId, columnId, value }) =>
+            setRows((rs) =>
+              rs.map((r) => (r.id === rowId ? { ...r, [columnId]: value } : r)),
+            )
+          }
+        />
+        <p className="mt-2 text-xs text-reki-subtle">
+          500 rows (virtualized) · {selected.length} selected · double-click
+          Amount/Owner to edit
+        </p>
+      </div>
+    </TooltipProvider>
+```
+
+
 ---
 
 ### DatePicker
@@ -3024,6 +3449,45 @@ Close sub-component
 ```
 
 
+---
+
+### DoubleTextInput
+
+Two side-by-side text inputs that edit a single composite value — full names (first / last) and other paired fields.
+
+**Type:** component
+
+**Import:** `import { DoubleTextInput } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `value`: DoubleTextValue (required)
+  Current paired value.
+- `firstPlaceholder`: string
+  Placeholder for the first input.
+- `secondPlaceholder`: string
+  Placeholder for the second input.
+- `disabled`: boolean
+  Disables both inputs.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<div className="w-72">
+      <DoubleTextInput
+        value={value}
+        onChange={setValue}
+        firstPlaceholder="First name"
+        secondPlaceholder="Last name"
+      />
+    </div>
+```
+
+
 ---
 
 ### DropdownMenu
@@ -3356,6 +3820,39 @@ Group sub-component (wraps DropdownMenuPrimitive)
 ```
 
 
+---
+
+### EmailsDisplay
+
+Renders an `emails` field as a collapsible list of `mailto:` link chips. Pre-normalize the field value to a `string[]` in your field-cell layer.
+
+**Type:** component
+
+**Import:** `import { EmailsDisplay } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `emails`: string[] (required)
+  Email addresses, primary first.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-56">
+        <EmailsDisplay
+          emails={["jane@acme.com", "j.doe@personal.com", "jane@old.com"]}
+          max={1}
+        />
+      </div>
+    </TooltipProvider>
+```
+
+
 ---
 
 ### Empty
@@ -3477,6 +3974,45 @@ Placeholder shown when a list, table, or page has no content to display.
 ```
 
 
+---
+
+### ExpandableList
+
+Renders the first `max` items inline and collapses the remainder into a `+N` chip whose count reveals the hidden items on hover. Use for dense multi-value cells (tags, emails, links) where space is constrained.
+
+**Type:** component
+
+**Import:** `import { ExpandableList } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `children`: ReactNode
+  Items to render. The first `max` are shown inline; the rest collapse into a `+N` chip.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-fill`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-48">
+        <ExpandableList max={2}>
+          <Tag color="blue" text="Engineering" />
+          <Tag color="green" text="Sales" />
+          <Tag color="orange" text="Support" />
+          <Tag color="purple" text="Finance" />
+        </ExpandableList>
+      </div>
+    </TooltipProvider>
+```
+
+
 ---
 
 ### Field
@@ -4349,6 +4885,40 @@ Description sub-component
 ```
 
 
+---
+
+### JsonDisplay
+
+Single-line, truncated display for a `json` / `raw-json` field value. Shows the full value in a tooltip on overflow via {@link OverflowingText}. Wrap in a `TooltipProvider` for the tooltip.
+
+**Type:** component
+
+**Import:** `import { JsonDisplay } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `value`: unknown (required)
+  Value to render. Objects/arrays are stringified; strings are shown as-is.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-56 rounded-md border border-reki-fill p-2">
+        <JsonDisplay value={{ status: "ok", count: 3, nested: { a: 1 } }} />
+      </div>
+    </TooltipProvider>
+```
+
+
 ---
 
 ### Label
@@ -4653,6 +5223,103 @@ ExternalIcon sub-component
 ```
 
 
+---
+
+### LinkChip
+
+A {@link Chip} that navigates to a record. Renders through reki's `LinkProvider`, so it honours the host app's router (TanStack Router, React Router, Next.js) and supports middle-click / cmd-click to open in a new tab. Use for clickable relation values in tables, boards, and detail panels.
+
+**Type:** component
+
+**Import:** `import { LinkChip } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `label`: string (required)
+  Text label (truncated with a tooltip on overflow).
+- `href`: string (required)
+  Destination href. Resolved through the configured `LinkProvider`.
+- `tooltipLabel`: string
+  Tooltip content shown when the label overflows. Defaults to `label`.
+- `size`: enum
+  Size of the chip.
+- `accent`: enum
+  Text emphasis.
+- `isBold`: boolean
+  Renders the label in a medium font weight.
+- `leftComponent`: ReactNode
+  Node rendered before the label (e.g. an avatar or icon).
+- `rightComponent`: ReactNode
+  Node rendered after the label.
+- `target`: string
+  Opens the link in a new tab.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-fill`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<LinkChip label="Acme Inc." href="/companies/acme" />
+```
+
+```tsx
+<LinkChip
+      label="Acme Inc."
+      href="/companies/acme"
+      leftComponent={<BuildingsIcon className="size-3.5" />}
+    />
+```
+
+```tsx
+<div className="flex items-center gap-2">
+      <LinkChip label="Small" href="#" size="small" />
+      <LinkChip label="Large" href="#" size="large" />
+    </div>
+```
+
+
+---
+
+### LinksDisplay
+
+Renders a `links` field as a collapsible list of external link chips (open in a new tab). Resolve absolute URLs and labels in your field-cell layer.
+
+**Type:** component
+
+**Import:** `import { LinksDisplay } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `links`: LinkValue[] (required)
+  Links to render, primary first.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-56">
+        <LinksDisplay
+          links={[
+            { url: "https://acme.com", label: "acme.com" },
+            { url: "https://docs.acme.com", label: "docs.acme.com" },
+          ]}
+          max={1}
+        />
+      </div>
+    </TooltipProvider>
+```
+
+
 ---
 
 ### Loader
@@ -4723,27 +5390,113 @@ MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.
 **Styling:**
 
 
-**Examples:**
+**Examples:**
+
+```tsx
+<MenuBar
+      isActive={active}
+      optionIds
+      options={[
+        {
+          icon: <TextBolderIcon />,
+          id: "bold",
+          tooltip: "Bold",
+          onClick: () => setActive(active === "bold" ? undefined : "bold"),
+        },
+        {
+          icon: <TextItalicIcon />,
+          id: "italic",
+          tooltip: "Italic",
+          onClick: () => setActive(active === "italic" ? undefined : "italic"),
+        },
+      ]}
+    />
+```
+
+
+---
+
+### MenuItem
+
+A single dropdown / list row: leading icon or component, label, and an optional trailing check or element. The building block for option pickers, filter builders, and action menus. See also {@link MenuItemSelect}, {@link MenuItemMultiSelect}, {@link MenuItemSelectColor}, {@link MenuItemSelectTag}, and {@link MenuItemAvatar}.
+
+**Type:** component
+
+**Import:** `import { MenuItem } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `text`: string (required)
+  Row label.
+- `LeftIcon`: IconType
+  Optional leading icon.
+- `leftComponent`: ReactNode
+  Optional leading element (avatar, color sample, …) shown before the text.
+- `rightComponent`: ReactNode
+  Optional trailing element shown after the text.
+- `selected`: boolean
+  Shows a trailing check mark when true.
+- `focused`: boolean
+  Keyboard-focused / active styling.
+- `disabled`: boolean
+  Disables the row.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-brand`, `bg-reki-fill`, `ring-reki-brand`, `ring-reki-hairline`, `text-reki-default`, `text-reki-inverse`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<LayerCard className="w-56 p-1">
+      <MenuItem text="Rename" LeftIcon={PencilIcon} />
+      <MenuItem text="Delete" LeftIcon={TrashIcon} />
+    </LayerCard>
+```
+
+```tsx
+<LayerCard className="w-56 p-1">
+      {["low", "medium", "high"].map((option) => (
+        <MenuItemSelect
+          key={option}
+          text={option}
+          selected={value === option}
+          onClick={() => setValue(option)}
+        />
+      ))}
+    </LayerCard>
+```
+
+```tsx
+<LayerCard className="w-56 p-1">
+      {["sales", "marketing", "support"].map((option) => (
+        <MenuItemMultiSelect
+          key={option}
+          text={option}
+          selected={selected.includes(option)}
+          onSelectChange={() => toggle(option)}
+        />
+      ))}
+    </LayerCard>
+```
+
+```tsx
+<LayerCard className="w-56 p-1">
+      <MenuItemSelectColor text="Green" color="green" selected />
+      <MenuItemSelectColor text="Blue" color="blue" />
+      <MenuItemSelectColor text="Purple" color="purple" />
+    </LayerCard>
+```
 
 ```tsx
-<MenuBar
-      isActive={active}
-      optionIds
-      options={[
-        {
-          icon: <TextBolderIcon />,
-          id: "bold",
-          tooltip: "Bold",
-          onClick: () => setActive(active === "bold" ? undefined : "bold"),
-        },
-        {
-          icon: <TextItalicIcon />,
-          id: "italic",
-          tooltip: "Italic",
-          onClick: () => setActive(active === "italic" ? undefined : "italic"),
-        },
-      ]}
-    />
+<LayerCard className="w-56 p-1">
+      <MenuItemAvatar text="Jane Doe" avatarInitials="JD" selected />
+      <MenuItemAvatar text="John Smith" avatarInitials="JS" />
+    </LayerCard>
 ```
 
 
@@ -4805,6 +5558,90 @@ Progress bar showing a measured value within a known range (e.g. quota usage).
 ```
 
 
+---
+
+### NotificationCounter
+
+A small numeric badge for unread/pending counts on icons and nav items.
+
+**Type:** component
+
+**Import:** `import { NotificationCounter } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `count`: number (required)
+  Number to display. Values above `max` render as `{max}+`.
+- `variant`: enum [default: primary]
+  - `"primary"`: Brand background (default)
+  - `"secondary"`: Neutral fill
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-brand`, `bg-reki-fill`, `text-reki-default`, `text-reki-inverse`
+
+**Examples:**
+
+```tsx
+<div className="flex items-center gap-3">
+      <NotificationCounter count={3} />
+      <NotificationCounter count={12} variant="secondary" />
+      <NotificationCounter count={150} max={99} />
+    </div>
+```
+
+
+---
+
+### OverflowingText
+
+Truncates text to its container and reveals the full value in a tooltip **only when it actually overflows**. Measures with a `ResizeObserver`, so it stays correct as the container resizes. Ideal for dense table/board cells and chips where labels are unpredictable in length.
+
+**Type:** component
+
+**Import:** `import { OverflowingText } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `text`: string (required)
+  Text to render, truncated when it overflows its container.
+- `tooltipContent`: ReactNode
+  Tooltip content shown when the text overflows. Defaults to `text`. Provide a custom node to show richer content than the raw string.
+- `lines`: number
+  Maximum number of lines before clamping. `1` (default) truncates to a single line with an ellipsis; higher values clamp to that many lines.
+- `alwaysShowTooltip`: boolean
+  Always show the tooltip on hover, even when the text is not overflowing.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-40 rounded-md border border-reki-fill p-2">
+        <OverflowingText text="This label is far too long to fit in its container — hover to see the full value in a tooltip." />
+      </div>
+    </TooltipProvider>
+```
+
+```tsx
+<TooltipProvider>
+      <div className="w-40 rounded-md border border-reki-fill p-2">
+        <OverflowingText
+          lines={2}
+          text="A longer description that wraps onto two lines before it clamps with an ellipsis and reveals the rest on hover."
+        />
+      </div>
+    </TooltipProvider>
+```
+
+
 ---
 
 ### Pagination
@@ -5032,6 +5869,74 @@ Props:
 ```
 
 
+---
+
+### PhonesDisplay
+
+Renders a `phones` field as a collapsible list of `tel:` link chips. Format the numbers in your field-cell layer (e.g. via `libphonenumber-js`) and pass display strings.
+
+**Type:** component
+
+**Import:** `import { PhonesDisplay } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `phones`: string[] (required)
+  Pre-formatted phone numbers, primary first.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Examples:**
+
+```tsx
+<TooltipProvider>
+      <div className="w-56">
+        <PhonesDisplay
+          phones={["+1 415 555 0100", "+44 20 7946 0000"]}
+          max={1}
+        />
+      </div>
+    </TooltipProvider>
+```
+
+
+---
+
+### Pill
+
+A tiny static label for inline annotations (counts, flags, hints). Smaller and quieter than {@link Tag} or {@link Badge}; not interactive.
+
+**Type:** component
+
+**Import:** `import { Pill } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `label`: string (required)
+  Text label.
+- `icon`: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  Optional leading icon (phosphor or any SVG component).
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-fill`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<div className="flex items-center gap-2">
+      <Pill label="3 records" />
+      <Pill label="Beta" icon={SparkleIcon} />
+    </div>
+```
+
+
 ---
 
 ### Popover
@@ -5633,6 +6538,97 @@ Props:
 ```
 
 
+---
+
+### Rating
+
+Star rating for the `rating` field type. Read-only by default for cell display; pass `onChange` for an editable control (clicking the current value clears it).
+
+**Type:** component
+
+**Import:** `import { Rating } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `value`: number | null (required)
+  Current rating (1..max), or `null` for unrated.
+- `readonly`: boolean
+  Renders as read-only (no hover/click).
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`text-reki-default`, `text-reki-inactive`
+
+**Examples:**
+
+```tsx
+<div className="flex flex-col gap-1">
+      <Rating value={1} readonly />
+      <Rating value={3} readonly />
+      <Rating value={5} readonly />
+    </div>
+```
+
+```tsx
+<Rating value={value} onChange={setValue} />
+```
+
+
+---
+
+### RecordBoard
+
+RecordBoard component
+
+**Type:** component
+
+**Import:** `import { RecordBoard } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `className`: string
+  Additional CSS classes
+- `children`: ReactNode
+  Child elements
+
+**Colors (reki tokens used):**
+
+`bg-reki-base`, `bg-reki-recessed`, `ring-reki-hairline`, `text-reki-default`, `text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<div className="h-[420px] w-[760px]">
+      <RecordBoard
+        columns={STAGES}
+        records={opps}
+        getRecordId={(o) => o.id}
+        getColumnId={(o) => o.stage}
+        onMove={({ recordId, toColumnId }) =>
+          setOpps((rs) =>
+            rs.map((o) => (o.id === recordId ? { ...o, stage: toColumnId } : o)),
+          )
+        }
+        renderCard={(o) => (
+          <div className="flex flex-col gap-1.5">
+            <span className="text-sm font-medium text-reki-default">{o.name}</span>
+            <div className="flex items-center justify-between">
+              <Tag color="gray" text={`$${o.amount.toLocaleString()}`} />
+              <Avatar initials={o.owner} size="xs" />
+            </div>
+          </div>
+        )}
+      />
+    </div>
+```
+
+
 ---
 
 ### Select
@@ -6967,6 +7963,55 @@ Props:
 ```
 
 
+---
+
+### Status
+
+A compact colored status indicator for record states (pipeline stages, task status, health). Uses the `reki-tag-*` palette so it stays consistent with {@link Tag} and adapts to light/dark automatically.
+
+**Type:** component
+
+**Import:** `import { Status } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `text`: string (required)
+  Status label text.
+- `isLoaderVisible`: boolean
+  Shows an inline loader after the text (e.g. while a transition runs).
+- `weight`: enum [default: regular]
+  - `"regular"`: Regular weight
+  - `"medium"`: Medium weight
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`text-reki-subtle`
+
+**Examples:**
+
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      <Status color="green" text="Active" />
+      <Status color="gray" text="Inactive" />
+      <Status color="red" text="Blocked" />
+      <Status color="blue" text="In progress" />
+      <Status color="purple" text="Review" />
+    </div>
+```
+
+```tsx
+<Status color="orange" text="Syncing" isLoaderVisible />
+```
+
+```tsx
+<Status color="green" text="Active" weight="medium" />
+```
+
+
 ---
 
 ### Surface
@@ -7846,7 +8891,7 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
 
 **Colors (reki tokens used):**
 
-`bg-reki-base`, `bg-reki-brand`, `bg-reki-recessed`, `bg-reki-tint`, `border-reki-hairline`, `ring-reki-brand`, `ring-reki-focus`, `ring-reki-hairline`, `ring-reki-line`, `text-reki-default`, `text-reki-subtle`
+`bg-reki-base`, `bg-reki-brand`, `bg-reki-tint`, `border-reki-hairline`, `ring-reki-brand`, `ring-reki-focus`, `ring-reki-line`, `text-reki-default`, `text-reki-subtle`
 
 **Styling:**
 
@@ -7970,12 +9015,15 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
         {
           value: "tab2",
           label: "Link Tab",
+          // Anchor content is supplied by Tabs via the spread props at runtime.
+          // oxlint-disable-next-line anchor-has-content
           render: (props) => <a {...props} href="#tab2" />,
         },
         {
           value: "tab3",
           label: "Cloudflare",
           render: (props) => (
+            // oxlint-disable-next-line anchor-has-content
             <a {...props} href="https://cloudflare.com" target="_blank" />
           ),
         },
@@ -7985,6 +9033,76 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
 ```
 
 
+---
+
+### Tag
+
+Colored label for enum / select / multi-select values and entity categories. Built on the `reki-tag-*` token palette so colors adapt to light/dark automatically, and on {@link OverflowingText} so long labels truncate with a tooltip.
+
+**Type:** component
+
+**Import:** `import { Tag } from "@cloudraker/reki";`
+
+**Category:** Other
+
+**Props:**
+
+- `text`: string (required)
+  Text label rendered inside the tag (truncated with a tooltip on overflow).
+- `icon`: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  Optional leading icon (phosphor or any SVG component).
+- `variant`: enum [default: solid]
+  - `"solid"`: Subtle colored background (default)
+  - `"outline"`: Transparent background with a colored ring
+  - `"border"`: Subtle background with a matching ring
+- `weight`: enum [default: regular]
+  - `"regular"`: Regular weight
+  - `"medium"`: Medium weight
+- `preventShrink`: boolean
+  Prevents the tag from shrinking inside flex containers.
+- `className`: string
+  Additional CSS classes merged via `cn()`. Use reki semantic tokens only.
+
+**Colors (reki tokens used):**
+
+`bg-reki-tag-blue`, `bg-reki-tag-gray`, `bg-reki-tag-green`, `bg-reki-tag-orange`, `bg-reki-tag-pink`, `bg-reki-tag-purple`, `bg-reki-tag-red`, `bg-reki-tag-sky`, `bg-reki-tag-turquoise`, `bg-reki-tag-yellow`, `text-reki-subtle`, `text-reki-tag-blue`, `text-reki-tag-gray`, `text-reki-tag-green`, `text-reki-tag-orange`, `text-reki-tag-pink`, `text-reki-tag-purple`, `text-reki-tag-red`, `text-reki-tag-sky`, `text-reki-tag-turquoise`, `text-reki-tag-yellow`
+
+**Examples:**
+
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      {TAG_COLOR_NAMES.map((color) => (
+        <Tag key={color} color={color} text={color} />
+      ))}
+    </div>
+```
+
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      <Tag color="blue" text="Solid" variant="solid" />
+      <Tag color="blue" text="Outline" variant="outline" />
+      <Tag color="blue" text="Border" variant="border" />
+    </div>
+```
+
+```tsx
+<div className="flex flex-wrap items-center gap-2">
+      <Tag color="green" text="Active" icon={CircleIcon} />
+      <Tag color="purple" text="Assigned" icon={UserIcon} />
+    </div>
+```
+
+```tsx
+<Tag color="transparent" text="No color" />
+```
+
+```tsx
+<div className="w-32">
+      <Tag color="orange" text="A very long tag label that will truncate" />
+    </div>
+```
+
+
 ---
 
 ### Text
@@ -8336,7 +9454,7 @@ Multi-line textarea input with Input variants and InputArea-specific dimensions
 ## Quick Reference
 
 **Components by Category:**
-- **Other:** Autocomplete, CloudflareLogo, DatePicker, Label, Link, SensitiveInput, Sidebar, Table, TableOfContents, DeleteResource
+- **Other:** ActorDisplay, AddressInput, ArrayDisplay, Autocomplete, Avatar, AvatarGroup, Chip, CircularProgressBar, CloudflareLogo, ColorSample, DataGrid, DatePicker, DoubleTextInput, EmailsDisplay, ExpandableList, JsonDisplay, Label, Link, LinkChip, LinksDisplay, MenuItem, NotificationCounter, OverflowingText, PhonesDisplay, Pill, Rating, RecordBoard, SensitiveInput, Sidebar, Status, Table, TableOfContents, Tag, DeleteResource
 - **Display:** Badge, Breadcrumbs, Code, Collapsible, Empty, LayerCard, Meter, Text
 - **Feedback:** Banner, Loader, Toasty
 - **Action:** Button, ClipboardText