@webority/ui-react 0.107.0 → 0.108.0

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.107.0"
+    "version": "0.108.0"
   },
   "components": [
     {
@@ -291,7 +291,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.",
@@ -530,7 +530,7 @@
           },
           {
             "text": "You are showing a company logo.",
-            "instead": "AppLogoPicker"
+            "instead": "AppImagePicker"
           }
         ],
         "do": [
@@ -635,59 +635,6 @@
         ]
       }
     },
-    {
-      "name": "AppAvatarPicker",
-      "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",
       "usage": {
@@ -938,7 +885,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": [
           {
@@ -2185,7 +2133,7 @@
           },
           {
             "text": "It is a list of facts about one thing.",
-            "instead": "AppInfoList"
+            "instead": "AppDescriptions"
           }
         ],
         "do": [
@@ -2225,7 +2173,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",
@@ -2262,7 +2210,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."
         ]
       }
     },
@@ -2285,7 +2236,7 @@
           },
           {
             "text": "You're confirming across a slide-in panel of options.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppDrawer"
           }
         ],
         "do": [
@@ -2361,6 +2312,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": [],
@@ -2545,7 +2499,7 @@
           },
           {
             "text": "The empty list deserves a rich call to action.",
-            "instead": "AppTableEmptyState (as empty)"
+            "instead": "AppEmptyState variant=\"table\" (as empty)"
           }
         ],
         "do": [
@@ -2753,14 +2707,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": [
@@ -2893,6 +2839,7 @@
       "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": [
@@ -3145,17 +3092,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"
@@ -3281,7 +3225,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.",
@@ -3366,7 +3310,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.",
@@ -3786,46 +3730,50 @@
       }
     },
     {
-      "name": "AppInfoList",
+      "name": "AppImagePicker",
       "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."
+          "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": "The values are editable.",
-            "instead": "AppInput and friends"
-          },
-          {
-            "text": "It is one headline number.",
-            "instead": "AppKpiTile"
+            "text": "A single, rectangular image where the preview should be large.",
+            "instead": "AppFilePicker"
           },
           {
-            "text": "You are listing many records.",
-            "instead": "AppDataTable"
+            "text": "A file attached to a record where the name or size matters.",
+            "instead": "AppFileAttachment"
           },
           {
-            "text": "The facts are events over time.",
-            "instead": "AppTimeline"
+            "text": "You only need to display an avatar, not upload one.",
+            "instead": "AppAvatar"
           }
         ],
         "do": [
           {
-            "note": "An icon that matches the field, a specific label, and an href only where the value is genuinely actionable.",
+            "note": "Set an overlay label that names the thing, such as \"Change logo\", so the hover affordance says exactly what happens.",
             "example": [
               {
-                "component": "AppInfoList",
+                "component": "AppImagePicker",
                 "props": {
-                  "items": [
-                    {
-                      "icon": "mail",
-                      "label": "Email",
-                      "value": "ravi@acme.example",
-                      "href": "mailto:ravi@acme.example"
-                    }
-                  ]
+                  "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."
                 }
               }
             ]
@@ -3833,28 +3781,37 @@
         ],
         "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.",
+            "note": "A generic \"Click\" overlay tells the user how to interact but not what the action does.",
             "example": [
               {
-                "component": "AppInfoList",
+                "component": "AppImagePicker",
                 "props": {
-                  "items": [
-                    {
-                      "icon": "circle",
-                      "label": "Info",
-                      "value": "ravi@acme.example",
-                      "href": "#"
-                    }
-                  ]
+                  "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": [
-          "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."
+          "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."
         ]
       }
     },
@@ -4223,7 +4180,7 @@
           },
           {
             "text": "It is a label/value pair among several facts.",
-            "instead": "AppInfoList"
+            "instead": "AppDescriptions"
           },
           {
             "text": "The number needs a chart to make sense.",
@@ -4357,91 +4314,6 @@
         ]
       }
     },
-    {
-      "name": "AppLogoPicker",
-      "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."
-        ],
-        "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"
-          },
-          {
-            "text": "You hand-roll a raw <input type=\"file\"> with a circular mask.",
-            "instead": "AppLogoPicker"
-          }
-        ],
-        "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\".",
-            "example": [
-              {
-                "component": "AppLogoPicker",
-                "props": {
-                  "fallback": "WS",
-                  "ariaLabel": "Upload workspace logo"
-                }
-              }
-            ]
-          }
-        ],
-        "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.",
-            "example": [
-              {
-                "component": "AppLogoPicker",
-                "props": {
-                  "fallback": "WS",
-                  "ariaLabel": "Upload photo"
-                }
-              }
-            ]
-          }
-        ],
-        "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."
-        ]
-      }
-    },
     {
       "name": "AppMarkdown",
       "usage": {
@@ -4497,36 +4369,6 @@
         ]
       }
     },
-    {
-      "name": "AppMenubar",
-      "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."
-        ],
-        "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": "The actions belong to a row or card the user right-clicks.",
-            "instead": "AppContextMenu"
-          }
-        ],
-        "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."
-        ]
-      }
-    },
     {
       "name": "AppMeter",
       "usage": {
@@ -4633,7 +4475,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.",
@@ -4973,7 +4815,7 @@
           },
           {
             "text": "A signed-in app's sidebar of destinations.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppShell"
           },
           {
             "text": "A choice between several values in a form.",
@@ -4996,13 +4838,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.",
@@ -5023,7 +4861,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": [
           {
@@ -5326,38 +5165,6 @@
         ]
       }
     },
-    {
-      "name": "AppPagination",
-      "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",
       "usage": {
@@ -6024,7 +5831,7 @@
         "whenNot": [
           {
             "text": "Moving between pages of a list.",
-            "instead": "AppPagination"
+            "instead": "AppTablePagination"
           }
         ],
         "do": [],
@@ -6763,6 +6570,32 @@
         ]
       }
     },
+    {
+      "name": "AppSectionLeadCapture",
+      "usage": {
+        "when": [
+          "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": "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": [
+          "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."
+        ]
+      }
+    },
     {
       "name": "AppSectionLogos",
       "usage": {
@@ -6921,7 +6754,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": [
           {
@@ -6935,10 +6769,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": [
@@ -7142,158 +6972,21 @@
       }
     },
     {
-      "name": "AppSelectMini",
+      "name": "AppSeoHead",
       "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."
+          "A public page needs its title, search description, social preview and structured data in the document head."
         ],
         "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",
-                  "options": [
-                    {
-                      "value": "c1",
-                      "label": "Industrial DC"
-                    },
-                    {
-                      "value": "c2",
-                      "label": "Commercial rooftop"
-                    },
-                    {
-                      "value": "c3",
-                      "label": "Utility substation"
-                    },
-                    {
-                      "value": "c4",
-                      "label": "Telecom tower"
-                    },
-                    {
-                      "value": "c5",
-                      "label": "Residential complex"
-                    },
-                    {
-                      "value": "c6",
-                      "label": "Data centre campus"
-                    },
-                    {
-                      "value": "c7",
-                      "label": "Wind farm"
-                    }
-                  ]
-                }
-              }
-            ]
+            "text": "The page is rendered by Razor.",
+            "instead": "<seo-head> from Webority.Seo.AspNetCore"
           }
         ],
+        "do": [],
+        "dont": [],
         "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 tags add no visible content; they describe the page to search engines and social previews."
         ]
       }
     },
@@ -7316,7 +7009,7 @@
           },
           {
             "text": "You need a temporary side panel, not the app's navigation.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppDrawer"
           },
           {
             "text": "The session has not resolved yet.",
@@ -7383,88 +7076,6 @@
         ]
       }
     },
-    {
-      "name": "AppSidebarMenu",
-      "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)."
-        ],
-        "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"
-              }
-            ]
-          },
-          {
-            "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…"
-              }
-            ]
-          }
-        ],
-        "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."
-        ]
-      }
-    },
     {
       "name": "AppSkeleton",
       "usage": {
@@ -7480,7 +7091,7 @@
           },
           {
             "text": "A table query returned no rows.",
-            "instead": "AppTableEmptyState"
+            "instead": "AppEmptyState variant=\"table\""
           },
           {
             "text": "A short, indeterminate action is running (a button submit).",
@@ -7637,7 +7248,7 @@
           },
           {
             "text": "A table query returned no rows.",
-            "instead": "AppTableEmptyState"
+            "instead": "AppEmptyState variant=\"table\""
           }
         ],
         "do": [
@@ -7922,7 +7533,7 @@
           },
           {
             "text": "The detail is a quick peek from a table.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppDrawer"
           },
           {
             "text": "Each item is edited in a long form.",
@@ -8378,98 +7989,6 @@
         ]
       }
     },
-    {
-      "name": "AppTableEmptyState",
-      "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",
       "usage": {
@@ -9287,7 +8806,7 @@
           },
           {
             "text": "They are label/value facts with no time or step dimension.",
-            "instead": "AppInfoList"
+            "instead": "AppDescriptions"
           },
           {
             "text": "There is nothing to show yet.",
@@ -9482,7 +9001,7 @@
           },
           {
             "text": "Site or app navigation.",
-            "instead": "AppSidebarMenu"
+            "instead": "AppShell"
           }
         ],
         "do": [],