@cloudraker/reki 2.6.1 → 2.7.1

package/ai/component-registry.json

@@ -1,6 +1,100 @@
 {
   "version": "1.0.0",
   "components": {
+    "ActorDisplay": {
+      "name": "ActorDisplay",
+      "type": "component",
+      "description": "Renders an `actor` / created-by / owned-by value as an avatar followed by a name. Use for record authorship and assignee cells.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "name": {
+          "type": "string",
+          "required": true,
+          "description": "Display name of the actor (workspace member, system, or API)."
+        },
+        "avatarUrl": {
+          "type": "string | null",
+          "optional": true,
+          "description": "Avatar image URL. Falls back to the name's initial when absent."
+        },
+        "avatarSize": {
+          "type": "enum",
+          "optional": true,
+          "description": "Avatar size.",
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg",
+            "xl"
+          ]
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <ActorDisplay name=\"Jane Doe\" />\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <ActorDisplay name=\"Jane Doe\" avatarUrl=\"https://i.pravatar.cc/40?img=5\" />\n    </TooltipProvider>"
+      ],
+      "colors": [
+        "text-reki-default"
+      ]
+    },
+    "AddressInput": {
+      "name": "AddressInput",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "value": {
+          "type": "AddressValue",
+          "required": true,
+          "description": "Current address value."
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Disables all fields."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<AddressInput value={value} onChange={setValue} />"
+      ],
+      "colors": []
+    },
+    "ArrayDisplay": {
+      "name": "ArrayDisplay",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "values": {
+          "type": "string[]",
+          "required": true,
+          "description": "String values to render as chips."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <div className=\"w-48\">\n        <ArrayDisplay values={[\"alpha\", \"beta\", \"gamma\", \"delta\"]} max={2} />\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": []
+    },
     "Autocomplete": {
       "name": "Autocomplete",
       "type": "component",
@@ -166,6 +260,110 @@
         }
       }
     },
+    "Avatar": {
+      "name": "Avatar",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "initials": {
+          "type": "string",
+          "optional": true,
+          "description": "Up to ~2 characters shown when there is no image."
+        },
+        "alt": {
+          "type": "string",
+          "optional": true,
+          "description": "Accessible name / image alt text."
+        },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Glyph scale.",
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg",
+            "xl"
+          ],
+          "descriptions": {
+            "xs": "Extra small",
+            "sm": "Small",
+            "base": "Default",
+            "lg": "Large",
+            "xl": "Extra large"
+          },
+          "classes": {
+            "xs": "size-5",
+            "sm": "size-6",
+            "base": "size-8",
+            "lg": "size-10",
+            "xl": "size-12"
+          },
+          "default": "base"
+        },
+        "shape": {
+          "type": "enum",
+          "optional": true,
+          "description": "Round (default) or rounded-square.",
+          "values": [
+            "circle",
+            "square"
+          ],
+          "descriptions": {
+            "circle": "Round avatar",
+            "square": "Rounded square avatar"
+          },
+          "classes": {
+            "circle": "rounded-full",
+            "square": "rounded-md"
+          },
+          "default": "circle"
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex items-center gap-2\">\n      <Avatar initials=\"XS\" size=\"xs\" />\n      <Avatar initials=\"SM\" size=\"sm\" />\n      <Avatar initials=\"MD\" size=\"base\" />\n      <Avatar initials=\"LG\" size=\"lg\" />\n      <Avatar initials=\"XL\" size=\"xl\" />\n    </div>",
+        "<div className=\"flex items-center gap-2\">\n      <Avatar initials=\"JD\" shape=\"circle\" />\n      <Avatar initials=\"JD\" shape=\"square\" />\n    </div>",
+        "<Avatar\n      src=\"https://i.pravatar.cc/80?img=12\"\n      alt=\"Jane Doe\"\n      size=\"lg\"\n    />"
+      ],
+      "colors": [
+        "bg-reki-fill"
+      ]
+    },
+    "AvatarGroup": {
+      "name": "AvatarGroup",
+      "type": "component",
+      "description": "Overlapping stack of avatars for assignees / participants. Shows up to `max` avatars and a `+N` counter for the remainder.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "avatars": {
+          "type": "ReactNode[]",
+          "required": true,
+          "description": "Avatar nodes to stack (typically reki `Avatar` elements)."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<AvatarGroup\n      max={4}\n      avatars={members.map((initials) => (\n        <Avatar key={initials} initials={initials} size=\"sm\" />\n      ))}\n    />"
+      ],
+      "colors": [
+        "bg-reki-fill",
+        "ring-reki-base",
+        "text-reki-subtle"
+      ]
+    },
     "Badge": {
       "name": "Badge",
       "type": "component",
@@ -534,10 +732,10 @@
             "lg": "Large button for primary CTAs"
           },
           "classes": {
-            "xs": "h-5 gap-1 rounded-sm px-1.5 text-xs",
-            "sm": "h-6.5 gap-1 rounded-md px-2 text-xs",
-            "base": "h-9 gap-1.5 rounded-lg px-3 text-base",
-            "lg": "h-10 gap-2 rounded-lg px-4 text-base"
+            "xs": "h-5 gap-1 rounded-full px-1.5 text-xs",
+            "sm": "h-6.5 gap-1 rounded-full px-2 text-xs",
+            "base": "h-9 gap-1.5 rounded-full px-3 text-base",
+            "lg": "h-10 gap-2 rounded-full px-4 text-base"
           },
           "default": "base"
         },
@@ -886,6 +1084,135 @@
         ]
       }
     },
+    "Chip": {
+      "name": "Chip",
+      "type": "component",
+      "description": "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}.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "label": {
+          "type": "string",
+          "required": true,
+          "description": "Text label (truncated with a tooltip on overflow)."
+        },
+        "tooltipLabel": {
+          "type": "string",
+          "optional": true,
+          "description": "Tooltip content shown when the label overflows. Defaults to `label`."
+        },
+        "variant": {
+          "type": "enum",
+          "optional": true,
+          "description": "Visual variant.",
+          "values": [
+            "regular",
+            "highlighted",
+            "transparent",
+            "static"
+          ],
+          "default": "regular"
+        },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Size of the chip.",
+          "values": [
+            "small",
+            "large"
+          ],
+          "default": "small"
+        },
+        "accent": {
+          "type": "enum",
+          "optional": true,
+          "description": "Text emphasis. `\"secondary\"` renders muted, medium-weight text.",
+          "values": [
+            "primary",
+            "secondary"
+          ],
+          "default": "primary"
+        },
+        "isBold": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Renders the label in a medium font weight."
+        },
+        "leftComponent": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Node rendered before the label (e.g. an avatar or icon)."
+        },
+        "rightComponent": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Node rendered after the label (e.g. a remove button or count)."
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Disables the chip and dims it."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Chip label=\"Regular\" variant=\"regular\" />\n      <Chip label=\"Highlighted\" variant=\"highlighted\" />\n      <Chip label=\"Transparent\" variant=\"transparent\" />\n      <Chip label=\"Static\" variant=\"static\" />\n    </div>",
+        "<div className=\"flex items-center gap-2\">\n      <Chip label=\"Small\" size=\"small\" />\n      <Chip label=\"Large\" size=\"large\" />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Chip\n        label=\"Acme Inc.\"\n        leftComponent={<BuildingsIcon className=\"size-3.5\" />}\n      />\n      <Chip\n        label=\"Removable\"\n        rightComponent={<XIcon className=\"size-3\" />}\n        onClick={() => {}}\n      />\n    </div>",
+        "<Chip label=\"Disabled\" onClick={() => {}} disabled />",
+        "<TooltipProvider>\n      <div className=\"w-32\">\n        <Chip label=\"A very long related record name that truncates\" />\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": [
+        "bg-reki-base",
+        "bg-reki-fill",
+        "ring-reki-hairline",
+        "text-reki-default",
+        "text-reki-subtle"
+      ],
+      "baseStyles": "inline-flex w-fit min-w-0 max-w-full items-center gap-1 rounded-sm align-middle text-reki-default"
+    },
+    "CircularProgressBar": {
+      "name": "CircularProgressBar",
+      "type": "component",
+      "description": "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`.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "value": {
+          "type": "number",
+          "required": true,
+          "description": "Progress as a percentage (0–100)."
+        },
+        "size": {
+          "type": "number",
+          "optional": true,
+          "description": "Diameter in pixels."
+        },
+        "barWidth": {
+          "type": "number",
+          "optional": true,
+          "description": "Stroke width in pixels."
+        },
+        "label": {
+          "type": "string",
+          "optional": true,
+          "description": "Accessible label."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex items-center gap-4\">\n      <CircularProgressBar value={25} />\n      <CircularProgressBar value={60} />\n      <CircularProgressBar value={100} />\n    </div>"
+      ],
+      "colors": []
+    },
     "ClipboardText": {
       "name": "ClipboardText",
       "type": "component",
@@ -2339,38 +2666,99 @@
         }
       }
     },
-    "Combobox": {
-      "name": "Combobox",
+    "ColorSample": {
+      "name": "ColorSample",
       "type": "component",
-      "description": "Combobox — autocomplete input with filterable dropdown list.",
+      "description": "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.",
       "importPath": "@cloudraker/reki",
-      "category": "Input",
+      "category": "Other",
       "props": {
-        "size": {
+        "colorName": {
           "type": "enum",
-          "optional": true,
-          "description": "Size of the combobox trigger. Matches Input component sizes.\n- `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n- `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n- `\"base\"` — Default size (h-9 / 36px)\n- `\"lg\"` — Large for prominent fields (h-10 / 40px)",
+          "required": true,
+          "description": "Named CRM tag color to display.",
           "values": [
-            "xs",
-            "sm",
-            "base",
-            "lg"
-          ],
-          "default": "base"
+            "gray",
+            "red",
+            "orange",
+            "yellow",
+            "green",
+            "turquoise",
+            "sky",
+            "blue",
+            "purple",
+            "pink",
+            "transparent"
+          ]
         },
-        "inputSide": {
+        "variant": {
           "type": "enum",
           "optional": true,
-          "description": "Position of the text input relative to chips in multi-select mode.\n- `\"right\"` — Input inline to the right of chips\n- `\"top\"` — Input above chips",
+          "description": "Swatch shape.\n- `\"default\"` — small rounded square (default)\n- `\"circle\"` — full circle\n- `\"pipeline\"` — wider rounded bar (for pipeline/stage pickers)",
           "values": [
-            "right",
-            "top"
+            "default",
+            "circle",
+            "pipeline"
           ],
           "descriptions": {
-            "right": "Input positioned inline to the right of chips",
-            "top": "Input positioned above chips"
+            "default": "Rounded square (default)",
+            "circle": "Circle",
+            "pipeline": "Wide pipeline bar"
           },
-          "default": "right"
+          "classes": {
+            "default": "size-3.5 rounded-sm",
+            "circle": "size-3.5 rounded-full",
+            "pipeline": "h-3.5 w-6 rounded-sm"
+          },
+          "default": "default"
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      {TAG_COLOR_NAMES.map((color) => (\n        <ColorSample key={color} colorName={color} />\n      ))}\n    </div>",
+        "<div className=\"flex items-center gap-3\">\n      <ColorSample colorName=\"blue\" variant=\"default\" />\n      <ColorSample colorName=\"blue\" variant=\"circle\" />\n      <ColorSample colorName=\"blue\" variant=\"pipeline\" />\n    </div>",
+        "<div className=\"flex w-48 flex-col gap-1\">\n      {([\"green\", \"orange\", \"red\"] as const).map((color) => (\n        <div key={color} className=\"flex items-center gap-2\">\n          <ColorSample colorName={color} variant=\"circle\" />\n          <span className=\"text-sm capitalize text-reki-default\">{color}</span>\n        </div>\n      ))}\n    </div>"
+      ],
+      "colors": [
+        "ring-reki-hairline"
+      ]
+    },
+    "Combobox": {
+      "name": "Combobox",
+      "type": "component",
+      "description": "Combobox — autocomplete input with filterable dropdown list.",
+      "importPath": "@cloudraker/reki",
+      "category": "Input",
+      "props": {
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Size of the combobox trigger. Matches Input component sizes.\n- `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n- `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n- `\"base\"` — Default size (h-9 / 36px)\n- `\"lg\"` — Large for prominent fields (h-10 / 40px)",
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "default": "base"
+        },
+        "inputSide": {
+          "type": "enum",
+          "optional": true,
+          "description": "Position of the text input relative to chips in multi-select mode.\n- `\"right\"` — Input inline to the right of chips\n- `\"top\"` — Input above chips",
+          "values": [
+            "right",
+            "top"
+          ],
+          "descriptions": {
+            "right": "Input positioned inline to the right of chips",
+            "top": "Input positioned above chips"
+          },
+          "default": "right"
         },
         "items": {
           "type": "T[]",
@@ -2617,6 +3005,53 @@
         "text-reki-subtle"
       ]
     },
+    "DataGrid": {
+      "name": "DataGrid",
+      "type": "component",
+      "description": "DataGrid component",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "kind": {
+          "type": "enum",
+          "required": true,
+          "values": [
+            "text",
+            "number"
+          ]
+        },
+        "initialValue": {
+          "type": "unknown",
+          "required": true
+        },
+        "initialKey": {
+          "type": "string",
+          "optional": true
+        },
+        "align": {
+          "type": "enum",
+          "required": true,
+          "values": [
+            "left",
+            "right",
+            "center"
+          ]
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <div className=\"w-[720px]\">\n        <DataGrid\n          data={rows}\n          columns={columns}\n          getRowId={(r) => r.id}\n          height={360}\n          enableRowSelection\n          selectedRowIds={selected}\n          onSelectedRowIdsChange={setSelected}\n          onCommitCell={({ rowId, columnId, value }) =>\n            setRows((rs) =>\n              rs.map((r) => (r.id === rowId ? { ...r, [columnId]: value } : r)),\n            )\n          }\n        />\n        <p className=\"mt-2 text-xs text-reki-subtle\">\n          500 rows (virtualized) · {selected.length} selected · double-click\n          Amount/Owner to edit\n        </p>\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": [
+        "bg-reki-base",
+        "bg-reki-canvas",
+        "bg-reki-fill",
+        "border-reki-hairline",
+        "outline-reki-brand",
+        "outline-reki-hairline",
+        "text-reki-default",
+        "text-reki-subtle"
+      ]
+    },
     "DatePicker": {
       "name": "DatePicker",
       "type": "component",
@@ -2930,6 +3365,44 @@
         }
       }
     },
+    "DoubleTextInput": {
+      "name": "DoubleTextInput",
+      "type": "component",
+      "description": "Two side-by-side text inputs that edit a single composite value — full names (first / last) and other paired fields.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "value": {
+          "type": "DoubleTextValue",
+          "required": true,
+          "description": "Current paired value."
+        },
+        "firstPlaceholder": {
+          "type": "string",
+          "optional": true,
+          "description": "Placeholder for the first input."
+        },
+        "secondPlaceholder": {
+          "type": "string",
+          "optional": true,
+          "description": "Placeholder for the second input."
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Disables both inputs."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"w-72\">\n      <DoubleTextInput\n        value={value}\n        onChange={setValue}\n        firstPlaceholder=\"First name\"\n        secondPlaceholder=\"Last name\"\n      />\n    </div>"
+      ],
+      "colors": []
+    },
     "DropdownMenu": {
       "name": "DropdownMenu",
       "type": "component",
@@ -3211,6 +3684,29 @@
         }
       }
     },
+    "EmailsDisplay": {
+      "name": "EmailsDisplay",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "emails": {
+          "type": "string[]",
+          "required": true,
+          "description": "Email addresses, primary first."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <div className=\"w-56\">\n        <EmailsDisplay\n          emails={[\"jane@acme.com\", \"j.doe@personal.com\", \"jane@old.com\"]}\n          max={1}\n        />\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": []
+    },
     "Empty": {
       "name": "Empty",
       "type": "component",
@@ -3290,6 +3786,32 @@
         "text-reki-success"
       ]
     },
+    "ExpandableList": {
+      "name": "ExpandableList",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Items to render. The first `max` are shown inline; the rest collapse into a `+N` chip."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <div className=\"w-48\">\n        <ExpandableList max={2}>\n          <Tag color=\"blue\" text=\"Engineering\" />\n          <Tag color=\"green\" text=\"Sales\" />\n          <Tag color=\"orange\" text=\"Support\" />\n          <Tag color=\"purple\" text=\"Finance\" />\n        </ExpandableList>\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": [
+        "bg-reki-fill",
+        "text-reki-subtle"
+      ]
+    },
     "Field": {
       "name": "Field",
       "type": "component",
@@ -3778,6 +4300,31 @@
         }
       }
     },
+    "JsonDisplay": {
+      "name": "JsonDisplay",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "value": {
+          "type": "unknown",
+          "required": true,
+          "description": "Value to render. Objects/arrays are stringified; strings are shown as-is."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <div className=\"w-56 rounded-md border border-reki-fill p-2\">\n        <JsonDisplay value={{ status: \"ok\", count: 3, nested: { a: 1 } }} />\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": [
+        "text-reki-subtle"
+      ]
+    },
     "Label": {
       "name": "Label",
       "type": "component",
@@ -4029,6 +4576,105 @@
         }
       }
     },
+    "LinkChip": {
+      "name": "LinkChip",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "label": {
+          "type": "string",
+          "required": true,
+          "description": "Text label (truncated with a tooltip on overflow)."
+        },
+        "href": {
+          "type": "string",
+          "required": true,
+          "description": "Destination href. Resolved through the configured `LinkProvider`."
+        },
+        "tooltipLabel": {
+          "type": "string",
+          "optional": true,
+          "description": "Tooltip content shown when the label overflows. Defaults to `label`."
+        },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Size of the chip.",
+          "values": [
+            "small",
+            "large"
+          ]
+        },
+        "accent": {
+          "type": "enum",
+          "optional": true,
+          "description": "Text emphasis.",
+          "values": [
+            "primary",
+            "secondary"
+          ]
+        },
+        "isBold": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Renders the label in a medium font weight."
+        },
+        "leftComponent": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Node rendered before the label (e.g. an avatar or icon)."
+        },
+        "rightComponent": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Node rendered after the label."
+        },
+        "target": {
+          "type": "string",
+          "optional": true,
+          "description": "Opens the link in a new tab."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<LinkChip label=\"Acme Inc.\" href=\"/companies/acme\" />",
+        "<LinkChip\n      label=\"Acme Inc.\"\n      href=\"/companies/acme\"\n      leftComponent={<BuildingsIcon className=\"size-3.5\" />}\n    />",
+        "<div className=\"flex items-center gap-2\">\n      <LinkChip label=\"Small\" href=\"#\" size=\"small\" />\n      <LinkChip label=\"Large\" href=\"#\" size=\"large\" />\n    </div>"
+      ],
+      "colors": [
+        "bg-reki-fill",
+        "text-reki-subtle"
+      ]
+    },
+    "LinksDisplay": {
+      "name": "LinksDisplay",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "links": {
+          "type": "LinkValue[]",
+          "required": true,
+          "description": "Links to render, primary first."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <div className=\"w-56\">\n        <LinksDisplay\n          links={[\n            { url: \"https://acme.com\", label: \"acme.com\" },\n            { url: \"https://docs.acme.com\", label: \"docs.acme.com\" },\n          ]}\n          max={1}\n        />\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": []
+    },
     "Loader": {
       "name": "Loader",
       "type": "component",
@@ -4121,6 +4767,72 @@
         }
       }
     },
+    "MenuItem": {
+      "name": "MenuItem",
+      "type": "component",
+      "description": "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}.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "text": {
+          "type": "string",
+          "required": true,
+          "description": "Row label."
+        },
+        "LeftIcon": {
+          "type": "IconType",
+          "optional": true,
+          "description": "Optional leading icon."
+        },
+        "leftComponent": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Optional leading element (avatar, color sample, …) shown before the text."
+        },
+        "rightComponent": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Optional trailing element shown after the text."
+        },
+        "selected": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Shows a trailing check mark when true."
+        },
+        "focused": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Keyboard-focused / active styling."
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Disables the row."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<LayerCard className=\"w-56 p-1\">\n      <MenuItem text=\"Rename\" LeftIcon={PencilIcon} />\n      <MenuItem text=\"Delete\" LeftIcon={TrashIcon} />\n    </LayerCard>",
+        "<LayerCard className=\"w-56 p-1\">\n      {[\"low\", \"medium\", \"high\"].map((option) => (\n        <MenuItemSelect\n          key={option}\n          text={option}\n          selected={value === option}\n          onClick={() => setValue(option)}\n        />\n      ))}\n    </LayerCard>",
+        "<LayerCard className=\"w-56 p-1\">\n      {[\"sales\", \"marketing\", \"support\"].map((option) => (\n        <MenuItemMultiSelect\n          key={option}\n          text={option}\n          selected={selected.includes(option)}\n          onSelectChange={() => toggle(option)}\n        />\n      ))}\n    </LayerCard>",
+        "<LayerCard className=\"w-56 p-1\">\n      <MenuItemSelectColor text=\"Green\" color=\"green\" selected />\n      <MenuItemSelectColor text=\"Blue\" color=\"blue\" />\n      <MenuItemSelectColor text=\"Purple\" color=\"purple\" />\n    </LayerCard>",
+        "<LayerCard className=\"w-56 p-1\">\n      <MenuItemSelectTag text=\"Active\" color=\"green\" selected />\n      <MenuItemSelectTag text=\"Pending\" color=\"orange\" />\n      <MenuItemSelectTag text=\"Closed\" color=\"gray\" />\n    </LayerCard>",
+        "<LayerCard className=\"w-56 p-1\">\n      <MenuItemAvatar text=\"Jane Doe\" avatarInitials=\"JD\" selected />\n      <MenuItemAvatar text=\"John Smith\" avatarInitials=\"JS\" />\n    </LayerCard>"
+      ],
+      "colors": [
+        "bg-reki-brand",
+        "bg-reki-fill",
+        "ring-reki-brand",
+        "ring-reki-hairline",
+        "text-reki-default",
+        "text-reki-inverse",
+        "text-reki-subtle"
+      ]
+    },
     "Meter": {
       "name": "Meter",
       "type": "component",
@@ -4161,24 +4873,110 @@
           "type": "number",
           "description": "Maximum value of the meter (default: 100)"
         },
-        "min": {
-          "type": "number",
-          "description": "Minimum value of the meter (default: 0)"
+        "min": {
+          "type": "number",
+          "description": "Minimum value of the meter (default: 0)"
+        }
+      },
+      "examples": [
+        "<Meter label=\"Storage used\" value={65} />",
+        "<Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />",
+        "<Meter label=\"Progress\" value={40} showValue={false} />",
+        "<Meter label=\"Quota reached\" value={100} />",
+        "<Meter label=\"Memory usage\" value={15} />",
+        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-reki-success via-reki-success to-reki-success\"\n    />"
+      ],
+      "colors": [
+        "bg-reki-fill",
+        "text-reki-default",
+        "text-reki-subtle"
+      ]
+    },
+    "NotificationCounter": {
+      "name": "NotificationCounter",
+      "type": "component",
+      "description": "A small numeric badge for unread/pending counts on icons and nav items.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "count": {
+          "type": "number",
+          "required": true,
+          "description": "Number to display. Values above `max` render as `{max}+`."
+        },
+        "variant": {
+          "type": "enum",
+          "optional": true,
+          "description": "Visual variant.\n- `\"primary\"` — brand background (default)\n- `\"secondary\"` — neutral fill",
+          "values": [
+            "primary",
+            "secondary"
+          ],
+          "descriptions": {
+            "primary": "Brand background (default)",
+            "secondary": "Neutral fill"
+          },
+          "classes": {
+            "primary": "bg-reki-brand text-reki-inverse",
+            "secondary": "bg-reki-fill text-reki-default"
+          },
+          "default": "primary"
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex items-center gap-3\">\n      <NotificationCounter count={3} />\n      <NotificationCounter count={12} variant=\"secondary\" />\n      <NotificationCounter count={150} max={99} />\n    </div>"
+      ],
+      "colors": [
+        "bg-reki-brand",
+        "bg-reki-fill",
+        "text-reki-default",
+        "text-reki-inverse"
+      ]
+    },
+    "OverflowingText": {
+      "name": "OverflowingText",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "text": {
+          "type": "string",
+          "required": true,
+          "description": "Text to render, truncated when it overflows its container."
+        },
+        "tooltipContent": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Tooltip content shown when the text overflows. Defaults to `text`. Provide a custom node to show richer content than the raw string."
+        },
+        "lines": {
+          "type": "number",
+          "optional": true,
+          "description": "Maximum number of lines before clamping. `1` (default) truncates to a single line with an ellipsis; higher values clamp to that many lines."
+        },
+        "alwaysShowTooltip": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Always show the tooltip on hover, even when the text is not overflowing."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
         }
       },
       "examples": [
-        "<Meter label=\"Storage used\" value={65} />",
-        "<Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />",
-        "<Meter label=\"Progress\" value={40} showValue={false} />",
-        "<Meter label=\"Quota reached\" value={100} />",
-        "<Meter label=\"Memory usage\" value={15} />",
-        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-reki-success via-reki-success to-reki-success\"\n    />"
+        "<TooltipProvider>\n      <div className=\"w-40 rounded-md border border-reki-fill p-2\">\n        <OverflowingText text=\"This label is far too long to fit in its container — hover to see the full value in a tooltip.\" />\n      </div>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"w-40 rounded-md border border-reki-fill p-2\">\n        <OverflowingText text=\"Short value\" />\n      </div>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"w-40 rounded-md border border-reki-fill p-2\">\n        <OverflowingText\n          lines={2}\n          text=\"A longer description that wraps onto two lines before it clamps with an ellipsis and reveals the rest on hover.\"\n        />\n      </div>\n    </TooltipProvider>"
       ],
-      "colors": [
-        "bg-reki-fill",
-        "text-reki-default",
-        "text-reki-subtle"
-      ]
+      "colors": []
     },
     "Pagination": {
       "name": "Pagination",
@@ -4352,6 +5150,60 @@
         }
       }
     },
+    "PhonesDisplay": {
+      "name": "PhonesDisplay",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "phones": {
+          "type": "string[]",
+          "required": true,
+          "description": "Pre-formatted phone numbers, primary first."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<TooltipProvider>\n      <div className=\"w-56\">\n        <PhonesDisplay\n          phones={[\"+1 415 555 0100\", \"+44 20 7946 0000\"]}\n          max={1}\n        />\n      </div>\n    </TooltipProvider>"
+      ],
+      "colors": []
+    },
+    "Pill": {
+      "name": "Pill",
+      "type": "component",
+      "description": "A tiny static label for inline annotations (counts, flags, hints). Smaller and quieter than {@link Tag} or {@link Badge}; not interactive.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "label": {
+          "type": "string",
+          "required": true,
+          "description": "Text label."
+        },
+        "icon": {
+          "type": "React.ComponentType<React.SVGProps<SVGSVGElement>>",
+          "optional": true,
+          "description": "Optional leading icon (phosphor or any SVG component)."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex items-center gap-2\">\n      <Pill label=\"3 records\" />\n      <Pill label=\"Beta\" icon={SparkleIcon} />\n    </div>"
+      ],
+      "colors": [
+        "bg-reki-fill",
+        "text-reki-subtle"
+      ]
+    },
     "Popover": {
       "name": "Popover",
       "type": "component",
@@ -4560,6 +5412,65 @@
         }
       }
     },
+    "Rating": {
+      "name": "Rating",
+      "type": "component",
+      "description": "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).",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "value": {
+          "type": "number | null",
+          "required": true,
+          "description": "Current rating (1..max), or `null` for unrated."
+        },
+        "readonly": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Renders as read-only (no hover/click)."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex flex-col gap-1\">\n      <Rating value={1} readonly />\n      <Rating value={3} readonly />\n      <Rating value={5} readonly />\n    </div>",
+        "<Rating value={value} onChange={setValue} />"
+      ],
+      "colors": [
+        "text-reki-default",
+        "text-reki-inactive"
+      ]
+    },
+    "RecordBoard": {
+      "name": "RecordBoard",
+      "type": "component",
+      "description": "RecordBoard component",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "className": {
+          "type": "string",
+          "description": "Additional CSS classes"
+        },
+        "children": {
+          "type": "ReactNode",
+          "description": "Child elements"
+        }
+      },
+      "examples": [
+        "<div className=\"h-[420px] w-[760px]\">\n      <RecordBoard\n        columns={STAGES}\n        records={opps}\n        getRecordId={(o) => o.id}\n        getColumnId={(o) => o.stage}\n        onMove={({ recordId, toColumnId }) =>\n          setOpps((rs) =>\n            rs.map((o) => (o.id === recordId ? { ...o, stage: toColumnId } : o)),\n          )\n        }\n        renderCard={(o) => (\n          <div className=\"flex flex-col gap-1.5\">\n            <span className=\"text-sm font-medium text-reki-default\">{o.name}</span>\n            <div className=\"flex items-center justify-between\">\n              <Tag color=\"gray\" text={`$${o.amount.toLocaleString()}`} />\n              <Avatar initials={o.owner} size=\"xs\" />\n            </div>\n          </div>\n        )}\n      />\n    </div>"
+      ],
+      "colors": [
+        "bg-reki-base",
+        "bg-reki-recessed",
+        "ring-reki-hairline",
+        "text-reki-default",
+        "text-reki-subtle"
+      ]
+    },
     "Select": {
       "name": "Select",
       "type": "component",
@@ -5393,6 +6304,55 @@
         }
       }
     },
+    "Status": {
+      "name": "Status",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "text": {
+          "type": "string",
+          "required": true,
+          "description": "Status label text."
+        },
+        "isLoaderVisible": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Shows an inline loader after the text (e.g. while a transition runs)."
+        },
+        "weight": {
+          "type": "enum",
+          "optional": true,
+          "description": "Font weight of the label.",
+          "values": [
+            "regular",
+            "medium"
+          ],
+          "descriptions": {
+            "regular": "Regular weight",
+            "medium": "Medium weight"
+          },
+          "classes": {
+            "medium": "font-medium"
+          },
+          "default": "regular"
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Status color=\"green\" text=\"Active\" />\n      <Status color=\"gray\" text=\"Inactive\" />\n      <Status color=\"red\" text=\"Blocked\" />\n      <Status color=\"blue\" text=\"In progress\" />\n      <Status color=\"purple\" text=\"Review\" />\n    </div>",
+        "<Status color=\"orange\" text=\"Syncing\" isLoaderVisible />",
+        "<Status color=\"green\" text=\"Active\" weight=\"medium\" />"
+      ],
+      "colors": [
+        "text-reki-subtle"
+      ]
+    },
     "Surface": {
       "name": "Surface",
       "type": "component",
@@ -5913,17 +6873,15 @@
         "<div className=\"space-y-4\">\n      <Tabs\n        tabs={[\n          { value: \"tab1\", label: \"Tab 1\" },\n          { value: \"tab2\", label: \"Tab 2\" },\n          { value: \"tab3\", label: \"Tab 3\" },\n        ]}\n        value={activeTab}\n        onValueChange={setActiveTab}\n      />\n      <p className=\"text-sm text-reki-subtle\">\n        Active tab: <code className=\"text-sm\">{activeTab}</code>\n      </p>\n    </div>",
         "<div className=\"w-full max-w-md\">\n      <Tabs\n        tabs={[\n          { value: \"overview\", label: \"Overview\" },\n          { value: \"analytics\", label: \"Analytics\" },\n          { value: \"reports\", label: \"Reports\" },\n          { value: \"notifications\", label: \"Notifications\" },\n          { value: \"settings\", label: \"Settings\" },\n          { value: \"billing\", label: \"Billing\" },\n          { value: \"security\", label: \"Security\" },\n          { value: \"integrations\", label: \"Integrations\" },\n        ]}\n        selectedValue=\"overview\"\n      />\n    </div>",
         "<div className=\"flex flex-col gap-6\">\n      <div>\n        <p className=\"mb-2 text-sm text-reki-subtle\">Segmented sm</p>\n        <Tabs\n          variant=\"segmented\"\n          size=\"sm\"\n          tabs={[\n            { value: \"tab1\", label: \"Tab 1\" },\n            { value: \"tab2\", label: \"Tab 2\" },\n            { value: \"tab3\", label: \"Tab 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm text-reki-subtle\">Underline sm</p>\n        <Tabs\n          variant=\"underline\"\n          size=\"sm\"\n          tabs={[\n            { value: \"tab1\", label: \"Tab 1\" },\n            { value: \"tab2\", label: \"Tab 2\" },\n            { value: \"tab3\", label: \"Tab 3\" },\n          ]}\n          selectedValue=\"tab1\"\n        />\n      </div>\n    </div>",
-        "<Tabs\n      tabs={[\n        {\n          value: \"tab1\",\n          label: \"Regular Tab\",\n        },\n        {\n          value: \"tab2\",\n          label: \"Link Tab\",\n          render: (props) => <a {...props} href=\"#tab2\" />,\n        },\n        {\n          value: \"tab3\",\n          label: \"Cloudflare\",\n          render: (props) => (\n            <a {...props} href=\"https://cloudflare.com\" target=\"_blank\" />\n          ),\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />"
+        "<Tabs\n      tabs={[\n        {\n          value: \"tab1\",\n          label: \"Regular Tab\",\n        },\n        {\n          value: \"tab2\",\n          label: \"Link Tab\",\n          // Anchor content is supplied by Tabs via the spread props at runtime.\n          // oxlint-disable-next-line anchor-has-content\n          render: (props) => <a {...props} href=\"#tab2\" />,\n        },\n        {\n          value: \"tab3\",\n          label: \"Cloudflare\",\n          render: (props) => (\n            // oxlint-disable-next-line anchor-has-content\n            <a {...props} href=\"https://cloudflare.com\" target=\"_blank\" />\n          ),\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />"
       ],
       "colors": [
         "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"
@@ -5952,6 +6910,104 @@
         }
       }
     },
+    "Tag": {
+      "name": "Tag",
+      "type": "component",
+      "description": "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.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "text": {
+          "type": "string",
+          "required": true,
+          "description": "Text label rendered inside the tag (truncated with a tooltip on overflow)."
+        },
+        "icon": {
+          "type": "React.ComponentType<React.SVGProps<SVGSVGElement>>",
+          "optional": true,
+          "description": "Optional leading icon (phosphor or any SVG component)."
+        },
+        "variant": {
+          "type": "enum",
+          "optional": true,
+          "description": "Visual style.\n- `\"solid\"` — subtle colored background (default)\n- `\"outline\"` — transparent background with a colored ring\n- `\"border\"` — subtle background with a matching colored ring",
+          "values": [
+            "solid",
+            "outline",
+            "border"
+          ],
+          "descriptions": {
+            "solid": "Subtle colored background (default)",
+            "outline": "Transparent background with a colored ring",
+            "border": "Subtle background with a matching ring"
+          },
+          "classes": {
+            "outline": "ring ring-inset ring-current/30",
+            "border": "ring ring-inset ring-current/30"
+          },
+          "default": "solid"
+        },
+        "weight": {
+          "type": "enum",
+          "optional": true,
+          "description": "Font weight of the label.\n- `\"regular\"` (default)\n- `\"medium\"`",
+          "values": [
+            "regular",
+            "medium"
+          ],
+          "descriptions": {
+            "regular": "Regular weight",
+            "medium": "Medium weight"
+          },
+          "classes": {
+            "medium": "font-medium"
+          },
+          "default": "regular"
+        },
+        "preventShrink": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Prevents the tag from shrinking inside flex containers."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      {TAG_COLOR_NAMES.map((color) => (\n        <Tag key={color} color={color} text={color} />\n      ))}\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Tag color=\"blue\" text=\"Solid\" variant=\"solid\" />\n      <Tag color=\"blue\" text=\"Outline\" variant=\"outline\" />\n      <Tag color=\"blue\" text=\"Border\" variant=\"border\" />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Tag color=\"green\" text=\"Active\" icon={CircleIcon} />\n      <Tag color=\"purple\" text=\"Assigned\" icon={UserIcon} />\n    </div>",
+        "<Tag color=\"transparent\" text=\"No color\" />",
+        "<div className=\"w-32\">\n      <Tag color=\"orange\" text=\"A very long tag label that will truncate\" />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      {labels.map((label) => (\n        <Tag key={label} color={stringToTagColor(label)} text={label} />\n      ))}\n    </div>"
+      ],
+      "colors": [
+        "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"
+      ],
+      "baseStyles": "inline-flex h-5 w-fit min-w-0 max-w-full items-center gap-1 rounded-sm px-1.5 text-xs whitespace-nowrap"
+    },
     "Text": {
       "name": "Text",
       "type": "component",
@@ -6106,6 +7162,105 @@
         }
       }
     },
+    "Timeline": {
+      "name": "Timeline",
+      "type": "component",
+      "description": "Timeline — presentational compound component for a Linear-style activity feed.",
+      "importPath": "@cloudraker/reki",
+      "category": "Other",
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "`Timeline.Item` elements."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes merged via `cn()`. Use reki semantic tokens only."
+        }
+      },
+      "examples": [
+        "<div className=\"w-[480px]\">\n      <Timeline>\n        <Timeline.Item isFirst nodeType=\"avatar\" avatar={{ name: \"Jane Doe\" }}>\n          <Timeline.Content>\n            <Timeline.Event actor=\"Jane Doe\" action=\"created the run\" timestamp=\"5d ago\" />\n          </Timeline.Content>\n        </Timeline.Item>\n        <Timeline.Item nodeType=\"status\" statusColor=\"green\">\n          <Timeline.Content>\n            <Timeline.Event actor=\"Florent\" action=\"moved to\" target=\"In Progress\" timestamp=\"3d ago\" />\n          </Timeline.Content>\n        </Timeline.Item>\n        <Timeline.Item nodeType=\"icon\" icon={GitBranchIcon}>\n          <Timeline.Content>\n            <Timeline.Event actor=\"Mo\" action=\"linked\" target=\"feat/timeline\" timestamp=\"2h ago\" />\n          </Timeline.Content>\n        </Timeline.Item>\n        <Timeline.Item isLast nodeType=\"icon\" icon={CheckCircleIcon}>\n          <Timeline.Content>\n            <Timeline.Event actor=\"Jane Doe\" action=\"completed\" target=\"Draft proposal\" timestamp=\"1h ago\" />\n          </Timeline.Content>\n        </Timeline.Item>\n      </Timeline>\n    </div>",
+        "<div className=\"w-[480px]\">\n      <Timeline>\n        <Timeline.Item isFirst nodeType=\"icon\" icon={UploadSimpleIcon}>\n          <Timeline.Content>\n            <Timeline.Event actor=\"Sam Lee\" action=\"uploaded 3 files\" timestamp=\"1d ago\" />\n          </Timeline.Content>\n        </Timeline.Item>\n        <Timeline.Item isLast variant=\"rich\" nodeType=\"avatar\" avatar={{ name: \"Sam Lee\" }}>\n          <Timeline.Content>\n            <Timeline.Event actor=\"Sam Lee\" action=\"commented\" timestamp=\"20m ago\" />\n            <Text size=\"sm\">Looks good — can we ship the muted state for upcoming tasks too?</Text>\n          </Timeline.Content>\n        </Timeline.Item>\n      </Timeline>\n    </div>",
+        "<div className=\"w-[480px]\">\n      <Timeline>\n        <Timeline.Item isFirst nodeType=\"status\" statusColor=\"blue\">\n          <Timeline.Content>\n            <Timeline.Event actor=\"Florent\" action=\"requested approval\" timestamp=\"just now\" />\n          </Timeline.Content>\n        </Timeline.Item>\n        <Timeline.Item isLast variant=\"rich\" tone=\"active\" nodeType=\"icon\" icon={PaperPlaneTiltIcon}>\n          <Timeline.Content>\n            <LayerCard>\n              <LayerCard.Primary>\n                <div className=\"flex flex-col gap-3\">\n                  <Text size=\"sm\">Approve budget increase?</Text>\n                  <div className=\"flex gap-2\">\n                    <Button size=\"sm\" variant=\"primary\">\n                      Approve\n                    </Button>\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Decline\n                    </Button>\n                  </div>\n                </div>\n              </LayerCard.Primary>\n            </LayerCard>\n          </Timeline.Content>\n        </Timeline.Item>\n      </Timeline>\n    </div>",
+        "<div className=\"w-[480px]\">\n      <Timeline>\n        <Timeline.Item isFirst nodeType=\"status\" statusColor=\"green\">\n          <Timeline.Content>\n            <Timeline.Event actor=\"Jane Doe\" action=\"kicked off onboarding\" timestamp=\"2d ago\" />\n          </Timeline.Content>\n        </Timeline.Item>\n        <Timeline.Item tone=\"muted\" nodeType=\"icon\" icon={CheckCircleIcon}>\n          <Timeline.Content>\n            <Timeline.Event actor=\"Review step\" action=\"starts after Onboarding\" />\n          </Timeline.Content>\n        </Timeline.Item>\n        <Timeline.Item isLast tone=\"muted\" nodeType=\"icon\" icon={CheckCircleIcon}>\n          <Timeline.Content>\n            <Timeline.Event actor=\"Sign-off\" action=\"starts after Review\" />\n          </Timeline.Content>\n        </Timeline.Item>\n      </Timeline>\n    </div>"
+      ],
+      "colors": [
+        "bg-reki-base",
+        "bg-reki-fill",
+        "bg-reki-hairline",
+        "ring-reki-brand",
+        "ring-reki-line",
+        "text-reki-brand",
+        "text-reki-default",
+        "text-reki-subtle"
+      ],
+      "subComponents": {
+        "Item": {
+          "name": "Item",
+          "description": "Item sub-component",
+          "props": {
+            "nodeType": {
+              "type": "NodeType",
+              "optional": true
+            },
+            "avatar": {
+              "type": "{ src?: string | null",
+              "optional": true
+            },
+            "name": {
+              "type": "string",
+              "required": true
+            }
+          }
+        },
+        "Content": {
+          "name": "Content",
+          "description": "Content sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Event": {
+          "name": "Event",
+          "description": "Event sub-component",
+          "props": {
+            "actor": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "action": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "target": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "timestamp": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "truncate": {
+              "type": "boolean",
+              "optional": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        }
+      }
+    },
     "Toasty": {
       "name": "Toasty",
       "type": "component",
@@ -6547,15 +7702,40 @@
   "search": {
     "byCategory": {
       "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",
+        "Timeline",
         "DeleteResource"
       ],
       "Display": [
@@ -6608,92 +7788,142 @@
       ]
     },
     "byName": [
+      "ActorDisplay",
+      "AddressInput",
+      "ArrayDisplay",
       "Autocomplete",
+      "Avatar",
+      "AvatarGroup",
       "Badge",
       "Banner",
       "Breadcrumbs",
       "Button",
       "Checkbox",
+      "Chip",
+      "CircularProgressBar",
       "ClipboardText",
       "CloudflareLogo",
       "Code",
       "Collapsible",
+      "ColorSample",
       "Combobox",
       "CommandPalette",
+      "DataGrid",
       "DatePicker",
       "DateRangePicker",
       "DeleteResource",
       "Dialog",
+      "DoubleTextInput",
       "DropdownMenu",
+      "EmailsDisplay",
       "Empty",
+      "ExpandableList",
       "Field",
       "Grid",
       "Input",
       "InputGroup",
+      "JsonDisplay",
       "Label",
       "LayerCard",
       "Link",
+      "LinkChip",
+      "LinksDisplay",
       "Loader",
       "MenuBar",
+      "MenuItem",
       "Meter",
+      "NotificationCounter",
+      "OverflowingText",
       "PageHeader",
       "Pagination",
+      "PhonesDisplay",
+      "Pill",
       "Popover",
       "Radio",
+      "Rating",
+      "RecordBoard",
       "ResourceListPage",
       "Select",
       "SensitiveInput",
       "Sidebar",
+      "Status",
       "Surface",
       "Switch",
       "Table",
       "TableOfContents",
       "Tabs",
+      "Tag",
       "Text",
+      "Timeline",
       "Toasty",
       "Tooltip"
     ],
     "byType": {
       "component": [
+        "ActorDisplay",
+        "AddressInput",
+        "ArrayDisplay",
         "Autocomplete",
+        "Avatar",
+        "AvatarGroup",
         "Badge",
         "Banner",
         "Breadcrumbs",
         "Button",
         "Checkbox",
+        "Chip",
+        "CircularProgressBar",
         "ClipboardText",
         "CloudflareLogo",
         "Code",
         "Collapsible",
+        "ColorSample",
         "Combobox",
         "CommandPalette",
+        "DataGrid",
         "DatePicker",
         "DateRangePicker",
         "Dialog",
+        "DoubleTextInput",
         "DropdownMenu",
+        "EmailsDisplay",
         "Empty",
+        "ExpandableList",
         "Field",
         "Grid",
         "Input",
         "InputGroup",
+        "JsonDisplay",
         "Label",
         "LayerCard",
         "Link",
+        "LinkChip",
+        "LinksDisplay",
         "Loader",
         "MenuBar",
+        "MenuItem",
         "Meter",
+        "NotificationCounter",
+        "OverflowingText",
         "Pagination",
+        "PhonesDisplay",
+        "Pill",
         "Popover",
         "Radio",
+        "Rating",
+        "RecordBoard",
         "Select",
         "SensitiveInput",
         "Sidebar",
+        "Status",
         "Surface",
         "Switch",
         "Table",
         "TableOfContents",
         "Tabs",
+        "Tag",
         "Text",
+        "Timeline",
         "Toasty",
         "Tooltip"
       ],