@webority/ui-react 0.107.0 → 0.108.1

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.107.0"
+    "version": "0.108.1"
   },
   "rendererProtocolVersion": 12,
   "platform": "Web",
@@ -664,7 +664,7 @@
           },
           {
             "text": "The empty body of a data table specifically.",
-            "instead": "AppTableEmptyState"
+            "instead": "AppEmptyState variant=\"table\""
           },
           {
             "text": "The whole app is booting, not one screen.",
@@ -1189,7 +1189,7 @@
           },
           {
             "text": "You are showing a company logo.",
-            "instead": "AppLogoPicker"
+            "instead": "AppImagePicker"
           }
         ],
         "do": [
@@ -1332,182 +1332,6 @@
         ]
       }
     },
-    {
-      "name": "AppAvatarPicker",
-      "marker": "AppAvatarPicker",
-      "acceptsChildren": false,
-      "props": [
-        {
-          "name": "accept",
-          "type": "string",
-          "required": false,
-          "description": "The file types a person may choose. Defaults to JPG, PNG, WebP and HEIC; HEIC opens only where the browser can decode it."
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "The accessible name of the photo button. Defaults to the words of the action."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Extra class on the picker (the photo and its actions).",
-          "default": ""
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Blocks every action.",
-          "default": false
-        },
-        {
-          "name": "error",
-          "type": "string",
-          "required": false,
-          "description": "An error message shown below the picker. It wins over a rejection reason."
-        },
-        {
-          "name": "fieldClassName",
-          "type": "string",
-          "required": false,
-          "description": "Extra class on the field wrapper.",
-          "default": ""
-        },
-        {
-          "name": "hint",
-          "type": "string",
-          "required": false,
-          "description": "Help text shown below the picker. An error replaces it."
-        },
-        {
-          "name": "initials",
-          "type": "string",
-          "required": false,
-          "description": "Shown when there is no photo. A person icon shows when it is empty."
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "required": false,
-          "description": "The text shown above the picker."
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false,
-          "description": "Shows a spinner on the photo and blocks every action while a photo uploads.",
-          "default": false
-        },
-        {
-          "name": "maxSizeMb",
-          "type": "number",
-          "required": false,
-          "description": "The size limit of the chosen photo in megabytes. 0 means no limit.",
-          "default": 10
-        },
-        {
-          "name": "name",
-          "type": "string",
-          "required": false,
-          "description": "The form field name. The cropped photo is written into the file input, so an uncontrolled form posts it."
-        },
-        {
-          "name": "outputSize",
-          "type": "number",
-          "required": false,
-          "description": "The width and height of the saved square, in pixels.",
-          "default": 512
-        },
-        {
-          "name": "removeName",
-          "type": "string",
-          "required": false,
-          "description": "A form field that posts true once Remove is pressed. It also shows Remove while there is a photo."
-        },
-        {
-          "name": "required",
-          "type": "boolean",
-          "required": false,
-          "description": "Marks the field as required.",
-          "default": false
-        },
-        {
-          "name": "size",
-          "type": "enumOrNumber",
-          "enum": [
-            "lg",
-            "md",
-            "sm"
-          ],
-          "required": false,
-          "description": "The photo diameter: sm, md or lg, or a number of pixels.",
-          "default": "md"
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "nullable": true,
-          "description": "The current photo URL, or null when there is none."
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "A person sets their own profile photo.",
-          "An admin sets a staff member's photo on their record."
-        ],
-        "whenNot": [
-          {
-            "text": "A company or workspace logo, which is often not square.",
-            "instead": "AppLogoPicker"
-          },
-          {
-            "text": "Documents or other files.",
-            "instead": "AppFileAttachment"
-          }
-        ],
-        "do": [
-          {
-            "note": "Say what a good photo is. People crop better when they know.",
-            "example": [
-              {
-                "component": "AppAvatarPicker",
-                "props": {
-                  "initials": "NS",
-                  "label": "Profile photo",
-                  "hint": "Your face, looking at the camera."
-                }
-              }
-            ]
-          }
-        ],
-        "dont": [
-          {
-            "note": "A tiny, disabled picker with no label. Nobody can tell it sets their photo.",
-            "example": [
-              {
-                "component": "AppAvatarPicker",
-                "props": {
-                  "initials": "NS",
-                  "size": "sm",
-                  "disabled": true
-                }
-              }
-            ]
-          }
-        ],
-        "a11y": [
-          "The photo button is named by ariaLabel, else by the action's words (Choose or Change photo), and is described by the error, else the hint.",
-          "The photo button sits out of the tab order and reports busy while loading; the Upload button beside it is the keyboard path to the same action."
-        ]
-      }
-    },
     {
       "name": "AppBadge",
       "marker": "AppBadge",
@@ -2095,7 +1919,8 @@
         "when": [
           "The user performs an action: submit, save, open a dialog, confirm.",
           "You need to mark the single most important action on a screen (one primary).",
-          "A destructive action needs to stand out (danger): pair it with a confirm dialog."
+          "A destructive action needs to stand out (danger): pair it with a confirm dialog.",
+          "A form's submit button takes loading from the mutation state; that also blocks a second press."
         ],
         "whenNot": [
           {
@@ -5384,6 +5209,17 @@
           "name": "columns",
           "type": "array",
           "itemFields": [
+            {
+              "name": "align",
+              "type": "enum",
+              "enum": [
+                "center",
+                "start"
+              ],
+              "required": false,
+              "description": "start or center: center suits a column of ticks and short answers.",
+              "default": "start"
+            },
             {
               "name": "highlight",
               "type": "boolean",
@@ -5395,15 +5231,49 @@
               "type": "string",
               "required": true,
               "description": "The column heading; empty for the capability-name column."
+            },
+            {
+              "name": "nowrap",
+              "type": "boolean",
+              "required": false,
+              "description": "Keeps the column's cells on one line."
             }
           ],
           "required": true,
           "description": "The columns, including the leading capability-name column, whose label is normally empty."
         },
+        {
+          "name": "density",
+          "type": "enum",
+          "enum": [
+            "comfortable",
+            "relaxed"
+          ],
+          "required": false,
+          "description": "relaxed sets a 16px body and 32px side padding for marketing tables.",
+          "default": "comfortable"
+        },
+        {
+          "name": "mobile",
+          "type": "enum",
+          "enum": [
+            "scroll",
+            "stack"
+          ],
+          "required": false,
+          "description": "Under 576px of table width: stack (default) turns each row into a card; scroll keeps the columns and scrolls sideways.",
+          "default": "stack"
+        },
         {
           "name": "rows",
           "type": "array",
           "itemFields": [
+            {
+              "name": "group",
+              "type": "string",
+              "required": false,
+              "description": "A heading drawn above the first row of each run of rows that share it."
+            },
             {
               "name": "key",
               "type": "string",
@@ -5420,11 +5290,25 @@
               "name": "values",
               "type": "array",
               "required": true,
-              "description": "One cell per column after the first: true shows a tick, false a dash, anything else shows as written."
+              "description": "One cell per column after the first: true shows a tick, false a dash, { state, text } shows a state icon beside its text (yes, no, warn or partial), { code } shows a reference code, anything else shows as written."
             }
           ],
           "required": true,
           "description": "One row per capability."
+        },
+        {
+          "name": "stickyFirstColumn",
+          "type": "boolean",
+          "required": false,
+          "description": "With mobile scroll: the first column stays in place while the rest scrolls.",
+          "default": false
+        },
+        {
+          "name": "stickyHeader",
+          "type": "boolean",
+          "required": false,
+          "description": "The header row stays on screen while a long table scrolls past it.",
+          "default": false
         }
       ],
       "itemsTakeAction": [],
@@ -5447,7 +5331,7 @@
           },
           {
             "text": "It is a list of facts about one thing.",
-            "instead": "AppInfoList"
+            "instead": "AppDescriptions"
           }
         ],
         "do": [
@@ -5487,7 +5371,7 @@
         ],
         "dont": [
           {
-            "note": "Two highlighted columns highlight neither; internal jargon in the row label; and hand-typed dashes and Y instead of booleans lose the tick's shape cue.",
+            "note": "Two highlighted columns both tint, so no option reads as the recommendation; internal jargon in the row label; and hand-typed dashes and Y instead of booleans lose the tick's shape cue.",
             "example": [
               {
                 "component": "AppCompareTable",
@@ -5524,7 +5408,10 @@
         "a11y": [
           "The caption prop is a visually hidden table caption, read by a screen reader before the table.",
           "Column headings are th elements with scope col.",
-          "Each row label is a th element with scope row."
+          "Each row label is a th element with scope row.",
+          "Each cell repeats its column name in data-label, so a stacked phone card reads the same as the table.",
+          "A state's icon is hidden from screen readers; its state is spoken as a hidden prefix such as Yes or Warning.",
+          "With mobile scroll, the scrolling region is focusable and named by the caption."
         ]
       }
     },
@@ -5696,7 +5583,7 @@
           },
           {
             "text": "You're confirming across a slide-in panel of options.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppDrawer"
           }
         ],
         "do": [
@@ -5867,6 +5754,9 @@
           },
           {
             "text": "You are building the Razor head include that loads the tags and the consent record (the app-analytics-head tag)."
+          },
+          {
+            "text": "You are starting analytics or tags by hand beside the banner. The choice saved through initConsent decides which analytics start: the analytics category turns PostHog capture and Clarity on, and Consent Mode holds Tag Manager's tags until analytics consent, or marketing consent when adStorage is on."
           }
         ],
         "do": [],
@@ -6823,7 +6713,7 @@
           },
           {
             "text": "The empty list deserves a rich call to action.",
-            "instead": "AppTableEmptyState (as empty)"
+            "instead": "AppEmptyState variant=\"table\" (as empty)"
           }
         ],
         "do": [
@@ -7302,7 +7192,8 @@
           "enum": [
             1,
             2,
-            3
+            3,
+            4
           ],
           "required": false,
           "description": "How many columns the grid should have, before the media-breakpoint collapse.",
@@ -7318,6 +7209,18 @@
               "required": false,
               "description": "Marks the total row: bold, with a rule above."
             },
+            {
+              "name": "href",
+              "type": "url",
+              "required": false,
+              "description": "Makes the value a link. Leave it out for a value that is not actionable."
+            },
+            {
+              "name": "icon",
+              "type": "icon",
+              "required": false,
+              "description": "A glyph in a 36px round tile before the label, by name or as a node."
+            },
             {
               "name": "key",
               "type": "string",
@@ -7332,12 +7235,7 @@
             },
             {
               "name": "span",
-              "type": "enum",
-              "enum": [
-                1,
-                2,
-                3
-              ],
+              "type": "number",
               "required": false,
               "description": "How many grid columns the item spans: 2 or 3 for a longer value."
             },
@@ -7356,10 +7254,11 @@
           "type": "enum",
           "enum": [
             "grid",
+            "list",
             "summary"
           ],
           "required": false,
-          "description": "summary puts each label left of its value, with tabular figures.",
+          "description": "summary puts each label left of its value, with tabular figures. list is one column of rows with a rule between them, a flush first and last row and a single-line value.",
           "default": "grid"
         },
         {
@@ -7380,7 +7279,9 @@
           "description": "Optional heading above the grid."
         }
       ],
-      "itemsTakeAction": [],
+      "itemsTakeAction": [
+        "items"
+      ],
       "takesAction": [],
       "source": "@webority/ui-react",
       "usage": {
@@ -7402,14 +7303,6 @@
           {
             "text": "You are listing many records.",
             "instead": "AppDataTable"
-          },
-          {
-            "text": "Each row has a leading icon and is actionable.",
-            "instead": "AppInfoList"
-          },
-          {
-            "text": "Values are facts without labels.",
-            "instead": "AppInfoList"
           }
         ],
         "do": [
@@ -7582,6 +7475,13 @@
           "required": false,
           "description": "The dialog's accessible name when there is no title."
         },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "description": "Classes on the scrolling body, such as p-0 to drop its padding.",
+          "default": ""
+        },
         {
           "name": "className",
           "type": "string",
@@ -7589,6 +7489,13 @@
           "description": "Extra classes on the drawer element.",
           "default": ""
         },
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "required": false,
+          "description": "The close button's accessible name, for other languages.",
+          "default": "Close"
+        },
         {
           "name": "confirmDiscard",
           "type": "string",
@@ -7622,6 +7529,18 @@
           "required": false,
           "description": "Pinned below the scrolling body."
         },
+        {
+          "name": "header",
+          "type": "node",
+          "required": false,
+          "description": "A custom header that replaces the default one (title, subtitle and close button)."
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "required": false,
+          "description": "Caps the panel's width, such as 600px. Unset, the theme caps it at 92vw."
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -7629,6 +7548,13 @@
           "description": "Whether the drawer is open. The caller owns it and closes it in onClose.",
           "default": false
         },
+        {
+          "name": "sheet",
+          "type": "boolean",
+          "required": false,
+          "description": "Below md the drawer is a bottom sheet that rests on snapPoints. false keeps the side panel at every width, for a menu or a filter panel.",
+          "default": true
+        },
         {
           "name": "side",
           "type": "enum",
@@ -7670,6 +7596,12 @@
           "description": "The backdrop, Escape and a drag down no longer close it; only the close button or open can.",
           "default": false
         },
+        {
+          "name": "style",
+          "type": "object",
+          "required": false,
+          "description": "Inline style on the drawer element."
+        },
         {
           "name": "subtitle",
           "type": "string",
@@ -7681,14 +7613,27 @@
           "type": "string",
           "required": false,
           "description": "The heading, and the dialog's accessible name."
-        }
-      ],
+        },
+        {
+          "name": "titleIcon",
+          "type": "icon",
+          "required": false,
+          "description": "Library icon beside the title."
+        },
+        {
+          "name": "width",
+          "type": "string",
+          "required": false,
+          "description": "The panel's CSS width, such as 420px. Overrides size."
+        }
+      ],
       "itemsTakeAction": [],
       "takesAction": [],
       "source": "@webority/ui-react",
       "usage": {
         "when": [
           "A filter, detail or edit panel that must not squeeze the page on a phone.",
+          "A menu or filter panel that stays a side panel on a phone (sheet false).",
           "Secondary content the user opens, reads or edits, then dismisses."
         ],
         "whenNot": [
@@ -8299,6 +8244,17 @@
           "type": "node",
           "required": true,
           "description": "The headline of the empty state."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "card",
+            "table"
+          ],
+          "required": false,
+          "description": "The look: card is the card or section empty state; table is the body of a data table, with a larger disc above the title. The table look has no sm scale, so size sm with table warns.",
+          "default": "card"
         }
       ],
       "itemsTakeAction": [],
@@ -8308,17 +8264,14 @@
         "when": [
           "A card or section has loaded but there is genuinely nothing to show.",
           "A first-run experience where the user hasn't created anything yet.",
-          "A filtered or searched view returned no matches and you want to explain why."
+          "A filtered or searched view returned no matches and you want to explain why.",
+          "A data table has loaded with no rows: use variant=\"table\" for the table body."
         ],
         "whenNot": [
           {
             "text": "The data is still loading (first fetch).",
             "instead": "AppSkeleton"
           },
-          {
-            "text": "The empty result lives inside a data table body.",
-            "instead": "AppTableEmptyState"
-          },
           {
             "text": "Something went wrong fetching the data.",
             "instead": "AppAlert"
@@ -8569,7 +8522,7 @@
           },
           {
             "text": "The upload is a round avatar or a company logo.",
-            "instead": "AppLogoPicker"
+            "instead": "AppImagePicker"
           },
           {
             "text": "It is a plain text or number field, not a file.",
@@ -8768,7 +8721,7 @@
           },
           {
             "text": "The upload is a round avatar or a company logo in a header.",
-            "instead": "AppLogoPicker"
+            "instead": "AppImagePicker"
           },
           {
             "text": "It is a plain, non-image file input with no preview.",
@@ -9782,238 +9735,449 @@
       }
     },
     {
-      "name": "AppInfoList",
-      "marker": "AppInfoList",
+      "name": "AppImagePicker",
+      "marker": "AppImagePicker",
       "acceptsChildren": false,
       "props": [
+        {
+          "name": "accept",
+          "type": "string",
+          "required": false,
+          "description": "The file types a person may choose. Defaults to PNG, JPG and WebP for logo; JPG, PNG, WebP and HEIC for avatar. HEIC opens only where the browser can decode it."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "The accessible name of the upload control. Defaults to Upload photo for the overlay and to the action's words for buttons."
+        },
+        {
+          "name": "camera",
+          "type": "boolean",
+          "required": false,
+          "description": "Shows the Take photo button, which opens the front camera. Default false for logo, true for avatar."
+        },
         {
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Extra classes on the list.",
+          "description": "Extra class on the picker.",
           "default": ""
         },
         {
-          "name": "items",
-          "type": "array",
-          "itemFields": [
-            {
-              "name": "href",
-              "type": "url",
-              "required": false,
-              "description": "Makes the row a link. Leave it out for a plain row that is not actionable."
-            },
-            {
-              "name": "icon",
-              "type": "icon",
-              "required": true,
-              "description": "The glyph for the round tile, by name or as a node. Match it to the field."
-            },
-            {
-              "name": "key",
-              "type": "string",
-              "required": false,
-              "description": "A stable key for the row when the rows reorder. Defaults to the label and position."
-            },
-            {
-              "name": "label",
-              "type": "string",
-              "required": true,
-              "description": "What the value is. Be specific."
-            },
-            {
-              "name": "value",
-              "type": "node",
-              "required": true,
-              "description": "The fact itself, pre-formatted. An empty value shows a dash placeholder."
-            }
+          "name": "controls",
+          "type": "enum",
+          "enum": [
+            "buttons",
+            "overlay"
           ],
-          "required": true,
-          "description": "The rows, in order. Each row has an icon, a label and a value."
-        }
-      ],
-      "itemsTakeAction": [
-        "items"
-      ],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "You are stating several facts about one record.",
-          "Some of the values are actionable (email, phone, a document link).",
-          "The panel is read-only, a details view, a drawer, a summary column."
-        ],
-        "whenNot": [
-          {
-            "text": "The values are editable.",
-            "instead": "AppInput and friends"
-          },
-          {
-            "text": "It is one headline number.",
-            "instead": "AppKpiTile"
-          },
-          {
-            "text": "You are listing many records.",
-            "instead": "AppDataTable"
-          },
-          {
-            "text": "The facts are events over time.",
-            "instead": "AppTimeline"
-          }
-        ],
-        "do": [
-          {
-            "note": "An icon that matches the field, a specific label, and an href only where the value is genuinely actionable.",
-            "example": [
-              {
-                "component": "AppInfoList",
-                "props": {
-                  "items": [
-                    {
-                      "icon": "mail",
-                      "label": "Email",
-                      "value": "ravi@acme.example",
-                      "href": "mailto:ravi@acme.example"
-                    }
-                  ]
-                }
-              }
-            ]
-          }
-        ],
-        "dont": [
-          {
-            "note": "A generic icon and “Info” as the label carry no meaning, and a placeholder href makes a dead link the reader will click.",
-            "example": [
-              {
-                "component": "AppInfoList",
-                "props": {
-                  "items": [
-                    {
-                      "icon": "circle",
-                      "label": "Info",
-                      "value": "ravi@acme.example",
-                      "href": "#"
-                    }
-                  ]
-                }
-              }
-            ]
-          }
-        ],
-        "a11y": [
-          "A row with an href renders as a link; a row without one renders as a plain row, so a value that cannot be acted on never looks clickable.",
-          "The icon tile sits beside the label and value text.",
-          "An empty value shows a dash placeholder."
-        ]
-      }
-    },
-    {
-      "name": "AppInfoTip",
-      "marker": "AppInfoTip",
-      "acceptsChildren": true,
-      "props": [
+          "required": false,
+          "description": "overlay is a ring with a hover label and an x to remove. buttons is the photo beside Upload or Change, Take photo and Remove. Default overlay for logo, buttons for avatar."
+        },
         {
-          "name": "className",
+          "name": "crop",
+          "type": "enumOrNumber",
+          "enum": [
+            "free"
+          ],
+          "required": false,
+          "description": "Adds a crop step before upload. A number is the frame's width divided by its height, such as 1 for a round avatar; free lets the person resize the frame. Default none for logo, 1 for avatar."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Blocks every action.",
+          "default": false
+        },
+        {
+          "name": "error",
           "type": "string",
           "required": false,
-          "description": "Extra classes on the wrapper.",
+          "description": "An error from the caller. It wins over a rejection reason."
+        },
+        {
+          "name": "fallback",
+          "type": "node",
+          "required": false,
+          "description": "Shown when there is no image, for example initials."
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Extra class on the field wrapper.",
           "default": ""
         },
         {
-          "name": "label",
+          "name": "hint",
           "type": "string",
           "required": false,
-          "description": "The popover title and the trigger’s accessible name. Unset, the trigger is named “More information”."
+          "description": "Help text under the picker. An error replaces it."
         },
         {
-          "name": "placement",
+          "name": "kind",
           "type": "enum",
           "enum": [
-            "auto",
-            "bottom",
-            "end",
-            "start",
-            "top"
+            "avatar",
+            "logo"
           ],
           "required": false,
-          "description": "Where the popover opens. Auto flips it to stay in view.",
-          "default": "auto"
+          "description": "The preset: logo is an identity ring, avatar is a person's profile photo. Each prop below overrides the preset.",
+          "default": "logo"
         },
         {
-          "name": "width",
+          "name": "label",
+          "type": "node",
+          "required": false,
+          "description": "An optional field label above the picker."
+        },
+        {
+          "name": "layout",
           "type": "enum",
           "enum": [
-            "lg",
-            "md",
-            "sm",
-            "xl"
+            "inline",
+            "profile",
+            "stacked"
           ],
           "required": false,
-          "description": "The widest the card grows before its text wraps, at 220, 276, 360 or 480px. It is a maximum, so a short tip stays as narrow as its text.",
-          "default": "md"
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "A field label uses a term the user may not know and you want an on-demand explanation.",
-          "The help is secondary, useful but not something every user needs to read.",
-          "You want accessible hover/focus behaviour without wiring a tooltip yourself."
-        ],
-        "whenNot": [
-          {
-            "text": "The message must be seen by everyone, persistently, in context.",
-            "instead": "AppAlert"
-          },
-          {
-            "text": "It is a permanent hint under a field the user should always read.",
-            "instead": "the hint prop on AppInput"
-          },
-          {
-            "text": "You would otherwise expose the text via a native title=\"\".",
-            "instead": "AppInfoTip"
-          },
-          {
-            "text": "It is a brief, transient confirmation after an action.",
-            "instead": "toast"
-          }
-        ],
-        "do": [
-          {
-            "note": "Give the tip a descriptive label (a real question) so it’s clear what the “?” explains, and keep the body to a sentence.",
-            "example": [
-              {
-                "component": "span",
-                "props": {
-                  "className": "label d-inline-flex align-items-center gap-1"
-                },
-                "children": [
-                  "Risk tolerance",
-                  {
-                    "component": "AppInfoTip",
-                    "props": {
-                      "label": "What is risk tolerance?"
-                    },
-                    "children": "The maximum acceptable annual loss probability under IEC 62305."
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "note": "Attach the tip to the exact term it explains, inline with the label, so the “?” sits where the question arises.",
-            "example": [
-              {
-                "component": "span",
-                "props": {
-                  "className": "label d-inline-flex align-items-center gap-1"
-                },
-                "children": [
-                  "Collection area",
-                  {
+          "description": "Stacked is the ring with the hint below. Inline puts the ring on the left with a title, subtitle and hint column beside it. Profile stacks the same identity block, centred, beneath the ring. Applies to the overlay controls.",
+          "default": "stacked"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "description": "Shows a spinner and blocks every action while the picked file uploads.",
+          "default": false
+        },
+        {
+          "name": "maxSizeMb",
+          "type": "number",
+          "required": false,
+          "description": "The size limit in megabytes; 0 means no limit. Defaults to 5 for logo and 10 for avatar."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The form field name. The chosen file, or the crop when cropping, is written into the file input, so an uncontrolled form posts it."
+        },
+        {
+          "name": "outputSize",
+          "type": "number",
+          "required": false,
+          "description": "The width and height of the saved square, in pixels, with a crop of 1. Default none for logo, 512 for avatar."
+        },
+        {
+          "name": "outputType",
+          "type": "enum",
+          "enum": [
+            "image/webp",
+            "keep"
+          ],
+          "required": false,
+          "description": "The type of the saved crop: keep the chosen type, or WebP. Default keep for logo, WebP for avatar."
+        },
+        {
+          "name": "overlayIcon",
+          "type": "icon",
+          "required": false,
+          "description": "The icon name for the hover overlay. Overlay controls only.",
+          "default": "image"
+        },
+        {
+          "name": "overlayLabel",
+          "type": "string",
+          "required": false,
+          "description": "The text of the hover overlay. Overlay controls only.",
+          "default": "Update photo"
+        },
+        {
+          "name": "previews",
+          "type": "boolean",
+          "required": false,
+          "description": "Shows the 96 and 48 px live previews in the crop dialog. Default false for logo, true for avatar."
+        },
+        {
+          "name": "removeLabel",
+          "type": "string",
+          "required": false,
+          "description": "The accessible name and tooltip of the remove control. Use Remove logo on a logo picker.",
+          "default": "Remove photo"
+        },
+        {
+          "name": "removeName",
+          "type": "string",
+          "required": false,
+          "description": "A form field that posts true once Remove is pressed."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Marks the field as required.",
+          "default": false
+        },
+        {
+          "name": "rotatable",
+          "type": "boolean",
+          "required": false,
+          "description": "Offers rotation in the crop dialog. Default false for logo, true for avatar."
+        },
+        {
+          "name": "shape",
+          "type": "enum",
+          "enum": [
+            "circle",
+            "rounded",
+            "square"
+          ],
+          "required": false,
+          "description": "The ring or frame shape.",
+          "default": "circle"
+        },
+        {
+          "name": "size",
+          "type": "enumOrNumber",
+          "enum": [
+            "lg",
+            "md",
+            "sm"
+          ],
+          "required": false,
+          "description": "A preset diameter (logo 72, 120, 160 px; avatar 64, 96, 128 px) or an exact number of pixels.",
+          "default": "md"
+        },
+        {
+          "name": "style",
+          "type": "object",
+          "required": false,
+          "description": "Inline style on the picker."
+        },
+        {
+          "name": "subtitle",
+          "type": "node",
+          "required": false,
+          "description": "Muted secondary text beside the ring. Inline and profile layouts only."
+        },
+        {
+          "name": "title",
+          "type": "node",
+          "required": false,
+          "description": "Bold primary text beside the ring. Inline and profile layouts only."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The current image URL. Absent or empty means no image."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "avatar",
+            "initials"
+          ],
+          "required": false,
+          "description": "With no fallback, avatar draws a person icon. The avatar kind uses avatar.",
+          "default": "initials"
+        }
+      ],
+      "itemsTakeAction": [],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "usage": {
+        "when": [
+          "An identity image is being set, such as a workspace logo, a company avatar or a profile picture.",
+          "A person sets their own profile photo, or an admin sets a staff member's photo on their record.",
+          "You want a hover-to-change overlay plus a loading state while the file uploads."
+        ],
+        "whenNot": [
+          {
+            "text": "A single, rectangular image where the preview should be large.",
+            "instead": "AppFilePicker"
+          },
+          {
+            "text": "A file attached to a record where the name or size matters.",
+            "instead": "AppFileAttachment"
+          },
+          {
+            "text": "You only need to display an avatar, not upload one.",
+            "instead": "AppAvatar"
+          }
+        ],
+        "do": [
+          {
+            "note": "Set an overlay label that names the thing, such as \"Change logo\", so the hover affordance says exactly what happens.",
+            "example": [
+              {
+                "component": "AppImagePicker",
+                "props": {
+                  "fallback": "AC",
+                  "overlayLabel": "Change logo"
+                }
+              }
+            ]
+          },
+          {
+            "note": "Say what a good photo is. People crop better when they know.",
+            "example": [
+              {
+                "component": "AppImagePicker",
+                "props": {
+                  "kind": "avatar",
+                  "fallback": "NS",
+                  "label": "Profile photo",
+                  "hint": "Your face, looking at the camera."
+                }
+              }
+            ]
+          }
+        ],
+        "dont": [
+          {
+            "note": "A generic \"Click\" overlay tells the user how to interact but not what the action does.",
+            "example": [
+              {
+                "component": "AppImagePicker",
+                "props": {
+                  "fallback": "AC",
+                  "overlayLabel": "Click"
+                }
+              }
+            ]
+          },
+          {
+            "note": "A tiny, disabled avatar picker with no label. Nobody can tell it sets their photo.",
+            "example": [
+              {
+                "component": "AppImagePicker",
+                "props": {
+                  "kind": "avatar",
+                  "fallback": "NS",
+                  "size": "sm",
+                  "disabled": true
+                }
+              }
+            ]
+          }
+        ],
+        "a11y": [
+          "The upload control is named by ariaLabel, else by Upload photo for the overlay and by the action's words (Choose or Change photo) for buttons. It is disabled and marked busy while loading.",
+          "The remove control is its own button named by removeLabel, and it stays hidden until there is an image to remove.",
+          "The hint or the error is tied to the upload control with aria-describedby, and an error wins over the hint.",
+          "The buttons look sits out of the tab order and the Upload button beside it is the keyboard path to the same action."
+        ]
+      }
+    },
+    {
+      "name": "AppInfoTip",
+      "marker": "AppInfoTip",
+      "acceptsChildren": true,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes on the wrapper.",
+          "default": ""
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "description": "The popover title and the trigger’s accessible name. Unset, the trigger is named “More information”."
+        },
+        {
+          "name": "placement",
+          "type": "enum",
+          "enum": [
+            "auto",
+            "bottom",
+            "end",
+            "start",
+            "top"
+          ],
+          "required": false,
+          "description": "Where the popover opens. Auto flips it to stay in view.",
+          "default": "auto"
+        },
+        {
+          "name": "width",
+          "type": "enum",
+          "enum": [
+            "lg",
+            "md",
+            "sm",
+            "xl"
+          ],
+          "required": false,
+          "description": "The widest the card grows before its text wraps, at 220, 276, 360 or 480px. It is a maximum, so a short tip stays as narrow as its text.",
+          "default": "md"
+        }
+      ],
+      "itemsTakeAction": [],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "usage": {
+        "when": [
+          "A field label uses a term the user may not know and you want an on-demand explanation.",
+          "The help is secondary, useful but not something every user needs to read.",
+          "You want accessible hover/focus behaviour without wiring a tooltip yourself."
+        ],
+        "whenNot": [
+          {
+            "text": "The message must be seen by everyone, persistently, in context.",
+            "instead": "AppAlert"
+          },
+          {
+            "text": "It is a permanent hint under a field the user should always read.",
+            "instead": "the hint prop on AppInput"
+          },
+          {
+            "text": "You would otherwise expose the text via a native title=\"\".",
+            "instead": "AppInfoTip"
+          },
+          {
+            "text": "It is a brief, transient confirmation after an action.",
+            "instead": "toast"
+          }
+        ],
+        "do": [
+          {
+            "note": "Give the tip a descriptive label (a real question) so it’s clear what the “?” explains, and keep the body to a sentence.",
+            "example": [
+              {
+                "component": "span",
+                "props": {
+                  "className": "label d-inline-flex align-items-center gap-1"
+                },
+                "children": [
+                  "Risk tolerance",
+                  {
+                    "component": "AppInfoTip",
+                    "props": {
+                      "label": "What is risk tolerance?"
+                    },
+                    "children": "The maximum acceptable annual loss probability under IEC 62305."
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "note": "Attach the tip to the exact term it explains, inline with the label, so the “?” sits where the question arises.",
+            "example": [
+              {
+                "component": "span",
+                "props": {
+                  "className": "label d-inline-flex align-items-center gap-1"
+                },
+                "children": [
+                  "Collection area",
+                  {
                     "component": "AppInfoTip",
                     "props": {
                       "label": "How is collection area computed?"
@@ -11184,7 +11348,7 @@
           },
           {
             "text": "It is a label/value pair among several facts.",
-            "instead": "AppInfoList"
+            "instead": "AppDescriptions"
           },
           {
             "text": "The number needs a chart to make sense.",
@@ -11374,303 +11538,58 @@
           "default": false
         },
         {
-          "name": "external",
-          "type": "boolean",
-          "required": false,
-          "description": "Opens the link in a new tab, with the matching target and rel.",
-          "default": false
-        },
-        {
-          "name": "href",
-          "type": "url",
-          "required": false,
-          "description": "The destination, or the `to` path when a link component is given. Left out, the anchor has no href."
-        },
-        {
-          "name": "label",
-          "type": "node",
-          "required": false,
-          "description": "The link text as a prop, an alternative to children. When both are given, children wins."
-        },
-        {
-          "name": "leftIcon",
-          "type": "icon",
-          "required": false,
-          "description": "The leading glyph: an icon name or a node."
-        },
-        {
-          "name": "rightIcon",
-          "type": "icon",
-          "required": false,
-          "description": "The trailing glyph: an icon name or a node."
-        },
-        {
-          "name": "size",
-          "type": "enum",
-          "enum": [
-            "lg",
-            "md",
-            "sm"
-          ],
-          "required": false,
-          "description": "The text and icon size.",
-          "default": "md"
-        },
-        {
-          "name": "surface",
-          "type": "enum",
-          "enum": [
-            "dark",
-            "default"
-          ],
-          "required": false,
-          "description": "Set dark when the link sits on a dark panel such as a dark hero or footer; the text turns light.",
-          "default": "default"
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "An inline prose link inside body copy.",
-          "A footer link or a 'read more' / 'learn more' affordance.",
-          "A marketing call-to-action link where the hover should feel deliberate."
-        ],
-        "whenNot": [
-          {
-            "text": "The control performs an action rather than navigating.",
-            "instead": "AppButton"
-          },
-          {
-            "text": "It is a primary navigation item in the app chrome.",
-            "instead": "AppShell"
-          },
-          {
-            "text": "It is a rich link card with an icon tile and supporting text.",
-            "instead": "AppResourceCard"
-          },
-          {
-            "text": "It is the trail to the current page.",
-            "instead": "AppBreadcrumbs"
-          }
-        ],
-        "do": [
-          {
-            "note": "One clear animation and a descriptive label. The link reads as a link and says where it goes.",
-            "example": [
-              {
-                "component": "AppLink",
-                "props": {
-                  "href": "#best",
-                  "rightIcon": "arrow-right"
-                },
-                "children": "See pricing"
-              }
-            ]
-          }
-        ],
-        "dont": [
-          {
-            "note": "“Click here” tells the reader nothing. Name the destination so the link explains where it goes.",
-            "example": [
-              {
-                "component": "AppLink",
-                "props": {
-                  "href": "#best",
-                  "animation": "glow"
-                },
-                "children": "Click here"
-              }
-            ]
-          }
-        ],
-        "a11y": [
-          "A disabled link renders as a plain span with aria-disabled set and no href, so it is neither focusable nor announced as a link.",
-          "An external link opens in a new tab with rel noopener noreferrer.",
-          "Every animation is disabled under prefers-reduced-motion: reduce, where the link degrades to a static underline."
-        ]
-      }
-    },
-    {
-      "name": "AppLogoPicker",
-      "marker": "AppLogoPicker",
-      "acceptsChildren": false,
-      "props": [
-        {
-          "name": "accept",
-          "type": "string",
-          "required": false,
-          "description": "The file types the picker accepts.",
-          "default": "image/png,image/jpeg,image/webp"
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "The accessible name of the upload button.",
-          "default": "Upload photo"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Extra classes on the field wrapper.",
-          "default": ""
-        },
-        {
-          "name": "crop",
-          "type": "enumOrNumber",
-          "enum": [
-            "free"
-          ],
-          "required": false,
-          "description": "Adds a crop step before upload: a dialog lets the person drag and zoom a frame, and the picked file is the cropped one. A number is the frame's width divided by its height, such as 1 for an avatar; free lets them resize the frame."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "A non-busy, non-interactive state.",
-          "default": false
-        },
-        {
-          "name": "error",
-          "type": "string",
-          "required": false,
-          "description": "An inline error from the caller. It wins over an automatic rejection reason."
-        },
-        {
-          "name": "fallback",
-          "type": "node",
-          "required": false,
-          "description": "Shown when there is no image, for example initials."
-        },
-        {
-          "name": "hint",
-          "type": "string",
-          "required": false,
-          "description": "Optional helper text: below the ring when stacked, in the side column when inline or profile."
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "required": false,
-          "description": "An optional field label above the ring."
-        },
-        {
-          "name": "layout",
-          "type": "enum",
-          "enum": [
-            "inline",
-            "profile",
-            "stacked"
-          ],
-          "required": false,
-          "description": "Stacked is the ring with the hint below. Inline is a profile row with the ring on the left and a title, subtitle and hint column beside it. Profile stacks the same identity block, centred, beneath the ring.",
-          "default": "stacked"
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false,
-          "description": "Shows a spinner and blocks interaction while the picked file uploads.",
-          "default": false
-        },
-        {
-          "name": "maxSizeMb",
-          "type": "number",
-          "required": false,
-          "description": "The largest accepted file in megabytes. 0 means no size limit.",
-          "default": 5
-        },
-        {
-          "name": "name",
-          "type": "string",
-          "required": false,
-          "description": "The form field name, so an uncontrolled form can post the file."
-        },
-        {
-          "name": "overlayIcon",
-          "type": "icon",
+          "name": "external",
+          "type": "boolean",
           "required": false,
-          "description": "The icon name for the hover overlay.",
-          "default": "image"
+          "description": "Opens the link in a new tab, with the matching target and rel.",
+          "default": false
         },
         {
-          "name": "overlayLabel",
-          "type": "string",
+          "name": "href",
+          "type": "url",
           "required": false,
-          "description": "The text of the hover overlay.",
-          "default": "Update photo"
+          "description": "The destination, or the `to` path when a link component is given. Left out, the anchor has no href."
         },
         {
-          "name": "removeLabel",
-          "type": "string",
+          "name": "label",
+          "type": "node",
           "required": false,
-          "description": "The accessible name and tooltip of the remove control. Use Remove logo on a logo picker.",
-          "default": "Remove photo"
+          "description": "The link text as a prop, an alternative to children. When both are given, children wins."
         },
         {
-          "name": "required",
-          "type": "boolean",
+          "name": "leftIcon",
+          "type": "icon",
           "required": false,
-          "description": "Marks the field as required.",
-          "default": false
+          "description": "The leading glyph: an icon name or a node."
         },
         {
-          "name": "shape",
-          "type": "enum",
-          "enum": [
-            "circle",
-            "rounded",
-            "square"
-          ],
+          "name": "rightIcon",
+          "type": "icon",
           "required": false,
-          "description": "The ring shape.",
-          "default": "circle"
+          "description": "The trailing glyph: an icon name or a node."
         },
         {
           "name": "size",
-          "type": "enumOrNumber",
+          "type": "enum",
           "enum": [
             "lg",
             "md",
             "sm"
           ],
           "required": false,
-          "description": "A preset (sm 72, md 120, lg 160 pixels) or an exact ring diameter in pixels. The whole control scales from it.",
+          "description": "The text and icon size.",
           "default": "md"
         },
         {
-          "name": "subtitle",
-          "type": "node",
-          "required": false,
-          "description": "Muted secondary text beside the ring. Inline and profile layouts only."
-        },
-        {
-          "name": "title",
-          "type": "node",
-          "required": false,
-          "description": "Bold primary text beside the ring. Inline and profile layouts only."
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "nullable": true,
-          "description": "The current image URL. Null and absent both mean no image."
-        },
-        {
-          "name": "variant",
+          "name": "surface",
           "type": "enum",
           "enum": [
-            "avatar",
-            "initials"
+            "dark",
+            "default"
           ],
           "required": false,
-          "description": "The placeholder style: initials text, or a standard avatar with a muted disc and a person icon when there are no initials.",
-          "default": "initials"
+          "description": "Set dark when the link sits on a dark panel such as a dark hero or footer; the text turns light.",
+          "default": "default"
         }
       ],
       "itemsTakeAction": [],
@@ -11678,84 +11597,62 @@
       "source": "@webority/ui-react",
       "usage": {
         "when": [
-          "An identity image is being set, such as a workspace logo, a company avatar or a profile picture.",
-          "The upload lives in a header or settings panel, shown as a round ring.",
-          "You want a hover-to-change overlay plus a loading state while the file uploads."
+          "An inline prose link inside body copy.",
+          "A footer link or a 'read more' / 'learn more' affordance.",
+          "A marketing call-to-action link where the hover should feel deliberate."
         ],
         "whenNot": [
           {
-            "text": "A single, rectangular image where the preview should be large.",
-            "instead": "AppFilePicker"
+            "text": "The control performs an action rather than navigating.",
+            "instead": "AppButton"
           },
           {
-            "text": "A file attached to a record where the name or size matters.",
-            "instead": "AppFileAttachment"
+            "text": "It is a primary navigation item in the app chrome.",
+            "instead": "AppShell"
           },
           {
-            "text": "You only need to display an avatar, not upload one.",
-            "instead": "AppAvatar"
+            "text": "It is a rich link card with an icon tile and supporting text.",
+            "instead": "AppResourceCard"
           },
           {
-            "text": "You hand-roll a raw <input type=\"file\"> with a circular mask.",
-            "instead": "AppLogoPicker"
+            "text": "It is the trail to the current page.",
+            "instead": "AppBreadcrumbs"
           }
         ],
         "do": [
           {
-            "note": "Set an overlay label that names the thing, such as \"Change logo\", so the hover affordance says exactly what happens.",
-            "example": [
-              {
-                "component": "AppLogoPicker",
-                "props": {
-                  "fallback": "AC",
-                  "overlayLabel": "Change logo"
-                }
-              }
-            ]
-          },
-          {
-            "note": "Give the control a clear accessible name so screen readers announce the upload action, not just \"button\".",
+            "note": "One clear animation and a descriptive label. The link reads as a link and says where it goes.",
             "example": [
               {
-                "component": "AppLogoPicker",
+                "component": "AppLink",
                 "props": {
-                  "fallback": "WS",
-                  "ariaLabel": "Upload workspace logo"
-                }
+                  "href": "#best",
+                  "rightIcon": "arrow-right"
+                },
+                "children": "See pricing"
               }
             ]
           }
         ],
         "dont": [
           {
-            "note": "A generic \"Click\" overlay tells the user how to interact but not what the action does.",
-            "example": [
-              {
-                "component": "AppLogoPicker",
-                "props": {
-                  "fallback": "AC",
-                  "overlayLabel": "Click"
-                }
-              }
-            ]
-          },
-          {
-            "note": "A vague accessible name gives assistive tech nothing specific to announce for the control.",
+            "note": "“Click here” tells the reader nothing. Name the destination so the link explains where it goes.",
             "example": [
               {
-                "component": "AppLogoPicker",
+                "component": "AppLink",
                 "props": {
-                  "fallback": "WS",
-                  "ariaLabel": "Upload photo"
-                }
+                  "href": "#best",
+                  "animation": "glow"
+                },
+                "children": "Click here"
               }
             ]
           }
         ],
         "a11y": [
-          "The upload control is one button named by ariaLabel. It is disabled and marked busy while loading, and the spinner in the overlay is hidden from assistive technology.",
-          "The remove control is its own button named by removeLabel, and it stays hidden until there is an image to remove.",
-          "The hint or the error is tied to the upload button with aria-describedby, and an error wins over the hint. The picture has empty alt text because the button already carries the name."
+          "A disabled link renders as a plain span with aria-disabled set and no href, so it is neither focusable nor announced as a link.",
+          "An external link opens in a new tab with rel noopener noreferrer.",
+          "Every animation is disabled under prefers-reduced-motion: reduce, where the link degrades to a static underline."
         ]
       }
     },
@@ -11932,157 +11829,22 @@
         {
           "name": "required",
           "type": "boolean",
-          "required": false,
-          "description": "Marks the field as required.",
-          "default": false
-        },
-        {
-          "name": "rows",
-          "type": "number",
-          "required": false,
-          "description": "The number of visible lines.",
-          "default": 3
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "description": "The stored value, plain text with each mention written as @[Asha Rao](u-12)."
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "A comment, note or message that should reach named people.",
-          "Any text a server reads to notify someone."
-        ],
-        "whenNot": [
-          {
-            "text": "Choosing people as a field value.",
-            "instead": "AppMultiSelect"
-          },
-          {
-            "text": "Formatted text with headings and lists.",
-            "instead": "AppRichText"
-          }
-        ],
-        "do": [],
-        "dont": [],
-        "a11y": [
-          "The label points at the text box, whose id is the element id plus -text, so the label names it.",
-          "The hint or the error is tied to the box with aria-describedby, and an error also marks the box aria-invalid.",
-          "In the list, Up and Down choose, Enter or Tab mention and Escape closes it. Backspace just after a mention removes it whole."
-        ]
-      }
-    },
-    {
-      "name": "AppMenubar",
-      "marker": "AppMenubar",
-      "acceptsChildren": false,
-      "props": [
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "The accessible name of the bar.",
-          "default": "Application menu"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Extra classes on the bar.",
-          "default": ""
-        },
-        {
-          "name": "menus",
-          "type": "array",
-          "itemFields": [
-            {
-              "name": "disabled",
-              "type": "boolean",
-              "required": false,
-              "description": "Lists the menu but it cannot be opened."
-            },
-            {
-              "name": "items",
-              "type": "array",
-              "itemFields": [
-                {
-                  "name": "danger",
-                  "type": "boolean",
-                  "required": false,
-                  "description": "Styles the row as a destructive action."
-                },
-                {
-                  "name": "disabled",
-                  "type": "boolean",
-                  "required": false,
-                  "description": "Lists the row but the arrow keys skip it and it cannot be chosen."
-                },
-                {
-                  "name": "divider",
-                  "type": "boolean",
-                  "required": false,
-                  "description": "Makes the row a separator."
-                },
-                {
-                  "name": "icon",
-                  "type": "icon",
-                  "required": false,
-                  "description": "A glyph name, or a node, drawn before the label."
-                },
-                {
-                  "name": "items",
-                  "type": "array",
-                  "required": false,
-                  "description": "A submenu. When set, the row opens it and ignores its action and link."
-                },
-                {
-                  "name": "key",
-                  "type": "string",
-                  "required": true,
-                  "description": "The item's key; not shown."
-                },
-                {
-                  "name": "label",
-                  "type": "string",
-                  "required": false,
-                  "description": "The row text. A divider row needs none."
-                },
-                {
-                  "name": "shortcut",
-                  "type": "string",
-                  "required": false,
-                  "description": "The key hint drawn as a key chip at the end of the row. The page binds the key itself."
-                },
-                {
-                  "name": "to",
-                  "type": "string",
-                  "required": false,
-                  "description": "A router path. The row becomes a link; it goes through the link component when one is given."
-                }
-              ],
-              "required": true,
-              "description": "The rows of the menu, top to bottom."
-            },
-            {
-              "name": "key",
-              "type": "string",
-              "required": true,
-              "description": "The item's key; not shown."
-            },
-            {
-              "name": "label",
-              "type": "string",
-              "required": true,
-              "description": "The menu name shown on the bar."
-            }
-          ],
-          "required": true,
-          "description": "The menus, left to right. A row is an action or a link; a row with items opens a submenu; a divider row is a separator."
+          "required": false,
+          "description": "Marks the field as required.",
+          "default": false
+        },
+        {
+          "name": "rows",
+          "type": "number",
+          "required": false,
+          "description": "The number of visible lines.",
+          "default": 3
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The stored value, plain text with each mention written as @[Asha Rao](u-12)."
         }
       ],
       "itemsTakeAction": [],
@@ -12090,29 +11852,25 @@
       "source": "@webority/ui-react",
       "usage": {
         "when": [
-          "A tool or editor has many commands grouped by task, as in a desktop application.",
-          "Users expect keyboard movement across the groups and shortcut hints beside the commands."
+          "A comment, note or message that should reach named people.",
+          "Any text a server reads to notify someone."
         ],
         "whenNot": [
           {
-            "text": "A site's top navigation with links and rich dropdown panels.",
-            "instead": "AppNavigationMenu"
-          },
-          {
-            "text": "One button or icon opens a short list of actions.",
-            "instead": "AppDropdown"
+            "text": "Choosing people as a field value.",
+            "instead": "AppMultiSelect"
           },
           {
-            "text": "The actions belong to a row or card the user right-clicks.",
-            "instead": "AppContextMenu"
+            "text": "Formatted text with headings and lists.",
+            "instead": "AppRichText"
           }
         ],
         "do": [],
         "dont": [],
         "a11y": [
-          "The bar has role menubar, named by ariaLabel. Each menu trigger is a menu item that reports aria-haspopup and aria-expanded, and its panel is a menu named by the menu label.",
-          "The bar is one tab stop. Left and Right move across the menus, Down and Up open one, Right opens a submenu, Escape closes a level and Tab leaves.",
-          "A disabled menu or row is announced as disabled and skipped by the arrow keys. A shortcut is announced as the key it names, but the page must bind it."
+          "The label points at the text box, whose id is the element id plus -text, so the label names it.",
+          "The hint or the error is tied to the box with aria-describedby, and an error also marks the box aria-invalid.",
+          "In the list, Up and Down choose, Enter or Tab mention and Escape closes it. Backspace just after a mention removes it whole."
         ]
       }
     },
@@ -12528,7 +12286,7 @@
           },
           {
             "text": "It's a slide-in navigation or filter panel on mobile.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppDrawer"
           },
           {
             "text": "The content is a full workflow with many steps and forms.",
@@ -13132,7 +12890,7 @@
           },
           {
             "text": "A signed-in app's sidebar of destinations.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppShell"
           },
           {
             "text": "A choice between several values in a form.",
@@ -13248,13 +13006,9 @@
           "Some entries are plain links beside the ones with panels."
         ],
         "whenNot": [
-          {
-            "text": "An application menubar of commands (File, Edit).",
-            "instead": "AppMenubar"
-          },
           {
             "text": "A signed-in app's sidebar of destinations.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppShell"
           },
           {
             "text": "One button opens a short list of actions.",
@@ -13293,6 +13047,12 @@
           "name": "items",
           "type": "array",
           "itemFields": [
+            {
+              "name": "archived",
+              "type": "boolean",
+              "required": false,
+              "description": "Filed away: shown only under the Archived tab."
+            },
             {
               "name": "at",
               "type": "string",
@@ -13352,6 +13112,12 @@
           "required": false,
           "description": "The clock for Today and Yesterday, as ISO text or epoch milliseconds. The current time when omitted."
         },
+        {
+          "name": "tabs",
+          "type": "any",
+          "required": false,
+          "description": "true for the tabs All, Unread and Archived, or the tabs to show in order as `{ key, label? }`, where key is all, unread or archived and label defaults to the key's name. All and Unread leave out archived items; Archived shows only them. Absent: no tab strip."
+        },
         {
           "name": "unread",
           "type": "number",
@@ -13373,7 +13139,8 @@
       "usage": {
         "when": [
           "A portal's list of things that happened to the person: approvals, comments, runs finished.",
-          "Anything that links to a record."
+          "Anything that links to a record.",
+          "A row needs its own controls, such as Accept and Decline buttons: pass renderItem(item), which returns the row's content in place of the icon, title, text and time. The dot, the Unread prefix and the read handling stay."
         ],
         "whenNot": [
           {
@@ -14184,88 +13951,6 @@
         ]
       }
     },
-    {
-      "name": "AppPagination",
-      "marker": "AppPagination",
-      "acceptsChildren": false,
-      "props": [
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "Accessible label for the nav element.",
-          "default": "Pagination"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Extra CSS class to add to the nav wrapper."
-        },
-        {
-          "name": "page",
-          "type": "number",
-          "required": true,
-          "description": "Current page, 1-based. The page button for this page carries aria-current set to page."
-        },
-        {
-          "name": "siblings",
-          "type": "number",
-          "required": false,
-          "description": "Window radius: how many page buttons sit either side of the current page before an ellipsis appears. The default of 1 shows the current page plus or minus one.",
-          "default": 1
-        },
-        {
-          "name": "size",
-          "type": "enum",
-          "enum": [
-            "md",
-            "sm"
-          ],
-          "required": false,
-          "description": "Control size: compact ('sm') or standard ('md').",
-          "default": "md"
-        },
-        {
-          "name": "totalPages",
-          "type": "number",
-          "required": true,
-          "description": "Total page count. The component renders nothing when it is 1 or less."
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "You have a list of items split across multiple pages.",
-          "The user needs to move between pages via numbered buttons.",
-          "You're paginating cards, search results, or any content outside a table."
-        ],
-        "whenNot": [
-          {
-            "text": "The list is short and fits on one screen.",
-            "instead": "no pager"
-          },
-          {
-            "text": "You're paging a table and need a rows-per-page selector.",
-            "instead": "AppTablePagination"
-          },
-          {
-            "text": "The user should keep scrolling instead of paging.",
-            "instead": "infinite scroll"
-          }
-        ],
-        "do": [],
-        "dont": [],
-        "a11y": [
-          "The root is a nav element labelled by the ariaLabel prop, which defaults to Pagination.",
-          "The current page button carries aria-current set to page.",
-          "Each numbered page button is labelled Page N; the Previous and Next buttons are labelled Previous page and Next page.",
-          "The ellipsis is hidden from assistive technology."
-        ]
-      }
-    },
     {
       "name": "AppPhoneNumberInput",
       "marker": "AppPhoneNumberInput",
@@ -15705,7 +15390,7 @@
         "whenNot": [
           {
             "text": "Moving between pages of a list.",
-            "instead": "AppPagination"
+            "instead": "AppTablePagination"
           }
         ],
         "do": [],
@@ -17456,49 +17141,212 @@
           "default": "h1"
         },
         {
-          "name": "className",
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra class names for the root element.",
+          "default": ""
+        },
+        {
+          "name": "eyebrow",
+          "type": "node",
+          "required": false,
+          "description": "A short label above the heading: any node, including a styled container drawn as a pill."
+        },
+        {
+          "name": "eyebrowTone",
+          "type": "enum",
+          "enum": [
+            "danger",
+            "info",
+            "neutral",
+            "primary",
+            "success",
+            "warning"
+          ],
+          "required": false,
+          "description": "Draws the eyebrow as a pill in this tone; unset keeps plain text."
+        },
+        {
+          "name": "media",
+          "type": "node",
+          "required": false,
+          "description": "An `<img>` with `width` and `height`, beside the copy."
+        },
+        {
+          "name": "subtitle",
+          "type": "node",
+          "required": false,
+          "description": "One or two sentences under the heading."
+        },
+        {
+          "name": "title",
+          "type": "node",
+          "required": true,
+          "description": "The page's heading."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "default",
+            "muted"
+          ],
+          "required": false,
+          "description": "The section's background.",
+          "default": "default"
+        }
+      ],
+      "itemsTakeAction": [],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "role": "title",
+      "usage": {
+        "when": [
+          "The first section of a public page.",
+          "A campaign or product page that leads with one promise."
+        ],
+        "whenNot": [
+          {
+            "text": "The title of a portal screen.",
+            "instead": "AppPageHeader"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The title is the page's h1 unless as says otherwise, so keep one h1 per page.",
+          "The section is labelled by its heading, through aria-labelledby, when an id is passed.",
+          "The eyebrow is plain text in a container, not a heading, so it stays out of the heading outline."
+        ]
+      }
+    },
+    {
+      "name": "AppSectionLeadCapture",
+      "marker": "AppSectionLeadCapture",
+      "acceptsChildren": false,
+      "props": [
+        {
+          "name": "align",
+          "type": "enum",
+          "enum": [
+            "center",
+            "start"
+          ],
+          "required": false,
+          "description": "Where the copy and form sit in the panel.",
+          "default": "center"
+        },
+        {
+          "name": "as",
+          "type": "enum",
+          "enum": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6"
+          ],
+          "required": false,
+          "description": "The heading element.",
+          "default": "h2"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra class names for the root element.",
+          "default": ""
+        },
+        {
+          "name": "consent",
+          "type": "node",
+          "required": false,
+          "description": "A line under the button, such as a privacy notice."
+        },
+        {
+          "name": "eyebrow",
+          "type": "node",
+          "required": false,
+          "description": "A short label above the heading."
+        },
+        {
+          "name": "fields",
+          "type": "array",
+          "itemFields": [
+            {
+              "name": "label",
+              "type": "string",
+              "required": false,
+              "description": "The field's label. Defaults to the name's usual label."
+            },
+            {
+              "name": "name",
+              "type": "enum",
+              "enum": [
+                "company",
+                "email",
+                "message",
+                "name",
+                "phone"
+              ],
+              "required": true,
+              "description": "Which field this is; it sets the input type, autocomplete and the usual label."
+            },
+            {
+              "name": "required",
+              "type": "boolean",
+              "required": false,
+              "description": "The field must have a value to submit.",
+              "default": false
+            }
+          ],
+          "required": true,
+          "description": "The fields in order: name, email, phone, company or message, each optionally labelled and required."
+        },
+        {
+          "name": "leadSubmit",
+          "type": "object",
+          "fields": [],
+          "required": false
+        },
+        {
+          "name": "submitLabel",
           "type": "string",
           "required": false,
-          "description": "Extra class names for the root element.",
-          "default": ""
+          "description": "The button's label.",
+          "default": "Send"
         },
         {
-          "name": "eyebrow",
+          "name": "subtitle",
           "type": "node",
           "required": false,
-          "description": "A short label above the heading: any node, including a styled container drawn as a pill."
+          "description": "A sentence under the heading."
         },
         {
-          "name": "eyebrowTone",
-          "type": "enum",
-          "enum": [
-            "danger",
-            "info",
-            "neutral",
-            "primary",
-            "success",
-            "warning"
-          ],
+          "name": "successText",
+          "type": "node",
           "required": false,
-          "description": "Draws the eyebrow as a pill in this tone; unset keeps plain text."
+          "description": "The sentence under the success heading."
         },
         {
-          "name": "media",
+          "name": "successTitle",
           "type": "node",
-          "required": false,
-          "description": "An `<img>` with `width` and `height`, beside the copy."
+          "required": true,
+          "description": "The heading of the block shown after a successful send."
         },
         {
-          "name": "subtitle",
+          "name": "text",
           "type": "node",
           "required": false,
-          "description": "One or two sentences under the heading."
+          "description": "A paragraph above the form."
         },
         {
           "name": "title",
           "type": "node",
           "required": true,
-          "description": "The page's heading."
+          "description": "The section's heading."
         },
         {
           "name": "variant",
@@ -17508,31 +17356,36 @@
             "muted"
           ],
           "required": false,
-          "description": "The section's background.",
+          "description": "The section's background around the panel.",
           "default": "default"
         }
       ],
       "itemsTakeAction": [],
-      "takesAction": [],
+      "takesAction": [
+        "leadSubmit"
+      ],
       "source": "@webority/ui-react",
-      "role": "title",
       "usage": {
         "when": [
-          "The first section of a public page.",
-          "A campaign or product page that leads with one promise."
+          "A marketing page that asks for a lead: a demo, a quote or a callback.",
+          "Up to five short fields, sent by a server action that rejects with a curated message, never a raw exception, because the visitor sees it."
         ],
         "whenNot": [
           {
-            "text": "The title of a portal screen.",
-            "instead": "AppPageHeader"
+            "text": "A form with more than five fields, or with several steps.",
+            "instead": "AppFormSection"
+          },
+          {
+            "text": "A sign-in or account form.",
+            "instead": "AppFormSection"
           }
         ],
         "do": [],
         "dont": [],
         "a11y": [
-          "The title is the page's h1 unless as says otherwise, so keep one h1 per page.",
-          "The section is labelled by its heading, through aria-labelledby, when an id is passed.",
-          "The eyebrow is plain text in a container, not a heading, so it stays out of the heading outline."
+          "Each field has a visible label, and a required field is marked as required to the browser.",
+          "The form is not validated by the browser, so the messages shown are the section's own, next to each field.",
+          "A failed send is announced in an alert above the button, and a sent form is replaced by a success alert."
         ]
       }
     },
@@ -18129,6 +17982,13 @@
           "description": "Show a control that clears the chosen value.",
           "default": false
         },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "required": false,
+          "description": "Inline width, 32px control, 600 weight, menu sized to its options: the toolbar, sort and filter picker. Writes the element's compact attribute.",
+          "default": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -18305,6 +18165,12 @@
           "type": "string",
           "required": false,
           "description": "The selected option's value. Leaving it out clears the control."
+        },
+        {
+          "name": "valuePrefix",
+          "type": "string",
+          "required": false,
+          "description": "Static text inside the control before the value, such as Sort:. Not prefix, which is the bordered affix box."
         }
       ],
       "itemsTakeAction": [],
@@ -18314,7 +18180,8 @@
         "when": [
           "The user picks one value from a known set of roughly 6 or more options.",
           "The options are a fixed list you can render up front, such as statuses, clients or categories.",
-          "You want a compact control that keeps the choices collapsed until opened."
+          "You want a compact control that keeps the choices collapsed until opened.",
+          "compact for toolbars, sort and filter pickers; a labelled form field omits compact."
         ],
         "whenNot": [
           {
@@ -18328,10 +18195,6 @@
           {
             "text": "The list is large or loaded from the server as the user types.",
             "instead": "AppAutocomplete"
-          },
-          {
-            "text": "It is a compact single-purpose picker like page size.",
-            "instead": "AppSelectMini"
           }
         ],
         "do": [
@@ -18500,292 +18363,133 @@
               {
                 "component": "AppSelect",
                 "props": {
-                  "label": "Client",
-                  "value": "",
-                  "options": [
-                    {
-                      "value": "rpg",
-                      "label": "RPG Bhiwadi DC"
-                    },
-                    {
-                      "value": "tata",
-                      "label": "Tata Power Mumbai"
-                    },
-                    {
-                      "value": "adani",
-                      "label": "Adani Green Gujarat"
-                    },
-                    {
-                      "value": "lt",
-                      "label": "L&T Construction"
-                    }
-                  ],
-                  "required": true,
-                  "error": "Required"
-                }
-              }
-            ]
-          }
-        ],
-        "a11y": [
-          "The visible label is the control's accessible name; a select with no visible label takes aria-label or aria-labelledby from the caller.",
-          "An error sets aria-invalid on the control and is linked by aria-describedby, as is the hint when there is no error.",
-          "required and disabled are passed to the control, and required also draws a required mark in the label."
-        ]
-      }
-    },
-    {
-      "name": "AppSelectMini",
-      "marker": "AppSelectMini",
-      "acceptsChildren": false,
-      "props": [
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "Accessible name of the select."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Extra classes on the select, so a caller can position or space it."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Disables the select so its value cannot change."
-        },
-        {
-          "name": "icon",
-          "type": "icon",
-          "required": false,
-          "description": "A leading library icon, such as funnel or sort-down."
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "required": false,
-          "description": "Element id of the select."
-        },
-        {
-          "name": "name",
-          "type": "string",
-          "required": false,
-          "description": "Form field name of the select."
-        },
-        {
-          "name": "options",
-          "type": "array",
-          "itemFields": [
-            {
-              "name": "icon",
-              "type": "icon",
-              "required": false,
-              "description": "A semantic icon name drawn before the label."
-            },
-            {
-              "name": "label",
-              "type": "node",
-              "required": false,
-              "description": "The option's text; a node renders as markup."
-            },
-            {
-              "name": "value",
-              "type": "string",
-              "required": true,
-              "description": "The option's value."
-            }
-          ],
-          "required": false,
-          "description": "The options. Omitted, the select has no options.",
-          "default": []
-        },
-        {
-          "name": "placeholder",
-          "type": "string",
-          "required": false,
-          "description": "Text shown while no value is selected.",
-          "default": "Select..."
-        },
-        {
-          "name": "prefix",
-          "type": "string",
-          "required": false,
-          "description": "Static text before the value, such as Sort:."
-        },
-        {
-          "name": "size",
-          "type": "enum",
-          "enum": [
-            "lg",
-            "sm"
-          ],
-          "required": false,
-          "description": "Compact size around the default 32px picker."
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "description": "The selected option's value. Unset, the control is cleared."
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "A compact, single-purpose picker in a toolbar or table header: page size, a status filter, a sort order.",
-          "The choice sits inline next to other controls and a full labelled field would be too heavy.",
-          "The option set is short and self-explanatory from the values alone."
-        ],
-        "whenNot": [
-          {
-            "text": "It is a form field that needs a label, hint, or validation.",
-            "instead": "AppSelect"
-          },
-          {
-            "text": "The list is long enough to need type-to-find.",
-            "instead": "AppSelect"
-          },
-          {
-            "text": "The user picks several values at once.",
-            "instead": "AppMultiSelect"
-          }
-        ],
-        "do": [
-          {
-            "note": "Option labels that carry their own unit, such as \"25 / page\", read clearly out of context.",
-            "example": [
-              {
-                "component": "AppSelectMini",
-                "props": {
-                  "value": "25",
-                  "ariaLabel": "Rows per page",
-                  "options": [
-                    {
-                      "value": "10",
-                      "label": "10 / page"
-                    },
-                    {
-                      "value": "25",
-                      "label": "25 / page"
-                    },
-                    {
-                      "value": "50",
-                      "label": "50 / page"
-                    }
-                  ]
-                }
-              }
-            ]
-          },
-          {
-            "note": "A short, self-explanatory set is exactly the mini picker's job.",
-            "example": [
-              {
-                "component": "AppSelectMini",
-                "props": {
-                  "value": "all",
-                  "ariaLabel": "Filter status",
-                  "options": [
-                    {
-                      "value": "all",
-                      "label": "All statuses"
-                    },
-                    {
-                      "value": "draft",
-                      "label": "Draft"
-                    },
-                    {
-                      "value": "active",
-                      "label": "Active"
-                    },
-                    {
-                      "value": "done",
-                      "label": "Complete"
-                    }
-                  ]
-                }
-              }
-            ]
-          }
-        ],
-        "dont": [
-          {
-            "note": "Bare numbers in a toolbar don't say what they change.",
-            "example": [
-              {
-                "component": "AppSelectMini",
-                "props": {
-                  "value": "25",
-                  "ariaLabel": "Rows per page",
-                  "options": [
-                    {
-                      "value": "10",
-                      "label": "10"
-                    },
-                    {
-                      "value": "25",
-                      "label": "25"
-                    },
-                    {
-                      "value": "50",
-                      "label": "50"
-                    }
-                  ]
-                }
-              }
-            ]
-          },
-          {
-            "note": "A long list belongs in AppSelect with searchable, not the compact picker.",
-            "example": [
-              {
-                "component": "AppSelectMini",
-                "props": {
-                  "value": "c1",
-                  "ariaLabel": "Category",
+                  "label": "Client",
+                  "value": "",
                   "options": [
                     {
-                      "value": "c1",
-                      "label": "Industrial DC"
-                    },
-                    {
-                      "value": "c2",
-                      "label": "Commercial rooftop"
-                    },
-                    {
-                      "value": "c3",
-                      "label": "Utility substation"
-                    },
-                    {
-                      "value": "c4",
-                      "label": "Telecom tower"
+                      "value": "rpg",
+                      "label": "RPG Bhiwadi DC"
                     },
                     {
-                      "value": "c5",
-                      "label": "Residential complex"
+                      "value": "tata",
+                      "label": "Tata Power Mumbai"
                     },
                     {
-                      "value": "c6",
-                      "label": "Data centre campus"
+                      "value": "adani",
+                      "label": "Adani Green Gujarat"
                     },
                     {
-                      "value": "c7",
-                      "label": "Wind farm"
+                      "value": "lt",
+                      "label": "L&T Construction"
                     }
-                  ]
+                  ],
+                  "required": true,
+                  "error": "Required"
                 }
               }
             ]
           }
         ],
         "a11y": [
-          "The control has no visible label, so ariaLabel is its accessible name; without it a screen reader announces only a bare combobox.",
-          "Disabled sets the disabled attribute on the control, so its value cannot change."
+          "The visible label is the control's accessible name; a select with no visible label takes aria-label or aria-labelledby from the caller.",
+          "An error sets aria-invalid on the control and is linked by aria-describedby, as is the hint when there is no error.",
+          "required and disabled are passed to the control, and required also draws a required mark in the label."
+        ]
+      }
+    },
+    {
+      "name": "AppSeoHead",
+      "marker": null,
+      "acceptsChildren": false,
+      "props": [
+        {
+          "name": "canonicalUrl",
+          "type": "url",
+          "required": true,
+          "description": "The absolute address of the page, used for the canonical link and og:url."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": true,
+          "description": "The meta description shown in search results."
+        },
+        {
+          "name": "image",
+          "type": "url",
+          "required": false,
+          "description": "The absolute address of the social preview image."
+        },
+        {
+          "name": "imageAlt",
+          "type": "string",
+          "required": false,
+          "description": "The text description of the social preview image."
+        },
+        {
+          "name": "jsonLd",
+          "type": "object",
+          "required": false,
+          "description": "Structured data for the page, one object or an array of objects. Written into the page as JSON-LD, as an escaped text child, so it is for client-rendered portals only (React escapes script text under server rendering)."
+        },
+        {
+          "name": "robots",
+          "type": "string",
+          "required": true,
+          "description": "The robots directive the product picks per environment, such as \"index, follow\" or \"noindex, nofollow\"."
+        },
+        {
+          "name": "siteName",
+          "type": "string",
+          "required": true,
+          "description": "The name of the site, for og:site_name."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": true,
+          "description": "The page title, written in full by the product."
+        },
+        {
+          "name": "twitterCard",
+          "type": "enum",
+          "enum": [
+            "summary",
+            "summary_large_image"
+          ],
+          "required": false,
+          "description": "The Twitter card layout.",
+          "default": "summary"
+        },
+        {
+          "name": "type",
+          "type": "enum",
+          "enum": [
+            "article",
+            "website"
+          ],
+          "required": false,
+          "description": "The Open Graph type of the page.",
+          "default": "website"
+        }
+      ],
+      "itemsTakeAction": [],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "usage": {
+        "when": [
+          "A public page needs its title, search description, social preview and structured data in the document head."
+        ],
+        "whenNot": [
+          {
+            "text": "The page is rendered by Razor.",
+            "instead": "<seo-head> from Webority.Seo.AspNetCore"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The tags add no visible content; they describe the page to search engines and social previews."
         ]
       }
     },
@@ -19389,7 +19093,7 @@
           },
           {
             "text": "You need a temporary side panel, not the app's navigation.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppDrawer"
           },
           {
             "text": "The session has not resolved yet.",
@@ -19423,6 +19127,12 @@
           "required": false,
           "description": "CSS selector of the items that J and K move between, inside the scope."
         },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state of the sheet."
+        },
         {
           "name": "search",
           "type": "string",
@@ -19433,6 +19143,12 @@
           "name": "shortcuts",
           "type": "array",
           "itemFields": [
+            {
+              "name": "group",
+              "type": "string",
+              "required": false,
+              "description": "A heading the row sits under; rows sharing one are listed together."
+            },
             {
               "name": "key",
               "type": "string",
@@ -19449,80 +19165,13 @@
           "required": false,
           "description": "The rows of the sheet, in order; the ? row is always last.",
           "default": []
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "A queue or list someone clears every day.",
-          "A screen whose frequent actions have single-key shortcuts."
-        ],
-        "whenNot": [
-          {
-            "text": "Screens used now and then.",
-            "instead": "visible buttons only"
-          },
-          {
-            "text": "Phone-only screens (no keyboard).",
-            "instead": "visible buttons only"
-          }
-        ],
-        "do": [],
-        "dont": [],
-        "a11y": [
-          "A toggle button opens the sheet, which is a dialog; the button reports aria-haspopup, aria-expanded and aria-controls, and carries aria-keyshortcuts for the ? key.",
-          "Keys typed into a field, or held with Ctrl, Cmd or Alt, do nothing, so typing is never taken over.",
-          "Esc or a click outside closes the sheet, and the close button is named."
-        ]
-      }
-    },
-    {
-      "name": "AppShowMore",
-      "marker": "AppShowMore",
-      "acceptsChildren": true,
-      "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Extra classes on the root.",
-          "default": ""
         },
         {
-          "name": "defaultExpanded",
+          "name": "trigger",
           "type": "boolean",
           "required": false,
-          "description": "Start with the whole text showing; a change after mount is ignored.",
-          "default": false
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "required": false,
-          "description": "The root's id; the text body's id is the root id plus -body. Generated when omitted."
-        },
-        {
-          "name": "lessLabel",
-          "type": "string",
-          "required": false,
-          "description": "The toggle's text while expanded.",
-          "default": "Show less"
-        },
-        {
-          "name": "lines",
-          "type": "number",
-          "required": false,
-          "description": "How many lines show while the text is collapsed.",
-          "default": 3
-        },
-        {
-          "name": "moreLabel",
-          "type": "string",
-          "required": false,
-          "description": "The toggle's text while collapsed.",
-          "default": "Show more"
+          "description": "false renders no button; the sheet opens from ?, open, or a data-wui-shortcuts-open element.",
+          "default": true
         }
       ],
       "itemsTakeAction": [],
@@ -19530,237 +19179,98 @@
       "source": "@webority/ui-react",
       "usage": {
         "when": [
-          "A description, note or comment that can run to many lines on a detail page."
+          "A queue or list someone clears every day.",
+          "A screen whose frequent actions have single-key shortcuts."
         ],
         "whenNot": [
           {
-            "text": "Hiding one line of a table cell or title with an ellipsis.",
-            "instead": "a truncated cell"
-          },
-          {
-            "text": "Several sections of content that belong behind headings.",
-            "instead": "AppAccordion"
-          }
-        ],
-        "do": [],
-        "dont": [],
-        "a11y": [
-          "The clamp is visual: the full text stays in the page for screen readers.",
-          "The toggle is a button that reports aria-expanded and points at the text with aria-controls.",
-          "The toggle shows only when the text overflows, and without script the text shows in full."
-        ]
-      }
-    },
-    {
-      "name": "AppSidebarMenu",
-      "marker": "AppSidebarMenu",
-      "acceptsChildren": true,
-      "props": [
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "required": false,
-          "description": "Accessible name of the dialog. Unset, a text title names it."
-        },
-        {
-          "name": "backdrop",
-          "type": "enum",
-          "enum": [
-            "off",
-            "on",
-            "static"
-          ],
-          "required": false,
-          "description": "The dimming backdrop: on shows it and a click outside closes the panel; static shows it and a click outside does not; off shows none.",
-          "default": "on"
-        },
-        {
-          "name": "bodyClassName",
-          "type": "string",
-          "required": false,
-          "description": "Classes on the scrollable body region.",
-          "default": ""
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Extra classes on the panel.",
-          "default": ""
-        },
-        {
-          "name": "closeButton",
-          "type": "boolean",
-          "required": false,
-          "description": "Shows the header close button.",
-          "default": true
-        },
-        {
-          "name": "closeLabel",
-          "type": "string",
-          "required": false,
-          "description": "The close button's accessible name, for other languages.",
-          "default": "Close"
-        },
-        {
-          "name": "footer",
-          "type": "node",
-          "required": false,
-          "description": "A sticky footer for action buttons."
-        },
-        {
-          "name": "header",
-          "type": "node",
-          "required": false,
-          "description": "A custom header that replaces the default header bar entirely."
-        },
-        {
-          "name": "keyboard",
-          "type": "boolean",
-          "required": false,
-          "description": "Escape closes the panel.",
-          "default": true
-        },
-        {
-          "name": "maxWidth",
-          "type": "string",
-          "required": false,
-          "description": "Caps the panel width, such as 600px. Unset, the theme caps it at 92vw."
-        },
+            "text": "Screens used now and then.",
+            "instead": "visible buttons only"
+          },
+          {
+            "text": "Phone-only screens (no keyboard).",
+            "instead": "visible buttons only"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "A toggle button opens the sheet, which is a dialog; the button reports aria-haspopup, aria-expanded and aria-controls, and carries aria-keyshortcuts for the ? key.",
+          "Keys typed into a field, or held with Ctrl, Cmd or Alt, do nothing, so typing is never taken over.",
+          "Esc or a click outside closes the sheet, and the close button is named."
+        ]
+      }
+    },
+    {
+      "name": "AppShowMore",
+      "marker": "AppShowMore",
+      "acceptsChildren": true,
+      "props": [
         {
-          "name": "responsive",
+          "name": "className",
           "type": "string",
           "required": false,
-          "description": "Breakpoint, such as lg, below which the panel acts as an offcanvas and at or above which it renders inline."
+          "description": "Extra classes on the root.",
+          "default": ""
         },
         {
-          "name": "scroll",
+          "name": "defaultExpanded",
           "type": "boolean",
           "required": false,
-          "description": "Allows the page behind the panel to scroll.",
+          "description": "Start with the whole text showing; a change after mount is ignored.",
           "default": false
         },
         {
-          "name": "show",
-          "type": "boolean",
-          "required": true,
-          "description": "Whether the panel is open. The caller owns this state."
-        },
-        {
-          "name": "side",
-          "type": "enum",
-          "enum": [
-            "bottom",
-            "end",
-            "left",
-            "right",
-            "start",
-            "top"
-          ],
+          "name": "id",
+          "type": "string",
           "required": false,
-          "description": "The edge it opens from. left and start open from the start edge, right and end from the end edge.",
-          "default": "right"
+          "description": "The root's id; the text body's id is the root id plus -body. Generated when omitted."
         },
         {
-          "name": "title",
-          "type": "node",
+          "name": "lessLabel",
+          "type": "string",
           "required": false,
-          "description": "Title of the default header bar. A text title also names the dialog, unless ariaLabel is set."
+          "description": "The toggle's text while expanded.",
+          "default": "Show less"
         },
         {
-          "name": "titleIcon",
-          "type": "icon",
+          "name": "lines",
+          "type": "number",
           "required": false,
-          "description": "Library icon beside the title in the default header bar."
+          "description": "How many lines show while the text is collapsed.",
+          "default": 3
         },
         {
-          "name": "width",
+          "name": "moreLabel",
           "type": "string",
           "required": false,
-          "description": "Panel width for a left or right panel, such as 480px. Unset, it is 420px. On a phone a left or right panel opens at the full screen width, and maxWidth still caps it there."
+          "description": "The toggle's text while collapsed.",
+          "default": "Show more"
         }
       ],
       "itemsTakeAction": [],
       "takesAction": [],
       "source": "@webority/ui-react",
-      "role": "navigation",
       "usage": {
         "when": [
-          "A filter or details panel that slides in beside the current content (side=\"right\").",
-          "A navigation drawer, especially the collapsed mobile menu (side=\"left\").",
-          "You want a panel that behaves accessibly below a breakpoint and inline above it (responsive)."
+          "A description, note or comment that can run to many lines on a detail page."
         ],
         "whenNot": [
           {
-            "text": "It's a self-contained task or form in a centred card.",
-            "instead": "AppModal"
-          },
-          {
-            "text": "It's a yes/no confirmation.",
-            "instead": "AppConfirmDialog"
-          },
-          {
-            "text": "It's a small menu of actions behind one trigger.",
-            "instead": "AppDropdown"
-          },
-          {
-            "text": "It's a transient message.",
-            "instead": "a toast"
-          }
-        ],
-        "do": [
-          {
-            "note": "A clear trigger opens a drawer with a title and a footer of actions, controlled by show and onHide.",
-            "example": [
-              {
-                "component": "AppButton",
-                "children": "Open filters"
-              }
-            ]
-          },
-          {
-            "note": "A left-edge drawer for navigation, a right-edge one for filters: the side matches the panel's job.",
-            "example": [
-              {
-                "component": "AppButton",
-                "props": {
-                  "variant": "outline"
-                },
-                "children": "Menu"
-              }
-            ]
-          }
-        ],
-        "dont": [
-          {
-            "note": "A hand-rolled slide panel with no focus trap or Escape handling is inaccessible.",
-            "example": [
-              {
-                "component": "AppButton",
-                "props": {
-                  "variant": "ghost"
-                },
-                "children": "Toggle panel"
-              }
-            ]
+            "text": "Hiding one line of a table cell or title with an ellipsis.",
+            "instead": "a truncated cell"
           },
           {
-            "note": "A drawer is the wrong home for a yes/no confirm; that belongs in AppConfirmDialog.",
-            "example": [
-              {
-                "component": "AppButton",
-                "props": {
-                  "variant": "outline"
-                },
-                "children": "Delete account…"
-              }
-            ]
+            "text": "Several sections of content that belong behind headings.",
+            "instead": "AppAccordion"
           }
         ],
+        "do": [],
+        "dont": [],
         "a11y": [
-          "The panel is a dialog that traps focus and closes on Escape (while keyboard is on), on a click outside (unless the backdrop is static) and with the close button.",
-          "A text title names the dialog, and ariaLabel overrides it.",
-          "The close button is named by closeLabel."
+          "The clamp is visual: the full text stays in the page for screen readers.",
+          "The toggle is a button that reports aria-expanded and points at the text with aria-controls.",
+          "The toggle shows only when the text overflows, and without script the text shows in full."
         ]
       }
     },
@@ -19814,7 +19324,7 @@
           },
           {
             "text": "A table query returned no rows.",
-            "instead": "AppTableEmptyState"
+            "instead": "AppEmptyState variant=\"table\""
           },
           {
             "text": "A short, indeterminate action is running (a button submit).",
@@ -20020,7 +19530,7 @@
           },
           {
             "text": "A table query returned no rows.",
-            "instead": "AppTableEmptyState"
+            "instead": "AppEmptyState variant=\"table\""
           }
         ],
         "do": [
@@ -21067,7 +20577,7 @@
           },
           {
             "text": "The detail is a quick peek from a table.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppDrawer"
           },
           {
             "text": "Each item is edited in a long form.",
@@ -21393,7 +20903,7 @@
       "acceptsChildren": false,
       "props": [
         {
-          "name": "activeStep",
+          "name": "active",
           "type": "number",
           "required": false,
           "description": "The index of the current step. Steps before it are done, the one at it is active, the rest are pending; a step's own status still wins."
@@ -21500,7 +21010,7 @@
                 "pending"
               ],
               "required": false,
-              "description": "The state of the step. A done step shows a tick and an error step an alert; an unset status follows activeStep."
+              "description": "The state of the step. A done step shows a tick and an error step an alert; an unset status follows active."
             }
           ],
           "required": true,
@@ -21790,139 +21300,17 @@
       }
     },
     {
-      "name": "AppTableEmptyState",
-      "marker": "AppTableEmptyState",
+      "name": "AppTablePagination",
+      "marker": "AppTablePagination",
       "acceptsChildren": false,
       "props": [
         {
-          "name": "action",
-          "type": "node",
-          "required": false,
-          "description": "The next step, usually a small AppButton."
-        },
-        {
-          "name": "icon",
-          "type": "icon",
-          "required": false,
-          "description": "An icon name or a custom node shown in a round bubble. Needed unless illustration is set, which replaces it."
-        },
-        {
-          "name": "illustration",
-          "type": "node",
-          "required": false,
-          "description": "A named drawing (no-results, no-data, empty-inbox, no-notifications, no-files, no-access, offline or error) or your own decorative SVG node, drawn unboxed at up to 120 px. It replaces the icon bubble when set."
-        },
-        {
-          "name": "text",
-          "type": "node",
+          "name": "ariaLabel",
+          "type": "string",
           "required": false,
-          "description": "A supporting line of guidance below the title."
+          "description": "The accessible name of the pager.",
+          "default": "Pagination"
         },
-        {
-          "name": "title",
-          "type": "node",
-          "required": true,
-          "description": "The heading: what would appear here."
-        }
-      ],
-      "itemsTakeAction": [],
-      "takesAction": [],
-      "source": "@webority/ui-react",
-      "usage": {
-        "when": [
-          "A data table finished loading and returned zero rows.",
-          "A filtered or searched table has no matches and you want to say so in place.",
-          "The table has a natural first action (add / invite) worth surfacing when it's empty."
-        ],
-        "whenNot": [
-          {
-            "text": "The empty area is a card or section, not a table body.",
-            "instead": "AppEmptyState"
-          },
-          {
-            "text": "The table is still loading its first page.",
-            "instead": "AppSkeletonRows"
-          },
-          {
-            "text": "The rows failed to load because of an error.",
-            "instead": "AppAlert"
-          }
-        ],
-        "do": [
-          {
-            "note": "A filter-empty names the reason and suggests the fix. The user knows what to change.",
-            "example": [
-              {
-                "component": "AppTableEmptyState",
-                "props": {
-                  "icon": "search",
-                  "title": "No matches",
-                  "text": "No assessments match these filters. Try widening the date range."
-                }
-              }
-            ]
-          },
-          {
-            "note": "When the table has an obvious next step, the empty state offers it right there.",
-            "example": [
-              {
-                "component": "AppTableEmptyState",
-                "props": {
-                  "icon": "users",
-                  "title": "No team members",
-                  "text": "Invite colleagues to collaborate.",
-                  "action": {
-                    "component": "AppButton",
-                    "props": {
-                      "size": "sm",
-                      "leftIcon": "plus"
-                    },
-                    "children": "Invite member"
-                  }
-                }
-              }
-            ]
-          }
-        ],
-        "dont": [
-          {
-            "note": "A bare \"No data\" leaves the user unsure whether the table is empty, broken, or mis-filtered.",
-            "example": [
-              {
-                "component": "AppTableEmptyState",
-                "props": {
-                  "icon": "file-text",
-                  "title": "No data"
-                }
-              }
-            ]
-          },
-          {
-            "note": "Padding the text instead of offering the invite action wastes the moment.",
-            "example": [
-              {
-                "component": "AppTableEmptyState",
-                "props": {
-                  "icon": "users",
-                  "title": "No team members",
-                  "text": "There are no team members. There are no team members to show in this list right now."
-                }
-              }
-            ]
-          }
-        ],
-        "a11y": [
-          "A named illustration is hidden from assistive technology (aria-hidden), and so is a custom illustration node, so only the title and text are read.",
-          "The title and text are plain text blocks, read in document order.",
-          "The action is whatever node is passed, so a button there keeps its own keyboard behaviour."
-        ]
-      }
-    },
-    {
-      "name": "AppTablePagination",
-      "marker": "AppTablePagination",
-      "acceptsChildren": false,
-      "props": [
         {
           "name": "className",
           "type": "string",
@@ -21950,8 +21338,8 @@
         {
           "name": "pageSize",
           "type": "number",
-          "required": true,
-          "description": "The rows per page. The page-size menu shows it as selected."
+          "required": false,
+          "description": "The rows per page. The page-size menu shows it as selected; without it, or without onPageSizeChange, no menu shows."
         },
         {
           "name": "pageSizes",
@@ -21966,6 +21354,24 @@
           "description": "Shows the page-size menu. Set it to false for a pager that pages but does not expose the page size.",
           "default": true
         },
+        {
+          "name": "siblings",
+          "type": "number",
+          "required": false,
+          "description": "The pages shown either side of the current page in numbered mode.",
+          "default": 2
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "enum": [
+            "md",
+            "sm"
+          ],
+          "required": false,
+          "description": "sm draws 28px page and arrow buttons with 12px text.",
+          "default": "md"
+        },
         {
           "name": "total",
           "type": "number",
@@ -21977,6 +21383,17 @@
           "type": "number",
           "required": false,
           "description": "The number of pages. It wins over total when both are given."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "footer",
+            "standalone"
+          ],
+          "required": false,
+          "description": "footer sits under a table, right aligned, with a top rule. standalone is centred with no rule, for cards and lists.",
+          "default": "footer"
         }
       ],
       "itemsTakeAction": [],
@@ -23747,7 +23164,7 @@
           },
           {
             "text": "They are label/value facts with no time or step dimension.",
-            "instead": "AppInfoList"
+            "instead": "AppDescriptions"
           },
           {
             "text": "There is nothing to show yet.",
@@ -24532,7 +23949,7 @@
           },
           {
             "text": "Site or app navigation.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppShell"
           }
         ],
         "do": [],
@@ -24699,7 +24116,7 @@
               "name": "date",
               "type": "string",
               "required": true,
-              "description": "The day it shipped, as YYYY-MM-DD. It shows as DD-MMM-YYYY."
+              "description": "The day it shipped, as an ISO date (YYYY-MM-DD) or date-time. It shows as DD-MMM-YYYY."
             },
             {
               "name": "href",
@@ -24742,6 +24159,17 @@
           "description": "The release notes, shown in the order passed.",
           "default": []
         },
+        {
+          "name": "indicator",
+          "type": "enum",
+          "enum": [
+            "count",
+            "dot"
+          ],
+          "required": false,
+          "description": "The unread mark on the trigger: a dot, or the number of unread entries.",
+          "default": "dot"
+        },
         {
           "name": "label",
           "type": "string",
@@ -24749,6 +24177,12 @@
           "description": "The trigger's name and the panel's heading.",
           "default": "What's new"
         },
+        {
+          "name": "readThrough",
+          "type": "string",
+          "required": false,
+          "description": "An ISO date or date-time read on another device or saved on the server. Entries up to the later of it and the stored read state count as read."
+        },
         {
           "name": "storageKey",
           "type": "string",
@@ -27016,6 +26450,7 @@
     "repeate-music",
     "repeate-one",
     "reserve",
+    "robot",
     "rotate-ccw",
     "rotate-cw",
     "rotate-left",