feat(design): dialogs open by purpose and keep their commit row pinned (E28 S3f1)

Modal takes a required initialFocus (field / close / action), a field that
loads late takes the focus while it still rests on the close button, and
ModalFooter portals a dialog's commit row under the scrolling body from any
depth. The header and footer fades follow the body's scroll timeline, and the
viewport's interactive-widget=resizes-content keeps the footer above an
on-screen keyboard.

frontend/src/design-lab/batchB.tsx

@@ -410,17 +410,21 @@ function Fades() {
         <ScrollBody />
       </Frame>
       <Sample label="2 · Tabs over a scrolling panel">
-        <div className={`${SURFACE.panel} relative flex h-44 flex-col overflow-hidden`}>
+        <div
+          className={`${SURFACE.panel} relative flex h-44 flex-col overflow-hidden panel-scroll-scope`}
+        >
           <div className={clsx("relative z-base px-3 pb-2 pt-3", FADE_BELOW_PANEL)}>
             <Tabs />
           </div>
-          <div className="min-h-0 flex-1 overflow-y-auto no-scrollbar">
+          <div className="min-h-0 flex-1 overflow-y-auto no-scrollbar panel-scroller">
             <ScrollBody />
           </div>
         </div>
       </Sample>
       <Sample label="3 · A dialog's header and footer">
-        <div className={`${SURFACE.panel} relative flex h-44 flex-col overflow-hidden`}>
+        <div
+          className={`${SURFACE.panel} relative flex h-44 flex-col overflow-hidden panel-scroll-scope`}
+        >
           <div
             className={clsx(
               "relative z-base flex items-center gap-2 px-3 py-2 text-sm font-semibold",
@@ -429,7 +433,7 @@ function Fades() {
           >
             <Lock className="h-4 w-4 text-accent" /> Edit details
           </div>
-          <div className="min-h-0 flex-1 overflow-y-auto no-scrollbar">
+          <div className="min-h-0 flex-1 overflow-y-auto no-scrollbar panel-scroller">
             <ScrollBody />
           </div>
           <div