@kerfjs/ui 5.0.0-beta.53 → 5.0.0-beta.55

package/README.md

@@ -184,6 +184,7 @@ interchangeable. `ListItem` and `ListActionRow` deliberately expose no raw
 | `ToolbarControlGroup`, `ToolbarActionLink`                          | `@kerfjs/ui/toolbar-control-group`      | `@kerfjs/ui/toolbar-control-group.css` |
 | `DialogSurface`, `PopupSurface`                                     | `@kerfjs/ui/surface-scaffold`           | `@kerfjs/ui/surface-scaffold.css`      |
 | `FloatingToolbar`                                                   | `@kerfjs/ui/floating-toolbar`           | `@kerfjs/ui/floating-toolbar.css`      |
+| `PopupMenu` (register with `@kerfjs/ui/popup-menu/register`)        | `@kerfjs/ui/popup-menu`                 | `@kerfjs/ui/popup-menu.css`            |
 | `ToolbarText`                                                       | `@kerfjs/ui/toolbar-text`               | `@kerfjs/ui/toolbar-text.css`          |
 | `Text`                                                              | `@kerfjs/ui/text`                       | `@kerfjs/ui/text.css`                  |
 | `List`                                                              | `@kerfjs/ui/list`                       | `@kerfjs/ui/list.css`                  |
@@ -203,6 +204,7 @@ interchangeable. `ListItem` and `ListActionRow` deliberately expose no raw
 | `TabScaffold`                                                       | `@kerfjs/ui/tab-scaffold`               | `@kerfjs/ui/tab-scaffold.css`          |
 | `wireTabScaffold`                                                   | `@kerfjs/ui/wire-tab-scaffold`          | —                                      |
 | `Workbench`                                                         | `@kerfjs/ui/workbench`                  | `@kerfjs/ui/workbench.css`             |
+| `wireWorkbench`                                                     | `@kerfjs/ui/wire-workbench`             | —                                      |
 | `CollapsiblePanel`, `CollapsiblePanelToggle`                        | `@kerfjs/ui/collapsible-panel`          | `@kerfjs/ui/collapsible-panel.css`     |
 | `wireSidebar`                                                       | `@kerfjs/ui/wire-sidebar`               | —                                      |
 | Content and navigation composition                                  | —                                       | `@kerfjs/ui/layout.css`                |
@@ -245,7 +247,7 @@ onto another trailing-aligned row under every `responsive` policy, and a
 same way. Wrapping keeps every command visible at its full 44px target without
 moving focus or DOM identity. When a product wants fewer visible commands at
 narrow widths, it chooses them: render a lower-priority command inside an
-app-owned "More" popup menu (a `single` group around a `wa-dropdown`).
+app-owned "More" `PopupMenu` (in a `single` group with `nestedDropdown`).
 
 `DisclosureArrow` defaults to an 18px root-scaled decorative visual. Override
 `--kui-disclosure-arrow-size` at the narrowest useful scope when a consumer
@@ -644,7 +646,7 @@ import "@kerfjs/ui/webawesome.css";
 import "@kerfjs/ui/select/register";
 ```
 
-That boundary keeps Web Awesome and its custom-element side effects out of bundles that use unrelated components. Automated consumer-bundle tests enforce it.
+That boundary keeps Web Awesome and its custom-element side effects out of bundles that use unrelated components. Automated consumer-bundle tests enforce it. `PopupMenu` follows the same rule: import `@kerfjs/ui/popup-menu/register` once to register the dropdown, item, button, and divider elements it renders.
 Use `label` for a visible label or `ariaLabel` for a visually hidden name. A
 nonempty visible label takes precedence when both are supplied. Kerf names the
 actual shadow combobox without adding visible label spacing; this also works

package/ai/application-ui-diagnostic-ids-v1.json

@@ -46,6 +46,7 @@
     "KUI-L015",
     "KUI-L016",
     "KUI-L017",
+    "KUI-L018",
     "KUI-L090",
     "KUI-L101",
     "KUI-L102",

package/ai/component-catalog-v2.json

@@ -329,6 +329,64 @@
         "composition": "generated-permissive-default"
       }
     },
+    {
+      "key": "@kerfjs/ui:document-baseline",
+      "package": "@kerfjs/ui",
+      "id": "document-baseline",
+      "name": "Document baseline",
+      "kind": "composition",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "the one direct mount container",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "application overrides loaded after the baseline",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["foundation"],
+        "geometry": {
+          "margin": "none",
+          "border": "none",
+          "padding": "none",
+          "notes": [
+            "The body margin is removed; .kui-app-root only sets height: 100% and owns no inset."
+          ]
+        }
+      },
+      "accessibility": {
+        "obligations": [
+          "Links keep the semantic link color at zero specificity so application focus and link styles still apply."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-app-root",
+        "publicClasses": ["kui-app-root"],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:layout",
       "package": "@kerfjs/ui",
@@ -887,9 +945,22 @@
       ],
       "wiring": {
         "required": false,
-        "helpers": [],
+        "helpers": ["wireWorkbench"],
         "obligations": [],
-        "stateAttributes": []
+        "stateAttributes": [
+          {
+            "name": "data-handle-inset",
+            "on": "kui-workbench__rail",
+            "helper": "wireWorkbench",
+            "meaning": "Written by the shared resize wiring when the work-area minimum or a parent clamp holds a rail's maximum near its size. It carries no Workbench styling; the Workbench handle stays at the rail's inner edge."
+          },
+          {
+            "name": "data-resizing",
+            "on": "kui-workbench__rail",
+            "helper": "wireWorkbench",
+            "meaning": "Present on a resizable rail or the drawer while a pointer drag resizes it."
+          }
+        ]
       },
       "responsive": { "owner": "not-applicable", "behaviors": [] },
       "layout": {
@@ -906,7 +977,10 @@
       "accessibility": {
         "obligations": [
           "Give the Workbench and each meaningful rail or drawer an accessible label.",
-          "Keep collapse controls outside the disappearing region and move focus when a controlled rerender replaces a collapse control with its restore control."
+          "Keep collapse controls outside the disappearing region and move focus when a controlled rerender replaces a collapse control with its restore control.",
+          "A resizable panel's separator is a focusable role=\"separator\" with its size in aria-valuenow and limits in aria-valuemin/aria-valuemax; arrow keys resize by 16px, Shift+arrow by 64px, and Home/End jump to the limits. It leaves the tab order while its panel is collapsed or not inline.",
+          "Given a panel's collapsed signal, wireWorkbench closes an open overlay panel on Escape or an outside press and, however the panel closed, returns focus stranded inside it to the control that opened it, else to its restore control.",
+          "An overlay panel can cover the toolbar toggle that opened it (a narrow right rail covers an editor toolbar's trailing toggle), so give every panel that may overlay its own close control in its header: a Pane header Toolbar with a single ToolbarControlGroup around the collapsiblePanelToggleIcon(side, false) button."
         ]
       },
       "cssValueProps": [],
@@ -921,6 +995,8 @@
           "kui-workbench__center",
           "kui-workbench__main",
           "kui-workbench__panel-content",
+          "kui-workbench__handle",
+          "kui-workbench__handle-icon",
           "kui-workbench__restore"
         ],
         "publicTokens": [
@@ -930,8 +1006,9 @@
           "--kui-workbench-overlay-z",
           "--kui-workbench-overlay-max-width",
           "--kui-workbench-overlay-max-height",
+          "--kui-workbench-restore-inset",
           "--kui-workbench-restore-z",
-          "--kui-workbench-restore-inset"
+          "--kui-workbench-overlay-dismiss-margin"
         ]
       },
       "diagnostics": [],
@@ -1035,8 +1112,8 @@
           "--kui-collapsible-panel-height",
           "--kui-collapsible-panel-popup-z",
           "--kui-collapsible-panel-overlay-z",
-          "--kui-collapsible-panel-restore-z",
           "--kui-collapsible-panel-restore-inset",
+          "--kui-collapsible-panel-restore-z",
           "--kui-collapsible-panel-backdrop-z"
         ]
       },
@@ -2979,6 +3056,62 @@
         "composition": "README.md#web-awesome-theme"
       }
     },
+    {
+      "key": "@kerfjs/ui:popup-menu",
+      "package": "@kerfjs/ui",
+      "id": "popup-menu",
+      "name": "PopupMenu",
+      "kind": "component",
+      "source": "kerf",
+      "parents": { "mode": "any", "entries": [] },
+      "contexts": ["application-ui"],
+      "zones": [],
+      "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
+      "state": [
+        {
+          "id": "commands and their delegated actions",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "which items are enabled",
+          "owner": "application",
+          "required": false
+        },
+        {
+          "id": "reactions to the menu opening or closing",
+          "owner": "application",
+          "required": false
+        }
+      ],
+      "wiring": {
+        "required": false,
+        "helpers": [],
+        "obligations": [],
+        "stateAttributes": []
+      },
+      "responsive": { "owner": "not-applicable", "behaviors": [] },
+      "layout": {
+        "roles": ["controls"],
+        "geometry": { "margin": "none", "border": "child", "padding": "child" }
+      },
+      "accessibility": {
+        "obligations": [
+          "An icon-only trigger requires label, rendered as visually hidden slotted text because a Web Awesome button takes its accessible name from its content; a trigger with visible text is named by that text. Web Awesome provides menu roles, arrow-key navigation, typeahead, and Escape."
+        ]
+      },
+      "cssValueProps": [],
+      "boundaries": {
+        "rootClass": "kui-popup-menu",
+        "publicClasses": ["kui-popup-menu", "kui-popup-menu__label"],
+        "publicTokens": []
+      },
+      "diagnostics": [],
+      "provenance": {
+        "selection": "ai/component-catalog.json",
+        "composition": "generated-permissive-default"
+      }
+    },
     {
       "key": "@kerfjs/ui:feedback",
       "package": "@kerfjs/ui",

package/ai/component-catalog-v2.schema.json

@@ -137,10 +137,11 @@
         "kind": { "enum": ["component", "composition", "recipe"] },
         "purpose": { "type": "string", "minLength": 1 },
         "publicExports": {
+          "description": "Each export's name and the package.json#exports subpath that serves it. An entry from a private application omits subpath: the application is bundled, never imported by package name, so the name resolves through the entry's source file.",
           "type": "array",
           "items": {
             "type": "object",
-            "required": ["name", "subpath"],
+            "required": ["name"],
             "properties": {
               "name": { "type": "string", "minLength": 1 },
               "subpath": { "type": "string", "pattern": "^\\." }

package/ai/component-catalog.json

@@ -353,6 +353,67 @@
         "recipe": "docs/component-selection.md#foundation-tokens"
       }
     },
+    {
+      "id": "document-baseline",
+      "name": "Document baseline",
+      "category": "Foundation",
+      "kind": "composition",
+      "source": "kerf",
+      "description": "Opt-in document-level defaults: border-box sizing, body margin/font/surface, link color, and the html → body → .kui-app-root full-height chain.",
+      "uses": [],
+      "purpose": "Let an application opt into Kerf UI-owned document defaults and a definite full-height chain for a percentage-height application shell.",
+      "publicExports": [],
+      "useWhen": [
+        "An application wants Kerf UI to own document-level box sizing, body typography, surface, and link color.",
+        "A full-height shell (Workbench, SplitView, NavStack, or TabScaffold) mounts into one direct container: put .kui-app-root on that container."
+      ],
+      "avoidWhen": [
+        "Do not put .kui-app-root on several sibling containers; each requests the full available document height.",
+        "Do not import it where the host page already owns document-level defaults it would override."
+      ],
+      "alternatives": [
+        {
+          "id": "foundation",
+          "relationship": "composes-with",
+          "when": "Import the foundation tokens the baseline reads; the baseline itself adds only global document selectors."
+        }
+      ],
+      "appOwns": [
+        "the one direct mount container",
+        "application overrides loaded after the baseline"
+      ],
+      "variants": [
+        "document-flow page (no .kui-app-root)",
+        "full-height application root"
+      ],
+      "accessibility": [
+        "Links keep the semantic link color at zero specificity so application focus and link styles still apply."
+      ],
+      "geometry": {
+        "margin": "none",
+        "border": "none",
+        "padding": "none",
+        "notes": [
+          "The body margin is removed; .kui-app-root only sets height: 100% and owns no inset."
+        ]
+      },
+      "delivery": {
+        "manualCssImport": "@kerfjs/ui/document.css",
+        "sideEffects": [
+          "css"
+        ]
+      },
+      "wiring": [],
+      "publicClasses": [
+        "kui-app-root"
+      ],
+      "publicTokens": [],
+      "links": {
+        "catalogRoute": "?component=document-baseline",
+        "documentation": "docs/document-baseline.md",
+        "recipe": "docs/document-baseline.md"
+      }
+    },
     {
       "id": "layout",
       "name": "Application layout",
@@ -851,20 +912,30 @@
       "category": "Structure",
       "kind": "component",
       "source": "kerf",
-      "description": "A desktop-class multi-panel workspace with independently collapsible left and right rails and a bottom drawer around one central work area.",
+      "description": "A desktop-class multi-panel workspace with independently collapsible, optionally drag-resizable left and right rails and a bottom drawer around one central work area.",
       "uses": [],
       "purpose": "Arrange a complex tool or editor as a stable central work area with optional peripheral rails and a bottom drawer.",
       "publicExports": [
         "Workbench",
+        "WorkbenchChromePlacement",
+        "WorkbenchCompactOverlay",
+        "WorkbenchMainBottomToolbar",
+        "WorkbenchMainToolbar",
         "WorkbenchPanel",
-        "WorkbenchProps"
+        "WorkbenchPanelResizable",
+        "WorkbenchPanelToggle",
+        "WorkbenchPanelToolbar",
+        "WorkbenchProps",
+        "WorkbenchResponsiveOverlayAt"
       ],
       "useWhen": [
-        "A desktop-class tool needs a central work area plus independently collapsible navigator, inspector, or console regions."
+        "A desktop-class tool needs a central work area plus independently collapsible navigator, inspector, or console regions.",
+        "A desktop-class tool should let people size its peripheral panels by dragging or with the keyboard; opt each panel in with resizable and wire it with wireWorkbench."
       ],
       "avoidWhen": [
         "Do not shrink the full multi-panel shell onto compact devices; present peripheral content through NavStack or overlay drawers instead.",
-        "Do not use Workbench for one standalone collapsible rail or drawer; use CollapsiblePanel."
+        "Do not use Workbench for one standalone collapsible rail or drawer; use CollapsiblePanel.",
+        "Do not offer resizing where rails present as compact overlay drawers or are replaced; set a panel's responsiveOverlayAt, or pass deviceClass so wireWorkbench suspends resizing on compact classes."
       ],
       "alternatives": [
         {
@@ -887,6 +958,10 @@
         "bottom drawer",
         "all panels",
         "independently collapsed panels",
+        "opt-in drag and keyboard resizable panels with min/max limits",
+        "resizable rails that leave the work area a minimum width and shrink in proportion when the Workbench narrows",
+        "rails or a drawer that present as overlays below a narrow or compact Workbench container breakpoint",
+        "transient overlay panels wired with wireWorkbench: collapsed on entering the breakpoint, closed by Escape or an outside press",
         "hidden separator",
         "slide, fade-slide, or instant content",
         "clipped, scrolling, or popup-visible content",
@@ -896,7 +971,10 @@
       ],
       "accessibility": [
         "Give the Workbench and each meaningful rail or drawer an accessible label.",
-        "Keep collapse controls outside the disappearing region and move focus when a controlled rerender replaces a collapse control with its restore control."
+        "Keep collapse controls outside the disappearing region and move focus when a controlled rerender replaces a collapse control with its restore control.",
+        "A resizable panel's separator is a focusable role=\"separator\" with its size in aria-valuenow and limits in aria-valuemin/aria-valuemax; arrow keys resize by 16px, Shift+arrow by 64px, and Home/End jump to the limits. It leaves the tab order while its panel is collapsed or not inline.",
+        "Given a panel's collapsed signal, wireWorkbench closes an open overlay panel on Escape or an outside press and, however the panel closed, returns focus stranded inside it to the control that opened it, else to its restore control.",
+        "An overlay panel can cover the toolbar toggle that opened it (a narrow right rail covers an editor toolbar's trailing toggle), so give every panel that may overlay its own close control in its header: a Pane header Toolbar with a single ToolbarControlGroup around the collapsiblePanelToggleIcon(side, false) button."
       ],
       "geometry": {
         "margin": "none",
@@ -913,7 +991,25 @@
           "manual-css"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireWorkbench",
+          "import": "@kerfjs/ui/wire-workbench",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-handle-inset",
+              "on": "kui-workbench__rail",
+              "meaning": "Written by the shared resize wiring when the work-area minimum or a parent clamp holds a rail's maximum near its size. It carries no Workbench styling; the Workbench handle stays at the rail's inner edge."
+            },
+            {
+              "name": "data-resizing",
+              "on": "kui-workbench__rail",
+              "meaning": "Present on a resizable rail or the drawer while a pointer drag resizes it."
+            }
+          ]
+        }
+      ],
       "publicClasses": [
         "kui-workbench",
         "kui-workbench__rail",
@@ -923,6 +1019,8 @@
         "kui-workbench__center",
         "kui-workbench__main",
         "kui-workbench__panel-content",
+        "kui-workbench__handle",
+        "kui-workbench__handle-icon",
         "kui-workbench__restore"
       ],
       "publicTokens": [
@@ -932,8 +1030,9 @@
         "--kui-workbench-overlay-z",
         "--kui-workbench-overlay-max-width",
         "--kui-workbench-overlay-max-height",
+        "--kui-workbench-restore-inset",
         "--kui-workbench-restore-z",
-        "--kui-workbench-restore-inset"
+        "--kui-workbench-overlay-dismiss-margin"
       ],
       "links": {
         "catalogRoute": "?component=workbench",
@@ -955,10 +1054,14 @@
       "publicExports": [
         "CollapsiblePanelSide",
         "collapsiblePanelToggleIcon",
+        "CollapsiblePanelToolbarToggle",
+        "CollapsiblePanelToolbar",
         "CollapsiblePanelToggleProps",
         "CollapsiblePanelToggle",
         "CollapsiblePanelProps",
-        "CollapsiblePanel"
+        "CollapsiblePanel",
+        "CollapsiblePanelRelocatedProps",
+        "CollapsiblePanelRelocated"
       ],
       "useWhen": [
         "An application needs one collapsible side rail or bottom drawer outside a full Workbench.",
@@ -1057,8 +1160,8 @@
         "--kui-collapsible-panel-height",
         "--kui-collapsible-panel-popup-z",
         "--kui-collapsible-panel-overlay-z",
-        "--kui-collapsible-panel-restore-z",
         "--kui-collapsible-panel-restore-inset",
+        "--kui-collapsible-panel-restore-z",
         "--kui-collapsible-panel-backdrop-z"
       ],
       "links": {
@@ -3241,6 +3344,7 @@
         "tokens",
         "query execution",
         "results",
+        "the revision that rebuilds the DOM-owned editor for a programmatic text replacement",
         "optional override of the collapsible expand/collapse/focus, which wireTokenSearchFields manages by default (adopt an app expanded signal, opt out per behavior, or drive it via the returned handle)"
       ],
       "variants": [
@@ -3492,7 +3596,10 @@
           "canonicalShorthands": [],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
-          "examples": ["color: uiColor(\"success-on-quiet\")", "color: foregroundColorVar(\"--app-choice-color\")"]
+          "examples": [
+            "color: uiColor(\"success-on-quiet\")",
+            "color: foregroundColorVar(\"--app-choice-color\")"
+          ]
         }
       ],
       "useWhen": [
@@ -3583,6 +3690,85 @@
         "recipe": "docs/component-selection.md#web-awesome-overlap-policy"
       }
     },
+    {
+      "id": "popup-menu",
+      "name": "PopupMenu",
+      "category": "Controls",
+      "kind": "component",
+      "source": "kerf",
+      "description": "A trigger button that opens a typed list of commands, built on the Web Awesome dropdown.",
+      "uses": [
+        "wa-dropdown",
+        "wa-dropdown-item",
+        "wa-button",
+        "wa-divider"
+      ],
+      "purpose": "A trigger button that opens a typed list of commands, built on the Web Awesome dropdown.",
+      "publicExports": [
+        "PopupMenu"
+      ],
+      "useWhen": [
+        "Offer a short list of commands behind one trigger, such as a toolbar sort or More menu.",
+        "Group related commands under headings and dividers in one popup."
+      ],
+      "avoidWhen": [
+        "Do not use it to choose a persistent value (use Select) or for navigation rows (use ListItem).",
+        "Do not hand-write wa-dropdown / wa-dropdown-item markup for an action menu; use PopupMenu."
+      ],
+      "alternatives": [
+        {
+          "id": "select",
+          "relationship": "nearest"
+        },
+        {
+          "id": "wa-dropdown",
+          "relationship": "prefer-over"
+        }
+      ],
+      "appOwns": [
+        "commands and their delegated actions",
+        "which items are enabled",
+        "reactions to the menu opening or closing"
+      ],
+      "variants": [
+        "icon trigger",
+        "text trigger",
+        "icon and text trigger",
+        "headings and dividers",
+        "item icons",
+        "disabled items",
+        "placement"
+      ],
+      "accessibility": [
+        "An icon-only trigger requires label, rendered as visually hidden slotted text because a Web Awesome button takes its accessible name from its content; a trigger with visible text is named by that text. Web Awesome provides menu roles, arrow-key navigation, typeahead, and Escape."
+      ],
+      "geometry": {
+        "margin": "none",
+        "border": "child",
+        "padding": "child"
+      },
+      "delivery": {
+        "browserImport": "@kerfjs/ui/popup-menu",
+        "manualCssImport": "@kerfjs/ui/popup-menu.css",
+        "registrationImport": "@kerfjs/ui/popup-menu/register",
+        "themeCssImport": "@kerfjs/ui/webawesome.css",
+        "sideEffects": [
+          "browser-condition-css",
+          "custom-element-registration"
+        ]
+      },
+      "wiring": [],
+      "publicClasses": [
+        "kui-popup-menu",
+        "kui-popup-menu__label"
+      ],
+      "publicTokens": [],
+      "links": {
+        "catalogRoute": "?component=popup-menu",
+        "documentation": "docs/component-selection.md",
+        "recipe": "docs/component-selection.md#web-awesome-overlap-policy"
+      }
+    },
     {
       "id": "feedback",
       "name": "Feedback",
@@ -4235,6 +4421,10 @@
       ],
       "recommendation": "conditional",
       "alternatives": [
+        {
+          "id": "popup-menu",
+          "relationship": "prefer-kerf"
+        },
         {
           "id": "select",
           "relationship": "prefer-kerf"
@@ -4278,6 +4468,10 @@
       ],
       "recommendation": "conditional",
       "alternatives": [
+        {
+          "id": "popup-menu",
+          "relationship": "prefer-kerf"
+        },
         {
           "id": "select",
           "relationship": "prefer-kerf"
@@ -6846,16 +7040,14 @@
       "category": "Recipes",
       "kind": "recipe",
       "source": "kerf",
-      "purpose": "Toolbar, navigation, content, and inspector shell with controlled resizing and explicit pane scroll owners.",
+      "purpose": "App bar above a Workbench with resizable navigation and inspector rails, relocated rail toggles, narrow-container overlays, and explicit pane scroll owners.",
       "uses": [
         "pane",
         "toolbar",
         "toolbar-text",
         "toolbar-control-group",
-        "row",
-        "grid",
-        "resize",
-        "list-header",
+        "workbench",
+        "list",
         "list-item",
         "value-table",
         "lucide-icon",
@@ -6980,7 +7172,7 @@
       "category": "Recipes",
       "kind": "recipe",
       "source": "kerf",
-      "purpose": "Production modal whose labeled Web Awesome header frames a SplitView record list and ValueTable detail, becoming a full-screen drill-down on compact devices.",
+      "purpose": "Production modal laid out as a workbench: a full-height SplitView list sidebar with its own toolbar beside a full-height detail column that carries the primary title, close control, and record actions; a full-screen drill-down on compact devices.",
       "uses": [
         "surface-scaffold",
         "split-view",